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

From MozillaWiki
Jump to navigation Jump to search
(New page: TBD)
 
No edit summary
Line 1: Line 1:
TBD
= 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:
 
* Maximize space for web content (Christian)
* Embossed Firefox logo to activate menu toolbar (Christian)
* Zoom via drag (Aleks Totic)
 
= Main Screen =
 
[[Image:TouchscreenUIProposal3-Main.png|top|right]]
 
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:
 
{| cellpadding="4" border="1" style="border-collapse: collapse;"
! style="width:33%" | Action
! style="width:33%" | Result
! style="width:33%" | Comments
|- valign="top" cellpadding="0"
|Single tap
|On a link, navigate.  Elsewhere, pan page to center on tap location.
|
|- valign="top" cellpadding="0"
|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.
|
|- valign="top" cellpadding="0"
|Touch & drag
|Pan in the direction of the drag
|
|- valign="top" cellpadding="0"
|Touch, hold for 1s and move
|Zoom in or out, similar to Alex Totic's mockup
|
|- valign="top" cellpadding="0"
|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).
|
|}

Revision as of 02:45, 6 February 2008

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

TouchscreenUIProposal3-Main.png

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).
Retrieved from "https://wiki.mozilla.org/index.php?title=Mobile/UI/Designs/TouchScreen/Proposal3&oldid=82565"