Firefox/Projects/Doorhanger notifications/Design

From MozillaWiki
Jump to: navigation, search
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.


Design

Prototype 1 with temporary artwork

A new button will provide access to all of the notifications. The notifications will drop down from it.

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 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 mode notification
    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.