Create and conduct a usability test, then compile data, and design and code a page to present your results!

• 📚 "Usability & Forms" (chapter 5) in Critical Web Design
  • Chapter example(s): AIGA usability test
• Articles
  • 📚 Jakob Nielsen Usability 101: Introduction to Usability (2012)
  • 📚 Brian Jackson The Ultimate Step-by-Step Guide on Website Usability Testing (2022)
  • 📚 Dmitry Fadeyev 10 Usability Findings and Guidelines (2009)
  • 📚 Cyndi Wiley Nothing About Us Without Us…Including Pizza: The Practice of Designing with Accessibility in Mind (2020)
  • 📚 Amy Schade, Yunnuo Cheng and Samyukta Sherugar Top Ten (Enduring) Mistakes in Web Design (2016)

Parts 1-3 - Work with your group
Parts 4-5 - Work on your own

In your group, develop a series of tasks for a usability test. 10–15 min

1. Discuss key ideas from the usability readings, review the steps in this assignment, and brainstorm on strategies for creating your test. See resources below for more articles.
2. Select a website to test that is relatively-popular, locally or across the whole internet.
3. Create a list of five realistic tasks (e.g. find information or perform a specific function) for a user to complete on that website.
4. 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 completing this assignment on your own ask a roommate or friend to be a test user.

In your group, perform the usability test and record data. 10–15 min

1. Ask your new test user (from here on they are in your group now) to complete each task, one at a time.
2. Record their responses noting the following
   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. Observe your test user and make notes but do not help or interfere. Watch their eye and mouse activity (recall the eye-tracking experiments from class presentations)
   3. Ask the user to “think aloud” to help your group understand why they are making choices.
   4. Use NN/g suggestions for gathering data, like "Talk less and learn more".
3. For each question, record:
   1. Time: How long does it take to complete each task?
   2. Accuracy: How many mistakes did they make and how fast did they recover?
   3. Recall: How much do they remember on multiple uses? Did they get better at using the website over time?
   4. Emotional response: How did they feel after using the website?
4. Finally, ask your user to complete the 10-question System Usability Scale (SUS) survey https://measuringu.com/sus/ and record the data.

In your group, compile this information into a single report in a shared Google Doc. 10–15 min

1. Each of your name(s), a link to and screenshot of the website chosen for analysis
2. List the test user's responses (a number 1-5) to each of the 10 prompts in the System Usability Scale (SUS) at https://measuringu.com/sus/. You will use Javascript later in this chapter to perform the math required to tally the SUS score.
3. List the 5 tasks you gave the user, along with
   • The data you collected in the test
   • A discussion of the result of each. Was the user successful in completing the task? Why or why not?
   • What recommendations would you make to the website owner? Refer to the WCAG or SUS as needed.
   • A screenshot focusing on the element(s) of the website that led to the success or failure of the task.
4. Cite class materials on usability and accessibility to inform your report and communicate your findings.

Each group member will individually design and code their own single-page website to present the results of the usability test.

1. Start your design by creating a wireframe using Figma
2. Once you are satisfied with a starting layout in your wireframe, create multiple (3+) design iterations, progressively improving your work:
   1. Use the loop from the class responsive design presentations
   2. Look at relevant examples of good design to help you improve your own, while prioritizing communication of your groups' findings.
   3. Research similar designs and try new things. Use the actual content of your report in the design.
   4. Create a moodboard with designs you like. Save it in Figma or this repository.

Once you are satisfied with your design iterations...

1. Fork this repository and clone it to your machine.
2. Use HTML, CSS, and JS to code your design inside index.html
3. Use the Bootstrap framework and a single page design.
4. Include results, recommendations, screenshots, and data from above.
5. Do not use a Bootstrap template. One of the goals of this assignment is for you to create and code a custom design.
6. Code the SUS form (see instructions in the Critical Web Design book)

1. Save and refresh your work in the browser often to see your changes.
2. Commit changes regularly.
3. Confirm valid HTML and CSS ^(?)
4. When finished, push, publish, and post all deliverables to Moodle per documentation in the Assignments.