When things go wrong…

When things go wrong… Christopher Murphy explores the importance of writing helpful error messages.

—Christopher Murphy, @fehler

Write for clarity and helpfulness.

Writing should be a part of every designer’s toolbox. Words are an interface component. Learning to work with words will help you to improve as a designer.

John Maeda highlights the importance of writing in his 2017 Design in Tech Report.

Fast Company’s Katherine Schwab highlights the value of writing in the design process asserting, “Forget coding: writing is design’s unicorn skill.”

Users depend on copy to interact with apps and other products. If designers don’t know how to write well, the final product – be it a physical or digital one – can suffer as a result.

Code is not the only unicorn skill, writing is a unicorn skill, too.

bit.ly/dit-report

Words can – and should – be helpful…

• Software is fragile. When things break, use easily understandable error messages.
• Communicate clearly when things go wrong (and say you’re sorry).

Adobe XD

This error message isn’t very helpful. It’s written in ‘programmerspeak’.

This error message isn’t very helpful. It’s written in ‘programmerspeak’.

Clicking the link takes me to this page.

There’s helpful content we could use on this help page to improve the error message.

Write a better error message…

• This is dry debugger language: ‘Error code: 3623’
  • Say sorry.
  • Tell me what went wrong and tell me what to do to fix this.
  • Save me clicking through.

Here’s another XD error message. It’s better, but we could use the space in the dialog to provide a suggested solution.

Here’s the error message re-written based upon the help page content. (Notice the link’s still there, it’s just humanised.)

Squarespace

Here I typed ‘//‘ (two slashes) by accident after the web address. An easy mistake to make. (2018 Screenshot)

Again, this is written for programmers (to help debugging), not for humans.

This is slightly more helpful although most humans won’t know what ‘404 Not Found’ means. (2019 Screenshot)

The useful debugging content is kept, but it’s de-emphasised at the base of the page. This is much better.

Here’s the content re-written so that it makes sense to everyday humans.

However, we could do more…

• Provide some suggested links.
• Add a search box.

When things go wrong… delight.

When things go wrong you have an opportunity to turn frustration into delight. Just because something breaks doesn’t mean you can’t rescue the situation with empathy.

Pixar’s 404 page shows character, as you’d expect. It also provides links to the site’s navigation so you can get back on track.

Medium’s 404 page enables you to search Medium or, if you prefer, read a story about getting lost (a nice touch).

Airbnb’s 404 page features a delightful animation of an unfortunate girl dropping her ice-cream on the floor. Oh dear!

Macrocopy and Microcopy

• Macrocopy establishes the tone, microcopy satisfies functional requirements.
• Consider both, they’re equally important.

Words help define your brand.

• Improving macrocopy leads to clearer brand messaging, which underpins your communication.

Words help in interface components.

• Improving microcopy leads to a better experience and can rescue a situation when things go wrong.

Other helpful resources…

MailChimp’s Content Style Guide is an excellent guide to writing well and writing for humans.

styleguide.mailchimp.com

I also co-wrote these two books for Five Simple Steps on the topic of words as a critical design component.

gumroad.com/standardistas

Get both books for the price of one with discount code ‘onefree’, for less than the price of a coffee.

If you found this deck useful, follow me on Twitter: @fehler. I’m in the process of breaking down 15+ years of workshop content into small, easily consumable components. I’ll be tweeting as I’ve finished and shared these components. Cheers!

—Christopher Murphy, @fehler

On Twitter, Instagram and Dribble I’m @fehler.