A presentation at The Craft of Words · Workshop by Mr Murphy
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…
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…
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…
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
Words help define your brand.
Words help in interface components.
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.
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 and, as a result, lead to happier users and happier clients.
In this short presentation, I explore the importance of writing helpful error messages. A part of my full day workshop on ‘The Craft of Words’ – which focuses on the importance of words in UX and UI design – this is the first of a series of workshop components I’ll be publishing in 2019.
The following resources were mentioned during the presentation or are useful additional information.
Look carefully and you’ll notice that many of the most successful designs are built around words. Apple tantalises us with the ability to hold, “thousands of songs in your pocket.” MailChimp has created a wonderfully engaging brand, heavily focused around language.
Almost every interaction you make – whether online or offline – involves words. Words can help, words can hinder. As a designer you owe it to yourself, and your clients, to learn about the power of words. Writing should be a part of every designer’s toolbox and learning to work with words will help you to improve as a designer. These two short books teach you how words can transform your design and delight your users.
MailChimp’s Content Style Guide is an excellent guide to writing well and writing for humans.
for free. You
can too.