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

Mobile/UI/Designs/TouchScreen/workingUI (view source)

Revision as of 20:19, 26 June 2008

1,240 bytes added , 26 June 2008

no edit summary

Madhava

Confirmed users

1,492

edits

@@ Line 44: / Line 44: @@
 On initial load (if, in this case, nytimes.com is the start page):
-http://people.mozilla.com/~madhava/files/mobile/2008-06-04/1.png
+http://people.mozilla.com/~madhava/files/mobile/2008-06-26/basic1.png
-Beginning to scroll down the page while the page is loading.  The titlebar remains overlaid until page loading is complete.
+The user can scroll down the page while it is loading, in which case titlebar remains overlaid until page loading is complete.
-http://people.mozilla.com/~madhava/files/mobile/2008-06-04/2.png
-Page load complete.  UI is fully out of the way.
+http://people.mozilla.com/~madhava/files/mobile/2008-06-26/basic2.png
-http://people.mozilla.com/~madhava/files/mobile/2008-06-04/3.png
+When the page load is complete, if the user is mid-page, the titlebar disappears - all UI but for the permanent system bar is now out of the way.
+http://people.mozilla.com/~madhava/files/mobile/2008-06-26/basic3.png
-A user brings up the primary UI (bow and titlebar) by tapping/touching one of the lower corners.
+If the user scrolls back to the top of the page, though, the titlebar is there, fixed to the top of the page.
+http://people.mozilla.com/~madhava/files/mobile/2008-06-26/basic4.png
-'''Button set and arrangement TBD.'''
-http://people.mozilla.com/~madhava/files/mobile/2008-06-04/4.png
+=== Controls ===
-=== Page Edge control strip ===
+Dragging horizontally beyond the page edge reveals the control strip.
-This is an alternate design to the bow:
+http://people.mozilla.com/~madhava/files/mobile/2008-06-26/controls_progression_final.png
-[[Mobile/UI/Designs/TouchScreen/workingUI/sidecontrols]]
-=== Going to a new page===
+When panning around a webpage by dragging, the user should be able to elastically drag the page past its edge;  this will reveal a bit of what's beyond the edge, but the page should still snap back into place when release.  When enough of the control strip has been revealed, the control strip should snap into place when the page is released -- the exact point at which this should happen will take some iteration.
-The user starts a new navigation task (going somewhere new or searching for something).  He or she is presented with an entry field, and we also put up some awesomebar-sourced suggestions before anything has been entered.
+If the user is at the top of the page, such that the titlebar is still visible, the page slides horizontally under it to reveal the control strip:
-http://people.mozilla.com/~madhava/files/mobile/2008-06-04/5.png
+http://people.mozilla.com/~madhava/files/mobile/2008-06-26/controls1.png
+If the user is further down a page, such that the titlebar is not on the screen, a titlebar should fade into view when a user drags the control strip in.  <a href="http://azarask.in/blog/post/firefox-mobile-concept-video/">Aza's prototype</a> demonstrates a version of this behaviour.
-When the user begins to type, the suggestions update, awesomebar-style, and we also reveal buttons to immediately send the entered text to a search engine.  In this way, the user can do quick lookups (facts, phone numbers, movie times etc.) without having to first navigate to the site in question.
+(Control stip alternates considered:
+[[Mobile/UI/Designs/TouchScreen/workingUI/sidecontrols]])
-http://people.mozilla.com/~madhava/files/mobile/2008-06-04/6.png
-===Tabs===
+=== Navigation to a new page ===
-Spatial work documented here: [[Mobile/UI/Designs/TouchScreen/Spatial]]
+The user starts a new navigation task (going somewhere new or searching for something) by tapping on the "title" area in the titlebar.  He or she is presented with an entry field, and we also put up some awesomebar-sourced suggestions before anything has been entered.
+http://people.mozilla.com/~madhava/files/mobile/2008-06-26/nav1.png
+Also shown are direct search buttons for a set of engines.  In this way, the user can do quick lookups (facts, phone numbers, movie times etc.) without having to first navigate to the site in question.
+When the user begins to type, the suggestions update, awesomebar-style.
+=== Multiple Documents (tabs) ===
+A user switches between tabs by dragging further out past the control strip and then tapping on the relevant one.
+http://people.mozilla.com/~madhava/files/mobile/2008-06-26/tabs1.png
+(possible variants - using the other side of the page?)
 ===Bookmarks===
-Spatial design documented here: [[Mobile/UI/Designs/TouchScreen/Spatial#Bookmarks]]