The Perfect Apology: Redesigning Error Pages

Maria Alejandro Yepes reached out and kindly translated this into Spanish, have a read here!

Mistakes are a part of life and you shouldn’t avoid making them. Instead, embrace them, they’re a chance for us to grow and be better. The way you respond to a mistake affects the eventual outcome of a situation.

In the same vicinity, the way that your website responds to a mistake can affect the outcome of a user’s journey. A negative response could push a user to click the dreaded back arrow and leave your site.. & probably never return. Whilst a positive response could turn a moment of annoyance into a moment of delight, smooothing out the friction.

Error pages are opportunities to respond to a mistake. It could be a user mistake, like a typo in the address bar. Sometimes, they’re no one’s fault, a user could’ve stumbled across a dead link in a search engine. Or at worst, a 404 could pop up through a mistake of your own.. for example, a dead link on your site.

Similar to, when someone spills a drink on your favourite shirt or even when a stranger steps on your foot on the train. Moving forward starts with an apology. Something’s gone wrong and it’s awkward. But, what happens next is key to any future relationship between both parties.

In a perfect world, a good apology looks like this:

Regret + Responsibility + Remedy

Regret

This is the perfect foundation. It shows the other person that you’re empathetic towards them. The word ‘sorry’ is a good start but there are plenty of ways to give a good apology without it. The key thing is acknowledging that something’s gone wrong.

Responsibility

Accepting responsibility takes away the awkwardness of establishing who did what. It lets you take control of the situation and move on to making things right.

Remedy

The icing on top of the cake. Whilst there’s nothing you can do about the past, offering some sort of resolution is your chance to repair the harm done. Think of it as a call to action that lets you both skip off, happily into the sunset.

In reality, an error page should be no different to an in-person apology, it’s still human to human communication. However, A traditional 404 response can easily persuade users that they’re talking to a robot. (Remember the computer in Dexter’s Laboratory?).

This misconception is dangerous because faceless machines don’t evoke emotions. And without emotions tied to a situation, it’s easier for a user to leave a website without a second thought.

If you were to structure your 404 page as a good apology, it would remind the user that you’re a human, just like them. Thus, leading to a more positive outcome — them forgiving you for their own mistake and happily continuing their journey on your website (~˘▾˘)~

I (unofficially) redesigned a few 404 pages that could do with becoming more apologetic.

BBC News

As great as the BBC is, their error page is less so. There’s a real lack of responsibility in their apology — by using the word ‘we’ and explaining why the error could be the BBC’s fault, I’ve reinstated this. I haven’t strayed from the BBC’s brand voice whilst cutting down the masses of information they originally had. I’ve also introduced a visual hierarchy to make the call to actions clearer. A search button is a better remedy than multiple links because the user can find what they were originally looking for.

Flickr

There’s actually nothing wrong with their error page, it’s just that it doesn’t show the user how amazing Flickr actually is. I assume that most Flickr users would be individuals that appreciate good visuals, so why not tap into this? I’ve introduced a hero image that features the work of an existing user, this is a clickable link and would hopefully distract the user from the fact they’ve hit an error page.

Clarks

The classic 404 page that I’m sure no one has actually ever read. I’ve opted for a straightforward approach that’s in line with their existing branding. As a ‘remedy’, I’ve introduced a call to action that displays the great shoes they sell.

Skyscanner

90% of the information transmitted to the brain is visual. Images on travel websites are a chance to connect with a user’s emotions, I’ve purposely selected an image that catches a user’s attention in an attempt to evoke a FoMO type of emotion. I’ve played around with the conversational voice of Skyscanner and used their ‘remedy’ as a cheeky opportunity to sell their flight deals.

Takeaways

  • Error pages are a chance to remind your users that you’re human.
  • An apology is a perfect opportunity to demonstrate this.
  • Always provide a resolution, it’s the icing on top of the cake.

I hope you’ve enjoyed reading my thoughts.

I’d love to hear yours.

Share your thoughts by tweeting me.