Low cost usability testing

Or…why I built UX Check

If you’re a designer or a developer and you've never heard of a usability tool called a Heuristic Evaluation, you’re not alone. It’s not a widespread technique, and it’s certainly not something that’s discussed out of design circles. I think it should be though, and I want to make it easy for you to try it out.

A heuristic evaluation is a lightweight evaluation that allows you to identify usability issues without the involvement of users.

To conduct a Heuristic Evaluation, all you need is yourself, your website design, and two teammates who can act as independent evaluators. The three of you should walk through the website separately, and identify usability issues along the way. You do so with the help of ten heuristics developed by Jacob Nielsen (see end of article), that you should keep at your side throughout the evaluation. As you find issues, take notes, and compare notes with your teammates at the end.

It’s really that simple. And the simplicity is what makes it so valuable. Sure, there is no replacement for testing with real users, but that can cost hundreds to thousands of dollars. Heuristic Evaluations provide you with a structured form of getting that quick feedback you need when money and time are precious. Rather than providing random opinions left and right, Nielsen’s ten heuristics provide a common language for you and your teammates to discuss usability issues.

So what is UX Check?

One of my biggest frustrations with Heuristic Evaluations has always been that they require three things — the list of heuristics, a text editor, and your website. This makes it clunky to do, especially with just one monitor. The evaluation is much less effective when you can’t see the list of heuristics in front of you at all times. So rather than having to constantly flip between my website, the list of heuristics, and a text editor, I put together what I've always wanted into a Chrome Extension.

UX Check is a Chrome extension that makes it easy to do a Heuristic Evaluation. It places the ten heuristics in a side pane next to your website. When you find a usability issue, click on the offending element on your website, and a callout will come up. Add your notes and recommendation, and UX Check will save a screenshot of the element along with your notes. At the end of the evaluation, it compiles everything into an HTML document as well as a DOCX file for you to download and share.

Select an element and add your notes. (TheBookRocket.com used with permission)

Screenshots are saved and you can view your notes as you go

At the end, you can export your results to a Word document

Now that I've finished building UX Check and have started using it, here’s how it’s improved my flow:

• It’s much easier to spot issues now that I can have the list of heuristics up right next to my website.
• Rather than having to describe where an offending element is, it’s great to have a screenshot of the UI alongside the notes that I took. I can look back at that element and see exactly what the notes are referring to.
• When taking notes, I used to have to do it in a big table, which would be quite distracting. Instead, I can focus in on the element that I’m writing about at the current moment.

If you haven’t already, jump on over to uxcheck.co, download the extension, and try it out. It’s totally free for personal and commercial use. And of course, please send me any feedback, questions, or suggestions!

chrisgallello@gmail.com

Special thanks to Charlie O, Xy Z, Rui W, Jason C, Jaime M, Kate D, Pat R, Jialiya H, Lynn S, & Amon M.

Nielsen’s Ten Heuristics

1. Visibility of system status:
   The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
2. Match between system and the real world:
   The system should speak the user’s 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.
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.
4. Consistency and standards:
   Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
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.
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.
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.
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.
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.
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.

Source: Ten Usability Heuristics

Additional reading: How to Conduct a Heurstic Evaluation