Tiny Tutorial

Design an Adaptive Notification Dropdown in Sketch

What’s behind the little bell icon in the top right corner of just about every application.

This is part of a series of short tutorials about specific elements, components, or interactions. We’ll cover the UX, the UI, and the construction inside of Sketch. Plus, there’s a freebie for you at the end!

What are we designing?

The dropdown underneath the notification icon that is used to collect notifications happening in a web app.

When are they used?

To inform a user whenever something they should know about happens within the system.

There are thousands of use cases where a notification might be necessary, but here are just a few of the most common ones:
• New followers
• Interactions with your content or profile (likes, favorites, etc.),
• Changes that other users have made within a system
• Invitations
• New task assignments

As always, we encourage designers to understand what is most valuable to the user and allow that inform their designs. Try to think outside the box and do the same when designing notification use cases. Extra points for ideating on notifications that the user might not know they need to know (i.e. avoiding future mistakes in your system by identifying trends and alerting the user that something may go wrong unless their behavior is corrected).

Some Examples:

Can you name all of the apps that these belong to?

Why do they work?

I have to admit, when someone says the word ‘notification’ my mind immediately goes straight to that sharp buzzing in our pockets that is constantly tempting us to look at our phones and killing our attention spans one vibration at a time. But believe it or not, notifications don’t have to be the almighty enemy of productivity!

In their most basic form, they work because they are a step in the right direction of not having the user need to actively search for things that would be helpful for them to know. If I want to check to see if I’ve been assigned any tasks in Trello I wouldn’t go through every board I’m in, one by one, and look at the assignments. The system will simply let me know any relevant assignments via a notification at the exact moment that it happens.

I know, I know, I realize that I just explained the now seemingly ancient concept of notifications like they are some kind of novel innovation and that all of this is very basic information. But hey, sometimes it’s necessary to go allllll the way back and think about where they came from in order to really do something innovative with them.

Depending on the design system you’re working with (or lack thereof), you may need to design for the hover & pressed states as well

What’s the UI Recipe?

The notification dropdown can be built to be adaptable using Sketch’s nested symbols & overrides. Here’s a couple of tips to help you out:

• Header: Some apps go without a header, but it can be a good place to add some more in-depth functionality by placing a notification settings button or “Mark all as read” action. 💎 Pin your title to the left and the actions to the right of your header container so you can resize the whole dropdown and everything will stay in the exact spot you want it to be in. ↔
• Avatar + Badge: If the notification is the result of another user’s actions, place the user avatar on the left side of the notification container. In our example, we also include a badge in the lower left corner of the avatar to indicate the type of action that triggered the notification (i.e. follow, comment, like, etc.) 💎 We love DiverseUI’s Sketch plugin to fill out avatar shapes with realistic profile images. Create badges by iconifying certain notification types and then use nested symbols to easily swap out the badge type in the inspector panel with the ease of a dropdown.

Different symbols for each badge, nested inside the Avatar symbol.

• Description + Timestamp: It’s best to be as clear and concise as possible when describing the notification. 💎 We use three different text symbols in this section: 1. The user who’s triggered the notification (“Evan Hall”) 2. The action that is happening (“commented on”) 3. The object in which the action is occuring (“your recent post”). Put them all together and you get: “Evan Hall commented on your recent post”. Use Auto-Layout to create a collapsable stack with the user, action, and object so whenever you type the text into the symbol, the rest of the stack will auto-adjust to the width of the layer before it.

P.s. lock a layer within a symbol if you don’t want it to show up as an option in the inspector panel 🔒

• Unread Dot: An indication as to whether or not the notification has been read. 💎 Create a symbol for the dot so you can easily make it appear or disappear as needed in the inspector panel. Don’t forget to pin it to the right side and make it a fixed-width to keep the whole symbol responsive!

Try it yourself!

Before you leave, don’t forget to:

• Download the freebie above to see my working file!
• Use Nucleo for quick badge icons.
• Check out Auto-Layout by Anima and learn how to use stacks in all of your designs. Seriously, these things make everything so easy and you’ll start to feel like a wizard when you see them in action.
• Also check out Diverse UI and their Sketch plugin for a simple way to insert realistic profile avatars into your designs.
• Grab the UX Power Tools design system to use this component and tons of others just like it.
• Share this tiny tutorial with your friends on your favorite social media platform!