Deep: The UX of notifications
How top companies like YouTube, Figma, Linear, Notion and more are designing their notifications. Key trends and inspiration for your product.
🔒DoP Deep goes deeper into the concepts and ideas that are covered in the Weekly Briefing to help you learn lessons from the experiences of top tech companies. If you’d like to upgrade to receive these in-depth pieces of analysis you can upgrade below. New reports added every month.
Apple recently gave us a masterclass in how not to design notifications with the rollout of Apple Intelligence. The botched rollout certainly led to some hilarious examples but the intelligence-infused notifications were designed to make it easier for us to get up to speed with missed notifications - and not necessarily make us laugh. Apple is now pushing back its wider AI plans for Siri as a result. Let’s hope they’re able to iron out some of the quirks in the next iteration.
Given just how crucial notifications are in driving engagement and retention, product teams are right to allocate the time and effort required to get them right. In the briefing last week, for example, we mentioned that Figma recently spent months on a project redesigning its notifications after users described them as “terrible”, with the new version resulting in a much cleaner experience.
The average user now receives around 160 notifications a month just on mobile devices. But balancing keeping users up to date with important notifications and annoying them with too much noise is difficult. So in this deep dive, we’re going to analyse the UX of notifications from top companies including Google, Notion, Dropbox, Slack, Uber and more.
We’ll explore the different types of notifications across web, in-app, mobile and others. The full report also includes a Miro board of all of the notifications UI from 20+ companies featured.
Coming up:
Analysis of notifications UX for 20+ top companies including YouTube, Slack, Notion, Uber, Linear and more.
The surprising choice that one company ditched the bell icon entirely for - and why it might backfire.
From "terrible" to a cleaner user experience. How Figma turned its notification system around – and what you can steal from their design process. Downloadable design files that you can use included.
The art of notification preferences. Learn how top companies are empowering users to customize their notification settings. How one company lets users subscribe to exactly what they want, right down to the minute.
A full Miro board containing all of the 20+ notification UI samples featured across desktop and web.
How this UX analysis is structured
Here’s a snapshot of how this deep dive is structured:
Product - over 20 different products are featured across B2B and B2C including Microsoft, YouTube, Linear, Notion and more.
Notification types - a breakdown of each of the different notification types offered by the products featured. These notification types include: email, push mobile, SMS web, in-app and third party integrations.
How it works - an explanation of how each of these notification types works for each product, along with any unique or interesting notification capabilities for that product. For example, in products like Linear or Slack, users can decide to subscribe to get notifications for specific topics only.
UX patterns - over 10 different types of UX patterns for each notification featured so that you can get a solid understanding of the different ways in which companies are integrating notifications. This includes patterns like whether or not a bell icon is used, the placement of notifications and more. See below for more details on that.
UI examples - downloadable UI examples of notifications for each of the products featured. A Miro board of all the UIs in one place is also included.
Link to more info - more information about how notifications work for that specific product.
UX patterns breakdown
As well as the UI examples for each product, the report includes over 10, clearly defined UX patterns for each product. Some of the patterns include:
Bell icon - most products use bell icons for their notifications, but not all. We’ll explore the ones that do and the ones that don’t along with some potential rationale behind those decisions.
Preferences - one of the most powerful ways to help users not get flooded with too many notifications is to allow them to specifically tell you how many notifications they want to receive and what for. Products adopt notification preferences in lots of different ways. The UI examples include not only the notifications but the notification preferences, too.
Placement including sidebars, top right, top left and bottom. Different companies place notification alerts in different places. The report includes patterns for each of these.
Red alerts - use of red in notifications to demonstrate urgency is pretty common in notifications, but not all products use it. Find out which ones do and which ones don’t.
A closer look at some UI examples with analysis and key takeaways
OK, now that we’ve set the context, let’s take a deeper look at the companies featured.