“Doh! %&^%&^%&!”

Another forehead-smack-worthy curse-laden moment: I’ve filled out a lengthy online form and hit the submit button only to find myself staring back at an empty form peppered with red errors. Has this happened to you? Of course it has.

While considering how much I really need to complete this form, I start making notes on how I’d design it to be a better experience. Seriously, how many date formats am I going to have to try before I get this sucker right? Do I need to phone a friend?

The lack of strong error messaging is a regular issue I encounter as both a user and UX designer. As the bearer of bad news to users, error messaging can be the element that determines whether your app gets a “Sale” or “FAIL.”

Editor’s Note: We’ll be covering UX tips and strategies at The Future of Web Design NYC on Nov 16th – 17th.

1. Error messaging is customer support

Error messaging is a critical component of customer support. Customer support teams are experts at talking to and coaching users towards conversion and success.

While QA hustles to break it down, customer support can work side-by-side to craft sensible messaging around those scenarios. The result? More sales, fewer customer calls and complaints.

Some mistakes (e.g. date formats, passwords, emails, forgotten fields) are both predictable and recurring mistakes that cannot be prevented by better design. Design the outcome to encourage the user to engage with the app’s voice, correct her mistakes, and move onwards.

2. No one ever died of humility

While it can be tempting to assume that the user is at fault when an error is made, it’s also possible that the process wasn’t clear enough in the first place.

Error messaging should be concise, friendly, and knowledgeable, but also employ humility, empathy, and apology. I personally love Firefox’s “well this is embarrassing” statement. I tend to crash my OS frequently, and it’s not FF’s fault, yet every time FF makes the assumption that I’m not at fault.

Error message in Firefox

3. Bake with cookies!

Among the most unforgiving experiences occurs when a user fills out a form and having all her data it wiped out for having forgotten or mis-typed field. If you’re not a banking institution you don’t have the luxury of abusing your user by dumping her data.

Save as much information as is possible and safe for your user (e.g. re-fill everything possible with exceptions for passwords, TOS, etc.), and then clearly mark the areas your users need to correct. Saving user data will reduce user annoyance and the chances that she’ll abandon the process.

4. Don’t cheap out

Don’t cheap out on design when it comes to error messaging. Users who hit error messages are helping your team learn how to optimize your product.

Do use this as an opportunity to build a relationship and engage with humor. You can soften the feeling with typeface and words that don’t alarm, humiliate, or annoy.

Do use resourceful and helpful iconography to reduce the amount of words.

5. Error messages are not features

As great as your app’s error messages may be, they aren’t supposed to become legacy features.

Assign a team member to study the error logs. Learn what happens when your users make mistakes and constantly optimize.

  • What fields were incorrectly filled out?
  • What did the users put in those fields or forget to put in those fields?
  • How many sessions do your users log?
  • What’s the abandonment rate?

Error messaging can be the simple tweak that influences your bottom line (conversion), so it’s worth ongoing evaluation and investment.

6. Everyone loves the funny guy

It’s easy to hide behind a great sense of humor, but it’s also easy to distract your user. Use low-key and relative humor like icanhazcheeseburger.com that doesn’t overshadow the error messaging itself.

icanhazcheezburger Error Message

7. Choose helpful over cute

Error messaging should be more helpful than cute. CushyCMS’s “Wharrgarbl” was only amusing and forgivable the first time I saw it, by the third time I was annoyed and still couldn’t figure out what the source of the problem was.

Unhelpful error messaging in cushycms

8. Go behind the browser

If you are low on resources or without customer support, integrate your error messaging within the user’s browser. This will force the user to stop and read what she’s doing incorrectly. Oddly, I’ve seen users mutter and blame the browser versus themselves or the app.

error messaging in eventbrite

9. Don’t play hide-and-seek

Bring your user directly the area where the problem is. Meetup.com has fantastic messaging, but unfortunately during the sales process, they bring the user back to the top of the page, when the error is well below the fold. This causes the user to pause and think versus correcting and moving forward.

error messaging in meetup.com

10. Don’t design single-size error messaging

One size error messaging is a bad idea. If a user has failed to put a size or choose a color of a purchase she wants to make on zappos.com, the error message should point out that specific issue versus being popped into the “Item Out of Stock” skin used elsewhere across the site (@zappos – please fix!).

error messaging on zappos.com

Error messaging occurs when a user makes a mistake (dumb user) and it’s an element of your app’s design that can keep the party going or literally result in a lost sale.

If there were one thing I’d like you to take away from this article it would be that you go back to your team and talk about and revise your error messaging, and then let me know what the results are. My prediction is that writing hero-worthy error messages will result in improvement and lift across your sign-up, sales, and data gathering processes.