Mobile/UI/Designs/TouchScreen/Proposal3
< Mobile | UI | Designs/TouchScreen
Jump to navigation
Jump to search
About this design
This design also strives to meet the requirements discussed in Proposal 1. Additionally it incorporates several suggestions 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). |