Create and conduct a usability test, then compile data, and design and code a page to present your results!
Learning Objectives
Students who complete this assignment will be able to:
- List key ideas for increasing website usability, including testing, common issues, and best practices.
- Demonstrate how to plan, conduct, and compile results from a web usability test.
- Create a custom responsive web page design using, editing, and creating their own content (text, diagrams, images, etc).
- Use HTML, CSS, JS, and the Bootstrap framework to code a responsive web page.
Preparation
Complete the following to prepare for this assignment. See Resources for additional information as needed.
Rubric
See Moodle.- 📚 "Usability & Forms" (chapter 5) in Critical Web Design
- Chapter examples: AIGA usability test
- 📚 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)
In your group, develop a series of tasks for a usability test. 10–15 min
- 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.
- Select a website to test that is relatively-popular, locally or across the whole internet.
- Create a list of five realistic tasks (e.g. find information or perform a specific function) for a user to complete on that website.
- 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
- Ask your new test user (from here on they are in your group now) to complete each task, one at a time.
- Record their responses noting the following
- 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.
- 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)
- Ask the user to “think aloud” to help your group understand why they are making choices.
- Use NN/g suggestions for gathering data, like "Talk less and learn more".
- For each question, record:
- Time: How long does it take to complete each task?
- Accuracy: How many mistakes did they make and how fast did they recover?
- Recall: How much do they remember on multiple uses? Did they get better at using the website over time?
- Emotional response: How did they feel after using the website?
- 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
- Each of your name(s), a link to and screenshot of the website chosen for analysis
- 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.
- 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.
- Cite class materials on usability and accessibility to inform your report and communicate your findings.
On your own - Each group member will individually design and code their own single-page website to present the results of the usability test.
- Start your design by creating a wireframe using Figma
- Once you are satisfied with a starting layout in your wireframe, create multiple (3+) design iterations, progressively improving your work:
- Use the loop from the class responsive design presentations
- Look at relevant examples of good design to help you improve your own, while prioritizing communication of your groups' findings.
- Research similar designs and try new things. Use the actual content of your report in the design.
- Create a moodboard with designs you like. Save it in Figma or this repository.
On your own - Once you are satisfied with your design iterations...
- Fork this repository and clone it to your machine.
- Use HTML, CSS, and JS to code your design inside
index.html
- Use the Bootstrap framework and a single page design.
- Include results, recommendations, screenshots, and data from above.
- Do not use a Bootstrap template. One of the goals of this assignment is for you to create and code a custom design.
- Code the SUS form (see instructions in the Critical Web Design book)
- Save and refresh your work in the browser often to see your changes.
- Commit changes regularly.
- Confirm valid HTML and CSS (?)
- When finished, push, publish, and post all deliverables to Moodle per documentation in the Assignments.