Why your app's notification bell is broken

Why a tiny bell matters

For centuries, a bell has meant one thing: stop what you’re doing, something important is happening. Church bells, ship bells, school bells, fire bells.

That idea moved straight into the apps we use. It’s why almost every app has a little bell icon. You get a nudge, a pop, a red dot, and you know something needs your attention. So it’s one of the most important parts of an interface, and it’s easy to break.

The broken bell in Microsoft Teams

I was surprised, or maybe not, to find a broken bell in Microsoft Teams. Look at the Mentions column below. Which mentions are new, and which have you already seen?

Mentions · can you spot what's new?

MPMarko Petrović in Release planning@Nikola can you approve the release before 3?10:38
DSDesign sync in Weekly review@Nikola thanks, the flows look good10:02
JKJelena Kovač in Q4 roadmap@Nikola added your notes to the docYesterday
FRFleet release in Login bug@Nikola blocking bug on login, need youYesterday
AMAmir M. in Research@Nikola interview notes are upMon
PLProduct leads in Planning@Nikola see you at 2Mon

Today: two of these are new. The only difference is bold text and a tiny dot.

It’s hard, isn’t it? If you really focus, you’ll notice the new ones have bold text and a tiny dot. That’s the whole difference. It doesn’t get better in light mode either.

And the more new mentions you have, the harder they get to spot, because they’re scattered between the old ones. A single new mention should stand out the most, and it still barely does. If this were a fire alarm, it wouldn’t ring. It would politely clear its throat.

Designing for real life

You might think: just look harder, focus. Maybe, if you have all the time in the world. That’s not real life.

In real life you’re between two meetings. Your kids are screaming in the background if you work from home, or people are yelling across a noisy office. You have deadlines, calls and five things going on at once. That’s the environment to design for. You get maybe half a second, maybe a second, per glance. Any notification that comes your way should be clear, highlighted and on point.

You get maybe half a second, maybe a second, per glance.

The fix

The funny part is that this takes a very simple UI tweak, and Teams already has it. Look at the chat column: chats with new activity have bold text on a white fill, and everything else sits on gray. The difference is obvious.

Why didn’t Microsoft use the same approach in the Mentions column? I don’t have an answer. But if they did, it would look like the second tab in the demo above: whatever is new is clearly highlighted, and everything else is toned down. It isn’t a new system. It’s the pattern Teams already uses, applied in one more place.

The principle

Consistency and standards

The fourth of Nielsen’s 10 usability heuristics. Its internal side means a product should use the same patterns everywhere inside itself, so what people learn in one place works in the next.

Then take it one step further, like the third tab: new mentions grouped, marked and counted. Land on the Mentions tab and you could never mistake an unread mention for a read one. That’s what mentions and notifications are for.

Two states, and only two

The fix shows one important thing: a clear system status. There are two states, and only two. This needs your attention, or this has already been dealt with. Open the list and you instantly know what’s new and what you’ve already seen.

The principle

Visibility of system status

The first of Nielsen’s 10 usability heuristics: a design should always keep people informed about what’s going on, through appropriate feedback within a reasonable time.

Make those fixes and the bell works again.

The $460M notification

This might sound like a small thing. Here’s what happens when an important message looks exactly like an unimportant one.

On the morning of August 1, 2012, an internal system at the trading firm Knight Capital sent 97 automated emails flagging an error before the market opened. They weren’t hidden. They just looked like the routine system mail the team got every day, so nobody acted on them. About 45 minutes after the market opened, the firm had lost more than $460 million.

97warning emails before the market opened

45minutes of trading after the open

$460Mlost by Knight Capital

The alarm went off. It just didn't look like an alarm.

You never know how important a notification is. Design yours so the important ones can’t be missed.

Try this on your product

Open your notifications or mentions list. Can someone tell new from seen in one glance, without reading?
Count the states. Anything beyond “needs you” and “dealt with” should earn its place.
Look for a pattern your product already uses somewhere else for “new”. Reuse it before inventing one.

And while you were reading this, you probably got a couple of Teams mentions yourself. Good luck finding them.

Full transcript

What does this tiny little bell have to do with user interface, and why is it one of the most important parts of it? Let me show you. For centuries, bells have meant one thing: stop what you’re doing, something important is happening. Church bells, ship bells, school bells, fire bells. That idea moved straight into modern apps. That’s why almost every app has a little bell icon. You get a little nudge, a pop, a red dot, and then you know something needs your attention.

So what happens when the bell breaks, like this little guy? I was surprised, or maybe not, to find that this is exactly what’s happening in Microsoft Teams. And before the end of this video, I’ll show you what a broken bell can cost one company. It’s more than you can guess.

This is my Microsoft Teams chat. I want you to pay attention to this Mentions column right here. Can you tell me what requires my attention here? What is new versus what has been seen? Go ahead, you can pause the video, I’ll wait. It’s hard, isn’t it? If you really, really focus, you’ll notice that this mention is slightly different than the others: we have this text in bold and this tiny little white dot right here. And that’s it, that’s the whole difference. Oh, and by the way, this does not get better in light mode, it’s the same. And if we had more new mentions, they would just be harder to see, because they would be scattered around. Theoretically, this one should stick out more because it’s the only one, but it’s very hard to notice. If this was a fire alarm, instead of ringing, it’d be politely clearing its throat, like, ahem.

Now, some of you might be thinking, you have to look harder or focus. Yeah, maybe if you have all the time in the world. But that’s not real life. In real life, you’ll be in between two meetings, you’ll have your kids screaming in the background like I have if you work from home, or you’ll have a very noisy office, people yelling across the room. You’ll have deadlines, calls, five things at the same time. That is the framework you have to design for. You get maybe half a second, maybe one second per glance. Any notification that comes my way should be clear, highlighted, and on point.

And the funny part is, to do this, it’s a very simple UI tweak. No challenging tools required. Let me show you. Now, if we shift our focus to the chat column and this section in particular, we’ll notice that Microsoft chose a slightly different approach here, a better one. The difference between the chats that have new activity and the ones that don’t is much more prominent. It has bold text, it has white fill, while the other ones have some kind of gray fill. Why did Microsoft choose not to have the same approach in the Mentions column? I don’t have an answer to that, but if they had, it could look something like this. Now you can see the difference is obvious from the start. Whatever is new is clearly highlighted, the font weight is different. It uses bold, it uses white fill, while everything else is toned down. And this just uses the same pattern Microsoft uses in the chat column. It’s not me reinventing the wheel or introducing some new system, just reusing what they already have. So they’re consistent, and they’re making a very clear distinction in the Mentions column. And if we wanted to take this one step further, it could look something like this. Now, if I landed on the Mentions tab in this UI, I could never mistake an unread mention for a read one. And that’s what mentions and notifications are all about.

Now this fix shows one important thing: a clear system status. Two states and only two. This needs your attention, and this has already been dealt with. Now you open up your chat and you instantly know what is new and what you’ve already seen. So you do those fixes and the bell (oh, that’s loud) works again.

This might sound like a small thing, but remember the company I mentioned at the beginning of the video? Here’s what happens when an important message looks exactly like an unimportant one. In 2012, a trading company called Knight Capital got 97 warning emails one morning. They were not hidden, but they looked just like any other routine noise they get daily, so nobody opened them. 45 minutes after the market opened, the company had lost $460 million. So the alarm went off, it just didn’t look like an alarm. You never know how important a notification is. Design yours so the important ones can’t be missed.

Oh, and by the way, while you were watching this, you probably got a couple of Teams mentions yourself. Good luck finding them.

The next episode is in production

Get it in your inbox the day it's out, with the written version included.

The newsletter opens soon. Until then, follow along on YouTube.