Mobile/UI/Designs/TouchScreen/Proposal3

< Mobile‎ | UI‎ | Designs/TouchScreen
Revision as of 03:32, 6 February 2008 by Venky (talk | contribs)

About this design

This design also strives to meet the requirements discussed in Proposal 1. Additionally it incorporates feedback from that proposal:

  • Maximize space for web content (Christian)
  • Embossed Firefox logo to activate menu toolbar (Christian)
  • Zoom via drag (Aleks Totic)

Main Screen

 
Main Screen

Here is a drawing of the proposed main screen.

  • At the top is a thin title bar.
  • At the bottom right is an "embossed" Firefox logo that allows quick access to the most frequently operations. More on that later.
  • At the bottom left is an "embossed" back button. This allows quick access to the previous page, something that is very useful when navigating multiple links from a home page, e.g. clicking on different links from the main cnn.com page.






Touch operations on this screen are discussed below:

Action Result Comments
Single tap On a link, navigate. Elsewhere, pan page to center on tap location.
Double tap Switch between full page view & zoomed view. If in full page view, double tap will zoom the page to readable size, centered on the tap location.
Touch & drag Pan in the direction of the drag
Touch, hold for 1s and move Zoom in or out, similar to Alex Totic's mockup
Touch, hold for 2s On a link, this can show link information. On text, it can switch to text selection mode (for copy/paste operations).

Activating the toolbars

 
Toolbars on the Main Screen

Tapping the embossed Firefox icon will display the toolbars as shown to the right.

  • The bottom toolbar contains buttons for back, forward, places and tabs.
    • Tapping on the back/forward buttons will navigate back/forward and hide the toolbar
    • Tapping once on the places icon will bookmark the current page. Tapping twice can open the places screen (to be defined).
    • Tapping on the tab button will open the tab screen (to be defined).
    • Tapping on the Firefox logo will close the toolbars.
  • The second toolbar (stacked atop the bottom one) has the URL textfield and the reload button.


Support for Mobile Firefox extensions

 
UI area for Extensions

Additional toolbars can be stacked atop the standard toolbars to support Mobile Firefox extensions.