How to design a notification center for your app
People of Medium, hello!
In this mini-guide, I will explain how to develop a Notification Center for a web or mobile application.
Let me remind you that any successful design requires understanding of business needs and ought to be useful and user-friendly. Do some research to identify your client’s business niche and what they want.
1. What are Notifications
Notifications are pieces of information (alerts) that pops up on a mobile device notifying the user about new events. App publishers send them to communicate with the users.
Notifications can be mainly of two types: informational and actionable. Both these types could have further subtypes depending on the context of the app.
Informational - are notifications aimed to provide information and not necessarily an action.
They facilitate user’s work with the system; make it more understandable and predictable. As one of the advantage for the business — they help to avoid mistakes, which otherwise need to be solved using additional tools.
As an example:
File is deleted; System will be unavailable from 12 a.m.; Bulk process is running; Your transaction is successful; New role is assigned, etc.
Actionable - are notifications followed by an action or caused by an action.
As an example:
Likes and how they displayed; Friend request notification and an option to respond immediately; Message notification showing first couple of lines;
Notifications can be both useful and tricky. They may provoke user’s action — cause euphoria, addiction, etc.
Notifications in general are very convenient, but they also may contain sneaky psychological tricks.
2. Here is what you need to do to get started
Once you have identified the primary goal of your app’s notifications, what problems they solve, how they can be useful for business and attractive for users, you may start your visual design.
List all the events that will be in your system, or if it is an existing product, analyze the existing events, categorize them and add new ones, if needed.
When your list is ready you need to come up with the logic of how the notification itself will be built on the backend. What data will come from where, what the notification will consist of. So to speak, make data design. As a rule, this should be one design that fits all types of events.
As an example:
[Event name] + [Area where] + [Action button]
If you have too many sources of notifications, there’s a possibility that this model can start looking a little cluttered. If there are similar types of notifications, you could group them together which would help to reduce repetition.
You should clearly understand the purpose of each notification in the system and consider cases when they are needed.
If you want to succeed with your design, start with analysis.
Here are some standard components of a notification.
3. Notification components:
- Anchor is a visual component on the architectural level. Note that anchors are not necessarily sources of notifications, but only the component where the notification displayed. An anchor could house notifications from multiple sources or just one.
2. Notification indicators or counters can be as plain as a dot, or they can also have a count on it, which would show the number of unread notifications.
3. Event name. It is important that the event name differ visually from the rest of the content. Make it appealing when displayed. We have Subject — indicates ongoing (event), and after goes Description — explains what is going on.
If your description is truncated (has three dots in the end), this demands special logic.
4. Event Icon. Visualization easier to read than text. You can teach people to understand symbols without text, which will make work faster. Thus, it is better to categorize all notifications and assign them an icon.
5. Event Time. Explains when and what happened. In order to set the most convenient periods you need to know: When do customers most often use the application? During working hours? During the day? On the weekend? What time zone are they in?
6. Read/Unread Indicators. Distinguish read massages from the unread ones.
Options:
1. It is considered read after the list of notifications pops-up.
2. You need to click on action — read.
3. You need to follow the link.
7. Do not disturb mode. Turns off audible and visual notifications, but stores them in a general list. As a feature, you can also add a schedule setting, than it turns on and turns off itself. Notifications at the wrong time are worse than useless, because they annoy.
8. Action button. Open, skip, delete, view, etc. Thought out when it appears and what solutions it offers.
9. Hoover effects. A change of some element while you put a mouse arrow over it (Online tactility).
Don’t forget about hover effects.
4. Notification settings
You may not have them in simple application but you would better have it in order not to bother your users.
Notification settings may include the following features:
1. Email notifications setting.
2. Setting of push notifications on your phone and browser.
3. Function “Do not receive notifications on my phone while I am on web”.
4. Setting of the time interval
5. Setting of the notification type
And many other, depends on your product
5. Push notifications
Push notifications in the browser — if your browser is open, a link to your application is opened in it, the user can receive notifications from other web pages. Push notifications are displayed in the upper right corner; may look different depending on the browser. May contain image, caption, text and navigation or skip button.
Push notifications are generated at the frontend and are transmitted to the browser.
The image in push notifications is always the same regardless of the event. Usually it is the application logo or image visually linked to your web page. The design of the push notifications can vary depending on the version of the browser. When developing a design, you should include it into your layout for the information of front-workers.
I hope this information was useful! :)
If you liked this article sharing it with friends is greatly appreciated!
You can also click 👏 below (as many times as you want!)
