Don Norman’s 7 Stages of Action and Jakob Nielsen’s classic 10 point evaluation condensed into a potent 5 point product design review.

5 point

If you have ever done a full 10 point heuristic analysis as The Nielsen Norman Group recommends it, you know how long it can take to complete a full analysis and present the findings. While results of this approach are comprehensive and powerful, sometimes we don’t need all ten. In fact, I think we can expose more crucial violations if we cut the steps in half.

While reading Don Norman’s perennial Design of Everyday Things many years ago, I was absolutely floored by the simplicity presented by the following questions he formulated in The Seven Stages of Action and the profound implications they present when examined thoroughly…

1.What do I want to accomplish?
2.What are the alternative action sequences?
3.What action can I do now?
4.How do I do it?
5.What happened?
6.What does it mean?
7.Is this okay? Have I accomplished my goal?

Excerpt From: Don Norman. “The Design of Everyday Things.” iBooks.

After a couple years of studying and putting into practice Don’s seven stages of action and seven fundamentals of design along with Jakob Nielsen’s ten heuristics, I began asking myself, “How might we create a shortcut to a full Heuristic Evaluation by reframing the test in light of its underlying core design fundamentals?” I then started working on remixing and reducing the twenty four stages, fundamentals and heuristics into a 5 point analysis that has been incredibly helpful for me when analyzing existing applications for heuristic violations and usability issues.

I have added two examples to the evaluation below to get you started and an email link further down which you can use to request a template of the evaluation for later use. Enjoy!

5 Point Heuristic Analysis

January 10th, 2018

#1. Where am I?

Heuristics referenced include; #3 User Control and Freedom & #1 Visibility of system status

Google Maps interface

How might I know where I am?

  • Is there an active navigation element and label visible?
  • If the navigation model follows an unconventional design pattern, does it still provide an explicit enough conceptual model for a representative user to get a sense of where they are in relation to other areas of the application?
  • Is the system accessible to people with disabilities?

In the example of the Google Maps interface above, Google is literally showing me where I am physically located and also showing me where I am in relation to other sections of the application by highlighting the Explore icon and text label in blue. Where this way-finding pattern might break down in practice is when a user has difficulty distinguishing colors (Up to 5% of all male users is a stat suggested by some publications). So in our analysis this interface would get plus points for navigation, layout, conventionality and conceptual model and get dinged for accessibility.

One reason why this analysis is so powerful is that (like Occam's Razor) it immediately points us towards what might be the single most crucial heuristic violation/action item on this particular screen.

I would recommend that Google add a visual indicator to the active icon such as an underline, arrow, filled icon or dot which would give a colorblind user an additional means of identifying which element is active without being forced to rely on color.

Monochromatic mockup of what the recommended changes might look like in this scenario

#2. What can be done here?

Heuristics referenced include; #6 – Recognition rather than recall & #2 – Match between system and the real world

Thumbtack home page

How might I know what can be done here?

  • Are options available and visible to the user?
  • Are signifiers present that indicate the ability for a user to engage with them?
  • Are the next steps a user should take clearly presented in a conventional manner that they will recognize?

In the example of Thumbtack’s home page shown above, the options are so well defined and laid out, I can’t find anything other than good to say about it. The logotype in the top left clearly tells me where I am, the bold heading tells me what the site is for, the menu in the top right describes three other things I might want to do here with elegantly simple phrases like: “Join as a pro”. As my eye continues to travel down the page I see another very clear piece of text on an elevated search bar that simply asks: “What’s on your todo list?” with a bold weight zip code next to it (most likely fed by a reverse IP lookup) and a tasteful blue button/icon signifier next to that. I also love the conventional “help-text-esque” placement of a small play button icon with a label that reads “See how it works”, which of course, plays an explainer video as expected. Just when you thought the page couldn’t get any better, you see a row of five beautifully designed icons (incidentally nailing Miller’s law of 7 + or -2) with labels indicating what are most likely the five most popular categories of services in my area or the services that provide the highest business value to Thumbtack. Notice the way the container for the five options sits on the seam of a new div with a grey background which gives the scent of additional information below the fold rather than using some awful indicator like an animated arrow pointing downward. Watch and learn my friends.

The only tiniest of criticisms I could offer here would be that the contrast of the grey text in the top right corner (15.23:1) is not AAA WCAG accessible. If they darkened the color to #505050 they would be good to go.

So overall, the options are clearly defined, signifiers give strong indications, and next steps are clearly outlined! This homepage gets 4.75 stars in my book. Well done Thumbtack Design team!

As a bonus round I put a 10px Gaussian blur on the screenshot to see how the visual hierarchy holds up and I would say it is on point.

Blurred Thumbtack homepage screenshot

#3. What will happen if I do it?

Heuristic referenced; #2 – Match between system and the real world

What are my expectations?

  • If I tap or click this button, what do I expect to happen?
  • If I swipe the card to the right, will it slide to the right in as natural a manner as swiping a paper card on a table?
  • If I click on an article with a compelling title, does the content of the article match the expectations created in my mind when I clicked it?

#4. What is happening now that I did it?

Heuristic referenced; #1 – Visibility of system status

Reactions to my actions

  • Now that I tapped the button, how is the interface responding to my action?
  • Is the screen animating in a certain direction?
  • Is a new screen loading? How do I know?
  • Are there multiple indicators of processes in action? How do I know the differences between them?

#5. What happened?

Heuristics referenced include; #9 – Error Prevention & #3 – User control and freedom

Completion of my interaction

  • Were my expectations in regard to what I thought would happen validated or invalidated?
  • Did the transition between states make sense?
  • If I swiped to the left, did the screen push to the left?
  • If I completed a task, do I now know that it is complete?

Pros and cons of doing a 5 step analysis vs 10

Pros: The primary advantage here is speed. Using the 5 step eval I can get through an evaluation of a screen in less than 5 minutes whereas in the 10 step eval I often get bogged down by terminology, frustrated by how many violations there are and defining what the severity rating of those violations might be. In the past I could spent days working on an evaluation of a 3 screen checkout process using the 10 step method.

Cons: The rigorous scientific approach Jakob Nielsen took in his 10 step evaluation shouldn’t be downplayed. This 5 step evaluation has only been tested in my own experience and would need a lot more documented results to be as reliable as the full 10 step approach.

Call to action

This is where you come in! Please try this evaluation out and let me know how it works for you. I would love to hear about how it fits into your design process as well as any opportunities you see for improvements. Also please add any thoughts you may have in the comments and feel free to reply to any of the heuristics above with your own examples of violations or great designs.

You can also shoot me an email to get access to a Dropbox Paper Template of the evaluation you can use to do your own evaluations.

Disclaimers, legal stuff, inspiration and thanks

This analysis was inspired by Don Norman’s Seven Stages of Action along with his Seven Design Fundamentals and Jakob Nielsen’s 10 Heuristics of Design.

Special thanks to Stedman Halliday and Josh Fry for edits and suggestions and to Joana Kosinska whose Unsplash image I used for the background of the title graphic which is set in Optician Sans.

As a disclaimer I want to emphasize that the outcomes of this evaluation should not be compared to a full 10 step Heuristic Evaluation in terms of comprehensiveness but rather should be viewed as a quick first step when a full evaluation is not feasible in the context of your design process. I also recommend you first study the original 10 step evaluation and familiarize yourself with the heuristics in it for best results when using this 5 step evaluation.

The first version of this analysis was created by Lance Weisser on Wednesday, December 7th, 2016

A quicker heuristic analysis was originally published in UX Collective on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source link


Please enter your comment!
Please enter your name here