{"id":14838,"date":"2018-05-08T11:04:24","date_gmt":"2018-05-08T10:04:24","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=14838"},"modified":"2018-06-16T14:17:56","modified_gmt":"2018-06-16T13:17:56","slug":"art-error-message","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/art-error-message\/","title":{"rendered":"The Art of the Error\u00a0Message"},"content":{"rendered":"

Error messages should point toward a solution, not act as a band-aid.<\/p>\n

The concept of \u201cembracing failure\u201d is big in the tech industry. Fail fast, fail often!<\/em> is almost an industry mantra. <\/em>But there\u2019s an everyday type of failure that doesn\u2019t get much attention in the product development process.<\/p>\n

That\u2019s right. The humble error message.<\/p>\n

Why error messages\u00a0matter<\/h2>\n

We\u2019ve probably all seen an \u201cincorrect password\u201d error once in a while (or, um, daily). While it can be frustrating when things don\u2019t work as expected, we usually just brush it off, no big deal. But what\u2019s the cumulative effect of these small moments?<\/p>\n

Each error message is a tiny roadblock that gets in the way of what we were trying to do. Depending on the context, an unhelpful message can be the difference between continuing or giving up. There\u2019s even some research to suggest that there\u2019s a physical stress response: error messages can raise cortisol levels<\/a>.<\/p>\n

Just think of the difference between seeing something like this:<\/p>\n

\"\"<\/a>

Needs work<\/p><\/div>\n

And seeing something more actionable, like this:<\/p>\n

\"\"<\/a>

Better!<\/p><\/div>\n

So what can design teams\u00a0do?<\/h2>\n

If you\u2019re a writer, designer, or developer working on an app, you can help reduce your users\u2019 frustration by being more thoughtful about the errors you display.<\/p>\n

To start, ask yourself if you even need<\/em> the error message. <\/strong>Before writing anything, consider if there\u2019s a way to redesign the experience so there\u2019s no error at all. Is there a way to just make it work? (Really, the best error message is no error message.)<\/p>\n

But if you do need it, think carefully about the message. <\/strong>When things go wrong and the app \u201cfails,\u201d say something useful. The message should help the user solve the problem and move on.<\/p>\n

Tips for writing helpful error\u00a0messages<\/h2>\n

If you can\u2019t fix the underlying issue and need to show an error message, here are some things to keep in mind.<\/p>\n

1. Say what happened and\u00a0why<\/h2>\n

A lot of error messages are vague. Really vague. When possible, be clear about what\u2019s going on. Give the right amount of detail, but don\u2019t get too technical. Write in a way that anyone could easily understand. Ahem. That means no<\/em> jargon.<\/p>\n

Imagine you see an ad about oh, say, Spotify Premium, and you click on the link to start a free trial. Then, you land on a page and see something like this:<\/p>\n

\"\"<\/a>

Needs work<\/p><\/div>\n

It\u2019s not clear why <\/em>you\u2019re ineligible, especially since you just got an email saying, \u201cHey, get this thing.\u201d What\u2019s the deal?<\/p>\n

In this case, it\u2019s important to tell the user what happened (they\u2019re ineligible) and why (they signed up for a free trial before).<\/p>\n

\"\"<\/a>

Better!<\/p><\/div>\n

And yes, this message did get longer \u2014 but sometimes we need to add<\/em> information to make it useful.<\/p>\n

2. Suggest a next\u00a0step<\/h2>\n

After you say what happened, tell the user what they can do to resolve the issue: include a button, link, or other type of call to action. And write a clear headline that gets the point across quickly.<\/p>\n

Imagine you want to look for some new podcasts. You fire up the app, and see an error message that says:<\/p>\n

\"\"<\/a>

Needs work<\/p><\/div>\n

This tells you that something went wrong, but it doesn\u2019t suggest a next step. It\u2019s better to include a clear headline (App is out of date) and call to action (the download button).<\/p>\n

\"\"<\/a>

Better!<\/p><\/div>\n

3. Find the right\u00a0tone<\/h2>\n

As UX writers, we want to convey the right information at the right time. But it\u2019s not only about what we say, it\u2019s how <\/em>we say it. When it comes to tone, we try to find the right balance, or as we say in Sweden, lagom<\/em><\/a>.<\/p>\n

Tone refers to the character, or the attitude of the language. Within the same brand voice, your writing can take on a different tone depending on the situation. It can be more serious, or neutral, or friendly\u2014it all depends on who you\u2019re writing for, and what you\u2019re writing about. You vary your tone constantly\u2014just think about the way you talk to your friends, your parents, or your boss.<\/p>\n

OK. So how do you choose the right tone? You can start by asking yourself:<\/p>\n