Designing Readable Notification Components

Process for creating a notification hierarchy

Integrating notifications in a health and wellness app

There were no defined guidelines for when a user saw notification messages. The design, layout and timing of the messages were arbitrary. Also, the messages lacked a consistent hierarchy; if the user hadn’t recently logged into the app, the messages would stack on top of one another, without an order
of importance.

Additionally, the message component hadn’t been verified with our users. We didn’t know if users were reading the messages or understood what to do with the content that was presented to them. With a lack of validation from our users, we set out to define our messages and develop a delightful, accessible and readable notification component.

Improving the finbability, importance and readability of notifications

Defining notification redesign goals

  • Define the ideal timeframe to show messages
  • Design a new messaging system that communicates importance
    and hierarchy
  • Encourage users to take action based on the messaging

The current component lacked visual hierarchy

Small device notifications

Accessibility in responsive notifications

Developing a notification hierarchy system

  • Only show one message at a time
  • If more than one message is available, use the following hierarchy: Lottery, Points, Fitness Tracker / Success messages)
  • Warning messages or error messages take precedence, such as a failure to save a form or incorrect data
  • Error messages may been shown if the interaction is unsuccessful, such as an incomplete form submission

Using notifications for user action, not interference

  1. Lottery: If a user has earned an entry into a lottery drawing
  2. Achievement: Communicates points earned or streaks of completion accomplished
  3. Success: Confirms the user has successfully added a record
  4. Error: Shown for issues on a form submission
  5. Notice: If the user skips a form or unlinks their fitness tracker
  6. Alert: Warning messages to notify the user of important information
  7. Message: A generic message shown to the user
Sketching notification designs

Sketching notification solutions

Color in notification components

Visual Design variations; Hierarchy through color

The more prominent messages (lottery entries) used a motivating icon and neutral brand color. Positive messages regarding points and successful logging of records, for example, used a green brand color. Warning messages and error states followed more vibrant, but not alarming color components.

Encouraging actions with color, iconography and motion

(Left) Notification pattern 3 seconds; (Right) Notification pattern 3 seconds;
(Left) Notification pattern 7seconds; (Right) Notification pattern 7 seconds and dismissable

Usability testing of time

Time (preference test)

Question: Review the notification banner at the bottom of the screen. Which notification do you think is the easiest to read?

Results
The results were inconclusive. Participants had a slight preference for the 7-second pattern, since they had a longer time to read the message. After creating these prototypes, I realized that I had made an assumption about placement that had not been validated: all patterns were located at the bottom of the screen. A follow-up usability test on top-level placement was necessary to explore if that improved readability.

Time and Notification Location (Preference Test)

Research Question: Which notification is the easiest to read?

(Left) Notification top-aligned; (Right) Notification bottom-aligned

Results
The results were again inconclusive. There wasn’t a significant difference between the designs. Participants had a slight preference for the top-alignment messaging because it is more visible. However, many participants who preferred the bottom-alignment messaging thought it was unobtrusive and a better placement.

Defining a placement

________________

Thank you for reading! As always, I love to hear feedback and thoughts.

@kellydern

www.kellydern.com

Designer @Google, teaching with @GirlsWhoCode & @trydesignlab, occasional illustrator