Posted by & filed under Communication.

Previously, we blogged about the new generation of inline notification, which will be used in context. However, in reality there are cases that users should be notified when they are out of context. For example, when a large file is uploaded to the system successfully, the user should be notified wherever he/she is in the system. In those cases, pop-over notifications  (toasters) should be used. Please check out the conceptual design below and help us refine the design.



Pop-over notifications or toasters are fly in or bubble message which pop onto the screen to notify the user of a system occurrence. The notification should be located at the top-right of the screen and there should be a message list that allows the user to view messages later. The notifications should have a consistent location in each application.


Pop-over notifications should always be transient and they should stay on the screen for at least 8 seconds, so that they won’t block the information behind it for too long and users will still have enough time to read the messages in the notifications. Ideally, the user can configure the notifications and decide what they want to see and how long they want them to stay. In addition, pop-over notifications should remain on the screen when the user is hovering on them.


Generally, there shouldn’t be more than one pop-over notification shown at the same time. If two notifications are triggered at the same time, they should be shown one by one, and each of them should stay on the screen long enough for the user to read.


Conceptual design


  • Icon: Indicate the type of the notification. There are four types of available notifications: info, success, warning and error.
  • Message: Show a short message within the notification and make it clear what just happened or what the user needs to perform next. Do not include any unnecessary text because the user might not have the time to read it. Ideally, the message is no longer than one line.
    • Bold the important information, e.g. name of the object
    • Use the regular font weight for the rest of the message
  • Action (optional): Show the action on the right to allow the user to take an immediate action without having to navigate to a different page. Clicking on the action button should either help the user achieve the goal automatically or open up a modal window on the top of the current page. After the user clicks on the action, the notification will be dismissed right away. Directing the user to a different page is not recommended. Do not include more than one action. Do not use the label Cancel, Dismiss, or Close, use icon instead.
  • Close (optional): Allow the user to dismiss the pop-over notification by clicking on the Close icon. Do not show Close icon and action in the same notification.


What’s not covered in the current design:

  1. A notification with multiple actions.
  2. A notification that has title and details.
  3. An expandable/collapsible mechanism that allow the user to get a little bit more details while looking at the notification.

Please let us know if any of these is needed in the application you are working on and if there is anything else we are missing in this pattern.


Next steps

  1. The visual design will be created and examples in context will be provided.
  2. Animation will be designed and demonstrated.


Feel free tell us what you like and what you think is improvable. Any feedback will be very helpful for us to refine the design in the next iteration. Thank you in advance!

8 Responses to “Pop-over Notifications (Toasters): Where Good Communication Happens”

  1. How do we handle multiple actions for a given notification. E.g. if I get a notification that says “New physical disks found” and there are multiple possible actions one can perform, e.g. (1) replace disk, (2) add to storage cluster, (3) add to storage pool, etc.?

    • Thanks for the comment!

      I think if there are multiple actions for the user to choose from, the user will need more time to consider and take the action. So it might be more appropriate to show the multiple actions in a modal window that is persistent. Maybe in the pop-over notification the action can be called “View Details” and clicking on it will trigger a modal window? Potentially in the modal window can provide more details and help the user make a decision. What do you think about this approach?

  2. Is there a way to get “more info”? The message space is quite small and the user may need more context or information about this item before making a decision about the appropriate action they need to take – especially in cases like Ju notes above where there might be multiple actions or tasks you might take from one of these messages.

  3. Is there a way to close multiple notifications (since they are shown one by one)?
    Is there a way for user to suppress these pop-over notifications and get them in a different mechanism?

    • It is recommended that the users can configure the notifications and decide what they will see and how long they will see them.
      Right now we don’t support closing multiple notifications. Users can only close the notification shown on the screen.


Leave a Reply to Ju Lim

(will not be published)