Do you make notification buttons easy to find?

Users miss important updates when notification buttons are hidden, inconsistent, or unclear. A consistent placement, icon, and badge pattern helps users instantly recognize and access alerts.

Group notifications with account actions

Always position the notification button beside the user avatar. In header layouts, place it in the top-right corner. In sidebar layouts, group it with the user/account section. This follows common UI conventions and improves predictability.

❌ Figure: Bad example - Notifications are separated from account actions, making them harder to locate consistently.

✅ Figure: Good example - YouTube's notification button and user avatar are next to each other in the header.

✅ Figure: Good example - Home Assistant's notification button and user avatar are next to each other in the sidebar.

Use a bell icon for notifications

The bell is universally recognized as the icon for notifications.

Avoid envelopes, inboxes, message icons, or text-only labels for general notifications.

❌ Figure: Bad example - Non-standard notification icons.

✅ Figure: Good example - Recognisable bell notification icons.

Show a notification count badge

Display a small badge on the bell icon to show unread notifications:

• Use a red (or brand-colored) circular badge
• Ensure sufficient contrast with surrounding elements
• Position it at the top-right of the bell
• Show a number (e.g. 3, or 99+ for large counts)
• Remove the badge entirely when there are no unread notifications.

Using dot badges without numbers indicates activity, but does not help users prioritize or understand urgency. Showing a number ensures the UI does not rely on color alone to indicate state, improving accessibility.

Clicking the bell should open a notification panel or dropdown, and the badge count should update immediately when notifications are read.

🙂 Figure: OK example - GitHub displays a badge for notifications, but shows a dot instead of a count, which makes urgency unclear.

✅ Figure: Good example - LinkedIn uses a red badge with a count of unread notifications.

Grouping a consistent bell icon with account actions and pairing it with a visible badge makes notifications predictable, discoverable, and actionable.