jump to content

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.

Prerequisites

  • US-300 Interaction Design 1 (future release)
  • US-400 Usability 1 (future release)

Recommended Textbook(s)

Recommended Reading

Technologies Required

Competencies

Topic Competency Evaluation Methods
Prototyping Concepts
Describe the relationship between wireframes, prototypes, and requirements documents.
  • Exam
Describe the value of creating a prototype in addition to creating a requirements document and/or a wireframe.
  • Exam
List and describe the five types of prototypes.
  • Exam
List and describe the eight guiding principles for prototyping.
  • Exam
List and describe the ways in which prototypes often save a business time and money, and can result in a better product.
  • Exam
Describe the similarities between industrial design prototyping process and web application design prototyping.
  • Exam
Describe the Ockham’s Razor design principle and how it might guide the prototyping design process.
  • Exam
Describe the value of prototype critiques.
  • Exam
Conduct a critique of a peer’s work.
  • Assignment: Review of Peer’s Prototype
Identify how the fidelity of a prototype might impact its effectiveness and insights it might generate.
  • Exam
  • Assignment: Paper Prototype, Assignment: Fireworks Prototype, Assignment: HTML Prototype
Describe the value of being technology-agnostic when prototyping immature concepts and technology-specific for more mature concepts.
  • Exam
Prototyping Methods Create a series of prototypes of varied fidelity using a variety of methods.
  • Assignment: Paper Prototype, Assignment: Fireworks Prototype, Assignment: HTML Prototype
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.

  • Online email client
  • Online music sharing tool
  • iPhone application
  • Photo management and sharing application
  • Social networking identity aggregator and management tool
  • Mailing list management system
  • Facebook application
  • Online game
  • Online file management and sharing system

Paper Prototype

Create a prototype using any number of analog tools, including: paper, pen/pencil, tape, scissors, cardboard, transparency sheets, dental floss or other.

Paper Prototype Grading Rubric
Criteria Performance Quality Score
0 points 1 point 2 points 3 points
Effective Use of Paper 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 little if any interactivity. Prototype was completed on time, shows multiple states and/or pages, uses handlebars for GUI widgets, incorporates basic interactivity like show/hide, or pop-up/overlay windows. Prototype was completed on time, shows multiple states and/or pages, uses handlebars for GUI widgets, incorporates basic interactivity like show/hide, or pop-up/overlay windows, incorporates advanced interactivity like sliders and multiple interactive elements (e.g. sliders with overlays and show/hide interactivity).  

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.  

HTML Prototype

Create an HTML prototype of an application interface of your choice (see application interface suggestions). Discuss your project concept with your instructor prior to beginning the assignment. Using HTML, CSS, and a JavaScript framework of your choice, create a prototype that simulates data storage, data retrieval, and other interaction patterns necessary for your application concept.

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.
  • Describe the similarities between industrial design prototyping process and web application design prototyping.
  • Describe the Ockham's Razor design principle and how it might guide the prototyping design process.
  • Describe the value of prototype critiques.
  • Describe the benefit of shorter, rapid, iterative cycles with prototyping over longer more detailed cycles.
  • List and describe the advantages and disadvantages of sketching on paper, on whiteboards, and in code.
  • List the tools you might use to create a prototype.
  • List and describe common mistakes made when testing prototypes.
  • List best practices for conducting a usability test.
  • Identify how the fidelity of a prototype might impact its effectiveness and insights it might generate.
  • Describe the value of being technology-agnostic when prototyping immature concepts and technology-specific for more mature concepts.
  • List and describe the ways in which usability tests of prototypes is often different than a usability test of a completed interface.

Learning Modules

Help us develop our living curriculum. Contribute a learning module.

Contributors

Primary Course Developers: Todd Zaki Warfel and Aarron Walter