The UX hierarchy of in-app notification patterns

Did you know — Applications with in-app messages have 3.5x higher user retention compared to the apps that don’t have them? 😮

Illustration designed by me using Blush Design and Undraw.co :)

The in-app notification system works really good in four ways:

1. Increasing user engagement by nudging users to take actions
2. Providing feedback to acknowledge user actions
3. Guiding users to navigate the product with comfort (onboarding steps/new feature introductions)
4. Updating the user about changes in their critical information (policy changes/security concerns ➡️ likes/shares/comments/)

If these notifications patterns are not built in the right way, they can be white noise and can haunt you later with their anti-UX nature. Again, please note that we are talking here about in-app notifications that are different from system notifications (a.k.a push notification/product notification).

Push notifications on iPhone (Left) and In-app notifications on instagram (right)

I read a bunch of blogs, articles, and discussions on in-app notification patterns when I was building one for a community engagement application.
Please refer to this list for understanding the do(s) and don’t(s) of building notification systems. This article is going to quickly cover the ways in which product managers and designers can go about designing the flows and organize the information they want to convey to the users.

In community-based social applications (for e.g. twitter, instagram, slack, etc), making in-app notifications that are personalized, responsive, and intelligent can do wonders for engagement. These can constitute fleeting updates on posts, nudging users to use a feature, onboarding coachmarks, informational pieces about the product, changes in product policies, and this list gets customized for your respective products. Having said that, a designer must also realize the point where notifications can get annoying and can kill the sole purpose of the applications when it comes to engagement.

While building the different varieties of notifications for the user inside the application, I found a pattern/hierarchy in terms of usability of these components. I could segregate them on the basis of four factors —
1. Intrusion
2. Duration
3. Importance for users
4. Importance for the product owner

Now, how to use this hierarchy to actually decide which information should pop up in the app at what point of time and where?

🧠 Let’s deep dive, quickly

1. Passive — fleeting notifications that users can miss and don’t resist their current usability flow. They are here to show that the application updates you of the whereabouts from time to time.
   Someone liked your tweet ❤️, Someone started a live video 📹, 2 unread messages ⬆️
2. Guiding — notifications higher in importance to the user and nudges actions that you want the users to surely take. They can divert attention because as an app maker, you want it to happen!
   Onboarding screens 🆕, coach marks on how to use a new feature, the app is taking your location📍 information in the background
3. Informational — aggressive notifications from the product that takes the user’s highest attention eg. via screen space and may or may not obstruct usability. Sometimes these are the areas of high importance to the product owner.
   Sponsored posts on IG💵, Important COVID announcement, survey links by twitter🔖, a new feature publicity📢

Let’s position these on a scale of the four factors I had mentioned above:

Placing the three categories (passive, guiding, informational)of notifications on the scale of Duration, Intrusion, Importance for users, Importance for product makers

This categorization would help a designer to pick relevant UX components to communicate the content. For instance, a toast on the bottom informs about the actions on the app, a temporary banner to tell you about onboarding steps on the app, a pop-up to ask you for a rating.

Toasts on twitter (left), Onboarding screens on desktop app (middle), Rate us Modal (right)

The context of every product differs but the usefulness of each kind of notification can still lie in the categories above. When I was designing the notifications, I realized the need to differentiate between the utilities of each message that is used to interact with the users. Also, laying out what value each of them brings to the user’s experience and engagement helps when you start to prototype a flow. Next time when you design an in-app notification pattern, maybe thinking in terms of these three categories.

Shout out to my mentor, Christopher Dye and my friend, Bhawna, for their feedback that I have already incorporated. Please feel free to suggest any new thoughts with examples 😇

The UX Collective donates US$1 for each article published in our platform. This story contributed to UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.