How to write the perfect error message

Error messages are seemingly so innocuous but they’re actually incredibly important in ensuring good UX and keeping your end user happy. A good error message informs your customers what went wrong, why it went wrong and what they can do to resolve it. Microsoft’s Windows developer centre guidelines state the following:

 “Effective error messages inform users that a problem occurred, explain why it happened, and provide a solution so users can fix the problem. Users should either perform an action or change their behavior as the result of an error message.”

If you get that wrong, it can not only lead to frustration and low product satisfaction but in the worst cases you might lose credibility with your customers or end up being ridiculed on social media.

Although getting error messages right isn’t always easy, there are simple steps to follow to ensure you don’t leave your end users in the dark (or rolling around on the floor in fits of laughter).

Check your spelling and grammar

Accurate spelling and grammar is vital in terms of ensuring your audience understands the message you’re trying to get across. The professional quality of your external facing content also reflects the professional quality of your product and your brand.

Although spelling mistakes and typos can sometimes be quite harmless and funny, if your content lacks accuracy, you also run the risk of causing confusion. If you’re not confident about your choice of wording, ask a technical writer or content specialist for help.

Be specific

Default error messages like “There has been an error” or “An error has occurred” are really unhelpful. Don’t just tell your end users that something happened, tell them why and what they can do to fix it.

Dubbed as “the least helpful error in Windows history”, Microsoft presented users with an error message that simply stated “Something happened” when they tried to install Windows 10:

Ahh something happened…

This error message was so bad it became something of a social media meme with users ridiculing how unhelpful it was. The solution, which was revealed by someone on Reddit, was as simple as changing your language settings but the text was so ambiguous it could have remained a total mystery.

Provide the right amount of detail

If you can explain what has gone wrong, then add a description in non-technical terms so your user understands the context. It’s great to be polite but simply posting an error message saying “Sorry” or “Oops” doesn’t really help anyone.

If you’re going to “sorry”, follow it up with an explanation of what happened and offer some actionable steps so the user can resolve the problem.

Avoid jargon and developer speak

Remember that you aren’t talking to another developer. Your end user doesn’t read code or care about the internal processes involved in making your product work. Break down what’s going on in simple terms that anyone could understand.

In this example where the user was trying to create a new password, the validation error message text is overcomplicated and contains developer jargon.

It would have been much better to say something like: Please try again. Your password needs to contain both lower and upper case characters and a special character.

Another example of bad developer jargon appears in the Microsoft dev center guidelines under the heading “incomprehensible error message”:

Don’t be a robot 🤖

What’s an MM error? What’s a standard FsRtl filter? What does this 0xC00000EA code mean? This error message might explain the problem from a developer’s perspective but it leaves you with more questions than answers.

Be a human and friendly

While you’re thinking about how to avoid using jargon and writing in developer speak, it’s also good to remember to be human. Your end users don’t want to feel like they’re being spoken to by a robot. Remember to speak their language and be friendly in your messaging.

This error message from the Meta Stack Exchange site is a good example of how you can be human and friendly in your messaging:

“It’s not you, it’s us…”

Sure, it isn’t particularly specific but it is apologetic, it makes it clear the error was not your fault and informs you that the error has been recorded and someone will look at it.

Be clear and unambiguous

Ambiguity doesn’t help anyone. Presenting your users with some vague message that offers no practical information about what is going on and what they can do to solve the problem is really unhelpful.

If your error message is confusing, it has failed its primary objective. Think about what you are trying to tell the end user, how they will process that information and write it in the clearest possible terms.

If you’re unsure, get a tester or someone in a non-technical department to read the text and see if they can make sense of it.

Be concise

Users do not want to read your life story in an error message. If something has failed, an error message should be a short, concise piece of text that informs the user what went wrong and provide a potential resolution to the problem.

So much text!

Research by the American Press Institute found evidence that shorter sentences resulted in greater understanding:

  • For sentences that were 8 words or less, readers understood 100% of the information.
  • For sentences that were 14 words long, readers understood 90%.
  • For sentences that were 43 words or longer, comprehension dropped to less than 10%.

On that basis, there is an argument for keeping your sentences short. That is the recommendation of author Martin Cutts, who offers the following advice in the Oxford Guide To Plain English:

“Over the whole document, make the average sentence length 15–20 words…More people fear snakes than full stops, so they recoil when a long sentence comes hissing across the page.”

Voice and tone

Choosing the right voice and tone for your error messages is really important. You shouldn’t use an accusatory tone that makes the user feel like they’ve done something wrong or that the error is their fault:

Don’t make your user feel like a criminal!

You might want to consider ensuring the tone you use is in keeping with your brand. Slack is known for being quite playful with their messaging:

Anna Pickard, Slack’s head of brand communications, said their friendly, sometimes playful tone of the editorial copy was a vital part of supporting the product and making users feel like they’re talking to a friendly co-worker:

“It is sometimes funny, sometimes serious, sometimes just plain and informative, but throughout, it should feel like nothing more than a person, talking to another person. Human to human.”

Apple’s Human Interface guidelines advise using a friendly tone helps to avoid sounding accusatory or judgemental:

“People know that alerts notify them about problems and dangerous situations. As long as you use a friendly tone, it’s better to be negative and direct than positive and oblique.”

Add humour when appropriate

Having a sense of humour is good but it normally only works if you’re helping the end user at the same time. However, sometimes trying to funny can fall short of the mark if your error message isn’t particularly helpful:

Github’s 404 page mimicking Obi-Wan Kenobi’s famous quote from Star Wars is a nice example of combining humour and knowing their audience:

In Mailchimp’s content style guide they recommend only trying to be funny when it comes naturally and not forcing it when it’s inappropriate:

“…feel free to be funny when it’s appropriate and when it comes naturally to you. But don’t go out of your way to make a joke — forced humor can be worse than none at all. If you’re unsure, keep a straight face.”

Think about colour and design

It is important to think about the colour and design of your error messages so they are UX friendly and accessible to all of your users’ needs. Don’t choose colours for your font and background that are too similar or will be difficult for people with colour blindness to distinguish between:

Don’t use colours that clash or would be difficult for people with colour blindness to read.

Some general guidelines to follow are:

  • Avoid using font and background colours that clash.
  • Think about accessibility. Users with colour-blindness might not be able to distinguish between shades of red and green.
  • Be consistent if you are going to use colours to denote different types of alert. E.g. Green for a success message, yellow/orange for transient warnings and red for an error message.
  • Choose a font and background colour that contrast nicely.

Red is the most common choice for error messages and associated icons for a reason. In his paper about colour associations, psychology professor Dr Arlen C. Moller noted how red often conveyed negative information in everyday life and had objective connotations with danger in the form of fire and blood.

Meanwhile research on colour psychology by professor Andrew J Elliot from the University of Rochester found that people’s attention was drawn to the colour red much faster than other colours:

“In research on color and selective attention, red stimuli have been shown to receive an attentional advantage… Participants’ visual search times were faster for desaturated red (relative to several other colored) targets”

Summary

In summary, when creating your next error message remember to think about the following things:

  1. Spelling and grammar. Accuracy is important.
  2. Be specific. What happened?
  3. Provide the right amount of detail.
  4. Avoid jargon and developer speak.
  5. Be human and friendly.
  6. Be clear and unambiguous.
  7. Be concise. If in doubt, aim for 15–20 words per sentence.
  8. Choose the right voice and tone.
  9. Add humour but only when appropriate.
  10. Think about colour and design.

TL;DR —Write your error messages in concise, friendly and non-technical language that everyone can understand. Otherwise they’re pretty useless.

Resources:

  1. Microsoft Windows Dev Center guidelines on Error Messages: https://docs.microsoft.com/en-us/windows/desktop/uxguide/mess-error
  2. “Windows 10’s ‘Something Happened’ error is turning into a meme”, WIRED article: https://www.wired.co.uk/article/windows-10-something-happened-error
  3. How to make your copy more readable: Make sentences shorter: http://prsay.prsa.org/2009/01/14/how-to-make-your-copy-more-readable-make-sentences-shorter/
  4. Slack’s Editorial Soul: Anna Pickard on writing the brand experience: https://www.contagious.com/news-and-views/slacks-editorial-soul-anna-pickard-on-writing-the-brand-experience
  5. Apple’s Human Interface Guidelines on Alerts: https://developer.apple.com/design/human-interface-guidelines/macos/windows-and-views/alerts/
  6. Voice and Tone: Mailchimp Content Style Guide: https://styleguide.mailchimp.com/voice-and-tone/
  7. Basic Hue Meaning Associations: Arlen C. Moller: http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.438.157&rep=rep1&type=pdf
  8. Color and psychological functioning: a review of theoretical and empirical work: https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4383146/

UX Design: The Good, the Bad and the Ugly

The Good

One of the nicest pieces of UX design I’ve come across recently is the Monzo banking app. When a friend from university said he was part of team setting up a bank it piqued my interest, partly because it sounded so ambitious and partly because I worked in the payment industry at the time.

monzo_horz_lightbg

Founded in 2015 as Mondo before a legal dispute forced them to change the name, they are part of the new crop of so-called “challenger banks”, set up to battle the old guard of banking institutions who are losing touch with their customers, the smartphone generation in particular.

Their USP is that Monzo is built with the latest modern technology (developed in Google’s coding language Go) so is “as smart as your phone”, easy to use and is able to offer instant notifications when payments are made.

monzo-screen

spending

It’s difficult to convey how nice the UX is in a still image but the app is incredibly clean and intuitive and makes it a fun way to map your spending. As you make purchases on your Monzo card they appear instantly in your app where you can see the name of the merchant, the amount spent, as well as map location, the category that your purchase fits into (entertainment, transport, groceries etc) and it is possible to attach a receipt and a note, completed with emojis. Overall, it’s just a very pleasing app to use.

The Bad

One my tasks at work is to send out version releases and patches using a piece of software called BizWizard which is made in Sweden. I’m going to be brutally honest, the old version of the product really sucked and I dreaded using it because I had so many issues with it.

bizwizard_retina_660

For starters, it wouldn’t run on Google Chrome and would crash unless running with Edge or Firefox.  I also found that most of my time on Bizwizard seemed to be spent watching the same grey progress bar as it slowly moved from screen to screen:

bizwizard

I thought it might be related to the amount of messages being stored but it is slow to navigate between most screens, even those without much data. It just made the entire experience of using it very dull and frustrating.

I’m not going to be totally negative about Bizwizard because the latest version is a dramatic improvement and for the most part, it’s really easy to use. I just encountered one more issue that I didn’t like in the new version of the content editor, which is that when I finished writing a message, my natural inclination was to click the prominent blue Revert button at the bottom of the screen, assuming that was the Save button (See screenshot below):

bad-ux
The Revert button which tricked me into thinking it was a Save button in BizWizard.

It’s probably a result of using Confluence, where the Save button is in the button right (see below), but as a result of clicking Revert my text was wiped with no way to undo or get it back. Very frustrating as a first time user of the new version.

confluence
The Save button in Atlassian Confluence.

I suppose I can’t be too hard on BizWizard for creating a button in a similar style and position to Confluence but it shouldn’t have so much prominence because it is a more natural place for a Save button. I’ve sent my feedback to them so it’s up to them whether they change it or not.

The Ugly

Linkedin is actually an app I use quite a lot and occasionally use to share my blog posts but unfortunately there are quite a few things I don’t like about it and the overall experience.

linkedin

Apart from the feeling that the “professional network” is striving to turn itself into Facebook and forever tries to force connections on you, there are other things that annoy me and just make it an unpleasant and sometimes annoying user experience.

Take the homepage for example, there is just so much going on. It’s just a bit of an information overload and makes me want to close it down. See screenshot below:

linkedin-2

There are so many things that demand your attention here in my opinion, with the orange warning bar about emails at the top, the yellow button begging to be pressed so I can reconnect with colleagues (not today thanks), blue links encouraging me to improve my profile and grow my network, an advert asking me to try Hired today, and a tab informing me I have one new update (and that’s having already read my notifications). It’s just far too much, like a needy kid screaming for attention, a lot of it just unnecessary and off-putting. It ruins the user experience.

In contrast, the smartphone app version is actually really nice to use and much cleaner than the web version. It’s a much more enjoyable user experience with a nicely designed UI and much less information to deal with. See screen below:

linkedin23

The only negative is the red notifications are often unclear so I don’t always know what I’m getting notifications for and there still seems to be an ongoing issue with messages/emails,  for example receiving and sending duplicates of the same message.

As a technical author I do find myself looking at software and applications through the eyes of a first time user/ tester so I’m maybe I’m being harsh with my criticism but development teams should always consider the user, their experience and how they would expect or like your product to work. If your product doesn’t work how they would expect it to, if they find it difficult to navigate or if they find the overall experience annoying or frustrating then they are unlikely to want to use it again and that’s bad news for business.

Please note: User experience is always going to be subjective so some people may agree or disagree with me about these examples. It goes without saying that all of the opinions above are my own and not those of my employer!

Snapchat’s UX: A Confusing Mess?

Snapchat might be the image messaging app of choice for today’s teenagers, with 10 billion daily users, but in my opinion the UX and interface design is a confusing mess and others seems to agree (‘Why is Snapchat’s UI so bad?’, ‘The Generation Gap of Snapchat’, and ‘Snapchat Built to Be Bad‘ are just some of the top hits when you search “Snapchat UX” in Google).

It’s frustrating but even as a fairly technical 31-year-old who has mastered the likes of WordPress and Twitter, I don’t think I’ve ever found  an app that is so un-intuitive. It seems the only way to learn how it works are by reading the various on-board prompts or through trial and error.

iphone-160307_960_7201

Take the home screen for example, my biggest issue for new users is that the majority of the icons are not universal. I’ve circled the icons I believe are fairly universal in green and highlighted uncommon/unknown icons in red:

iphone-160307_960_720

So of the seven icons/functions, only three (camera rotation, messages and take a photo) are obvious, the others are all ambiguous. Snapchat actually tells me that the ghost icon is where my contacts and settings ‘live’ through a bit of on-boarding but as for the small circle at the bottom and the dots in the bottom right, I’d have no idea unless I clicked them. Even the ‘flash’ icon in the top right isn’t the standard lightning bolt flash that you would expect to see on most cameras. Why make it ambiguous? It seems totally illogical but is it intentional?

The "stories" screen gave me a headache but that's another story...
The “stories” screen gave me a headache but that’s another story…

There are several theories to why it has been so successful despite having this seemingly un-user friendly design. One theory is the bad UX is intentional. By making it difficult for new or older users, its difficult for parents to look up posts by their children and their teenage friends without knowing their screen name. As a result posts remain personal. This theory was in part confirmed by CEO Evan Spiegel: “We’ve made it very hard for parents to embarrass their children. It’s much more for sharing personal moments than it is about this public display.” Similarly Amin Todai from Canadian creative design agency One Method wrote a blog post likening it to creating a new language that only under 30s could hear: “By virtue of it having an incomprehensible user interface, Snapchat has essentially created a new language that only people under the age of thirty can hear. Like a dog whistle for teens, except with more pictures of dicks and boobs.”

“Snapchat has essentially created a new language that only people under the age of thirty can hear. Like a dog whistle for teens, except with more pictures of dicks and boobs” – Admin Todai

That last comment brings me to the other reason that teenagers and others have flocked to Snapchat despite the poor UX/UI: dicks and boobs – the pornography aspect. It became an instant guarantee of seeing up to 10 seconds of nudity, whether it be horny teenagers wanting to see their love interests naked or glamour models sharing their goods, ultimately sex sells and Snapchat was offering it up , whether intentionally or not, to millions for free. In the same way that pornography is addictive, so is celebrity and there are a huge number of celebrities on the site, all offering instant snippets of their lives for all to see. The Kardashians, the Jenners, Justin Bieber, the Jonas brothers, are just some of the celebrity users who appeal to the teenage  and young adult Snapchat audience.

biebs.jpg
Snapchat users like Justin Bieber attract a younger audience.

The other theory is that Snapchat is basically more about fun than function and that is what gets people using it. Irrespective of how awful the UX is, youngsters will keep coming back because they find it fun to use, to share moments and stories, and to mess about with the different effects, filters and lenses to make funny photos and videos. Ultimately, I think all three of these theories have had some part to play in Snapchat’s success and there is clearly a generation gap in play here but maybe that’s the point, its popularity is down to it not being popular with my generation because we were never its target audience, it was always intended to be more fun for the younger generation it resonates with.

The Role of Text in UX

As software and apps become more user-friendly and commonly-used icons become universally understood, there is a growing tendency to scrap text.

Microsoft experimented with the minimalist icons-over-text approach in their release of Outlook 1997. As you can see from the toolbar, they left out the text descriptions and as a result non-experienced Outlook users apparently stopped using the toolbar altogether:

2016-07-06 16_01_02-ToolbarCompare-11-1-2005.png (590×113)
Microsoft Outlook 1997
Several designs later, with Outlook 2000, they had a rethink and text was added back in:

2016-07-06 16_06_09-outlook01.gif (768×537)
Microsoft Outlook 2000
While more recent designs are less icon-assisted and text has even clearer prominence:

2016-07-06 16_09_20-Inbox - james.scott@hoistgroup.com - Outlook.jpg
Microsoft Outlook 2013

Digital designer Thomas Byttebier makes some excellent points about the importance of using text in his blog here, with the concluding statement being “when in doubt, the best icon is a text label.” He lists a number of extremely popular apps and sites where icons are pretty ambiguous. Take Instagram and Spotify for example. Are people aware of what this icon actually does?

2016-07-06 17_13_37-Start

2016-07-06 17_12_09-Spotify

In both cases this in-tray icon is for accessing your inbox and sending direct messages but I think the messaging feature is clearly overlooked in both applications. When I asked friends who have been using the applications for several years whether they were aware of the messaging feature they just looked at me blankly. One said “Oh, that bikini thing”, the other thought it was a basket. So there’s clearly a lack of clarity over the  purpose of the icon but whether that’s due to the ambiguous design or a lack of need, I’m not sure. It’s probably a bit of both.

Twitter have also had some issues with ambiguous and non-universal icons, often presuming that users will just intuitively understand what the icons do and sometimes getting it wrong. As a result Twitter’s user growth has actually slowed as new users that are attracted to the site often have a hard time catching on to how it works.

pict--iphone-screen-template---messages--messages---templatepict--iphone-screen-template---messages--messages---template2

The arrow icon for ‘Reply’, the envelope icon for ‘Message’ and the ellipsis (three dots) ‘More Options’ icon are recognisable but the heart icon for ‘Like’ will only be familiar with people who have used Instagram and other social media. A new user is unlikely to know what the ‘Retweet’ icon does unless they are familiar with Twitter’s basic concepts. It is interesting to note that Twitter have added text labels to the bottom five icons (highlighted in green in the image above) because other than perhaps ‘Messages’ their function is not obvious to the user.

While documentation is sometimes seen as an afterthought in the development process, in my opinion the text and written content is an inherent part of user experience for all software, no matter how intuitive the UI designer thinks his icons are or user-friendly the product is. If you want to avoid ambiguity, text will always be the best way to get the message across to the user.