Mobile/UI/Designs/TouchScreen/Proposal3: Difference between revisions
< Mobile | UI | Designs/TouchScreen
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 | 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.
- Tapping the URL textfield will open the URL entry screen (to be defined, but substantially similar to the URL Entry Screen of Proposal 1
Support for Mobile Firefox extensions
UI area for Extensions
Additional toolbars can be stacked atop the standard toolbars to support Mobile Firefox extensions.