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

In your group, develop a series of tasks for a usability test. 20 min

1. Begin by discussing key ideas from the usabilty readings, reviewing the steps in this assignment, and brainstorming on strategies for creating your test. Use this article for inspiration, "The Ultimate Step-by-Step Guide on Website Usability Testing" 7 min
2. Select a website to test that is relatively-popular, locally or across the whole internet. 3 min
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. 10 min
4. Designate someone from your group to be a test user.
5. The test user from your group will then switch with the test user from another group (so that completing the five tasks is a new experience). If completing this assignment on your own then ask a roommate or friend to be your test user.

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

1. Ask your new test user to complete each task, one at a time.
2. Record their responses noting the following 10 min
   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.
3. For each question, record the following:
   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?

In your group, compile all information you collected into a single report (like in a shared Google Doc). 15 min Include:

1. Your name(s), a link to and screenshot of website chosen for analysis
2. List the 5 tasks you gave the user and include the data and a discussion of the result of each. Was the user successful in completing the task? Why or why not?
3. Include a screenshot (⌘ + Shift + 4 on Mac) for each question, whether positive or negative, focussing on the element(s) of the website that led to the success or failure of the task.
4. What recommendations could you make to the website owner?
5. Use class materials on usability to inform your report. Use additional resources from the internet to help communicate your findings, for example "The Ultimate Step-by-Step Guide on Website Usability Testing"

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

1. Fork this repository and clone it to your critical-web-design folder on your machine.
2. Design
   1. As in previous assignments, start with designs/1.psd.
   2. First create a wireframe, then create multiple (3+) design iterations, following class presentations.
   3. Look at relevant examples of good design to help you improve your own, while prioritizing communication of your groups' findings.
   4. Research similar designs and try new things. Use the actual content of your report in the design.
3. HTML/CSS
   1. Once you have a satisfactory design, code your design inside index.html.
   2. Use the Bootstrap framework and a single page design (for example webflow.com, humaaans.com).
   3. Include results, recommendations, screenshots, and data from above.
   4. Do not use a Bootstrap template. One of the goals of this assignment is for you to create and code a custom design.
   5. Save your work and commit and push changes regularly
4. Confirm valid HTML and CSS. Note: Only your CSS files because Bootstrap's built-in support for older browsers will not validate)
5. When finished, publish and post your project
6. Refer to this rubric for grading.

• Course HTML & CSS Resources
• Bootstrap documentation