Prototyping

Universidad de Costa RicaPosgrado en Computación e

InformáticaDiseño de interfaz humano-

computador

2

“In engineering, and error, not the planning of flawless intellects, has brought most advances; this is why engineers build prototypes.”

Eric Drexler

3

Overview • User centered system design and

participatory design

• Prototyping and construction

• Conceptual design

• Physical design

• Generating prototypes

• Tool support

4

User Centered System Design

Typical approach: System Centered Design

5

User Centered System Design

• What can I easily build on this platform?

• What can I create from the available tools?

• What do I as a programmer find interesting?

Typical approach: System Centered Design

6

User Centered System Design

• Design is based upon a user’s– abilities and real needs – context– work– tasks– need for usable and useful product

• Golden rule of interface design: Know The User

7

User Centered System Design

•... is based on understanding the domain of work or play in which people are engaged and in which they interact with computers…

From Denning and Dargan, p111 in Winograd, Ed., Bringing Design to Software, Addison Wesley

Denning and Dargan, 1996

8

User Centered System Design

• Assumptions– The process of design is a collaboration

between designers and customers. • The design evolves and adapts to their changing

concerns.• The process produces a specification as an

important byproduct.

9

User Centered System Design

• Assumptions– The customer and designer are in

constant communication during the entire process.

– The result of a good design is a satisfied customer.

10

Participatory Design

• Problem– Intuitions wrong– Interviews and other communications not

precise– Designer cannot know the user

sufficiently well to answer all issues that come up during the design

The user

is just

like me

11

Participatory Design

• Solution– Designers should have access to

representative users• END users, not their managers or union reps!

12

Participatory Design

• Users are 1st class members in the design process.– Active collaborators vs passive

participants

• Users considered subjectmatter experts.– Know all about the work

context.

13

Participatory Design

• Iterative process– All design stages subject to revision

Design

Prototype

Evaluate

14

Participatory Design

• Up side– Users are excellent at reacting to suggested

system designs.• Designs must be concrete and visible.

– Users bring in important “folk” knowledge of work context.• Knowledge may be otherwise inaccessible to

design team.

– Greater buy-in for the system often results.

15

Participatory Design

• Down side– It is hard to get a good pool of end users.

• Expensive, reluctance ...

– Users are not expert designers.• Don’t expect them to come up with design

ideas from scratch.

– The user is not always right• Don’t expect them to know what they want.

16

Participatory Design Methods for involving the user

• At the very least, talk to users– Surprising how many designers don’t!

• Contextual interviews + site visits– Interview users in their workplace, as

they are doing their job– Discover user’s culture,

requirements, expectations,…

17

Participatory Design Methods for involving the user

• Explain designs– Describe what you’re going to do.– Get input at all design stages .

• All designs subject to revision

18

Participatory Design Methods for involving the user

• Important to have visuals and/or demos– People react far differently with verbal

explanations.– This is why prototypes are critical.

19

Prototyping and construction

• What is a prototype? • Why prototype?• Different kinds of prototyping

low fidelityhigh fidelity

• Compromises in prototypingvertical horizontal

• Construction

20

What is a prototype?

In other design fields a prototype is a small-scale model:

• a miniature car• a miniature building or town

21

What is a prototype?

In interaction design it can be (among other things):• a series of screen sketches• a storyboard, i.e. a cartoon-like series of scenes • a Powerpoint slide show• a video simulating the use of a system• a lump of wood (e.g. PalmPilot)• a cardboard mock-up• a piece of software with limited functionality written in

the target language or in another language

22

Why prototype?

• Evaluation and feedback are central to interaction design.

• Stakeholders can see, hold, interact with a prototype more easily than a document or a drawing.

• Team members can communicate effectively.• You can test out ideas for yourself .• It encourages reflection: very important aspect of

design .• Prototypes answer questions, and support designers in

choosing between alternatives .

23

What to prototype?

• Technical issues

• Work flow, task design

• Screen layouts and information display

• Difficult, controversial, critical areas

24

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, others‘Post-it’ notesStoryboards‘Wizard-of-Oz’

25

Sketching

• Sketching is important to low-fidelity prototyping.

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

26

Sketching

• It is drawing of the outward appearance of the intended system.

• Crudity means people concentrate on high level concepts.– But hard to envision a

dialog’s progression

27

Sketching - Attributes• Quick

– to make• Timely

– provided when needed• Disposable

– investment in the concept, not the execution

• Plentiful – they make sense in a

collection or series of ideas• Clear vocabulary

– rendering & style indicates it’s a sketch, not an implementation

• Constrained resolution– doesn’t inhibit concept

exploration• Consistency with state

– refinement of rendering matches the actual state of development of the concept

• Suggest & explore rather than confirm– value lies in suggesting

and provoking what could be i.e., they are the catalyst to conversation and interaction

28

Card-based prototypes

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

screen• Often used in website development

29

Storyboards

• Users can evaluate quickly the direction the interface is heading.

• Are often used with scenarios, bringing more detail, and a chance to role play.

• A storyboard is a series of sketches showing how a user might progress through a task using the device.•It is used early in design.

30

Storyboards - Examples

Storyboard showing navigation Storyboard with annotations

31

Tutorials as Storyboards

• A step by step storyboard walkthrough with detailed explanations– Written in advance of the system

implementation

• Also an interface specification for programmers

Apple’s Tutorial Guide to the Macintosh Finder

32

High-fidelity prototyping• Uses materials that you would expect to be in the final

product.

• Prototype looks more like the final system than a low-

fidelity version.

• For a high-fidelity software prototype common

environments include Macromedia Director, Visual

Basic, and Smalltalk.

• Danger that users think they have a full

system…….see compromises

33

High-fidelity prototyping

• Purpose– Provides sophisticated but limited scenario for

the user to try– Can test more subtle design issues

• Dangers– Users reluctant to challenge designer– Users reluctant to touch the design– Management may think its real!

34

High-fidelity prototyping

• Prototyping with a computer– simulate some but not all features of the

interface• engaging for end users

• “Wizard of Oz”

• Scripted simulations

35

‘Wizard-of-Oz’ prototyping• The user thinks she is interacting with a computer,

but a person is responding to output rather than the system. •Usually done early in design to understand users’ expectations

>Blurb blurb>Do this>Why?

User

36

‘Wizard-of-Oz’ prototyping

• Human ‘wizard’ simulates system response– Interprets user input according to an algorithm.– Controls computer to simulate appropriate output.– Uses real or mock interface.– Wizard is sometimes visible, sometimes hidden.

• “Pay no attention to the man behind the curtain!”

• Good for:– Adding simulated and complex vertical functionality– Testing futuristic ideas

37

‘Wizard-of-Oz’ prototyping

Dear Henry

What the user sees

SpeechComputer

38

‘Wizard-of-Oz’ prototyping

39

Compromises in prototyping

•All prototypes involve compromises.•For software-based prototyping maybe there is a slow response? sketchy icons? limited functionality?

•Two common types of compromise• ‘horizontal’: provide a wide range of functions,

but with little detail• ‘vertical’: provide a lot of detail for only a few

functions•Compromises in prototypes mustn’t be ignored. Product needs engineering

40

Control panel for pump 2

coolant flow 45 %

retardant 20%

speed 100%

Shut Down

Scripted simulations

• Create storyboard with media tools– Scene transition activated by simple user inputs– A simple vertical prototype

• User given a very tight script/task to follow– Appears to behave as a

real system– Script deviations blow

the simulation

Control panel for pump 2

coolant flow 0 %

retardant 20%

speed 100%

DANGER!

Shut Down

41

42

43

44

45

Conceptual design: from requirements to design

• Transform user requirements/needs into a conceptual model. •“A description of the proposed system in terms of a set of integrated ideas and concepts about what it should do, behave and look like, that will be understandable by the users in the manner intended”

• Don’t move to a solution too quickly. •Iterate, iterate, iterate.

• Consider alternatives.•prototyping helps.

46

Is there a suitable metaphor?

• Interface metaphors combine familiar knowledge with new knowledge. •In a way that will help the user understand the product

• Three steps: •Understand functionality.•Identify potential problem areas. •Generate metaphors.

47

Is there a suitable metaphor?

• Evaluate metaphors:– How much structure does it provide?– How much is relevant to the problem?– Is it easy to represent?– Will the audience understand it?– How extensible is it?

48

Considering interaction types

• Which interaction type?How the user invokes actions

InstructingConversingManipulatingExploring

• Do different interface types provide insight?WIMP, shareable, augmented reality, others

49

Expanding the conceptual model

•What functions will the product perform?

What will the product do and what will the human do (task allocation)?

•How are the functions related to each other?

Sequential or parallel?Categorisations,

•e.g. all actions related to telephone memory storage

50

• What information needs to be available?

• What data is required to perform the task? • How is this data to be transformed by the

system?

Expanding the conceptual model

51

Using scenarios in conceptual design

• Express proposed or imagined situations

• Used throughout design in various ways

•Scripts for user evaluation of prototypes

•Concrete examples of tasks

•As a means of co-operation across professional boundaries

52

Generate storyboard from scenario

53

Generate card-based prototype from use case

54

Tool support - DENIM

55

Limiting prototype functionality• Vertical prototypes

– Include in-depth functionality for only a few selected features.– Common design ideas can be tested in depth.

• Horizontal prototypes– The entire surface interface with no underlying functionality– A simulation

• No real work can be performed

• Scenario– Scripts of particular fixed uses

of the system• No deviation allowed

Vertical prototype

Scenario

Horizontal prototype

Full interface

56

Summary• Different kinds of prototyping are used for different

purposes and at different stages

• Prototypes answer questions, so prototype appropriately

• Construction: the final product must be engineered appropriately

• Conceptual design (the first step of design)

• Consider interaction types and interface types to prompt creativity

• Storyboards can be generated from scenarios• Card-based prototypes can be generated from use cases