• Designing notifications for apps: Explore different Notification models and when to use which
  • Originally written by Shashank Sahay
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: Ryden Sun
  • Proofreader: PKUwwt Sanfran1068

Explore different notification models and how to choose

Notification model

Medium readers, we meet again. This is the fifth installment of our functional decomposition series: notification notification models for applications. Currently, notifications are a complex feature to handle. This article won’t cover all of its pain points, but I hope it will provide you with a clear enough understanding to point you in the right direction when choosing an application notification notification model.

Before we start talking about the notification notification model, let’s take a quick look at the introduction of notification notification and what it consists of. Notifications notifications are a series of messages sent by an application to the user. Here are some of its important components.

Notification model – Diagram

Source: This part of the application is the origin of notifications. An application’s architecture can have multiple parts composed of information categories, and these parts are sources of notifications and reminders.

Message: A message is a message that needs to be sent to users by notification. For example, “Sister Chang ‘e has asked to add you as a friend” or “Kangxi has started following you.”

Type: Notification Notification can be divided into two types: notification and actionable. All types can be further subdivided according to the content of their application.

Notification flags: Notification reminders provide visual flags to guide users to view notifications. These markers can be simple dots, plus the number of unread messages.

Anchor points: Anchor points are visual components that display notifications on the application interface. In simple terms, this is the component where the user sees the notification token. In a nutshell, this is where the user will see the notification flag. Note that the anchor point is not necessarily the source of the notification, but simply shows the location of the notification. An anchor can display messages from one or more sources. In other words, a message source is an architectural/information-level concept, while an anchor is simply an implementation-level visual component that lets you see notification tags.

Notifications are the medium that an application uses to communicate with the user. The application uses notifications to send messages to the user that may lure the user back to the application. Therefore, they are an important part of an application. Let me introduce you to some of the most popular notification models and choose the most appropriate model.

1. Notification center

In this model, there will be a clear area to drop all notifications. The notification center can be a dedicated screen or a pop-up based on the available space. In this model, all notifications, regardless of their source, are centralized in the notification center. The notification center allows you to navigate to the source of different notifications. A brass bell icon with a notification mark is the entry point for all notifications. It is important to have a visible difference between read and unread notification reminders so that users can distinguish between them.

Medium – Notification center

The biggest advantage of this model is its flexibility. This place can accommodate all notifications, whether existing or from new sources.

guidelines

  • All different types of notifications need to be taken into account and in a uniform design form. When designing this form, it is important to make scalability our primary goal.
  • If you have too many notifications from different sources, the model can get a little cluttered. If there are similar notification types, you should combine them to reduce duplication. For example, “Wang Zhaojun and three other people have asked to add you as a friend.”
  • Ensure that the notification center is easily discovered and accessed by users.

When to use the notification center

  • Your product requires notifications that cannot be integrated into any existing navigation options. The reason may be that the notification is inconsistent with an existing object on the product, or the notification does not originate from any message source defined in the current information architecture.
  • There may be more sources that don’t show up on the home page of your application.
  • Your time is limited. You may have to deliver a feature before you have thought through every possible scenario and the corresponding anchor points. In this case, the notification center is your simple solution, and it’s inherently flexible.

2. Notification reminders of anchor points on message sources

In this model, each notification is anchored to a navigation option, most likely the message source. There is no central place for all notifications. A look at WhatsApp gives a clearer picture. On both platforms (Android and iOS), anchors for notifications from chats or calls are placed in their respective navigation menus. The strength of this model is that it leads users to discover more. In this way, users can directly access the content of the message delivered by the notification without an additional intermediate layer. But this model is not as flexible and extensible as the notification center.

WhatsApp – Notification alerts anchored on message feeds

This model is strongly dependent on the information architecture of the application. Navigation must accommodate all different types of notifications. Similar to the previous model, it is important to have a visible difference between read and unread notifications to allow users to distinguish between them.

guidelines

  • Make sure that each notification notification anchor corresponds to a navigation option on the home page of the application. As your application grows in complexity, so does the number of notifications. In this case, you can either embrace the notification center or consider a hybrid model (that is, a combination of the anchor model and the notification center). We’ll talk about hybrid models in the next section.
  • Each anchor should have a design form corresponding to its contents. Make sure your notifications fit the anchor’s design. To understand this, let’s take a look at WhatsApp. Anchor “chat” has a design form that defines what a chat object should look like. This means that every notification notification anchored to chat should be subject to this design. This is also used to design notifications for “calls”.
  • Ensure that anchor points are easy to find and access. Avoid using nested anchor points.

When to use anchor notification alerts on message sources

  • When all possible notification sources can be accommodated on the home page.
  • You have considered all possible scenarios in which notifications can be used, and all notifications can be applied to existing design forms. It is important that these notifications adhere to the design form of the message source on which they are anchored.

3. Hybrid models

This model is a combination of the previous two. This model is the most commonly used. There are many popular apps that use this model, such as Facebook, LinkedIn, Twitter and Instagram. In these applications, the notification center becomes an option on the navigation menu, and it can be an anchor point for different sources that are not worthy of being shown on the home page. For example, Facebook anchors notification requests to add friends to the “friends” TAB, but invites to like are anchored to the notification center.

Facebook – Hybrid model

This model has the advantages of both models and can easily be applied to most situations. Even though you now have the ability to anchor message alerts to the notification center, it is still necessary to consider all scenarios and prioritize them to find notifications that can be anchored to the source.

Like the notification notification model anchored on the message source, this model relies heavily on navigation menus and has a notification center menu option.

guidelines

  • Identify and prioritize the most important information in the product architecture so you can decide which anchors should be placed in the message source and which should be placed in the notification center. Because this model relies on navigation, the configuration of notifications and reminders can change depending on the available space.
  • Make sure the main anchors and notification centers are easy to find in the navigation on the front screen

When to use a hybrid model

  • You have considered all the notification scenarios. You have some notification anchor points that can be placed on message sources, but others that cannot be placed on any of the message sources of the current architecture
  • There are nested message sources in your schema. For example, the Burger menu icon of a Facebook application is an anchor that corresponds to multiple message sources, such as Groups, Watch, Memories, Saved, Marketplace, and so on.

conclusion

All of the models mentioned above can be useful in the right context. Which model your application chooses to use depends on the product’s information architecture and the type of message notification you prefer.

Don’t forget to like it

Ten is good, 20 is better, but 50 is the best. Just press and hold the button. 😛

Hopefully this article will help you choose the right notification model for your application. If you have any feedback, let us know in the comments.

Special thanks to

Brainstorming by Shailly Kishtawal. Prerna Pradeep help on content. And early feedback from Dhruvi Shah and Tanvi Kumthekar.

Click on the link below to check out the previous feature decomposition series.

  1. Medium Claps: Why it’s so difficult?
  2. Google Search Results: List View vs Grid View
  3. YouTube Search Query: Why doesn’t it go away?
  4. Designing search for mobile apps

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.