Every week in HT Beyond, we spent time in discussing upon specific flow productions and problem-solving tactics within the mobile residential community app (that was designed by HT Beyond) to consider different cases to develop it and think in more detail upon the usability of the app.
Our designated task was to design a ‘notification center’ within the app. As this app is soon to be serviced, I aim to focus more about the problem-solving process in a UX case study orientation and refrain from mentioning the detailed services of the app itself.
Background.
As this app hasn’t been officially launched for service yet, the only characteristic that can be revealed about it is that it’s a community networking app targeted at consumers that habit in a group-oriented residence (i.e.: townhouses, apartments, units and etc.). As existent cases cannot be considered, brainstorming, diverse case studies and various articles played an important role in creating the situational concepts for this project. Moreover, it was crucial to capture the specific personas of the consumers, but also, it must be prevailed in a common scenario for the majority of the users.
Challenge.
The discussions and solutions for designing notification centers are as followed:
- Why are notifications necessary?
- What notifications are likely to occur?
- Which type of notification model should it use?
- When should the notifications (and push notifications) appear/disappear
- How should the layout be presented when the notification has been dismissed?
- How can the notifications be presented with more efficiency?
- How should the notification settings be designed?
We cited different suitable articles or applications to analyze various types of notification designs.
Solution.
Q1. Why are notifications necessary?
A. It is necessary to provide notifications to increase the convenience of the users and the utility of the app by providing time-sensitive and contextual notifications to engage the consumers in the app.
According to the article above, a suitable notification is followed by two essential characteristics.
- Contextuality — “Why did an individual receive this notification?”
- Time-sensitivity — “Why did an individual receive the notification at a specific time?”
If the contextuality and time-suitability are the two essential elements of appropriate notification, we aim to improve the consumer experience by capturing these characteristics. We mutually shared the logical starting point upon the necessity of a notification to strive for the next discussion.
Q2. What notifications are likely to occur?
A. First, let’s brainstorm some possible notifications that could occur within the app.
At first, we reviewed our app layouts by sections and immediately suggested the possible notification factors and tried to specifically sort them in a spreadsheet. The result of the brainstorming displayed approximately 40 different types of notifications which were then categorized to major and minor factors into more detailed contents. The reason these notifications were outlined was to group them in their sharing categories to obtain the overall outlook of what notifications could occur, whilst also considering how these categorized notifications are delivered and how the UI can be configured.
After listing the notifications, their characteristics were defined with further details. These elements were divided upon the receivers of each of the notifications, the page that will be shown when the notifications were dismissed, and whether such notifications will have a feed, push notification or a compromising action followed and etc. This process became fairly helpful in configuring the settings of the notifications, especially in grouping the setting’s factors and defining them.
Q3. Which type of notification model should it use?
A. The notification model that we selected was ‘mixed-model’ which combined the notification center and the source-anchored notification.
According to the article above, there are 3 different types of notification models.
- Notification center — displays a full page or a section of notification in a modal drawer
- 2. Source-Anchored Notification — displays a badge in the navigation bar in each category
- 3. Mixed model
The mixed model is the combination of the two other models and is used in popular SNS applications such as Facebook or LinkedIn. Depending on the category of the notification, this model will sort them to the notification center or provide the notification in a badge orientation (based on the ‘source’) and take advantage in corresponding to various different factors.
At first, we struggled in finding the suitable type of notification as a definition of the ‘source’ wasn’t distinctly classified. As we took a step back, we realized that this ‘source’ is where this notification is coming from which leads to the categories of the notifications that were being sorted earlier. This source could be based on other assets from the navigation bar or any other type of notifications from different references.
- Studying Facebook
Facebook is one of the most popular orientations of a mixed model. According to the mixed model use guide, it considers all the different possible situations depending on the characteristics of the notification. Some will be notified through the navigation bar (in which means it will be anchored to the source and be displayed in a badge) and other notifications (that can be difficult to be shown in a source-anchored) will be sorted to a notification center.
For example, in Facebook, assets within the navigation bar, such as videos and friend requests, are notified in a badge-oriented form. This source-anchored notification type alerts the users immediately about the category of the notification. Whereas, notifications about groups, events, new feeds and etc. are not within the navigation bar (the source) and are not presented in a badge form. Its sources are displayed with a message within the center (possibly with an icon) to notify and inform what the notification is about.
- Applying to our App
Our app has a navigation bar at the bottom of the screen. When we brainstormed the possible notification messages, we listed them based on the assets within the navigation bar. From this, we understood that notifications that are formed from contents within the navigation bar can be alerted to the users through a source anchored badge. But other notifications that are not in the navigation bar (such as, promotions or system updates) were sorted to the notification center, which is situated in the top right of the app and is delivered in a modal drawer context.
Q4. When should the notifications (and push notifications) appear/disappear?
A. Ideally, whether the notification should be formed or not will depend on the setting of the notification (push notification setting, service notification setting, etc.). The expiry of the notification will be discussed by studying other service types and standards.
- The necessity of forming notifications and push notifications
What factors could create a notification? As we discussed earlier, notifications are formed in two different factors: contextual or time sensitive. These factors were more summarized below:
- Receiving feedback or difference in status (contextual) — Feedback type
- Receiving double-checking messages on what I have done (contextual) — Double-check type
- Receiving notifications about the service at a specific time (time- sensitive) — System notification type or Promotion type
- When new contents were formed in a service that I am interested in (time-sensitive) — New feed type
In a situation where the user has approved the push notification settings, would all notification be delivered in a push notification form? We listed the cases of notifications and divided them based on the need of push notifications. In the case of 1, 3 and 4, it was considered necessary as it will engage the consumers to the app, and the case of 2 was considered unnecessary as the use of this notification is to alert the user (who is already in-app) about the action and is only recorded in the notification center. Likewise, categorizing the notification types become useful when considering the necessity of push notifications.
**A possible article to refer to when creating a push notification design: Five Mistakes in Designing Mobile Push Notifications
- The Expiration of the Notifications
To find the standard of the expiration of the notifications, some popular services were analyzed. We scrolled to the bottom of the notification center of some popular applications and results of notification expiration periods were very diverse. Other than the services mentioned above, the majority of the communication apps displayed up to 2 months of notifications and some services such as Naver Blog only displayed up to 2 weeks of notifications in their center.
There were difficulties when trying to analyze the exact expiration period of the notification, but when considering the majority of the services like Facebook and Instagram, ‘Grouped notifications’ generally remained for longer periods within the notification center. For example, obtaining multiple likes, replies or feeds will be combined in a single notification. On the other hand, YouTube’s notification generally alerts about ‘singular contents that cannot be grouped’, and therefore only lasts for approximately a month.
Truthfully, however, it is quite impetuous to decide the expiry in specific groups only based on the information that was obtained in a few cases. Therefore, instead of setting a specific expiry period, setting a flexible period for different notification depending on the importance or frequency will be more ideal. Thus, we decided to consider this asset with more detail based on data that is obtained once the app has been officially launched.
Q5. How should the layout be presented when the notification has been dismissed?
A. Once the notification has been clicked or dismissed in the notification center, it will display the related page. However, we were hesitant to decide whether to display a page in depths or deliver the content straight away and so, we decided to study different applications as well.
- Studying Starbucks
For our example, we chose Starbucks, as the form of the notification center was quite similar to our design. Within the Starbucks app, if the notification center icon has been clicked, a notification center will show in a modal drawer context. If the notification aims at engaging the user into a different page, it has an ‘arrow sign (>)’ that will open up the related page once the notification has been clicked. This action will display in a cover-up motion to provide a natural feeling when navigating through the app. When the ‘Back’ button has been pressed, it will come back to the main home page, and not to the notification center in a modal drawer form. We assumed that this happens as the notification center is not considered as a page in the app — it is temporarily covering the screen and will go back to the main page once the exposed space has been clicked.
- Applying to our App
By considering this, our app was also designed to move into a singular depth to navigate to the related page, and once the ‘Back’ button has been clicked, it will lead the user back to the homepage with the notification center closed.
Q6. How can the notifications be presented with more efficiency?
A. The reference of the notification, the source, is visualized through an icon, and an affordance to set the filter chip and notifications is provided so that it can be filtered in sources.
Some devices were set to display the notifications within the center with more efficiency.
Notification setting
Firstly, an affordance for the notification setting is provided through the settings icon at the top of the center. This setting will navigate to the ‘general settings’ page. The general settings page will include the notification settings, and this settings icon is overlapped in the hamburger menu, and this was done to provide an affordance design (or an action-engaging design) about the settings to notify the users that notifications setting is also an option in the general setting. This type of strategy can be found in the setting and notification center within the Starbucks app as well.
Filter Chip
Within the notification center, notifications about various sources are supplementary. To filter the sources that the users desire, a filter chip that establishes the sources were inserted. This idea was inspired by number 14 of the GoodUI and was created to efficiently demonstrate the users on selecting the options without double-handling or being distracted by the drop-down menu.
Source Icons
Within the notification center, the majority of the notifications will have an icon or designated colors to classify the types of notifications. This wasn’t only considered for visual attraction purposes. This type of visual representation will help the users to sort the notifications and sources fluently.
Q7. How should the notification settings be designed?
A. The notification settings are a part of the general settings, and different types of notifications and push notifications, in regard to the services, can be personalized.
- Studying Naver Cafe
Out of numerous considerations, Naver Café followed the most ideal settings layout for our app and therefore, was selected as a reference. Generally, the notification settings offer push notification settings through a toggling on/off switch, and other contents set the type of notification messages. An easier way to sort these options is to utilize the types of notifications that were brainstormed and categorized previously.
Therefore, notifications that include ‘push notification’ can be included in the ‘notification type’ within the notification setting. For example, if push notifications were applied to ‘new feed notifications’/’feedback notifications’/’promotion notifications’, it will allow the users to manipulate the options in the notification settings. The spreadsheet that was sorted prior became very helpful in this process.
- Applying to our APP
The push notifications settings can be manipulated in categories. When a category has been selected, push notifications within the services (of that specific category) can also be personalized.
What we’ve learnt.
As we considered the flow of this project, from the necessity of notifications to the type of notification, model and settings configurations, we were able to learn that the ease of usability within the apps we commonly used were made possible through deep reflections and creativities. As we had no existent data, it was not easy to design a project through virtual considerations, but it was an opportunity to learn together as a team and develop our individual possibilities. Of course, as the flow hasn’t been completely developed yet, it will be crucial to fill in our blind spots, but we would like to acknowledge ourselves upon wholly establishing a general idea on ‘notifications’. Based on this project, we aim to craft more logical productions and steadier design ideas.
Thank you for reading my article :). I will really appreciate any comments and feedback below or just feel free to contact me via hello@vivishin.com.
