Designing Readable Notification Components

Process for creating a notification hierarchy

Integrating notifications in a health and wellness app

As a Product Designer with Life.io, I had noticed that there were a few limitations of the overall experience of notification messages in the web application. Since Life.io uses an incentives-based approach of points and rewards to motivate users to complete healthy activities, notifications are a central communication tool in the app. These messages notify users of points earned, whether they’ve been entered in a lottery, or essential error messages, such as incomplete forms.

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

The current notification system didn’t follow accessibility guidelines. With the goals of improving the accessibility, readability and ease of use of the components, we defined design goals of the messages.

Defining notification redesign goals

  • Enhance the findability and readability of the notifications
  • 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

With the goals in place, we could continue with evaluating the visual hierarchy of the current messages. The current notification component used either the primary, secondary, info, or an alarming error color. The pattern appeared for 5 seconds at the bottom on the screen and then
disappeared abruptly.

Small device notifications

Accessibility in responsive notifications

On small device sizes, the message had a more prominent position on the screen, but still lacked visual hierarchy, accessibility and readability. The info and error patterns are difficult to read because of the limited contrast between the type and message color.

Developing a notification hierarchy system

When messages stack on top of one another over time, readability significantly decreases. We defined rules based on the importance of the messages to our users:

  • 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

When we further defined the rules, we ranked the specific use cases of the messages based on importance, sensitive to what the user will most be inclined to take action upon (lottery entries) and whether it’s a blocker for use (such as form errors).

  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

We explored variations of the component design with iconography placement and size, helpful and prominent messages, content placement, and the ability to dismiss the pattern if needed.

Color in notification components

After low-fidelity sketches of various placements, we evaluated the designs and decided to continue high-fidelity versions of the components with an icon, messaging, and a dismissible button. Using Life.io’s central brand colors, we applied consistent and appropriate use of color to the ranked messages. I mocked up several variations of the info notification components to explore iconography, layout and messaging position.

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

With the color and messaging defined, we needed to define the length of time that the messages should be shown for optimal readability. These messages are placed at the bottom left of the screen, so that they’re not invasive. On smaller screen sizes, the notifications have a much more prominent placement, but are still positioned towards the bottom. A quick and smooth transition draws the eye to the bottom of the screen.

(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

After creating prototypes of several variations for the design, I created timing patterns for 3 seconds, 5 seconds, 7 seconds, and 7 seconds with the option to dismiss. We had our own hypothesis about length of time (the longer the better) but wanted to validate these assumptions with usability testing.

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

With the 7-second variation as the clear preference, we’ve decided to move forward with implementing that length of time along with the hierarchy. The placement and visual design of the notification component is still being tested by a small group of users. We’ve received positive feedback so far on
the hierarchy.

________________

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

@kellydern

www.kellydern.com