Human-Computer Interaction

Prototyping

Shermeen Adnan
Microsoft Mouse
• Designers may build
dozens of prototypes to
get a more complete
understanding of a design
space
• For example, Paul Bradley
at IDEO built about eighty
foam models for the
original Microsoft mouse
to quickly explore
different directions
 What to prototype?
• Feel: what might it look like?
– Screen layouts and information display
• Implementation: what might it work like?
– Technical issues
– Work flow, task design
• Role: what might the experience be like?
– Difficult, controversial, critical areas
 Prototyping
• Build a prototype of the basic functionality,
especially the interface
• Test the prototype, which will uncover design
errors
• Correct the errors
• Repeat until you have a clean design
• A major tool for improving usability
• Heavily used in industry
 Prototyping Purpose
• The goal in prototyping is not the artifact – it is
feedback and iteration
• Prototypes serve four distinct audiences:
– Colleagues
– Clients
– Users
– Ourselves
 Wireframing
• A website wireframe, also known as a page
schematic or screen blueprint, is a visual guide that
represents the skeletal framework of a website
• Create wireframes for the purpose of arranging
elements to best accomplish a particular purpose
– business objective and a creative idea
• Depicts the page layout or arrangement of the
website’s content, including interface elements and
navigational systems, and how they work together
 Wireframing
• Usually lacks typographic
style, color, or graphics,
since the main focus lies in
functionality, behavior, and
priority of content
• Can be pencil drawings or
sketches on a whiteboard,
or software applications
• http://www.smashingmagazine.com/2009/09/01/35
-excellent-wireframing-resources/
• http://mashable.com/2010/07/15/wireframing-tools/
• http://www.smashingmagazine.com/2009/09/01/35-exc
ellent-wireframing-resources/
 Prototyping tools
• http://pencil.evolus.vn/en-US/Home.aspx (free)
• http://www.moqups.com (free)
• http://www.iphonemockup.net/ (free)
• http://www.justinmind.com/ (partly free, see
video)
• Visio
• Others
– http://memeburn.com/2012/09/25-of-the-best-
wireframing-and-prototyping-tools-ever/
No tool is the right one. It is a matter of what you need to get the job done.
 Pencil Before Pixels
• Before doing anything on the computer, draw
ideas out, whether they are quick wireframes
or figuring out workflows
 Prototyping Techniques
• Create a series of prototypes toward the final system.
• The level of "fidelity" of a prototype refers to how closely it
resembles the final product
– lo-fi (paper-based) or high-fi (software-based) prototypes.
– horizontal (only main functions)
– or vertical (navigation method to access deep functions) prototypes.
 Prototyping Techniques
• What is fidelity?
– Prototypes don’t necessarily look like final
products — they can have different fidelity. The
fidelity of a prototype refers to how it conveys the
look-and-feel of the final product (basically, its
level of detail and realism).
– Fidelity can vary in the areas of:
• Visual design
• Content
• Interactivity
 Low Fidelity Prototypes
• Uses a medium which is unlike the final medium, e.g. paper,
cardboard
• Is quick, cheap and easily changed
• Hand drawn mockups of some design ideas
• Focus on:
– Brainstorming as many ideas as possible
– 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
Increasing automation

Pen and Paper Prototypes “Wizard Of Oz” Prototypes Script-Driven Prototypes Full System
Storyboards

• 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
Left button
task using the device pressed
– Used early in the design Right button
pressed
– Very general, little text.
– If organized as a flow diagram, begins to hint at physical design

• http://en.wikipedia.org/wiki/Paper_prototyping
• http://www.usabilitynet.org/tools/prototyping.htm
• http://speckyboy.com/2010/06/24/10-effective-video-examples-
Storyboards
 Storyboards
• Storyboards should convey
– Setting
• People involved
• Environment
• Task being accomplished
– Sequence
• What steps are involved?
• What leads someone to use the app?
• What task is being illustrated?
– Satisfaction
• What’s motivates people to use this system?
• What does it enable people to accomplish?
• What need does the system fill?
 Benefits of Storyboarding
• Holistic focus: Helps emphasize how an
interface accomplishes a task
• Avoids commitment to a particular user
interface (no buttons yet)
• Helps get all the stakeholders on the same
page in terms of the goal
 Types Of Low Fidelity Prototypes
• Sketches (pen and paper prototypes)
– A drawing of the high-level appearance of the intended
system
– Each page corresponds to a screen of the user interface
– The crudity of the prototype means people concentrate on
high level concepts
– It may be hard to envision the progression of a dialog
– Buttons and links command the user to flip to another page.
– Don’t be inhibited about drawing ability. Practice simple
symbols
Sketch: initial order screen
Sketch: payment screen
Sketch: order confirmation screen
Sketch: order confirmed screen
 Sketch boards
• Sketchboards are just a piece of paper with a
bunch of miniature windows for sketching
 Storyboards vs Sketchboards
• The biggest difference between a storyboard and
a sketchboard is that storyboards are used to tell
a linear story

• Sketchboards, on the other hand, are just

• https://www.youtube.com/watch?v=JMjozqJS44
M
 Exercise
• Each student sketches three
pages with this style template.
• Add buttons, slider bars, make
a clickable map
• Active components should have Amazon Rainforest Ecological Data
‘goto p. 2’ added to them.
• Swap interfaces with a partner,
and ‘navigate’ through them.
• How do your interfaces differ?
 Exercise

p. 1 Amazon Rainforest Ecological Data

Available data
Forest cover
Rainfall
Solar irradiation
Population centers
Sensor positions [p. 2]
 Exercise

p. 2 Amazon Rainforest Ecological Data

Available data
Forest cover
Rainfall [p. 1]
Solar irradiation
Population centers
Sensor positions
 Types Of Low Fidelity Prototypes
• Pictive
– “Plastic interface for collaborative technology
initiatives through video exploration”
– Key points:
• Design consists of multiple layers of sticky notes and
plastic overlays
• Interaction is demonstrated by manipulating notes
– Session is videotaped for later analysis
– Usually end up with mess of paper and plastic!
– “How does it work again?”
Pictive – Example
Pictive – Example
 Medium Fidelity Prototypes
• “Wizard Of Oz” Prototypes
• User interacts on screen with a live interface.
• Hidden developer returns results to user actions.
• Useful for evaluating how a user interacts with a
live interface;
• However, difficult to evaluate timing  ‘Wizard’
may return results faster or slower than the final
system will.
• https://www.youtube.com/watch?v=YmcuN3NlnD
U
 Medium Fidelity Prototypes
• Painting/drawing packages
– Draw each storyboard scene on computer
 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
– Depending upon the type of medium fidelity prototype it may allow for some
user testing
• Pitfalls
– Blinds people to major representational flaws
– Users reluctant to challenge / change the design itself
• Designs are too “pretty”, Management may think its real!
 High Fidelity Prototypes
• 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
 High Fidelity Prototypes
• Script-Driven Prototypes
• Create a screen with interactive elements; assign scripts
to each element.
• When an element is engaged (i.e. a button clicked),
• The script is executed, a new screen is displayed, and the
results of the script execution are displayed to the user.
• Tools: Macromedia Director, Visual programming
languages (Visual Basic)
• https://www.youtube.com/watch?v=KWGBGTGryFk
• https://www.youtube.com/watch?v=lusOgox4xMI
 Full system
• These methods all assume that the system
presents…
– Screenfuls of two-dimensional data
– Discrete data (one screen after another)
– Does not take into account the user’s or system’s
surroundings (context)
• Q: How would you storyboard a robot lawn
mower?
 Dimensions of prototypes
Approaches to limiting prototype functionality
• Vertical prototypes
– Includes in-depth functionality for only a few selected features
– Common design ideas can be tested in depth
• Horizontal prototypes
– Surface layers includes the entire user 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 and Horizontal prototypes
 Types of Prototyes
• Throw-away Prototype
– The prototype is built and tested.
– The design knowledge gained from this exercise is
used to build the final product, but the actual
prototype is discarded.
 Types of Prototypes
• Incremental Prototype
– The final product is built as separate components, one at a time.
– There is one overall design for the final system, but it is partitioned into
independent and smaller components.
– The final product is then released as a series of products, each subsequent
release including one more component.
 Types of Prototypes
• Evolutionary
Prototyping
– The prototype is not
discarded and serves as
the basis for the next
iteration of design.
– In this case, the actual
system is seen as
evolving from a very
limited initial version to
its final release
– fits in well with the
modifications which
must be made to the
system that arise
during the operation
and maintenance
activity in the life cycle
 Types of Prototypes
• Extreme prototyping
• used especially for developing web applications. Basically
• breaks down web development into three phases, each one
based on the preceding one.
– The first phase is a static prototype that consists mainly of HTML
pages.
– In the second phase, the screens are programmed and fully
functional using a simulated services layer.
– In the third phase, the services are implemented.
• The process is called extreme prototyping to draw attention
to the second phase of the process, where a fully functional
UI is developed with very little regard to the services other
than their contract
 Prototyping Comparison

Database

Dynamic
Fidelity
HTML

Digital Mockups

Paper Prototypes

Story boards

Time

43
The Prototyping Process
 Evaluation
• Reviewing the current [design/prototype/final system] to
measure whether it satisfies the requirements and/or user
needs.
• User needs have precedence over requirements.
• “Evaluate early, often and everything”:
– evaluate physical and conceptual designs, scenarios, prototypes,
requirements, and the final system.
• Much evaluation is done in the designer’s head, and is informal:
– “Am I doing this right?”
• But formal evaluation should be carried out at all stages of the
project, time and cost permitting.
 Evaluation
• Evaluation Process:
1.Establish the aims of the evaluation;
– What is being evaluated, why, and by whom?
– What evaluation metrics will be used?
2. Carry out expert review. (Who counts as an expert?)
3. Plan user testing, using results from 2. to sharpen the
method of testing.
4. Recruit a wide user base, and carry out testing.
5. Combine results and analyze them; report back to
designers.
 Evaluation
• How to evaluate them?
• Usually the design principles / non-functional
requirements:
1. Visibility 7. Feedback

2. Consistency 8. Recovery

3. Familiarity 9. Constraints

4. Affordance 10. Flexibility

5. Navigation 11. Style

6. Control 12. Conviviality

2. Consistency 8. Recovery

3. Familiarity 9. Constraints

4. Affordance 10. Flexibility

5. Navigation 11. Style

6. Control 12. Conviviality