Back to Blog

Common Treatments for Notifications and Alerts in UI Design

Author

Recently we were asked by our clients to research all of the most effective ways that web applications were handling Notifications and Alerts and report back with the most common and intuitive treatments. We figured we’d share with the design community at large…

1. Alert Message Displayed Above Application Content with Removal Option

Harvest Notifications

The time tracking application we use, Harvest, does a great job of reminding users about new features or account issues with their alert module. Closing it removes it and the system remembers your preference so it doesn’t keep showing up if you’ve already read it. This is definitely one of the most common approaches I’ve seen with applications.

2. Alert Message Displayed Above Application with Automatic Fade-Out

FTS Contract System Notifications

We’re working on an in-house electronic Contract Management system at the moment and the way we’re handling notifications is by displaying them at the top of the application section you’re working with, then fading out over a period of about 3-4 seconds. The space is then re-allocated in that the app content below it slides back up. This treatment, though similar to the first treatment, is nice for contextual changes that relate to tasks you’ve just completed and want a visual indication that you’ve successfully done what you meant to. No need to keep an alert like that in place for more than it takes to view it, so we’ve chosen the automatic fade-out approach.

3. Anchored Header or Footer Notification

Facebook Chat Notifications

Facebook has a nice treatment of a persistent footer for chat that includes visual notifications and clues that relate to status and activity. What UI designers can learn from this is that if notifications or alerts are important enough in your application, you can anchor them to persistent sections like the Header or Footer. Even something as small and non-invasive as a number inside of a colored circle (think iPhone) can signify that there is new activity for you to review. Clicking a notification or alert that’s anchored to a persistent form of navigation could then slide up a more detailed notification or just hyperlink you to the most relevant section of the application to see more detail.

4. Modal Notifications or Alerts

Google Calendar Notifications

In some cases, an alert or notification is deemed much too important to use something more subtle as the previous examples. In the example of something like Google Calendar, a modal treatment is used that is almost impossible to ignore. Other use cases could include events where you’re attempting to delete something that can’t be retrieved. To be on the safe side, prompting a user to confirm a major decision through an interruptive treatment like a modal could be a great idea. On the flipside of that coin, a well-engineered application would display an inline notification that you’ve deleted something with the ability to Undo it. This suggestion was explored by UI designer Robert Hoekman in his book “Designing the Obvious.”

5. Color Changes or Fades to Signify Updates or Status Changes

Basecamp Notifications

In some cases, designers might assign different colors or indicators next to content that is categorized differently. In the event that you’ve completed a task, the visual notification that something has changed could be as simple as a color change. Basecamp does a nice job of shading new messages with a different background color that fades out over time.

Hopefully the variety of these treatments for notifications inspire you to try something new or help you choose the best approach for your design. If there are any others you can think of that we missed, please don’t hesitate to leave a comment.

Author Alex Fedorov

Alex is a strategic thinker with a gift for information architecture, known for his ability to wireframe complex workflows and multiple states of applications at the speed of light. He is passionate about clean, data-driven design.

More posts from this author

How we work Process

Product Hero Talin Wadsworth