Mobile/UI/Designs/TouchScreen/workingUI: Difference between revisions
< Mobile | UI | Designs/TouchScreen
Jump to navigation
Jump to search
No edit summary |
|||
Line 26: | Line 26: | ||
Usage scenarios: [[Mobile/User_Experience/scenarios]] | Usage scenarios: [[Mobile/User_Experience/scenarios]] | ||
==Working Mockups== | ==Working Mockups== | ||
'''note:'' these mockups are intended to describe interaction-flows and layout rather than pixel-perfect screens. | |||
=== Basic Usage === | |||
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-04/1.png | ||
Beginning to scroll down the page while the page is loading. The titlebar remains overlaid until page loading is complete. | |||
http://people.mozilla.com/~madhava/files/mobile/2008-06-04/2.png | 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-04/3.png | http://people.mozilla.com/~madhava/files/mobile/2008-06-04/3.png | ||
A user brings up the primary UI (bow and titlebar) by tapping/touching one of the lower corners. Button set and arrangement TBD. | |||
http://people.mozilla.com/~madhava/files/mobile/2008-06-04/4.png | http://people.mozilla.com/~madhava/files/mobile/2008-06-04/4.png | ||
Initial | |||
http://people.mozilla.com/~madhava/files/mobile/2008-06-04/5.png | http://people.mozilla.com/~madhava/files/mobile/2008-06-04/5.png | ||
Line 42: | Line 50: | ||
http://people.mozilla.com/~madhava/files/mobile/2008-06-04/7.png | http://people.mozilla.com/~madhava/files/mobile/2008-06-04/7.png | ||
===Tabs=== | |||
===Bookmarks=== | |||
===Notifications=== | |||
===Add-ons=== | |||
===Actions=== |
Revision as of 14:40, 6 June 2008
UI to-do list
- navigation screen (integration with search)
- bow
- final list and layout of buttons
- site button?
- what kind of bar at the top
- URL/title bar
- permanent bar for system information
- page identity UI
- add-ons UI
- notifications UI
- will encompass
- pop-up blocking
- password manager
- will encompass
- actions UI
- tabs switching (spatial)
- bookmarks page (list or spatial)
- find in page
- context menu (tap and hold)
- Example: on a tel: - regular click to call, context menu includes add to address book
- Example: hold on a link to sms/email/bookmark
Usage Scenarios and task flows
Usage scenarios: Mobile/User_Experience/scenarios
Working Mockups
'note: these mockups are intended to describe interaction-flows and layout rather than pixel-perfect screens.
Basic Usage
On initial load (if, in this case, nytimes.com is the start page):
Beginning to scroll down the page while the page is loading. The titlebar remains overlaid until page loading is complete.
Page load complete. UI is fully out of the way.
A user brings up the primary UI (bow and titlebar) by tapping/touching one of the lower corners. Button set and arrangement TBD.
Initial