Mobile/UI/Designs/TouchScreen/Proposal3: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
= About this design =
= About this design =


This design also strives to meet the requirements discussed in [[Mobile/UI/Designs/TouchScreen/Proposal1#Design_Guidelines|Proposal 1]].  Additionally it incorporates several suggestions from that proposal:
This design also strives to meet the requirements discussed in [[Mobile/UI/Designs/TouchScreen/Proposal1#Design_Guidelines|Proposal 1]].  Additionally it incorporates feedback from that proposal:


* Maximize space for web content (Christian)
* Maximize space for web content (Christian)
Line 9: Line 9:
= Main Screen =
= Main Screen =


[[Image:TouchscreenUIProposal3-Main.png|top|right]]
[[Image:TouchscreenUIProposal3-Main.png|Main Screen|frame|top|right]]


Here is a drawing of the proposed main screen.
Here is a drawing of the proposed main screen.
Line 18: Line 18:


* 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.
* 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.




Line 52: Line 56:
|
|
|}
|}
== Activating the toolbars ==
[[Image:TouchscreenUIProposal3-Toolbar.png|Toolbars on the Main Screen|frame|top|right]]
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.
** Tapping the URL textfield will open the URL entry screen (to be defined, but substantially similar to the [[Mobile/UI/Designs/TouchScreen/Proposal1#URL_Entry_Screen|URL Entry Screen of Proposal 1]]
== Support for Mobile Firefox extensions ==
[[Image:TouchscreenUIProposal3-Toolbar ext.png|UI area for Extensions|frame|top|right]]
Additional toolbars can be stacked atop the standard toolbars to support Mobile Firefox extensions.

Revision as of 03:32, 6 February 2008

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.