Imagine this scenario, if you will: You’re looking to ride an elevator to the fifth floor of an office building.
To accomplish this, five interactions occur:
- First, you press a button labeled “Up” located next to the elevator door. The button lights up and indicates you’ve successfully called an elevator to come get you.
- Moments later, a bell rings, announcing the elevator’s arrival. Doors open and a lighted “Up” arrow signals you’re stepping onto the correct elevator.
- Inside, you press the button labeled “5,” which lights up and assures you you’ve successfully activated the elevator.
- Confidence grows. You feel the elevator moving upward and an LED display indicates progress: the floor numbers are increasing.
- The elevator stops and the floor counter shows “5.” You’ve arrived! The doors open and you step out in confidence that you’re in the right place.
Do you see some patterns in this successful user experience? Probably, I made it fairly obvious. Imagine your journey if none of the bolded items above ever occurred.
Good UX Keeps Users from Getting Lost
What we just experienced, my dear reader, was a lesson in the foundational UX rule called “Visibility of System Status.”
Visible (and audible) signals and cues can keep you from getting lost while you seek a purpose or destination.
Sadly, for such an elementary rule of design, it’s often overlooked. The results can vary between simple frustration and chaotic misadventure, which can cost significant time and money.
What is Visibility of System Status?
Visibility of System Status is identified as the first of 10 general principles of interaction design by UX expert Jakob Nielson.
By Jakob’s definition: “Communicating the current state allows users to feel in control of the system, take appropriate actions to reach their goal, and ultimately trust the brand.”
Just like your elevator…right?
Visibility of System Status is a core component of strategic design thinking. The other nine are pretty good, but in my opinion, this is a must-have state for a successful website or mobile app experience.
Why? Because having a clear understanding or “quick read” of your environment without excessive brain strain has a tremendously positive effect on your user experience as both a user and business owner.
Simply put: You need feedback about what’s going on around you.
Websites and Mobile App Design Examples
From a design standpoint, there’s a fine line between someone successfully interacting with your online business and feeling lost, confused, and ready to bail on your website.
As a user, you should feel as though you’re in control of this journey and that things will happen as you expect them to.
Some common examples of visibility of system status:
Target
A web page displaying a pathway of links or “breadcrumbs” showing you where you are in the information architecture and potentially how you can find your way to another page level.
Target.com assists user orientation with boldly displayed breadcrumbs.
American Airlines
The progress indicator or “loading wheel” indicates a page is actively loading information after an appropriate user action is selected.
American Airlines shows users a loading wheel to alert info is being processed.
Best Buy
Menu items having a distinct color on a navigation bar that highlights the section you are currently viewing content.
Best Buy’s darkened navigational button displays the current category.
Blue Ridge
A multi-step web form displaying how many steps exist before you complete the sign-up activity.
Blue Ridge presents users with a 3-step sign-up form.
Carvana
Applied filter tags appearing each time after you narrow down product search results.
Carvana shows selected filters to remind users of the current product search field.
And the list goes on.
It’s another great example of designing with empathy. When you think like a user – maybe a new or even lost customer – and consider how the controls and indicators of your design assist your journey by communicating their current status.
Let’s Sum It Up
Visibility of System Status is an important rule for offering users a feeling of safety, comfort, and confidence.
It tells you your time won’t be wasted. You gain the reassurance that you’re in a trustworthy place to spend time and energy while looking for the information you need or the action you seek.