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.” 

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——

Advertisement

Check this Out: 13 Tenets of User Experience

Alright guys I found this pretty interesting.

Check out this post about the 13 tenets of User Experience

This post dishes out some interesting info by UX Professional  Robert Hoekman.  He writes about 13 tenets he’s come up with in the last 13 years!

Seriously, it’s awesome!

Go Check These Out! Some Posts on Usability Testing and Usability Inspection

Guys and Gals, I’d like you to go check out my friend Kavin’s blog on Usability Testing Metrics.  I thought this was a great blog to keep in your arsenal just in case you forget what kind of information you’re trying to gather from Usability Testing.

Alternatively, if you wanna evaluate your interface yourself or gather some more useful data first then check out my bud Josh Sarver’s post on Cognitive Walkthrough, Streamlined Cognitive Walkthrough, and Focus Groups.  This single post can give you an awesome rundown of each method.

Let’s Talk UI Design: Heuristic 8, Aesthetic and Minimalist Design

Alright ladies and gentlemen I’ll be on a roll today!  We’re gonna dive into Jakob Nielsen‘s 8th heuristic, Aesthetic and Minimalist Design.  For this post, I’ll be using the new Google Accounts Manager.

OK, so recap:

Aesthetic and minimalist design

“Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. “

Guys and gals, keep it simple.  Don’t feed users more info than they need…meaning DON’T GIVE A HUGE PARAGRAPH EXPLANATION IF IT’S NOT NEEDED.  In fact, if you don’t need to explain it because it’s intuitive then don’t explain it!  Saying “Create an Account” on a button is a good example.

In this blurb I spoke about the old Google Mail sign in (which was well done!).  Let’s take a look at the new Google Accounts:

“What?  That’s it? Just a box, a few links, and some icons? Where’s the pizazz?”

Yes that’s it! Google expertly designed this page to maximize its use and minimize the useless clutter.  Within a few seconds I registered exactly what this page was (Google account login), what it was for (logging in to Google Accounts), what I could do(Login, create a new account, ask for help), and what it affected (Google, Gmail, Drive, YouTube, Maps, Play, +).   The most important item is emphasized in middle of the empty white like a full moon in a cloudless sky:  The sign in box.  Everything here is needed, with the absence of the clutter!

So, the importance?

“But what about all the cool things and the explanat-”

NO!  BAD!

That’s just distracting to users!  Users access an interface with a goal in mind.  They are there for a reason.  As a designer, it’s important that you understand that users have their goals set in mind and that you need to understand those goals.  A user wants a new email in Gmail, so what does he do?  He clicks on create an account!  He doesn’t need a paragraph long essay of how Gmail may work, nor does he need the coolest flip function when he clicks the link.  He just wants to make an account.  Even the coolest design or most well-elaborated explanation is utterly useless if a user can’t reach his or her goal.

 

——User First, Designer Second——

Let’s Talk UI Design: Heuristic 7, Flexibility and Efficiency of Use

IT. IS  COLD.

Just thought I’d get that off the chest here.  Hello again everyone!  Today we shall be discussing the seventh heuristic in Jakob Nielsen‘s 10 Heuristics of User Interface Design:  Flexibility and Efficiency of Use.  So this time I’ll be using Facebook as an example.

Ok, so to recap:

Flexibility and efficiency of use

“Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. “

Some people have more experience than others.  Allow shortcuts in your design for these people, because they know what they need and how to get to it.  Facebook keeping you logged in, or even messaging a friend on Facebook are two good examples.

Now as much as I have with Facebook, this heuristic was excellently put into play.  On your personal profile page, Facebook provides a Friends tab where you can find your friends and do whatever you need (checking profile, shooting a message).  It’s an excellent tool, one that Facebook really thrives off of.  OK, so let’s say I just wanted to send a friend a message.  Instead of diving in click after click to find my friend in the Friend’s tab I could use this nice right panel Facebook has so nicely provided for me that takes one, maybe two clicks.

This is a perfect tool for me, as I am a seasoned Facebook user who really only comes to Facebook for one or two items.  Now, for those who have different goals than I do may use the Friends Tab, but for me who is a user focused on what I need I have the flexibility to choose.

Alright, so importance?

Users are different.  Some users are savvy with an interface, some are not.  Some users have one set of goals, others have a different set.  As a designer, it’s important that you understand that inside your target audience will lie users of these categories.  You cannot design something for everyone, but you can design something effectively for users in your target audience on both sides of the spectrum.

 

——User First, Designer Second——