Course Description

In this course students will learn how to use prototyping as a method to explore design, communicate, and test design concepts with fellow team members and clients. Students will learn a number of different prototyping methods and tools, including paper, PowerPoint/Keynote, Visio/OmniGraffle, Fireworks, Axure, and HTML. Students will also learn a number of guiding principles, tips, and tricks to help make their prototypes more effective.

Describe the benefit of shorter, rapid, iterative cycles with prototyping over longer more detailed cycles.

Exam

Create a series of prototypes sketches on sketchboards.

Assignment: Paper Prototype

List and describe the advantages and disadvantages of sketching on paper, on whiteboards, and in code.

Exam

List the tools you might use to create a prototype.

Exam

Testing Prototypes

List and describe common mistakes made when testing prototypes.

Exam

Identify target demographics for a usability test.

Assignment: Prototype Usability Test

List best practices for conducting a usability test.

Exam

List and describe the goals and intent of a usability study.

Assignment: Prototype Usability Test

Prepare a usability test screener, and a test plan.

Assignment: Prototype Usability Test

Conduct a usability test of a prototype, and prepare an analysis of the data gathered.

Assignment: Prototype Usability Test

Assignments

Application Concept Recommendations

In this course you will be designing a series of prototypes for hypothetical web applications. The below list of application concepts are simply ideas to get you thinking about the type of application you would like to prototype. Be sure to discuss your application concept with your instructor before beginning an assignment.

Interactive Prototype

Building upon the paper prototype you just created, make a revised version using Fireworks, Axure, PowerPoint, or another tool that lets you rapidly iterate through your ideas. Your prototype should show interaction state, feedback messages, and simulate dynamic data display. Be sure to improve upon your previous prototype by addressing instructor and peer feedback in this iteration. Present your prototype to the class to receive feedback and share your experiences using the tools you selected.

Interactive Prototype Grading Rubric

Criteria

Performance Quality

Score

0 points

1 point

2 points

3 points

Effective Use of Prototyping Methods

Prototype was not completed on time, does not show multiple states or pages, contains no interactivity.

Prototype was completed on time, shows multiple states or pages, but has basic interactivity that only moves between screens.

Prototype was completed on time, shows multiple states and/or pages, incorporates interactivity using Pages and States to show moderate interactions like rollovers and pop-ups.

Prototype was completed on time, shows multiple states and/or pages, incorporates interactivity using Pages and States to show interactions like rollovers and pop-ups, and creatively uses advanced features to deliver a high fidelity outcome.

Do not focus on design aesthetics or branding, but ensure your prototype has a clear information hierarchy, is professional, and usable.

HTML Prototype Grading Rubric

Criteria

Performance Quality

Score

0 points

1 point

2 points

3 points

Effective Use of HTML Prototyping Methods

Prototype was not completed on time, does not show multiple states or pages, contains no interactivity.

Prototype was completed on time, shows multiple states and/or pages, but interactivity is limited to "slap and map" model.

Prototype uses HTML and CSS. Prototype was completed on time, shows multiple states and/or pages, moderate interactivity allows users to move through the experience, Ajax style transitions are faked with multiple pages.

Prototype uses HTML, CSS, and JavaScript. Prototype was completed on time, shows multiple states and/or pages, moderate interactivity allows users to move through the experience, uses a JavaScript framework like jQuery, Prototype, or YUI! for Ajax style interactions.

Review of Peer’s Prototype

Critique your peer’s prototypes based on the design studio method outlined in the course. Critiques should provide 2–3 things you think are strong about the proposed design solution, 1–2 criticisms or things you think should either be improved, aren’t clear in the prototype, or clearly missed the stated audience and intent of the prototype. Critiques should focus on the form and function of the prototype more than the actual visual aesthetics of the prototype.

Review of Peer’s Prototype Grading Rubric

Criteria

Performance Quality

Score

0 points

1 point

2 points

3 points

Quality of Critique

Critique was not conducted on time, does not include 2–3 positives and 1–2 criticisms.

Critique was conducted on time, but includes less than the required 2–3 positives and 1–2 criticisms.

Critique was conducted on time, includes 2–3 positives and 1–2 criticisms, but critiques and suggestions are focused on non-solution elements (e.g. visual aesthetics, aspects that should be addressed through visual design instead of form and function) instead of the actual design solution.

Critique was conducted on time, includes at least 2–3 positives and 1–2 criticisms, critique is focused exclusively on the design solution, critique provides real recommendations for improvement.

Prototype Usability Test

Create and conduct a usability test of your prototype. Using the templates at http://usability.gov/templates/ as a starting point, create a test screener, and a test plan. Identify five users for your test. Carry out the test, then prepare a usability report outlining the results and identifying recommendations for improving the prototype. Adjust your prototype accordingly and submit it along with the testing instruments and report.

Usability Test Grading Rubric

Criteria

Performance Quality

Score

0 points

1 point

2 points

3 points

Test Screener

Test screener is poorly presented, has many spelling and/or grammar errors, contains a poorly written series of questions to identify test subjects, and was completed by fewer than 5 subjects.

Test screener is poorly presented, has some spelling and/or grammar errors, contains some poorly written questions to identify test subjects, and was completed by 5–7 subjects.

Test screener is professionally presented, has no spelling or grammar errors, contains a relatively well written series of questions to properly identify appropriate test subjects, and was completed by at least 7 subjects.

Test screener is professionally presented, has no spelling or grammar errors, contains a well written series of questions to properly identify appropriate test subjects, and was completed by at least 10 subjects.

Test Plan

Test plan is very poorly presented, has many spelling and/or grammar errors, and contains poorly written tasks that do not properly test all key areas of the prototype.

Test plan is poorly presented, has some spelling and/or grammar errors, and contains some poorly written tasks that do not properly test all key areas of the prototype.

Test plan is relatively well presented, has no spelling or grammar errors, and contains well written series of tasks that test all key areas of the prototype.

Test plan is professionally presented, has no spelling or grammar errors, and contains an exceptionally well written series of tasks that test all key areas of the prototype.

Usability Report

Report is very poorly presented, has many spelling or grammar errors, does a very poor job of assessing the usability strengths and shortcomings of the prototype, and makes very few good recommendations for improving the prototype.

Report is poorly presented, has some spelling or grammar errors, does a poor job of assessing the usability strengths and shortcomings of the prototype, and makes few good recommendations for improving the prototype.

Report is professionally presented, has no spelling or grammar errors, does a good job of assessing the usability strengths and shortcomings of the prototype, and makes relatively good recommendations for improving the prototype.

Report is professionally presented, has no spelling or grammar errors, does an exceptionally good job of assessing the usability strengths and shortcomings of the prototype, and makes intelligent recommendations for improving the prototype.

Revised Prototype

The revised prototype does not effectively incorporate the feedback and data gathered in the usability test, or is not a significant improvement over the prior iterations because the test was poorly executed resulting in flawed data.

The revised prototype incorporates some of the feedback and data gathered in the usability test, but the prototype does not exhibit significant improvements in the design solution.

The revised prototype incorporates the feedback and data collected in the usability test resulting in a somewhat improved interface design solution.

The revised prototype incorporates the feedback and data collected in the usability test resulting in a more appropriate and usable interface design solution.

Examination Questions

Describe the relationship between wireframes, prototypes, and requirements documents.

Describe the value of creating a prototype in addition to creating a requirements document and/or a wireframe.

List and describe the five types of prototypes.

List and describe the eight guiding principles for prototyping.

List the and describe the types of interaction patterns necessitate a prototype in order to understand the user experience.

List and describe the ways in which prototypes often save a business time and money, and can result in a better product.