Fennec/NativeUI/UserExperience
From MozillaWiki
Contents
Overview
The UI design is under revision, to make it simpler and to make more use of standard Android controls (i.e. hardware/system menu button, back button) and to make sure that more touchevents can be passed directly to web content.
The designs are focused on (optimized for) Ice Cream Sandwich screen layouts and controls (i.e. no permanent menu button, as is new in ICS), but should gracefully degrade/allow for older versions of Android (esp Gingerbread).
Current UX Design
Goals:
- Make use of standard Android controls (back, menu, text selection, carat placement, etc.)
- feel native on Ice Cream Sandwich, while still looking/feeling like Firefox
- so, friendly, personal, and human vs. technical (as in the native browser)
- using Firefox glyphs, some core UI shapes and colours
- reference tablet UI as well as desktop; some phone changes can make their way back to tablet
- whiteboard of how to make it feel like Firefox: http://www.flickr.com/photos/madhava_work/6278536886/in/photostream
- optimize for ICS, but make sense on previous versions of Android
- prioritize core valued functionality: awesomescreen and quick access to tabs; next, sync and add-ons
Primary UI
- Tracking bug: bug 696461 - Ux Designs For Primary UI
- UX Contact: ibarlow
- Overview: http://www.flickr.com/photos/61892693@N03/6305636749/in/photostream
Tabs
- Tracking bug: bug 696462 - Ux Designs for Tab Lists
- UX Contact: ibarlow
- Overview: http://www.flickr.com/photos/61892693@N03/6280970438/in/photostream
- More detailed mocks http://www.flickr.com/photos/61892693@N03/6302522277/in/photostream
- Specs http://cl.ly/0s3l3L1O2l1O2d3S3M06
Menu
- Tracking bug: bug 696832 - Ux Designs for Menu
- UX Contact: ibarlow
- Overview: http://www.flickr.com/photos/61892693@N03/6280463749/in/photostream
- menu order (with discussion): https://etherpad.mozilla.org/menu-order
Awesomescreen
- Tracking bug: bug 696833 - Ux Designs for Awesome Screen
- UX Contact: ibarlow
- Overview: http://www.flickr.com/photos/61892693@N03/6281225584/in/photostream
- More detailed mocks http://www.flickr.com/photos/61892693@N03/6303266013/in/photostream
- Specs http://cl.ly/3Q3D2e3k1a1m2G1O202U
Addons Management
Install Process
- Tracking bug:bug 698599 - Ux Designs for Add-Ons Install Process
- UX Contact: madhava
- Overview:
- Current installation process taskflow (v2): http://www.flickr.com/photos/madhava_work/6310042574/sizes/o/in/photostream/
- older
- v1 of the task flow: http://www.flickr.com/photos/madhava_work/6301614071/sizes/o/in/photostream/
- whiteboard wireframe of UI flow: http://www.flickr.com/photos/madhava_work/6283113477/in/photostream
- how many of those doorhangers (a) can we just remove and (b) should be some other style of notification (transient or system)
In-content Management UI
- Tracking bug: bug 696532 - Add-on manager
- UX Contact: patryk
- Overview:
- two models for the manager: http://www.flickr.com/photos/madhava_work/6301559203/sizes/o/in/photostream/
- hi-fi mockups: http://www.flickr.com/photos/69107769@N03/sets/72157628030736602/detail/
- general principles
- draw on destkop in-content add-ons manager for styling inspriation
- basic list; a box per installed add-on
- no separate categories/tabs for different types of add-ons -- use tags in upper right to identify add-on type
- basic controls for each: Options, Enable/Disable, Uninstall
- the flow around Enable/Disable and Uninstall can be much simpler if we know that they'll all be restartless
Alerts, Dialogs, and Notifications
- Tracking bug: bug 698598- Ux Designs for Alerts, Dialogs, and Notifications
- UX Contact: madhava, patryk
- Overview:
Doorhangers
- whiteboard sketch: http://www.flickr.com/photos/madhava_work/6281507222/in/photostream
- carat (arrow) should point to the menu, not the favicon
- open question - where should the arrow point on pre-ICS? Should we have one at all?
- WIP doorhangers and dialogs: http://www.flickr.com/photos/69107769@N03/sets/72157628022579472/with/6299624109/
Transient Notifications
- we should use the system-standard toast notifiers
System-level Notifications
- use the system-standard notifications
Preferences
- Tracking bug: bug 698593- Ux Designs for Preferences
- UX Contact: madhava
- use a standard Android prefs screen style
- to-do: what is the final list of prefs
- related: bug 695198 - Search engines, given that the default search engine picker will be in prefs
Start Page
Readability
- Tracking bug: bug 705278 - Find a sweet spot for text inflation
- UX Contact: patryk
- Overview:
Design work happening here: Fennec/NativeUI/UserExperience/Readability
Reader Mode
- Tracking bug: bug 696921 - Create a reading mode for the phone browser
- UX Contact: patryk
- Overview:
Design work happening here: Fennec/NativeUI/UserExperience/ReaderMode
Sync Setup
- Tracking bug: bug 698594- ux designs for Sync Setup
- UX Contact: madhava
- Overview:
some notes
- there should be an item in browser prefs called something like "Sync Settings" that takes the user to the more centralized Firefox Sync settings (i.e. through Android centralized prefs)
- Need to establish whether we can just have user/pass sign in as a way of starting, or if we need to do JPAKE
- this had been the plan, and reflects what is in Fx10 on the desktop side: screen flow (warning: big image)
- bugs for this existing flow: https://bugzilla.mozilla.org/showdependencytree.cgi?id=675826
- Need to guide people into sync set up from a start page, or some part of the first-run experience
Miscellaneous
Find in Page (p3)
- Tracking bug: bug 695172 - Find on page
- UX Contact: madhava
- Overview:
Telemetry
- Tracking bug: bug 696076
- UX Contact: madhava
- Overview: https://wiki.mozilla.org/Program_Management/Programs/Telemetry/Improve_Opt-in#Change_opt-in_ui
User-Agent Switcher (p3)
- Tracking bug: bug 697857 - User Agent Switcher
- UX Contact: madhava
- Overview:
Character Encoding
What, if anything, are we doing for this in v1
Obsoleted Older work
Pre-Ice Cream Sandwich design work
- Presentation introducing this work: http://cl.ly/320e1q060a363M3g2z38 (PDF)
- Menu structure (incl. tabs): http://cl.ly/3h331s0o311G3v0P3r00
- Possible two-finger gesture, linked to tabstrip layout: http://cl.ly/3h331s0o311G3v0P3r00