Skip to content
Critical Web Design Wiki

5.1 Usability Testing

Excerpt Exercise 5.1.1
Usability should be performed early and often in order to help guide design decisions. Follow these excerpts from the book to create and implement a usability test.

Explore Userinyerface.com

Section titled “Explore Userinyerface.com”
An interface that expects you to do the hard work.

Visit https://userinyerface.com/ and attempt to complete the form on the second page of the website as fast as you can.

Made by Bagaar, a software and hardware company based in Belgium, this game presents the opposite experience that you might expect in a chapter on web usability. The tongue-in-cheek 2018 User “in yer face” design is “An interface that expects you to do the hard work instead of doing it for you.” This game exploits typical reusable design patterns common to user interface design that tend to make a website usable, such as high contrast between areas of the page, a top navigation tool labeled with clear hierarchies, and a grid layout structure that creates hierarchy among page sections. Bagaar subverts or even denies these design patterns, to create an unusable and harrowing experience.

Create a Usability Test

Section titled “Create a Usability Test”

The empathy phase of a typical design thinking process for website production includes seeking to understand potential users. A typical approach for this is to create a user story which helps designers imagine each user, including details about who they are, their technical capabilities, and importantly, what are their specific goals in using the website.

  1. Select a website to test that is relatively-popular, locally or on the internet. For instance, check out The Moz Top 500 Websites.
  2. Imagine a typical user and their motivations for using this website. Create a list of five realistic tasks for them to complete. The tasks should be specific. For example, you could ask a user to find information or perform a specific function. For example, Marieke McCloskey suggests asking a user to “buy a pair of shoes for less than $40.” See the article for detailed guidelines in identifying usability tasks.
  3. If you are creating this test in the classroom, designate someone from your group to be the test user. This person will switch with a test user from another group so that completing the five tasks is a new experience. If you are completing this exercise on your own, ask a roommate or friend to be a test user.

Perform the Usability Test

Section titled “Perform the Usability Test”

Now you are ready to implement your usability test.

  1. Ask your new test user to complete each task, one at a time. From this point on, your test user has switched groups, and they are now a member of your (new to them) group.
  2. Before you begin the test, note that:
    1. Your goal is to test the website (not the user) in order to discover issues. It is, therefore, good if your test user has trouble with any of your tasks.
    2. Watch your test user and make notes, but do not help or interfere with their process. Observe their eye and mouse activity (recall the discussion on eye tracking and focal points from Chapter 2). Empathy in design is about accepting users for who they are and how they use your system; allow them to provide honest feedback through their actions.
    3. Ask the user to use the “thinking aloud” method we discussed in Chapter 3 to help your group understand why they are making specific choices.
    4. Use other suggestions from the NNG for gathering data, like “Talk less and learn more.”
  3. For each question, record the following information:
    1. Time: How long does it take to complete each task?
    2. Accuracy: How many mistakes did the test user make and how fast did they recover from the mistake?
    3. Recall: How much did your test user remember on multiple uses? Did they improve at using the website over time?
    4. Emotional response: How did your test user feel after using the website?
  4. Finally, ask your user to complete the 10-question System Usability Scale (SUS) survey measuringu.com/sus and record the data.

Compile Data

Section titled “Compile Data”

Reflect on what you observed and compile information from the usability test into a single report. If working in a group, write it down in a shared document so you can access it later when you create your page designs.

  1. List your name(s) and a link to the website you chose to analyze.
  2. List the test user’s responses (a number 1–5) to each of the ten prompts in the SUS at measuringu.com/sus. You will use JavaScript later in this chapter to perform the math required to tally the score.
  3. List the five tasks you gave the user, along with the following information:
    1. Add all of the data you collected in the test.
    2. Add a discussion about the result of each task. Was the test user successful? Why or why not? Cite information on the NNG website to inform your report and communicate your findings.
    3. Write what recommendations you would make to the website owner. Refer to the digital.gov/topics/usability website for advice on how you might phrase these recommendations.
    4. Create a screenshot for each task focusing on the aspects of the website that led to the success or failure of the task.

Continue following the prompt for chapter 5, applying design thinking concepts and our “less is more” critique to design and code a responsive web page that reflects on your findings.

Usability Resources

Section titled “Usability Resources”