Lecture - 4 Prototyping Techniques

Computer Aspect of HCI
Prototyping techniques
Prototyping and construction
•What is a prototype?
•Why prototype?
• Different kinds of prototyping
- low fidelity
- medium fidelity
- high fidelity
•Compromises in prototyping
•Construction
What is a prototype?
In other design fields a prototype is a
small-scale model:
a miniature car
a miniature building or town
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 piece of software with limited
functionality written in the target language
or in another language
Why prototype?
•Evaluation and feedback are central to interaction
design
•Users 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
•Prototypes answer questions, and support

designers in choosing between alternatives
What to prototype?
•Technical issues
•Work flow, task design
•Screen layouts and information display
•Difficult, controversial, critical areas

Prototyping Techniques
Low Fidelity Prototypes
• Hand drawn mockups of some design
ideas
• Focus on:
– Brainstorming as many ideas as possible
(discount usability)
– Making it clear enough to be
understandable
• But don’t focus on making it “pretty”
– They are not computer generated images
(don’t use drawing programs to generate
them)
• May be used to elicit feedback from the
user
Types Of Low Fidelity
Prototypes
• Sketches
• Storyboards
•Sketches:
–A drawing of the high-level appearance of the
intended system
–The crudity of the prototype means people
concentrate on high level concepts
–It may be hard to envision the progression of a
dialog
–Don’t be inhibited about drawing ability. Practice
simple symbols
Sketches
Screen 1: Initial order screen
Sketches (2)
Screen 2: Payment screen
Sketches (3)
Screen 3: Order confirmation screen
Sketches (4)
Screen 4: Order is confirmed
Sketches (5)
Screen 5: Inactivity screen
•Storyboarding
–It’s a series of key frames
• Originally from film; used to get the idea of a scene
• Snapshots of the interface at particular points in the
interaction
• For interfaces it allows users to quickly evaluate the direction of the

design
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

Storyboarding
Initial order screen

Storyboarding (2)
User orders an “Ecstatic Burger”

Storyboarding (3)
Order is placed
Storyboarding (4)
Payment screen comes up

Storyboarding (5)
User pays with cash

Storyboarding (6)
Order confirmation screen comes up

Storyboarding (7)
Order is placed
Storyboarding (8)
Order confirmation is shown

Storyboarding: Alternate Path
Initial order screen

Storyboarding: Alternate Path (2)
User orders a “Basic Merry Burger”

User orders “Smirking small fries”

User orders a “Giggle sized pop”

Order is placed
Payment screen comes up

User pays by debit

Order confirmation screen comes up

Order is placed
Order confirmation is shown

Medium Fidelity Prototypes
• Many different types

– Range from simple computer draw images to
partially working systems
• They may take longer to generate and change

than simple low fidelity representations
• Benefits
– It seems more like the completed system so it provides a
clearer idea of how it works
– May be used to elicit feedback from the user when low-
fidelity approaches cannot be used
•Tutorials and manuals
–Write them in advance of the system
–What are they?
• Tutorial for step by step description of an interaction
–an interface “walk-through” with directions
• Manual for reference of key concepts
–in-depth technical description of the different parts of the
system
–Does this work?
• People often read manuals of competing products to
check:
–interface, functionality, match to task
• Acts as a design tool
•Approaches to integrating prototypes

and the final product:
–Throw-away
–Incremental
–Evolutionary
Throw-Away Approach To Prototyping
•The prototype only is used to get feedback
•The prototype is built, tested and then discarded
System
Incremental Approach To Prototyping
• Build the system as separate modules (component)
•Each module is designed, prototyped and completed
separately before being added to the final system
Evolutionary Approach To Prototyping
• Change the prototype itself in order to incorporate
changes
• Eventually the reworked prototype becomes the final
system
System
• Painting/drawing packages
– Draw each storyboard scene on computer
• Neater/easier (?) to change on the fly than paper
• Scripted simulations and slide shows
– Encode the storyboard on the computer
• Created with media tools
• Scene transition activated by simple user inputs
•Interface builders
– Tools for letting a designer lay out the common widgets
– Construct mode
• Change attributes of objects
– Test mode:
• Objects behave as they would under real situations
– Excellent for showing look and feel

• A broader horizontal prototype
• But constrained to widget library
– Vertical functionality added selectively

• Through programming
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

The Prototyping Process
Early designs
Brainstorm different representations Low fidelity paper prototypes
Choose a representation
Rough out interface style
Task centered walkthrough and redesign
Fine tune interface, screen design Medium fidelity prototypes

and redesign
Usability testing and redesign

High fidelity prototypes / restricted systems
Limited field testing

Working systems
Alpha/Beta tests
Later designs
Screen design
Two aspects:
•How to split across screens
moving around within and between
screens
how much interaction per screen?
•Individual screen design

white space: balance between enough
information/interaction and clarity
grouping items together: separation with
boxes? lines? colors?
Screen design: splitting function
across screens
•Task analysis as a starting point
•Each screen contains a single simple step?
•Frustration if too many simple screens

Screen design: individual
screen design
•Draw user attention to salient point, e.g.
colour, motion, boxing
•Animation is very powerful but can be
distracting
•Good organization helps: grouping,
physical proximity
Grouping

Lecture - 4 Prototyping Techniques

Uploaded by

Copyright:

Available Formats

Lecture - 4 Prototyping Techniques

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture - 4 Prototyping Techniques

Uploaded by

Copyright:

Available Formats

Computer Aspect of HCI

•Users can see, hold, interact with a prototype more

•Team members can communicate effectively

•You can test out ideas for yourself

•Prototypes answer questions, and support

•Work flow, task design

•Screen layouts and information display

•Difficult, controversial, critical areas

• For interfaces it allows users to quickly evaluate the direction of the

•It is a series of sketches showing how a

•Used early in design

Initial order screen

User orders an “Ecstatic Burger”

Payment screen comes up

User pays with cash

Order confirmation screen comes up

Order confirmation is shown

Initial order screen

User orders a “Basic Merry Burger”

User orders “Smirking small fries”

User orders a “Giggle sized pop”

Payment screen comes up

User pays by debit

Order confirmation screen comes up

Order confirmation is shown

• Many different types

• They may take longer to generate and change

•Approaches to integrating prototypes

– Excellent for showing look and feel

– Vertical functionality added selectively

•Danger that users think they have a full system

Fine tune interface, screen design Medium fidelity prototypes

Usability testing and redesign

Limited field testing

•Individual screen design

•Each screen contains a single simple step?

•Frustration if too many simple screens

You might also like