Let’s Talk UI Design: The Final Heuristic, Help and Documentation

Ladies and Gentlemen thank you for reaching this final stage of the Heuristic Series.  Up until this point I hope all the information I’ve shared with you will aid all of your future endeavors.  Today we’ll be discussing Jakob Nielsen’s 10th heuristic, Help and Documentation.  For this post I’ll just be using a generic created example.

Alright, quick recap:

Help and documentation

Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.”

question  

Alright if it’s needed, provide some help.  DO IT ONLY IF IT’S NEEDED THOUGH.  Make it to where it’s easy to find, and of course relatable.  Putting a “?” Bubble next to a search box is an example.

Alright, so let’s for example say you will place a search box in a location where (after rigorous User Research and Data analyzing) you know that this is the optimal place to put it for users to know what it’s for.  Knowing this, you also know that some error can still occur.  So you include next to the search box a help button (Recognition rather than recall in use above!) that, when rolled over or hit, will pop up a little tidbit on what the box is for.

So what’s the importance of this?

We as designers cannot stop every single issue that pops up.  Sometimes when we do something for our main target audience we register that this can still cause some issues with another target audience.  Even if we compromise, sometimes there will still be errors.  So when it’s necessary yes, do add a little help and documentation. It might just go a long way. Ah…and emphasis on little.

 

——User First, Designer Second——

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

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

facebook

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

LET’S TALK UI DESIGN: HEURISTIC 6, Recognition Rather than Recall

Good evening ladies and gents!  Today I’ll be delving into Jakob Nielsen‘s Heuristic 6, Recognition Rather that Recall.  Now, this one is REALLY important (I mean they all are), so I want you to pay attention to this one.  I’ll be using an example I used before: Amazon Shopping Cart.

Let’s recap:

Recognition rather than recall

Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.” 

amazonBar

REMEMBER THIS ONE.  REALLY.  People do not like to read.  So…don’t force them to. People can recognize certain symbols simply because that’s what they’ve learned.  Using a house symbol as “Home” or using a Cart symbol as “Cart” for example. A progress bar’s position is another example.

Amazon exceeds expectations well with their checkout process bar.  The long orange bar above the steps with a black cart at end signifies how far you have come in the entire process and where you are now.  The slightly lighter steps (sign in, shipping & payment, gift options) show what have been completed up to this point.  The darker step (along with the cart) displays your position in the checkout process.  Even just the cart icon displays your place in the entire website (e.g. checkout process).  Excellent usage of this heuristic.

Alright, so why is this important?

Ladies and gentlemen, People do not like to read, and recognition is easier than recall.  Think about this for a sec:  reading “View Cart” on a button takes time to go into your head, processing, then an understanding to occur.  That’s a four step process.  That’s hard.  If there is simply an icon of a cart, that registers in a person’s mind as “cart” and immediate understanding occurs.  One to two step process.  See the difference?

Don’t make recognizing something inside an interface harder than recalling what it could mean.  As a designer, you need to create something that comes second nature to a user, or easily taught.

——User First, Designer Second——

Let’s Talk UI Design: Heuristic 5, Error Prevention

Well hello there everyone!  Today is a beautiful day to post a blog on Heuristic 5 in Jakob Nielsen‘s Heuristics, Error Prevention.  I’ll be going more into the example from my overview post.  Alright, let’s get started!

So, quick recap:

Error prevention

 Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.”

Alright, if you can create a design that pushes for no errors, then that would be epic and very good.  Shoot for that.  Otherwise, if an error does occur, THEN REALLY ASK A USER IF THEY WANT TO DO THAT. For example, accidentally selecting “Delete” instead of rename in Dropbox.

Ladies and gentlemen, I chose Dropbox as a prime example of this heuristic.  Dropbox executes well on two ends of this heuristic:  careful design and error confirmation.

dropbox2

The overall page itself presents to you exactly as is:  file storage.  The design is pretty simplistic and clean.  One can easily contrast which file is being hovered over and what file type each file is.  The spacing around each file is padded enough to avoid clicking on the wrong item.  Excellent use of space!

Now…for the error confirmation….

dropbox

Ok, let’s say upon going through the list of options over a specific file (e.g. share, download, copy)  you move a bit too quickly and accidentally hit delete.  Think about that for a second:  what if you deleted that 4 month project you just finished?

Dropbox seamlessly acquits that fear.  Upon an accidental click, a user is prompted with the message above “Are you sure you want to delete…”.  The message is titled with a red remove mark (aha…recognition rather than recall) and in big bold letters “Delete file?”.  Popups can be pretty annoying, but using one in this case is expertly done, as this is a “HEY, LOOK WHAT YOU’RE ABOUT TO DO” situation.

So, the big importance?

People do not like to think, and are prone to errors.  Again, people make mistakes as they are performing actions.  Maybe a wrong link was clicked or a wrong item was selected.  People will panic if there is no way to undo a mistake.  As a designer, it is your job to 1.) create something that can avoid getting to an error point and 2.) Have a backup plan just in case the other methods don’t work.

———–User First, Designer Second———–

Let’s Talk UI Design: Heuristic 4, Consistency and Standards

Hello there, everyone!  Today we shall be talking more about Jakob Nielsen‘s fourth UI heuristic, Consistency and Standards. For this one, I’ll be using a new example than from my post before, and that is the one and only Google.

So, here’s what I spoke about before:

Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions”.

Don’t you dare use two different ways to describe one thing on the same screen!  BAD, BAD, BAD!  If your navigation item says “Portfolio”, then the page title should be “Portfolio”, the url should say “Portfolio”, and the browser tab should say “Portfolio”.

Okay, okay.  I know I was a little eccentric, but there’s a method to my madness!

google

Alright, so I’m pretty sure most of you recognize this website here.  Google displays an excellent example of this heuristic in play.  The name of the website is right in the middle of the page.  The tab in the upper left corner has the name of the website (Google).  Even the url displays the name of the website.  Everywhere you look, you know you are on Google.  Excellent, excellent use.

Now, why is this of importance?

Users hone in their goal.  Everything else is scannable.  Without clear consistency, users will become confused, frustrated, or lost.  People will focus on the information that relates to their goal, and scan across everything else.  One wrong design aspect along a user’s workflow can cause massive confusion for someone.  It’s already hard to know exactly where you are in an interface.  Do not generate even more confusion when you have the power to lessen it.  Keep it consistent.

Side note:  this is not the only place you can apply this heuristic.  If you have anymore examples please feel free to share!

——-User First, Designer Second——–     

Let’s Talk UI Design: Heuristic 3, User Control and Freedom

Hello there everyone!  Hope the days (or nights) are goin’ well for you!  Today, I’ll be discussing some more in-depth of Jakob Nielsen‘s third UI heuristic, User Control and Freedom.  Again, I’ll be using the example from my Usability Overview post, so if you’re late into the game be sure to check that  out!  The example here will be good ol’ Amazon.com.

Alright, to recap from before:

User control and freedom

Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.”  

amazonOrder

People make mistakes.  Let them have a way out, or a way to fix things.  For example, displaying information entered before and allow editing before placing an order.

Ok, so I chose Amazon’s order review page as a good design example of this heuristic.  As you see in the above screenshot, you as the user are given the option to make changes to your billing address, payment method, and shipping address.  You are also able to apply here a gift card code or promotional code if you had not done so before.  (Side note:  the placement of the change links are right next to the information the link will affect.  Excellent use of the Gestalt Principle of Closure!)

Alright, so the importance of this heuristic?

Human error.  We as humans will make mistakes, and it puts us to ease to see that there is a way to either fix our error or exit out of it.  When we are doing something like inputting information, sometimes we’ll put info that’s not right.  We will mess up sometimes.  If we do not have a way to back out or to fix our error we will  panic.

Plainly stated:  We don’t like fear.  No, no we don’t.  So as a designer it’s important for you to create that sense of security and “safety net” for users.  Allow them a way out of their mistake, or at least let them be able to fix it.

——User First, Designer Second——

Let’s Talk UI Design: Heuristic 2, Match between system and the real world

Hello everyone!  Today I discuss heuristic two from Jakob Nielsen‘s 10 Heuristics of User Interface Design.  Consider this post two in the Usability Heuristics Series.  This time, I’m gonna use a different example from before, but in the same context

Again, just to refresh:

Match between system and the real world

The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.

Attention: Everybody’s not a computer, a programmer, or a designer.  People do NOT speak programming lingo out in the real world (most people, anyway).  So….saying things like “Please re-authenticate” at a password error is not gonna fly.  Talk like your target audience talks.  Know how your audience sees things. For example, say your target audience are employers. Seeing your portfolio as a navigation item, for example, or placing works right on the first page.

Alright, so let’s say you are an employer hiring in the UI Design field.  You are currently going through a list of online student websites submitted in order to pick out candidates to go through the interviewing process.  You are looking for portfolio pieces; products that these students have put together or aided in putting together through some sort of specific design process that stresses on the user’s interaction with said products.

Alright let’s simplify a bit.

You want to see the students’ works.

So what’re you gonna look for?  The portfolio!

portEx2

You parse through a few websites and stop on one that catches your attention.  There on the home page were this student’s designs interwoven into a beautiful user-friendly site.  You immediately identified the student, what he does, and examples of his work.  Perfect!

Boom!  Classic example here.  Julien Revoye expertly  defines here what the page is using lingo the employers want.  “You want my portfolio?  I’ll give you my portfolio!”  Julien is using the word “Portfolio” not just in his navigation, but in his title as well.  An employer doesn’t have to waste time to find the page because it’s right there, one of the main choices!  

Speaking your audience’s language will definitely go a long way.  Give them what they want,  not what you think they need.

——–User First, Designer Second——–

Let’s Talk UI Design: Heuristic 1, Visibility of System Status

Hello again everyone!  Today is post one of the Usability Heuristics series.  I’ll be discussing the first heuristic by Jakob Nielsen, “Visiblity of System Status.  I’ll be using the example I did from my Heuristic Overview post, and that is Zola’s Vintage Clothing and Accessories.

Here’s what I said before:

Visibility of system status 

“The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.”

zola

People get confused easily! You need to let users know what is on the page, where they are in the product, or how long til they get to their target destination.  Examples of this includes Highlighted Navigation, Breadcrumbs, Loading Percentages, Progress bars.

Alright down to business.  I put down Zola as a good example of this heuristic because it follows this convention to down to a T.  The website’s layout is a simple design.  It primarily uses white with orange as an accent color.  The navigation element is plainly seen in view and doesn’t become “lost in the design” because of its large blockiness and alarming bold color.  With each page I click on I know exactly where I am simply because of that navigation.

So, how does it work and why is it important?

We focus on what we want, not necessarily everything around it. Our goals affect our perception of things.  Sometimes, looking for certain items cause us to go into places we know nothing about.  Keeping the status of the page of which we are on allows us to focus on the task at hand without worry.  We know where we are or what’s the status of the UI.

We won’t become confused and in fear of where we are.  Nobody likes to feel stupid.  People’s experience goals can be anything they want to feel while using a product, and it’s USUALLY ANYTHING BUT STUPID.  As designers, it’s very important that we create something that’s intuitive and easy to recognize.  If a user is feeling “stupid” on our creations, then we have messed up horribly.

——User First, Designer Second——