Mobile/User Experience/Older

From MozillaWiki
Jump to: navigation, search

We will be posting tools here to help experiment with UX and UI ideas soon. Please check back in a few days.

Design Discussions

UI mock ups

There are three main classes of devices that the user interface needs to take into account:

  • Touch Screen UI
  • Non-touch Screen UI
  • Combined touch UI (i.e W960i)

Touch Screen UI



  • XUL mockup for Proposal 1 (Venky) [1]
  • Enhanced zoom (Aleks Totic) [2]

Non-touch screen UI

This UI assumes the device has a directional pad and two soft keys. The right soft key (VK_F2) is mapped to the main menu. This menu allows for navigation controls (forward/back/refresh), adding a bookmark, and brings up dialogs for the address bar, bookmarks and history.

The directional pad controls a virtual cursor. For long press, the cursor smooth scrolls. After 3 seconds, the screen begins to zoom out gradually to 5x. Once the long press ends, the screen gradually zooms in on the element that the cursor is over.

For short clicks, the interface should use spatial navigation. This is stall a to do.

The Ok/Select key (key code 13) maps to a left click of the virtual cursor. The left soft key maps to a right click of the virtual cursor.

This is very much a work in progress. It can be found here:

To use this with firefox 3, run the following from the commandline

firefox -app <path to where its unzipped>/

Some known bugs and to do's:

  • scrollToElement is buggy and causes "jumpiness"
  • short press/snav part stubbed out

Design and Protoype


Other discussion points

  • The are several issues surounding virtual keyboards, and they are being discussed here: Mobile/SoftwareKeyboard
  • What is the best way to navigate and represent tabs on mobile devices? Does the tab bar take up too much screen real estate? What about non-touch screen devices? to be discussed here: Mobile/Tabs
  • Bug 316466 – zoom lense idea from asa. Marked wontfix in the bug as the idea needs to be more fully flushed out.
  • Mobile/User_Experience/Mobile_Runner Simple desktop-based Tab browser element;