Message Tray Drawer

A concept for notifications in GNOME 3.

Notification Banners

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/notifications/wires-banners.png

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/notifications/banners-dissect.png

  • When a new notification arrives, a banner is shown at the bottom of the screen. This hides after 2 seconds if the user is active.
  • If no mouse movement or keyboard input is detected, the user is considered idle and the timeout isn’t triggered and the banner stays visible.
    • If no pointer device is present, banners always hide after the 2 second time out.
  • If the pointer is in the location where the banner would normally pop up, the banner only peeks - banners should never appear under the cursor.
  • Banners include the notification title and one line of the body (if the "Show Details in Banners" option is enabled).
  • The image is 32x32px.
  • Actions for banners:
    • Pointer - hovering over the banner highlights the banner and expands it.
    • On touch - tap or drag up expands the banner
    • Super+N keyboard shortcut expands the banner.
  • Only one banner is shown at a time. Notifications that arrive while a banner is being displayed are queued in the background.
  • Queued notifications are played back in sequence.

Expanded Banners

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/notifications/wires-expanded-banners.png

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/notifications/expanded-banners-dissect.png

  • Expanded banners include the notification title, up to three lines of the body, action buttons and a close button.
  • The main area of the notification highlights on hover, to indicate that it can be selected (buttons use the same hover effect).
  • Actions for expanded banners:
    • Click the main area: performs the default action.
    • Clicking outside of the notification or swipe down on touch closes the banner but leaves it in the Message Tray.
    • Action buttons can be clicked while the pointer is resting on the bottom screen edge.
    • Only the core chat app is able to have a text entry in its expanded banners.

Urgent Notifications

  • Urgent notifications are displayed in expanded mode and must be explicitly dismissed to be hidden. They are never shown in banner mode.
  • Banners are queued in the background while an urgent notification is displayed.
  • The Message Tray can be open while an urgent notification is displayed (although this isn't possible with a pointer).

Message Tray

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/notifications/wires-message-tray.png

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/notifications/message-tray-drawer.png

Opening the Tray

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/notifications/message-tray-drawer-activation.png Watch on Youtube

  • When the pointer is hovered over or pushed against the bottom screen edge, the top of the Message Tray peeks up from the bottom of the screen. A counter with the number of notifications in the tray is also displayed.
  • Clicking the banner or counter opens the tray. Super+M keybard shortcut also opens the tray.
  • On touch, dragging up and over the bottom screen edge opens the tray.

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/notifications/activities-overview.png

  • The peeking tray and counter are permanently displayed in the Activities Overview.
  • Regular notification banners are displayed over the peeking tray and counter.

https://raw.githubusercontent.com/gnome-design-team/gnome-mockups/master/notifications/activities-overview-tray-banner.png

  • Hovering over the area around the counter, or against the bottom screen edge, shows the Message Tray banner.
  • Clicking the banner opens the tray as usual.

Tray Content

  • Notifications are listed in time/date order, with most recent at the top.
  • Music is always positioned at the top of the list.
  • Urgent notifications are positioned at the top of the list, below music.
  • Notifications show the icon, title, one line of the body, action buttons and a close button.
  • There is a hard limit of five notifications per application.
  • The bottom of the tray includes buttons for clearing all notifications, opening notification settings, system tray items and for closing the tray.
  • If the number of notifications exceeds the visible area, the list scrolls (the close tray, clear, settings and system tray elements are always visible while scrolling).
  • Esc or Super+M keyboard combination closes the tray.

Design/OS/Notifications/MessageTrayDrawer (last edited 2014-06-13 16:42:02 by AllanDay)