Heuristic Evaluation and Me

If I had to name an effective, cheap, and not very time consuming method to evaluate design usability, it would probably be Heuristic Evaluation.

Heuristic Evaluation is 10 well-known principles that a lot of UX professionals use to assess their design for usability errors prevention. Comparing my design against the Heuristic Evaluation principles makes me more confident about my work because it gives me a criteria to ensure a standard of usability for my work. I always try to do it on my own before taking the design further for any user testings or even showing it to anyone on my team.

As I was recently making a presentation on Heuristic Evaluation at work, I thought I would share some here too!

1. Visibility of system status

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

Feedback and statuses are for my peace of mind. It ensures me that the system is doing what I expected it to, and that’s why I really appreciate the invention of the progress bar design. I’m sure we all know how frustrating waiting for something to upload or download can be! Progress bars help me see that the files are actually uploading, and how long I can expect them to be done. Imagine having to wait around aimlessly without knowing any of these information! Ugh!

Uploading progress bar

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

For me to take any action smoothly, the flow that leads me to complete that particular action should mimic what I’m already familiar with in my daily surrounding.

Think about online shopping, most of the online shopping sites I’ve encountered with followed this principle and gave me the same experience of shopping at physical stores.

I go shopping > I see something I like > I put that item in my basket > I pay for that item after shopping.

Straight forward and familiar procedure like this is hard to get confused by!

Sephora eShopping

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

Have you ever spent so much time working on something, but then accidentally press the exit key and all your hard work is lost?

I have and I don’t wish that on anybody..

Instagram was nice enough to ask me if I really meant it when I edited a photo but decided to exit out before posting it. Not only they made sure that I really didn’t want to post the photo at the time, they even gave me the option to save the edited photo as a ‘draft’ and I can come back to it later too.

Instagram’s ‘back’ confirmation

4. Consistency and standards

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

As far as creativity goes, standardized format is still very important for usability design. Even though I’m an IOS user, I know that Android’s action button is, most of the time, floating on the right bottom corner of their screen. Whenever I borrow an Android phone from my mum, I know exactly where to look when I want to take an action on a page!

Facebook and Google on Android

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

Google’s search suggestion had made my English worse and worse everyday, but I’m not complaining. Google suggested me what I might be looking for even before I pressed enter! Not only that it corrected my spelling mistakes, it completed my sentences and even gave me search suggestions which were honestly things what I was going to type anyway.

You know, I feel like Google knows me even better than I know myself sometimes…

Google Search

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

There’s just so much information in the world and my brain needs help on memorizing things!

A really good example of how design had helped me in this area is icon design. Photoshop tools bar (and I guess, mostly any tools bar) uses icon to replace text descriptions, making it easier for me to quickly find what I’m looking for instead of having to look through a bunch of text. The icons are pretty straight forward too.

Ex. They use a ‘brush’ icon for drawing tools and a ‘paint bucket’ for any paint tools.

Photoshop tools bar

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

The design should be easy and efficient enough for both new and frequent users to use.

Let’s use Adobe as an example again. They have developed a big set of keyboard shortcuts which I love. For someone who use a lot of Adobe software, it really helped me get my work done so much faster.

As an example, for a new user to make a row of 4 square with even spacing in Illustrator, they might have to go through this steps…

Create a square > Click on the layer > Go to the layer menu > Select duplicate layer > Click on the new square > Move it to the correct spot > Click on the layer > Go to the layer menu > Select duplicate layer > Click on the new square > Move it to the correct spot > Click on the layer > Go to the layer menu > Select duplicate layer > Click on the new square > Move it to the correct spot > Click on the layer > Go to the layer menu > Select duplicate layer > Click on the new square > Move it to the correct spot

For an advanced user, to create the same thing, they can just go through these steps…

Create a square > Click on the square + ‘alt key’ > Drag to the correct spot > ‘command + D’ > ‘command + D’

A lot faster and simpler!

Adobe Illustrator

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

My one pair of eyes and brain can only focus on so many things at once! (mentioning my brain again)

To keep the focus on the most important thing, distractions should be minimal when it comes to aesthetic! Look at Google, a search engine website, there’s only a search bar on the screen and 0 chance of the users missing it.

Google Search

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

There’s nothing more stressful than when something doesn’t work the way it’s supposed to and you can’t figure out why.

The only thing that came to my mind when I encountered this kind of code error page was that something was about to explode. It looked scary and contained no helpful information or solutions for me to move away from it.

Scary error window!

Here is Skype’s error window. They provided an error message, letting me know what could have been wrong, and also provided a few options for me to go from there (Sign up with Facebook, go back, etc.)

Skype’s error window

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

Mixpanel does a really good job on their help center page. I found it very easy to find help because they separate information into categories, and also shows preview of what tutorials are in each of them.

Mixpanel’s help center

For me, the most efficient time to apply these principles to my design is when my flow is still in the sketches phrase. This way I don’t have to fix things on my high fidelity mockups because, unfortunately, every time I thought I had all the cases covered, there was always something that I missed before I did the evaluation. These principles cover most of the important usability issues and also issues that I tend to overlook the most.

Again, these are not meant to completely replace the other user testing methods, but it’s a very helpful regime to go through to get the basic usability errors out of the way.

And it’s free.. so why not, right?

Thanks for reading!