Mobile/User Experience

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

UI mock ups

There are two main classes of devices that the user interface needs to take into account.

Touch Screen UI

Design Guidelines

To help define an easy-to-use and convenient UI it is useful to identify the things that people do with browsers. Most activities fall under three categories:

• Viewing and reading web pages
• Navigating across web pages
• Interacting with web applications

Viewing	Navigating	Interacting
Zoom In/Out Pan/Scroll Select text (to copy or web-search) Search text on a page Bookmark a page Print a page	Launch the home page Input and launch a URL Click on a hyperlink Perform a web search Stop Reload Go Back Go Forward Choose a page from history Open a bookmark Open a live bookmark Open a new tab Close a new tab Select a different tab	Fill a form input text cut/copy/paste text select a radio button select checkboxes select from a drop-down list Submit a form Reset a form Interact with a web app. Click a button Hover over an element Click-n-drag Enter a keyboard shortcut

Other activities include interacting with the browser application itself:

• Managing bookmarks
• Setting preferences
• Clearing browsing history
• Installing extensions

Design Goals

• 1-2 taps for most frequent activities
• Finger taps -- no stylus required
• Hardware button mapping/unmap(when in backround)
• Familiar (to desktop users) where possible
• Intuitive

What are the most frequent activities? Here's an initial cut from the table above (items in bold are most frequent):

Viewing	Navigating	Interacting
Zoom In/Out Pan/Scroll Select text (to copy or web-search) Search text on a page Bookmark a page Print a page	Launch the home page Input and launch a URL Click on a hyperlink Perform a web search Stop Reload Go Back Go Forward Choose a page from history Open a bookmark Open a live bookmark Open a new tab Close a new tab Select a different tab	Fill a form input text cut/copy/paste text select a radio button select checkboxes select from a drop-down list Submit a form Reset a form Interact with a web app Click a button Hover over an element Click-n-drag Enter a keyboard shortcut

Design and Protoype

Mobile/UI/Designs/TouchScreen

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: http://people.mozilla.org/~blassey/SpBrowser.zip

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

firefox -app <path to where its unzipped>/SpBrowser.app/SpBrowser.app/Contents/Resources/application.ini

Some known bugs and to do's:

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

Design and Protoype

Mobile/UI/Designs/NonTouchScreen

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;