Let’s Talk UI Design: Heuristic 9, Help Users Recognize, Diagnose, and Recover From Errors

Annnnd we’re off!

Ladies and Gentlemen today we’re gonna be talking about Jakob Nielsen’s Heuristic 9:  Help users recognize, diagnose, and recover from errors.  I’ll be using Beats Music’s sign up form as the example of choice.

So, recap:

Help users recognize, diagnose, and recover from errors

Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.” 

beats

Umm….if there is an error, then the people need to know it.  Don’t over-complicate it, seriously.  Highlighting the text box with the error and saying “Oops, wrong password” is more than enough.  Or, even just highlighting the box and using an “X” if that is effective.

Beats Music smoothly used this heuristic in their login form above.

Let’s say for example a user inserts just the first part of his or her email address (sayianfred@, that’s it).  Once the user hits the sign up button the email box glows a bright red outline (excellent contrast), a bright red exclamation point appears (Recognition Rather Than Recall) followed by an off-white message stating that a valid email address is required.

That’s all that’s needed.  With this information the user quickly registers the error, checks his or her email address in the highlighted box, and effectively correct the mistake.  Flawless.

So…why’s this important?

People are not wired for reading, nor do they like being confused.  A mile-long paragraph dictating that “The inserted query did not register correctly in database 52BLAH BLAH BLAH” is useless to a user.  Above all, that’d make them feel stupid.  People do not want to feel this way.  As a designer it is up to you to answer a user’s error with only the feedback that’s necessary to recover from the error.

——User First, Designer Second——

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s