When things go wrong…

A presentation at The Craft of Words · Workshop in May 2019 in by Christopher Murphy

Slide 1

Slide 1

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

—Christopher Murphy, @fehler

Slide 2

Slide 2

Write for clarity and helpfulness.

Slide 3

Slide 3

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.

Slide 4

Slide 4

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

Slide 5

Slide 5

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

Slide 6

Slide 6

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.

Slide 7

Slide 7

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

Slide 8

Slide 8

bit.ly/dit-report

Slide 9

Slide 9

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).

Slide 10

Slide 10

Adobe XD

Slide 11

Slide 11

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

Slide 12

Slide 12

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

Slide 13

Slide 13

Clicking the link takes me to this page.

Slide 14

Slide 14

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

Slide 15

Slide 15

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.

Slide 16

Slide 16

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

Slide 17

Slide 17

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

Slide 18

Slide 18

Squarespace

Slide 19

Slide 19

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

Slide 20

Slide 20

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

Slide 21

Slide 21

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

Slide 22

Slide 22

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

Slide 23

Slide 23

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

Slide 24

Slide 24

However, we could do more…

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

Slide 25

Slide 25

When things go wrong… delight.

Slide 26

Slide 26

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.

Slide 27

Slide 27

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.

Slide 28

Slide 28

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

Slide 29

Slide 29

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

Slide 30

Slide 30

Macrocopy and Microcopy

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

Slide 31

Slide 31

Words help define your brand.

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

Slide 32

Slide 32

Words help in interface components.

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

Slide 33

Slide 33

Other helpful resources…

Slide 34

Slide 34

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

Slide 35

Slide 35

styleguide.mailchimp.com

Slide 36

Slide 36

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

Slide 37

Slide 37

gumroad.com/standardistas

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

Slide 38

Slide 38

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

Slide 39

Slide 39

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