UX Design News Hubb
Advertisement Banner
  • Home
  • UX News & Trends
  • UX Mentoring & Learning
  • Contact
No Result
View All Result
  • Home
  • UX News & Trends
  • UX Mentoring & Learning
  • Contact
No Result
View All Result
Wellnessnewshubb
No Result
View All Result
Home UX News & Trends

Three questions to ask when designing statuses beyond the happy path | by Kai Wong | Aug, 2022

admin by admin
August 25, 2022
in UX News & Trends


Replacing one status with another without thinking is a recipe for user frustration

Photo by Redrecords ©️: https://www.pexels.com/photo/red-led-traffic-cone-2743739/

Statuses often don’t seem very important until you have to design them for glanceability.

The most common and extreme case of this is with car dashboards. When you’re driving 65 mph down a highway, the last thing you want to do is take your eyes off the road to try and decipher a strange status.

Most statuses usually aren’t that time-sensitive, but understanding statuses is often a core part of the User Experience. This is because often, the happy path is to leave after checking statuses. After all, there are no unexpected issues.

But that doesn’t mean that’s always the case. So here’s what you need to remember when designing other paths.

Designing for states other than the happy path

Previously, I talked about how it was necessary to show just enough information in overviews to match the user’s happy path.

After all, all they need in that case is a quick status check, like “everything looks good.”

A dashboard that shows all of the status as green checkmarks
If everything looks good, then the user might leave

However, if things aren’t all good, you can’t just expect to replace one symbol with another and move on with your design.

The same dashboard is changed so that one of the boxes, “Networking”, is red, with a red X in there saying “Bad”.
What happens when something like this happens?

You need to consider the statuses in more depth for one key reason: users need to be able to determine their next steps based on the status. This is often summarized in the first of Jakob Nielsen’s ten heuristics: visibility of system status.

https://www.nngroup.com/articles/ten-usability-cs/#poster

All the status shows us is that the “Networking” status is bad, which could mean a dozen different things. It’s the equivalent of an error message that says, “Something has gone wrong.” There’s insufficient context for the user to know what to do next.

How can we improve this? First, we should ask questions that help us determine the role that statuses will play (and how to support user interactions better):

  1. How many statuses should you present to your users?
  2. What are the next steps users should take after each status?
  3. How do multiple alerts interact with one another?

How many states can users be expected to either know or learn?

Many times, we assume that there are only going to be three colors associated with statuses:

  • Green, which means all good, “Go,” or that a step is completed
  • Yellow, which means caution, warning, or “Slow down.”
  • Red, which means an Error,“ Stop,” or other problems.

But one of the first questions you have to ask is whether or not this is enough to summarize all possible statuses. To explain, let’s consider a fairly typical example: something or someone is offline. What’s the best color to describe this state? It’s an important status, yet it doesn’t necessarily slot into these colors nicely.

If your package is offline (i.e., it’s not yet in the system), is there a need for a critical (Red) Alert? Maybe, maybe not. Some packages, like heart transplants, might need this status, while others, like printer paper, might not.

One of the dangers of putting everything in the “Red” category is risking Alert Fatigue, where your users start to ignore alerts (with catastrophic results). However, putting something in the “Yellow” category might downplay the status.

A visual example of Alert Fatigue. The user is able to deal with 1 alert on the left panel, and is pointing to one specific alert to pay attention to in the center panel, but the user has their hands on their head in frustration as there are 6 alerts around her on the right panel.
Alert fatigue is common in high-stress scenarios, like healthcare

Offline, as it turns out, tends to be represented by gray often.

The side bar of Discord showing specific users. A green circle is next to some of them to show something is online, while a hollowed out grey circle is next to others to show that they are offline.
Taken from Author’s Discord

This is the danger of working with only a few colors. So how many colors do you need? It depends on your environment. For example, in the Information Technology sector, there tend to be six standardized severity levels:

  • Warning
  • Minor
  • Major
  • Critical
  • Indeterminate (cannot be determined)
  • Cleared (Alert has been cleared)

As a result, there can be as many as seven colors to show different necessary statuses.

A severity theme with different colors representing different statuses. Indeterminate is in Purple, Cleared in Green, Normal in Gray, Warning in Blue, Minor in Yellow, Major in Orange, and Critical in Red.
IBM Netcool sample color palette suite

Your domain might not have strict status guidelines, but you should research how many statuses you need to represent. This is because you need to understand how many colors to use and how to make them distinguishable from each other at a glance. In addition, you don’t want your users confusing a minor and major warning because they’re similar in color.

However, there’s one other question you need to consider while considering your statuses: what is the following step users are likely to take?

Design for your user’s following likely action based on a status

What should the user’s next step be if they’re given a critical alert? That’s something you need to consider, as you might need to consider additional actions to ensure that users know certain statuses.

For example, what if there’s a time-sensitive critical alert on something (like your server was hacked, or the delivery person is waiting downstairs)? In this case, there might be additional design elements you might want to consider, like warning notices or modals.

The level of severity often mirrors the Visual Information-seeking mantra from Ben Shneiderman: Overview first, zoom and filter, then details-on-demand.

It’s usually only necessary to provide a simple overview with “Green” statuses, while “Yellow” statuses often require zooming in to understand further. “Red” statuses, on the other hand, require users to dig into the details to understand what needs to be done as a next step.

Aligning the Green/Yellow/Red statuses with Overview, Zoom and Filter, and Details on Demand here. The green status stops at overview with “Everything looks good.” The Yellow status goes with Overview and Zoom & Filter, digging deeper before dismissing the warning. The Red status hits all three categories, going from “Something is wrong” to the detail “This error is telling me to restart my PC.”
How Statuses often line up with Information-Seeking

However, this is just a general rule of thumb: you will need to conduct user research to understand what the user’s next steps will be, especially if you are designing with more than three color statuses.

This is especially important if you’re presenting multiple statuses on a page. In that case, you have to consider how the statuses might interact with one another.

How do multiple statuses interact with one another?

Individual statuses don’t live in bubbles, and failing to think about them can have dire consequences.

Having an alert modal pop up every time there’s a critical alert sounds nice, but having six alert modals appear each time they access a page when they’re in a catastrophic scenario with multiple critical statuses does not.

Not to mention there might be interdependencies between different statuses. For example, if a server shows as offline, what do the other statuses involving that server show (if anything)?

As a result, the more statuses you intend to show, the more you have to consider if there are any other interdependencies you need to think about.

Statuses, beyond “all good,” matter

Statuses that show problems are often more critical to your users than those that show everything is okay.

In those cases, you need to anticipate what the user will do next after seeing such statuses. As a result, you can’t simply replace the color and expect things to work well. Not giving the users any clear next steps will lead to frustration.

So if you find yourself adding different statuses to support the user and their quest for glanceability, ask yourself these three questions. In this way, you’re not just providing different color badges: you’re giving them visibility into details that matter and providing the clear next steps to take.

Kai Wong is a Senior UX Designer, Design Writer, and author of the Data and Design newsletter. His new book, Data-informed UX Design, explains small changes you can make regarding data to improve your UX Design process.



Source link

Previous Post

Task-based Usability Testing – with Example Task Scenario

Next Post

Top 7 Tips For Growing A Contractor Business In 2022

Next Post

Top 7 Tips For Growing A Contractor Business In 2022

Recommended

Frutiger: from a dot to the Paris airport | by Neel Dozome | Sep, 2022

4 months ago

How AI will unlock a new dimension of marketing creativity | by Pete Sena | Dec, 2022

2 months ago

The problem with not defining problems | by Michael F. Buckley | Jan, 2023

3 weeks ago

Re-opening my weekly design mentorship sessions in 2023 | by Fabricio Teixeira | Jan, 2023

4 weeks ago

The Cleanest Zero-Clutter Page Layout for Shopping Carts

4 months ago

How Insights Help Brand Growth

1 month ago

UX-Design-(-White-)

© 2022 UX Design News Hubb All rights reserved.

Use of these names, logos, and brands does not imply endorsement unless specified. By using this site, you agree to the Privacy Policy and Terms & Conditions.

Navigate Site

  • Home
  • UX News & Trends
  • UX Mentoring & Learning
  • Contact

Newsletter Sign Up.

No Result
View All Result
  • Home
  • UX News & Trends
  • UX Mentoring & Learning
  • Contact

© 2022 UX Design News Hubb All rights reserved.