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