I'm working on a particular feature that requires messages to be shown in the context menu when user clicks on it.

Option 1

Display different icons for different events (Upgrades and errors for now).

Normal state

enter image description here

Clicked State

enter image description here

  • User can see the context from the name

  • Different icons are confusing

Option 2

Display a Facebook like notification "Center" styled icon with numbers instead of warning / other icons. Something like this:

enter image description here

  • Same icon and number of notifications
  • You don't get a short explanation of the notification

Which style of context menu would you prefer and why?

Thanks !!


4 Answers 4


There's a third option similar to the one used on this page: the message tray icon that is only activated when it has some content with the corresponding number.


  • The message tray can contain any type of message or alert: not just a type but any
  • It doesn't disappear when there is no any alert, it simply occupies the same place, it's a way of telling the user that it's up to date

No messages:

enter image description here

New messages:

enter image description here

  • 2
    Thank your all for your comments. I'll try this approach and user test it if people can easily recognize the element.
    – V.Pajek
    Commented Jul 30, 2019 at 6:20

One problem with your first example is in deciding which message to summarize.

In your example, there appear to be two messages (one informative: there's an update available; one error/warning: connection issue). By showing an summary of the informative message, you are actively hiding the presence of the warning message (the user might not want to update yet, so won't bother expanding the element). This is especially the case if there's no indication that there are any other messages. If you are going to go this route, you may need to prioritize which message gets shown, and – ideally – indicate that there are other messages to see.

An advantage of the second option is that because it doesn't tell the user anything about one particular message – only the count of messages – they are, perhaps, more inclined to expand the element to see the messages (especially if they see the count increasing).


I think your first option provides more context to the user. Gives a clearer idea of what is happening and I would suggest dropping the icon and instead, go for a coloured label to indicate something. Like Sketch do here...

enter image description here


Option 1

  • Gives more details, but not a quick overview of the amount of things present
  • Is more interesting to the user, since he can quickly assess how interesting this information is for him and decide if it is worth it to click on it at all

Option 2

  • Provides general overview, but without any context
  • Depending on frequency of the notifications, users may not even click on it. That is because many systems just "spam" such notifications for every little detail.

Given these points, the more user friendly option seems to be Option 1, as it provides more value to the user.

The value of Option 2 depends on how important the amount of notifications is and how bad it is if the user misses one of them.

If it is important, maybe a combination is possible to keep the value of both options with minimal increase of visual cluster?

A few mockup ideas in Balsamiq

In the third suggestion, the context might just appear temporarily and then fade, leaving only the (3) badge.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.