Human Computer Interaction

IE403

Dr. Manish Khare

Prototyping

Slide 2
 Prototyping in Human-Computer Interaction (HCI) refers to
the process of creating a simplified, preliminary version of a
digital product or system to gather feedback and test design
concepts.

 Prototyping is an essential step in the iterative design process,

allowing designers and developers to quickly explore ideas,
refine interactions, and validate design decisions before
investing in full-scale development.

Slide 3
 Designer can come up with design ideas on the basis of this data
 Typically more than one designs are proposed

 It is necessary to evaluate the alternative designs to find out the most

appropriate one

 Interactive systems are designed following a user-centered design approach

 Evaluation of the alternative design proposals should be done from user’s
perspective

 Employing end users in evaluating designs is not easy

 It is costly in terms of money, time, effort and manpower

Slide 4
 A prototype is essentially a model of the system
 The prototype (model) can have limited or full range of
functionalities of the proposed system

 A widely used technique in engineering where novel products

are tested by testing a prototype

Slide 5
 Objectives of Prototyping
 The main objectives of prototyping in Human-Computer Interaction (HCI) are:

 Gather Feedback: Obtain early and continuous feedback from users to improve the
design.
 Test Design Concepts: Evaluate different design ideas and interactions to identify
strengths and weaknesses.
 Refine Interaction Design: Iterate on the design to enhance usability, functionality,
and user satisfaction.
 Validate Design Decisions: Confirm that the design meets user needs and aligns with
project goals.
 Improve Communication: Facilitate communication between stakeholders, designers,
and developers by visualizing design concepts.
 Reduce Development Risks: Identify and address potential issues early in the design
process to minimize risks during development.

Slide 6
 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
 Test out ideas for yourself
 It encourages reflection: important aspect of design
 Prototypes answer questions, and support designers in
choosing between alternatives

Slide 7
 What do Prototype?

FEEL: What might it look like?

IMPLEMENTATION: How would it work?
ROLE: What might the experience be like?

Slide 8
 What do prototypes tell us?

 Interest: would people want this?

 Use: does this solve a real problem?

 Usability: is this easy, sensible, and effective?

 Implementation: can this be done?

Slide 9
 Why we need Prototyping

 User Feedback: Prototyping allows designers to gather feedback from users

early in the design process. This feedback is crucial for understanding user
needs, preferences, and pain points, which can inform and improve the final
design.

 Visualization: Prototyping helps designers and stakeholders visualize and

interact with the design concept. It provides a tangible representation of the
proposed solution, making it easier to evaluate and refine ideas.

 Iterative Design: Prototyping supports an iterative design process, where

designers can quickly create, test, and refine design ideas. This iterative
approach leads to more user-centered and effective designs.

Slide 10
 Why we need Prototyping
 Risk Reduction: By testing design concepts early with prototypes, designers
can identify and address potential issues before investing in full-scale
development. This reduces the risk of developing a product that does not meet
user needs or expectations.

 Communication: Prototypes serve as a communication tool between

designers, developers, and stakeholders. They help convey design ideas,
demonstrate interactions, and gather feedback more effectively than verbal or
written descriptions.

 Cost-Effective: Prototyping is often more cost-effective than developing a

fully functional product. It allows designers to explore multiple design
alternatives and make informed decisions without the expense of full-scale
development.
Slide 11
Focus on the GOALS

Evolve the DESIGN

Slide 12
 Prototyping

• Prototypes can be “throw away” (e.g., scale models

which are thrown away after they serve their purpose)
or can go into commercial use

• In software development prototypes can be

– Paper-based: likely to be thrown away after use
– Software-based: can support few or all functionalities of the
proposed system. May develop into full-scale final product

Slide 13
 Prototyping in HCI

 Essential element in user centered design

 Is an experimental and partial design
 Helps involving users in testing design ideas without
implementing a full-scale system

 Typically done very early in the design process

 Can be used throughout the design life cycle

Slide 14
 What to Prototype?

 Any aspect of the design that needs to be evaluated

 Work flow
 Task design
 Screen layout
 Difficult, controversial, critical areas

Slide 15
Slide 16
 Prototypes in HCI

 In HCI, prototypes take many forms

 A storyboard (cartoon-like series of screen sketches)
 A power point slide slow
 A video simulating the use of a system
 A cardboard mock-up
 A piece of software with limited functionality
 Even a lump of wood

Slide 17
Prototypes Vs Mock Ups Vs Wireframes

 Mock-ups and wireframes are static,

 representing a single state of the design

 Prototypes are simulations/models of how

 the design is supposed to actual work

 Prototypes are usually intended to be shown to the end user

 Wireframes are usually part of a design document to go from design to actual system
 Usually contain annotations specific to the design team and are not intended for
end-user consumption

 Wireframes can be used as a lo-fidelity prototype to save time

 Remove annotations, make it interactive

Slide 18
Slide 19
 Prototype Fidelity (level of similarity)

• We can categorize all these different forms of

prototypes in three groups
– Low fidelity prototypes

– Medium fidelity prototypes

– High fidelity prototypes

Slide 20
 Low Fidelity Prototypes

 Low-fidelity prototypes are quick and easy to create, often using simple tools
like paper, markers, or digital wireframing software.

 These prototypes focus on conveying basic design concepts and interactions

without getting into detailed visuals or functionality.

 Low-fidelity prototypes are ideal for early-stage ideation, allowing designers

to quickly explore and iterate on ideas, gather feedback from users, and test
basic interactions.

 They are cost-effective and accessible to both designers and non-designers,

making them a valuable tool for brainstorming and concept validation.

Slide 21
Low Fidelity Prototypes

Slide 22
 Low Fidelity Prototypes

 Basically paper mock-up of the interface look, feel,

functionality
 Quick and cheap to prepare and modify

 Purpose
 Brainstorm competing designs
 Elicit user reaction (including any suggestions for
modifications)

Slide 23
Low Fidelity Prototypes: Sketches

Interface of a proposed A sketch of the interface

system

Slide 24
 Low Fidelity Prototypes: Sketches

 In a sketch, the outward appearance of the intended system is

drawn
 Typically a crude approximation of the final appearance

 Such crude approximation helps people concentrate on high

level concepts
 But difficult to visualize interaction (dialog’s progression)

Slide 25
 Low Fidelity Prototypes: Storyboarding

 Scenario-based prototyping

 Scenarios are scripts of particular usage of the system

 Now we show an example storyboarding of a scenario of

stroller-buying using an e-commerce interface

Slide 26
Low Fidelity Prototypes: Storyboarding

Initial screen. Shows the

layout of interface
options.

Slide 27
 Low Fidelity Prototypes: Storyboarding

Once a stroller is
selected by the customer,
its tag is scanned with a
hand-held scanner. The
details of the stroller is
displayed on the
interface if the scanning
is successful. Also, the
option buttons become
active after a successful
scan.

Slide 28
 Low Fidelity Prototypes: Storyboarding

However, the customer

can choose a different
product at this stage and
the same procedure is
followed. For example,
the customer may choose
a stroller with different
color.

Slide 29
Low Fidelity Prototypes: Storyboarding

Once the customer

finalizes a product, a bill
is generated and
displayed on the
interface. The option
buttons become inactive
again.

Slide 30
 Low Fidelity Prototypes: Storyboarding

 Here, a series of sketches of the keyframes during an

interaction is drawn

 Typically drawn for one or more typical interaction scenarios

 Captures the interface appearance during specific instances of

the interaction

 Helps user evaluate the interaction (dialog) unlike sketches

Slide 31
 Low Fidelity Prototypes: Pictiv

 Pictiv stands for “plastic interface for

collaborative
technology initiatives through video exploration”

 Basically, using readily available materials to prototype

designs

 Sticky notes are primarily used (with plastic overlays)

 Represent different interface elements such as icons, menus,

windows etc. by varying sticky note sizes

Slide 32
 Interaction demonstrated by manipulating sticky notes
 Easy to build new interfaces “on the fly”

 Interaction (sticky note manipulation) is videotaped for later

analysis

Slide 33
 Low Fidelity : Not always paper

http://www.designinginteractions.com/interviews/JeffHawkins

https://www.theverge.com/2021/10/25/22744761/apple-ipod-prototype-
original-design

Slide 34
Prototyping Techniques

Adobe xd
Figma
Framer

Slide 35
Affinity Diagram

Slide 36
Paper prototype

Slide 37
Why paper prototyping?

Slide 38
What can we learn from Paper prototype?

Example of paper prototype: https://www.hashcut.com/v/xjkyCdp

Slide 39
Paper prototypes

Slide 40
Design Challenges/Issues and How Paper prototyping helps

 Device constraints
 Time to market
 Multiple stakeholders
 Proving concepts early
 Technology led Not User Centered

Slide 41
What we cannot learn?

Slide 42
 When to use Low-Fidelity Prototyping?

 Use when exploring and brainstorming initial design concepts.

 Use to gather quick feedback and validate basic ideas.

 Use in the early stages of the design process to iterate rapidly

and explore different design directions.

 Use when time and resources are limited.

Slide 43
 Medium Fidelity Prototypes

 Medium-fidelity prototypes are more detailed than low-fidelity prototypes but

less polished than high-fidelity prototypes.

 It’s not as basic as a simple drawing, but it’s also not as fancy as a fully
finished product.

 Medium-fidelity prototypes are used to test more complex interactions, gather

more detailed feedback from users, and validate design decisions.

 They offer a balance between detail and speed, allowing designers to explore
design ideas in more depth without investing too much time or resources.

Slide 44
Slide 45
 Medium Fidelity Prototypes

 Prototypes built using computers

 More powerful than low fidelity prototypes
 Simulates some but not all functionalities of the system
 More engaging for end users as the user can get better
feeling of the system
 Can be helpful in testing more subtle design issues

Slide 46
 Broadly of two types
 Vertical prototype where in-depth functionalities of a
limited number of selected features are implemented.
 Such prototypes helps to evaluate common design ideas in
depth.
 Example: working of a single menu item in full

Slide 47
 Broadly of two types
 Horizontal prototype where the entire surface interface is
implemented without any functionality. No real task can
be performed with such prototypes.
 Example: first screen of an interface (showing layout)

Slide 48
 Medium Fidelity Prototypes: Scenarios

 Computer are more useful (than drawing on paper as in

storyboarding) to implement scenarios
 Provide many useful tools (e.g., power point slides,
animation)
 More engaging to end-users (and easier to elicit better
response) compared to hand-drawn story-boarding

Slide 49
Computer prototypes

Slide 50
Experience Prototyping

Slide 51
Slide 52
 What does a prototype look like?

 a series of screen designs (e.g., from photoshop)

 a storyboard, i.e. a cartoon-like series of scenes
 a PowerPoint slide show or HTML pages
 a video simulating the use of a system
 a lump of wood or foam (e.g. to represent a physical design)
 a cardboard mock-up
 a piece of software with limited functionality written in the
target language or in another language

Slide 53
When to use Medium-Fidelity Prototyping?

 Use when you need to test more detailed interactions and user
flows.

 Use to refine the layout, navigation, and visual hierarchy of your

design.

 Use when you want to involve stakeholders in more detailed

design discussions.

 Use when you have more time and resources to create a more
polished prototype.
Slide 54
 High-Fidelity Prototyping

 High-fidelity prototyping is like creating a highly detailed and realistic version

of your design idea. It closely resembles the final product in terms of
appearance and functionality, but it’s not fully functional.

 In a high-fidelity prototype, you would use software tools to create a digital

version of your design that looks and behaves almost like the real thing.

 While high-fidelity prototypes require more time and resources to create, they
offer a more accurate representation of the final product, making them
valuable for testing complex interactions and gathering detailed feedback from
users.

Slide 55
Slide 56
 High-Fidelity Prototyping

 Typically a software implementation of the design with full or

most of the functionalities
 Requires money, manpower, time and effort
 Typically done at the end for final user evaluations

Slide 57
 When to use High-Fidelity Prototyping?

 Use when you need to conduct realistic usability testing.

 Use to present a more polished and detailed version of your

design to stakeholders.

 Use when you want to simulate the final product as closely as

possible.

 Use when you are ready to finalize the design and move into
development.

Slide 58
 Fidelity is multidimensional

Deep or vertical prototyping

• provide a lot of detail for only a few functions

Broad or horizontal prototyping

• provide a wide range of functions, but with little
detail
University of Wash

Slide 59
 Levels of Prototyping

Storyboard
Paper prototypes
Digital mock ups
HTML
Dynamic
DB
Fidelity

Time

Slide 60
 Example of Prototyping in HCI

 An example of prototyping in HCI is the design of a new

mobile app

Slide 61
 Low-Fidelity Prototype
 Designers create rough sketches on paper showing different screens and basic
interactions of the app.
 Why?: To quickly explore and iterate on different layout and interaction ideas,
gather initial feedback from users.
 Medium-Fidelity Prototype:
 Designers use digital tools to create wireframes of the app, showing more detailed
layouts and interactions.
 Why?: To test and refine the user flow, navigation, and overall usability of the
app.
 High-Fidelity Prototype:
 Designers create a digital prototype of the app that closely resembles the final
product, including realistic graphics and interactive elements.
 Why?: To conduct usability testing with users, validate design decisions, and
provide stakeholders with a realistic preview of the app.
Slide 62
Differences between Low-Fidelity and High-Fidelity Prototyping

Aspect Low-Fidelity Prototyping High-Fidelity Prototyping

Simple, basic representations (e.g., sketches, Detailed, realistic representations (e.g.,
Fidelity
wireframes) interactive prototypes with graphics)

Low cost, as they can be created quickly Higher cost, as they require more time and
Cost
and with minimal resources resources to create

Speed Quick to create and iterate on Slower to create and iterate on

Suitable for early-stage testing and feedback Suitable for detailed usability testing and
Usability Testing
gathering validation

Less realistic, focusing on concept

Realism More realistic, resembling the final product
exploration

Limited functionality, primarily focusing on May include more functionality to mimic the
Functionality
key interactions final product

Effective for early stakeholder More engaging for stakeholders and clients
Stakeholder Engagement
communication and idea validation due to realistic representation

Provides a general direction for Offers more specific guidance for

Development Guidance
development development

Slide 63
Differences between Medium-Fidelity and High-Fidelity Prototyping

Aspect Medium-Fidelity Prototyping High-Fidelity Prototyping

More detailed than low-fidelity, but less polished Very detailed, closely resembling the final
Fidelity
than high-fidelity product

Moderate cost, as they require more time and Higher cost, as they require more time and
Cost
resources than low-fidelity resources to create

Moderate speed, more time needed for details and Slower, more time-consuming due to
Speed
refinement detailed design elements

More suitable for detailed usability testing and Ideal for realistic usability testing and user
Usability Testing
feedback engagement

Includes detailed visual and interactive

Realism Includes some visual and interactive elements
elements

Suitable for presenting to stakeholders and refining Ideal for presentations and demonstrations
Stakeholder Engagement
design ideas to stakeholders

Allows for some iteration and changes based on Slower iteration due to complexity of
Iteration
feedback design elements

Slide 64
 Prototype and Final Product

• Prototypes are designed and used in either of the

following ways
– Throw-away: prototypes are used only to elicit user
reaction. Once their purpose is served, they are thrown
away.

– Typically done with low and some medium fidelity

prototypes

Slide 65
 Prototype and Final Product

Prototypes are designed and used in either of the

following ways

– Incremental: Product is built as separate components

(modules). After each component is prototyped and
tested, it is added to the final system

 Typically done with medium and hi fidelity prototypes

Slide 66
 Prototype and Final Product

• Prototypes are designed and used in either of the

following ways
– Evolutionary: A single prototype is refined and
altered after testing, iteratively, which ultimately
“evolve” to the final product

– Typically done with hi fidelity prototypes

Slide 67
 Prototyping Tools

• For (computer-based) medium and hi fidelity

prototype developed, several tools are available
– Drawing tools, such as Adobe Photoshop, MS Visio
can be used to develop sketch/storyboards

– Presentation software, such as MS Power Point with

integrated drawing support are also suitable for low
fidelity prototypes

Slide 68
 Prototyping Tools

• For (computer-based) medium and hi fidelity

prototype developed, several tools are available
– Media tools, such as Adobe flash can be to develop
storyboards. Scene transition is achieved by simple
user inputs such as key press or mouse clicks

Slide 69
 Prototyping Tools

For (computer-based) medium and hi fidelity prototype

developed, several tools are available

– Interface builders, such as VB, Java Swing with their

widget libraries are useful for implementing screen
layouts easily (horizontal prototyping). The interface
builders also supports rapid implementation of vertical
prototyping through programming with their extensive
software libraries

Slide 70
 The Wizard of Oz Technique

• A technique to test a system that does not exist

• First used to test a system by IBM called the
listening typewriter (1984)
– Listening typewriter was much like modern day voice
recognition systems. User inputs text by uttering the
text in front of a microphone. The voice is taken as
input by the computer, which then identifies the text
from it.

Slide 71
 The Wizard of Oz Technique

• Implementing voice recognition system is too

complex and time consuming

• Before the developers embark on the process,

they need to check if the “idea” is alright;
otherwise the money and effort spent in
developing the system would be wasted
• Wizard of oz provides a mechanism to test the
idea without implementing the system

Slide 72
 The Wizard of Oz Technique

• Suppose a user is asked to evaluate the listening

typewriter
• He is asked to sit in front of a computer screen
• A microphone is placed in front of him

• He is told that “whatever he speaks in front of the

microphone will be displayed on the screen”

Slide 73
 The Wizard of Oz Technique

Wall
This is what the user sees: a
Hello world screen, a microphone and the
“computer” in front of a
opaque wall.

Computer

Slide 74
 The Wizard of Oz Technique

This is what happens behind the wall. A typist (the wizard) listen to the
utterance of the user, types it, which is then displayed on the user’s screen.
The user thinks the computer is doing everything, since the existence of
the wizard is unknown to him.

Hello
world
Hello world

Computer

Slide 75
 The Wizard of Oz Technique

• Human ‘wizard’ simulates system response

– Interprets user input
– Controls computer to simulate appropriate output
– Uses real or mock interface

– Wizard is typically hidden from the user; however,

sometimes the user is informed about the wizard’s
presence

Slide 76
 The Wizard of Oz Technique

• The technique is very useful for

– Simulating complex vertical functionalities of a

system

– Testing futuristic ideas

Slide 77