Assignment 4: HTML Mockups and Page Flows & User Testing I

Grade Value: 75 points

Due: Thursday October 9, in class

brief

HTML Mockups are the first step in the bridge between design and development. Once you have your paper and video prototypes, it's useful convert those to HTML/CSS. This way, you can experience "using" your application in a browser. In this assignment, your group will create a set of HTML mockups for your web application.

assignment

You will be creating a full set of HTML mockups for your web application. Every page that a user might see in the course of the application should be mocked up. The links on the mockups should work in the sense that they will bring the user to another mockup which shows what the landing page of that link would look like.

You should then video 3 people not in your group "using" the mockups. This will give a sense of what your users eye will gravitate to first, how intuitive your design is, and what some key issues will be in usability.

Give the users 5-10 minutes each with the application, don't give them any guidance, and have them talk aloud (saying what they're doing, and any questions they may have). However, if they get stuck for more than 30 seconds, you may answer their questions.

Target Time: this exercise should take you 4-6 hours as a group.

design goals and evaluation criteria

• Is the mockup clear?
• Is the mockup visually appealing?
• Is the mockup comprehensive and is the write-up lucid (including implications for design)
• Does it integrate lessons learned from the paper prototype/video prototype section?
• Does it lead to new observations and lessons learned by its use?

in studio

Each group will run a single user test on another classmate. As a group, you will take 5 minutes to walk through 2-3 use cases in the HTML mockup. Each group member will tell a 30-second story about what they learned.