Notifications form a key component of many mobile apps. Many utilize both the native OS notifications, as well as some form of in-app notifications, often shown to highlight new features or messages. These messages serve to provide updates and information to users in a higher priority fashion.
They are designed to relay anything from a successful purchase, to an error with their account. As such, they need to be clear, concise, and effective in garnering the user’s attention with varying degrees of urgency at any given point.
In this article we are going to focus specifically on in-app notification designs and look at some of the finest examples and discuss why the design is so effective.
All the Mobile UI Kits You Could Ask For
Medium‘s approach to in-app notifications is very simple and on-brand. The message is clear with a clearly defined action to dismiss the notification.
In this case, the design is used to notify the user of a feature and therefore its positioning is as key as the design itself.
Twitter similarly using notifications to alert users of new features. Their design is extremely compact and includes a pointer to further emphasize the new feature and increase interactions.
The notification alert is bold and stands out from the white content behind, while remaining on-brand and providing great legibility.
The List App
Similar to Twitter, The List App uses a tooltip notification design to alert a user of a feature.
Where Twitter assumes the user will be aware of how to dismiss the alert, The List App takes this one step further and adds a complementary route to dismiss the alert by including an icon in the upper right-hand corner.
Facebook implements a very native and standard notification design for alerting users of a new feature. The blue background and Material Design drop shadow provide excellent contrast and draw the exact level of attention to the notification without having the user endure a sense of emergency or unimportance.
Google Keep‘s notification design is very informative in its design. Rather than overlaying over content, the card design forms part of the main interface layout, leading to a higher priority position and allowing the alert to convey a detailed message, while not restricting use of the app, as would be the case with a modal design.
The blue color is perfect for grabbing the user’s attention, and the dismiss CTA is large and clear with an accompanying icon.
Pinterest‘s notification designs are certainly one of the most creative. The use of bold and friendly shapes help them stand out from the more generic rounded rectangle notifications that users have become so accustomed to.
The design is playful in nature and fits the brand and app design perfectly. The use of yellow is refreshing and presents a higher-priority feel than the typical blue color. The text is bold and concise and conveys the notification message effectively.
Have you seen any other top examples of mobile app notification design? Share them below in the comments!