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)
- Zaki Warfel, Todd. Prototyping: a Practitioner’s Guide. : Rosenfield Media, 2009.
Recommended Reading
- Stanford, Julie (2003,01,06). HTML Wireframes and Prototypes: All Gain and No Pain. Retrieved August 19, 2009, from Boxes and Arrows Web site.
- Dimon, Garrett (2006,03,06). Just Build It: HTML Prototyping and Agile Development. Retrieved August 19, 2009, from Digital Web Web site.
- Hoekman Jr, Robert (2007,08,21). Deliverables That Work: Design Description Documents. Retrieved August 19, 2009, from Think Vitamin Web site.
Technologies Required
- Students will need their own web server to post their assignments
- Mac or PC computer with internet connection
- Web Browsers (Firefox, Opera, Safari, Internet Explorer)
- Copy of the following popular applications used for prototyping (most are available for a free 30 day trial): Visio/OmniGraffle, Powerpoint/Keynote, Axure RP Pro, and Fireworks
- Web page editor that fosters the development of valid (X)HTML and CSS code. Mac: Dreamweaver, Coda, TextMate, Aptana. Windows: Dreamweaver, TextPad, CoffeeCup, Aptana, NotePad.
- Web page debugging and evaluation tools such as Dreamweaver, Firebug, and the Firefox Web Developer Toolbar.
- Slide presentation software (e.g. Powerpoint, Keynote, OpenOffice)
- Whiteboard and markers
- Paper and pencils
Competencies
Topic | Competency | Evaluation Methods |
---|---|---|
Prototyping Concepts | ||
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 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. |
|
|
Conduct a critique of a peer’s work. |
|
|
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. |
|
|
Prototyping Methods | Create a series of prototypes of varied fidelity using a variety of methods. |
|
Describe the benefit of shorter, rapid, iterative cycles with prototyping over longer more detailed cycles. |
|
|
Create a series of prototypes sketches on sketchboards. |
|
|
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. |
|
|
Testing Prototypes | List and describe common mistakes made when testing prototypes. |
|
Identify target demographics for a usability test. |
|
|
List best practices for conducting a usability test. |
|
|
List and describe the goals and intent of a usability study. |
|
|
Prepare a usability test screener, and a test plan. |
|
|
Conduct a usability test of a prototype, and prepare an analysis of the data gathered. |
|
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.
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.
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.
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.
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.
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.
Resources
General Resources
- Service Design Tools
- Usability.gov
- Interaction Design Association
- I love wireframes Flickr group
- Wireframing all in one guide
Coding Tools and Resources
- jQuery JavaScript Framework
- jQuery for Designers
- YUI Grid Builder
- jQTouch: JavaScript library for rapid iPhone app development
Design Software and Tools
- Konigi Interaction Design Tools
- Konigi wireframing sketchbook
- Pens, Pencils and Marker Sets
- PolyPage: prototype development framework
- MockFlow: Online wireframing tool
- iPlotz: Online wireframing tool
- Hot Gloo: Online wireframing tool
- OmniGraffle Pro: Wireframing software
- Adobe Fireworks: Graphics editor
- Balsamiq: Rapid prototyping software
- Axure: Rapid prototyping software
- JustInMind: Prototyping software
- Adaptive Path: Rapid Prototyping Tools
- Pencil Project: Open source GUI design tool
- Loop11: Usability and USer Testing Tools
- Usabilla: Get feedback on mockups and wireframes
Publications and Articles
Learning Modules
Help us develop our living curriculum. Contribute a learning module.Contributors
Primary Course Developers: Todd Zaki Warfel and Aarron Walter