Mobile/UI/Designs/TouchScreen/Proposal3
< Mobile | UI | Designs/TouchScreen
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
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
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
Additional toolbars can be stacked atop the standard toolbars to support Mobile Firefox extensions.