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

From MozillaWiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 44: Line 44:
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
 
=== Going to a new page===
 
The user initiates a go to new 
http://people.mozilla.com/~madhava/files/mobile/2008-06-04/5.png
http://people.mozilla.com/~madhava/files/mobile/2008-06-04/5.png


http://people.mozilla.com/~madhava/files/mobile/2008-06-04/6.png
http://people.mozilla.com/~madhava/files/mobile/2008-06-04/6.png


http://people.mozilla.com/~madhava/files/mobile/2008-06-04/7.png
 


===Tabs===
===Tabs===
Some details here: [[Mobile/UI/Designs/TouchScreen/Spatial]]
http://people.mozilla.com/~madhava/files/mobile/2008-06-04/7.png


===Bookmarks===
===Bookmarks===


===Notifications===
===Notifications===
concept 1 - notifications attached to the titlebar
It makes sense to have notifications associated (a) with site identity, currently relayed through the title bar, and (b) associated with the other UI element that appears on its own (also the titlebar) and can linger, superimposed, while the user scrolls along the page.  Also, a number of these notifications comes up at time of initial page load (pop-ups blocked, sites trying to install software, etc.), which is when the title bar is on the screen.
http://people.mozilla.com/~madhava/files/mobile/2008-06-04/notification_concept1.png


===Add-ons===
===Add-ons===


===Actions===
===Actions===

Revision as of 16:04, 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
  • 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): 1.png

Beginning to scroll down the page while the page is loading. The titlebar remains overlaid until page loading is complete. 2.png

Page load complete. UI is fully out of the way. 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. 4.png


Going to a new page

The user initiates a go to new 5.png

6.png


Tabs

Some details here: Mobile/UI/Designs/TouchScreen/Spatial

7.png

Bookmarks

Notifications

concept 1 - notifications attached to the titlebar

It makes sense to have notifications associated (a) with site identity, currently relayed through the title bar, and (b) associated with the other UI element that appears on its own (also the titlebar) and can linger, superimposed, while the user scrolls along the page. Also, a number of these notifications comes up at time of initial page load (pop-ups blocked, sites trying to install software, etc.), which is when the title bar is on the screen.

notification_concept1.png

Add-ons

Actions

Retrieved from "https://wiki.allizom.org/index.php?title=Mobile/UI/Designs/TouchScreen/workingUI&oldid=95788"