From MozillaWiki
Jump to: navigation, search


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


  • 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




Addons Management

Install Process

  • Tracking bug:bug 698599 - Ux Designs for Add-Ons Install Process
  • UX Contact: madhava
  • Overview:

In-content Management UI

  • Tracking bug: bug 696532 - Add-on manager
  • UX Contact: patryk
  • Overview:
  • 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:


Transient Notifications

  • we should use the system-standard toast notifiers

System-level Notifications

  • use the system-standard notifications


  • 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


  • 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
  • Need to guide people into sync set up from a start page, or some part of the first-run experience


Find in Page (p3)

  • Tracking bug: bug 695172 - Find on page
  • UX Contact: madhava
  • Overview:


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