Firefox/Projects/Doorhanger notifications

< Firefox‎ | Projects
Revision as of 18:43, 27 August 2009 by Mnoorenberghe (talk | contribs) (update version)
Draft-template-image.png THIS PAGE IS A WORKING DRAFT Pencil-emoji U270F-gray.png
The page may be difficult to navigate, and some information on its subject might be incomplete and/or evolving rapidly.
If you have any questions or ideas, please add them as a new topic on the discussion page.

The goal is to redesign notifications to address various issues with them and provide a unified action/notification area for them. There will be two phases for the redesign: Intermediary design for Firefox 3.7 followed by relocation to the "Page" button for Firefox 4.0 to go along with the new theme.

Issues with current notification bars

  1. You have to move your gaze all the way to the left side of the bar before you know what it is trying to tell you. There is no way to process the notification with your peripheral vision
  2. The message and the actions are often very far apart if the user has a wide monitor
  3. The range of possible options obfuscates the most common option (varies by notification, some are better than others)
  4. Sometimes the action buttons don't express what they are going to do. For instance "Tell them" or "Ok" instead of "Share Location"
  5. Close is a very small target, and there are usually two way to dismiss that bar (in this case "Don't Share" and close)
  6. You have to choose an option, close the bar, or navigate to a new page. There is no way to "ignore and look the other way". It's not as bad as modal dialog, but for some sites like Gmail, the password manager bar never goes away
  7. After you make a decision, there is no direct way to later change your mind. The action buttons and the close button don't easily support undo.
  8. The notification bars map well to producing a message related to the Web page. But there isn't a good way for the browser itself to address the user
  9. When a notification bar appears it causes the entire content area to shift down
  10. Because these message are in the content area, it is technically possible for Web site to spoof them
  11. Notification bar are kind of a heavy interface. They don't really support follow up messages like "you were just automatically logged in with out user name and password" or "your location was just shared again." These messages are more like a flashing LED than a question that the user has to answer
  12. Notification bars don't currently stack when there are multiple notifications, but appear in sequence one after the other

Design

A new button will provide access to all of the notifications. The notifications will drop down from it. Following the notifications, static actions will follow after a separator.

Each notification will have:

  • large icon on the left
  • question
  • button for affirmative action
  • menu of alternative actions (optional)
  • display mode to determine what to show when the notification is added (see #Initial_Notification_View)

If multiple notifications occur at once, they will overlap stack.

Initial Notification View

How the notification will appear when it is first created depends on the mode:

  • Silent - add the notification to the menu without distracting the user (used mainly for adding undo actions)
  • Icon - Display the icon in a small bubble hanging from the button. Clicking on the icon will display the full menu. The icon bubble will fade out after a few seconds.
  • Full - Display the notification question and actions in a bubble hanging from the toolbar button. Dismissed when an action is taken on the notification or the focus on the notification is lost (ie. clicking onto the content of the webpage).

If multiple notifications of the same type are added, display them at the same time. If the types are not the same, display all of the first type together, followed by the next type, and repeat if necessary (if new notifications come in after the first were dismissed).

Menu View

After a notification is dismissed, it will be available in a menu accessed by clicking on the toolbar button.


Meetings

Notification Uses

Examples taken from existing notification bars and dialogs:

  • Password manager
  • Popup blocker
  • Offline storage
  • Geolocation
  • Firefox updates
  • Extension updates
  • ...

Static Actions

Putting static actions in the doorhanger has been put on hold until after Firefox 3.7

Possible static actions:

  • Default Options
    • Save
    • Print
  • Extension examples
    • Share
    • Tweet
    • Inspect

Bugs

  • bug 398776 - want mechanism for site-specific notification

Sub-tasks

  • Decide where in the UI, the notifications will be displayed from
  • Create dropdown buttons - depends on bug 509642
  • Make panel UI on Windows/Linux like on Mac OS (rounded corners, transparency, & point on top)
  • Change callers to use doorhangers instead of notifications bars

References