Mobile/UI/Designs/TouchScreen/workingUI

UI to-do list

fennec requirements document

• navigation screen (integration with search) -- tentatively done
• bow
  • final list and layout of buttons -- in progress
  • site button? -- in progress
• what kind of bar at the top
  • URL/title bar -- tentatively done
  • permanent bar for system information -- for discussion
• page identity UI
• add-ons UI
• notifications UI -- in progress
  • • pop-up blocking
    • password manager
    • page trying to install a file
• actions UI
• Downloads (manager vs. low-touch progress indication)

• tabs switching (spatial) -- in progress
• bookmarks page (list or spatial) -- in progress
• 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

• Preferences

Usage Scenarios and task flows

Usage scenarios: Mobile/User_Experience/scenarios

• please add!

Working Mockups

Note on the mockups

• these mockups are intended to describe interaction-flows and layout rather than pixel-perfect screens. Colors, branding, and icons are all just placeholders.

Basic Usage

On initial load (if, in this case, nytimes.com is the start page):

The user can scroll down the page while it is loading, in which case titlebar remains overlaid until page loading is complete.

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.

If the user scrolls back to the top of the page, though, the titlebar is there, fixed to the top of the page.

Controls

Dragging horizontally beyond the page edge reveals the control strip.

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.

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:

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.

(Control stip alternates considered: Mobile/UI/Designs/TouchScreen/workingUI/sidecontrols)

Navigation to a new page

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.

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.

(possible variants - using the other side of the page?)

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.