Bad stuff happens to good designers. But rather than unpacking the near endless challenges you face, this article is focused on the value good design has in these situations.
So what do I mean by bad stuff? I mean errors.
Or, specifically,”the moment a human experiences an unexpected error while using your product”.
Related: Are these friction points lurking in your app?
We dread this moment. Yet it can and does happen. When it does, all we’re left with is the opportunity to do something about it.
“Error states are an opportunity to communicate transparently and coherently.”
To give us a view of our options, let’s quickly unpack some of the most common errors the humans using our products might come up against.
HTTP errors
After a little analysis using Google Trends, Pingdom was able to define the 5 most common HTTP errors. In descending order, these were:
- 5. HTTP ERROR 401 (UNAUTHORIZED)
- 4. HTTP ERROR 400 (BAD REQUEST)
- 3. HTTP ERROR 403 (FORBIDDEN)
- 2. HTTP ERROR 404 (NOT FOUND)
- 1. HTTP ERROR 500 (INTERNAL SERVER ERROR)
Although 404 didn’t win the race, it’s become the poster child of error states. Time and time again we’ve seen examples of great 404 error page design. Design School even put together 50 tips with supporting examples.
In reality, HTTP errors will often result in frustration. Yet error states are an opportunity to:
- Introduce humor (if it aligns to your brand and the context of use)
- Communicate transparently and coherently
- Do something unique, and ultimately
- Drive a follow on action
The proxy for the success of an error state is whether it leads to a high percentage of people taking a follow on action.
Here’s a 500 error from Airbnb I experienced recently:
Interestingly the focus CTAs here are high cost to the business. They rely on a human answering a support call. I was surprised there wasn’t an immediate, self-serve option for me to continue. I would have expected this to be the clear focus. This was what I really wanted.
I’m sure there was a specific outcome this design intended to achieve. I can’t tell you how this performed—your guess is as good as mine. Instead, I’ll give you some stats from our own research.
Starting out using InVision, >X has tried and tested a number of variations for our own site. We focused on the poster child, 404. This process helped us turn an error into something that created a conversation with visitors.
“The biggest error of them all? designing something no one cares about.”
We introduced the Venn of 404 Probable Cause to make fun of a widely used and well known visual. We introduced 3 CTAs, not to create decision fatigue, but to answer the 3 most common questions people ask us online or face to face.
Attitudinally, people responded extremely positively to this experience. In fact, we measured value, meaning, and engagement during the usability tests. Turns out this was one of the highest performing pages.
The data to support
- About 75% of participants engaged in 1 of the 3 colored CTAs
- 20% preferred to use the top navigation, and
- 5% decided they’d had enough
We’re in the process of refining this further. Our objective is to achieve similar or better follow on action, but decrease the average time to take the action. Right now the amount of information presented extends the decision time unnecessarily.
To summarize, HTTP errors happen. When they do, give the human experiencing the error a reason to stay with you.
So what about native apps, loging in, form filling, and payments?
When bad stuff happens everywhere else
The unexpected can happen almost anywhere. Thankfully people like Nick Babich have written about this in depth. His article for Smashing Magazine, “How to Design Error States for Mobile Apps,” is well worth a read.
Before continuing, there are 2 considerations from Nick’s article worth highlighting:
- Prevention
- Context (i.e right thing, right place, right time)
Prevention is all about understanding the outcome a given interaction enables. Once this is understood, support and designed constraints can assist with error prevention.
Here’s an experience you might consider to be low efficacy. It’s low efficacy because it allows a user to select past dates. Unless this company offers a time machine as part of their value proposition, this error could be avoided through more effective design.
And here’s an example that doesn’t support time travel. The visual constraint you’ll notice is the grey covering past dates. This forces action aligned to the outcome the interaction should enable—booking something in the future.
Context is all about surfacing an effective error message in the right place and at the right time.
“Constantly re-evaluate the efficacy of your value proposition.”
In the example below, the nature of the design on the right actually supports the person entering their credit card details. It helps them achieve their desired outcome more quickly.
Just remember, people hire your product or service for a higher purpose. Entering their card details is something they have to do. It’s a means to an end. Your job is to get them to that end as seamlessly as possible.
Image credit: ThinkwithGoogle.
For further insights, check out Google’s Material Design error guidelines.
So where am I actually going with all of this?
The biggest error of them all
The biggest error of them all is designing something no one cares about.
This happens all too often. Unlike some of the errors above, this is completely preventable.
I wrote about value proposition design recently. This is the process of actively discovering, designing, and validating a value proposition that people care about—a value proposition people will pay for.
Related: What’s your value proposition?
This is critical to the design process. It’s also fluid. So don’t think you can set it and forget it. People and their perceptions evolve, as does the competitive landscape. Make sure you’re constantly re-evaluating the efficacy of your value proposition.
I’ll leave you with this: In UX, and everywhere else for that matter, bad stuff happens. If it’s something as simple as a 404 not found error, you can turn it into an opportunity. If you do this well, you’ll likely drive a positive follow on action. You may even start a valuable conversation.
But if your error is that no one cares about what you’re designing, then “bad stuff happens” doesn’t even come close to cutting it. Get out of the building and start learning. You may still have time.
More posts about UX design
by Nathan Kinch
I'm the founding partner of >X , a research, design and strategy agency at the forefront of the personal data economy.
