Overview

• Prototyping

• Construction

• Conceptual design

• Physical design

• Generating prototypes

• Tool support

Why prototype?

• Evaluation and feedback for iteration • You can test out ideas for yourself

• It encourages reflection• Makes the invisible visible

AwareHouse for the elderlyor...

A warehouse for the elderly• Supports team member communication• Stakeholders can see, hold, interact with a prototype more easily than a document or a drawing

• Prototypes answer questions, and support designers in choosing between alternatives

Messies vs Neats

• This applies to HCI design as well as to research methodologies

• In HCI design you will find two cultures:– Prototyping culture

• Roughly aligned with the messies• Assume that the user doesn’t know what they want• Falls prey to missing the real need

– Specification culture• Roughly aligned with the neats• Assumes that the user does know what they want• Falls prey to innovation

Prototyping• Different kinds of prototyping

-low fidelitydrawings on paper

-high fidelitypartially functional system

• Compromises in prototyping-vertical

lots of detail in a small portion-horizontal

lots of surface functionalityprovides the “flavor” of the

design

What is a prototype?

In interaction design it can be (among other things):• a storyboard, i.e. a cartoon-like series of scenes

• scenario of use• a series of screen sketches• an html web site• a video simulating the use of a system• a lump of wood• a cardboard mock-up• a piece of software with limited functionality

Low-fidelity Prototyping

• Uses a medium which is unlike the final medium, e.g. paper, cardboard

• Is quick, cheap and easily changed

• Examples:sketches of screens, task

sequences, etc‘Post-it’ notesstoryboardsfunctionality provided by

‘Wizard-of-Oz’

Sketching

• Sketching is important to low-fidelity prototyping

• Don’t be inhibited about drawing ability. Practice simple symbols

Storyboards

• Often used with scenarios, bringing more detail, and a chance to role play

• It is a series of sketches showing how a user might progress through a task using the device

• Used early in design

Generate storyboard from scenario

Card-based prototypes•Index cards (3 X 5 inches) •Each card represents one screen or part of screen

•Often used in website development

Generate card-based prototype from use case

‘Wizard-of-Oz’ prototyping

• The user thinks they are interacting with a computer, but a developer is responding to output rather than the system.

• Usually done early in design to understand users’ expectations

• What is ‘wrong’ with this approach?

>Blurb blurb>Do this>Why?

User

What to do with this data…• Generate some graphs that show that new people have

a hard time with Building A• Organize the technology section in a meaningful

way… the idea here is to get a handle on what your technology constraint will be

• Print out the “open discussion” sections cut them up and try to organize them in a useful manner to help support what the actual problem is…

• Begin iteration on your design ideas• How to start this process…

Develop a scenarios of use• Express in words a description of the situation

• Tell the story from the user’s perspective• Use names… users can envision things better in the concrete-Bob is new to GGC.-He has the unfortunate need to attend his first class in building A

-As he talks to his girlfriend Elaine, he walks into the building and his cell phone buzzes

-He looks to see his room is down the hall and to the right and then continues his conversation

-Notice that the device is clairvoyant… it knows where he is going

Generate storyboard from scenario