Usability of Notifications

Many software developers fail to understand the principles of designing notifications the right way.

It sounds like a simple feature, but when you look at it from the end–user’s perspective, there are some important things that need good execution.


Let’s start with defining what a notification — in the sense of a software product — is.

Notification in a software product is a piece of information (audio, visual or both) that tells the user about an occurence of an event he otherwise wouldn’t be aware of.

How notifications work in popular products? Here are some examples.

Examples of badly designed notifications

Reminders app on the iPhone is great at the concept level. However, the execution leaves much to be desired.

iPhone Reminders

Apple failed to seamlessly notify you about your tasks when you’re using multiple devices. If you’re using a Macbook with iPhone and iPad on the side, the notification will pop–up within a short period of time on all these devices. As a result, you will hear a single notification three times in a row.

Furthermore, if you notice a reminder on your Macbook and press the “Close” button, the reminder will not be marked as “Completed”.

Reminder App notification

You still need to open the Reminders app and put a check next to the completed item. That’s when you realise the Reminders app is not designed to just remind you about some events. It’s actually a more advanced to–do list.

Reminders notification

Pingdom service notifies you about their beta features in “Beta labs” menu. The problem is, the notification persists even if you’ve already read the message. As a result, I have seen this notification for 6 months now!

Pingdom notifications

Examples of well–designed notifications

iPhone’s Messages app is a classic example of well–made notifications in a software product.

Messages app notifications are well designed

The red badge has a strong contrast among colorful icons. The badge stays in this state until we read the message, and disappears immediately once we read it.

Facebook did a good work with notifications, too.

Facebook notifications serve their purpose Facebook notifications on a mobile device

They follow a common visual pattern in both web and mobile versions of the product. Notifications disappear only when you read the message the notification refers to.

Principles of usable notifications

Let’s consider three basic features of usable notifications.

  1. Display a notification if the user hasn’t read the message. Stop displaying it immediately once the message is read.
  2. Follow a proven design pattern, which shows the number of unread messages displayed on a red background.
  3. If the item the notification refers to is not immediately visible (for example, the item is not displayed on the first page of the paginated list), help the user reach this item by displaying notification badges inside the paginated list.

The 3rd point refers to a rare situation that I explain on the screenshots below.

How LiveChat displays notifications

Our customers rely on the notifications during their everyday work. We help our users know what’s going on regardless of which part of the app you’re currently viewing.

When a visitor sends a message during the chat, the agent is notified with a native browser notification in top–right corner of his screen.

Desktop notifications in LiveChat

Moreover, a red badge is displayed in the main menu in LiveChat.

Red badge notification in LiveChat

When the agent is currently viewing a different browser tab, he will see the number of unread messages on the app’s tab as well.

Tab notifications in LiveChat

When the agent is already chatting with a customer, and someone else responds, the notification appears on a circle representing the chat with the customer.

Circle activity notification in LiveChat

If the agent has lots of concurrent chats, the chats with highest idle time are hidden on the second page. However, if the customer reponds to one of the idle chats, a notification on the pagination arrow appears. It indicates that some of the chats on the second page need our attention.

Arrow notification in LiveChat

Each of these notifications have little impact alone, however, together they build a cohesive system of notifications that makes sure the customer will receive an immediate response from the agent.

What to improve

The presented notifications patterns used in LiveChat are still missing some advanced use–cases coverage.

For example, due to its real–time nature, LiveChat does not remember the unread messages anywhere in the backend. It’s the application GUI that displays the red badges when needed. As a result, when you close the app for a moment and get back to it, your unread messages notifications are lost.

To fix this, we would need to store unread messages list or the current state of the GUI in our backend. It’s not a one–minute–job and can potentially lead to unexpected badges behaviour if done wrong.

Another issue is the synchronisation between different devices. While it’s pretty easy to synchronise the app instances opened in multiple browser tabs, LiveChat agents can use other devices to chat with their customers (iPhone, iPad and Android). It involves the work in the backend to synchronise the notifications across devices.

Final notes

In most cases, following the basic principles should be enough to build a usable notifications system.

When you work in line with the Lean methodology, you probably don’t want to spend whole weeks on building a complex logic behind notifications. It is better to skip the advanced refinements like synchronising read notifications across other devices in real–time as basic principles cover ~95% of situations.

Categorised in:

  • Daniël W. Crompton

    I’ve had a notification of 1 unread message for over 2 years in LinkedIn, there’s nothing in my inbox.

    I used LC for a while, and I remember the notification issue also effects multiple clients on different accounts. As we were sitting together in one space we found it annoying enough that we ended up turning the sound notifications off for all but one GUI client. The same was true for the iPhone app, it would chime too when it was linked to the same network. The problem came when we left the location and moved home, all but one of us would need to reactivate the sound notifications.

  • Ben Hall

    Super interesting piece.

    I think you’re wrong about FB notifications thou, they go when you click the icon, not when you actually read the message. I guess the pro of that is, if you keep a large number of unreads it keeps the number low (no notification -> 2) rather than 223->225. But con it can mean I you do miss some notifications.

    • It sounds like a simple feature, but when you look at it from the end–user’s perspective, there are some important things that need good execution.

  • Bartosz Olchówka

    @ Daniël,
    feel free to discuss the notifications with us via chat (see the bottom-right corner of this page). We’d like to understand your use-cases deeper.

    @Ben,
    imagine Facebook introducing notifications that way. You would need to open each notification (e.g. “XXX liked your post”) to get rid of the red badge. I think they were pretty clever with marking the notifications as read even if you don’t click on the particular item. I think the most popular use-case is to just open the notifications list, have a look and proceed to browsing Facebook ;)

  • Mick

    This is where Microsoft really nailed notifications in Windows Phone with live tiles. Not only do you get a notification counter for quick glancing at updates but when the tile flips over you get a more detailed overview of what the notification is about. Simple yet brilliant.

  • Hannah Sage

    ^ I agree with Mick, Metro UI’s live tiles are great, the messaging homescreen notification is particularly good, the little smiley emoticon in the message icon changes depending on how many unread messages you have:
    ;) = 0 – 3 unread messages
    :0 = 5+ unread
    I swear I even saw a :( when a message failed to send once!

    http://images.anandtech.com/doci/3982/HTCSurround–2_575px.jpg

  • How LiveChat displays notifications?

  • Ritu Daksh

    fsb fgbrf

  • Ritu Daksh

    btybhet