Design, prototyping and

construction

By
Anupa Mogili
Arun Muralidharan
Agenda

 Prototyping and Construction

 Conceptual Design
 Physical Design
Prototyping and Construction
 What is a prototype?
 Why prototype?
 Different kinds of prototyping
 low fidelity
 high fidelity
 Compromises in prototyping
 vertical (“deep”)
 horizontal (“shallow”)
 Construction
What is a prototype?
For users to effectively evaluate the design of an interactive
product, designers must produce an interactive version of their
ideas, this activity is called prototyping.
 In other design fields a prototype is a small-scale model:
 a miniature car
 a model of a building
 In interaction design it can be
 a series of screen sketches
 a PowerPoint slide show
 a video simulating the use of a system
 a lump of wood, e.g. hand-held computer
 a cardboard mock-up
 a piece of software with limited functionality
Why prototype?
 Evaluation and feedback:
allows stakeholders to interact with an
envisioned product, to gain some experience
of using it in realistic settings and to explore
imagined uses
 Communication among team members:
clarifies vague requirements
 Validation of design ideas:
test out the technical feasibility of an idea
 Choosing between alternatives:
provides multiple designs for the application
What to prototype?

 Technical issues
 Work flow, task design
 Screen layouts and information
display
 Difficult, controversial, critical areas
Low-fidelity Prototyping

 Does not look very much like the final product

 Uses materials that are very different from the
intended final version, such as paper and cardboard
rather than electronic screens and metal, e.g. palm
pilot
 Used during early stages of development
 Cheap and easy to modify so they support the
exploration of alternative designs and ideas
 It is never intended to be integrated into the final
system. They are for exploration only.
Examples of Low-fidelity
prototyping

 Storyboards
 Sketching
 Index cards
 ‘Wizard of Oz’
Storyboard
 Originally from film, used to get the idea of
a scene
 Snapshots of the interface at particular
points in the interaction
 Series of sketches
 shows how a user can perform a task using the
device
 Often used with scenarios
 brings more detail to the written scenario
 offers stakeholders a chance to role play with
the prototype, by stepping through the scenario
Storyboard example 1
Storyboard example 2
Sketching
 Drawing skills are not critical
 symbols to indicate tasks, activities,
objects
 flowcharts for time-related issues
 block diagrams for functional
components
Sketching example
Index cards
 Small cards (3 X 5 inches)
 Each card represents one screen
 multiple screens can be shown easily on
a table or the wall
 Thread or lines can indicate
relationships between screens like
 sequence
 hyperlinks
 Often used in website development
Index card example (screen 1)
Screen 2(next index card)
‘Wizard-of-Oz’ prototyping
 Simulated interaction
The user thinks they are interacting with a
computer, but a developer is providing
output rather than the system.

User

>Blurb blurb
>Do this
>Why?
High-fidelity prototyping
 Choice of materials and methods
 similar or identical to the ones in the final
product
 Looks more like the final system
 appearance, not functionality
 Common development environments
 Macromedia Director, Visual Basic, Smalltalk,
 Web development tools
 Misled user expectations
 users may think they have a full system
Difference
Low-fidelity prototype High-fidelity prototype
Advantages/Disadvantages
Prototype Advantages Disadvantages
Low-fidelity - low developmental cost - limited error
prototype - evaluate multiple checking -
design concepts navigational and flow
limitations

High-fidelity - fully interactive - more expensive to

prototype - look and feel of final develop
product - time consuming to
- clearly defines build
navigational scheme - developers are
reluctant to change
something they have
crafted for hours
Compromises in prototyping
 All prototypes involve compromises
 Compromises in low-fidelity prototypes:
 device doesn't actually work
 Compromises in high-fidelity prototypes:
 slow response
 sketchy icons
 limited functionality available
 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
Construction

 Creation, manufacturing of the final system

 based on experiences and feedback gathered from the
prototypes
 Development philosophy
 evolutionary prototyping: involves evolving a prototype into
the final product.
 throw-away prototyping: used as a stepping stone towards
final design. Prototype is thrown away and the final system is
built from scratch.
 Quality
Although prototypes have undergone extensive user evaluation the
final product still has to be subjected to rigorous quality testing
for the following:
 reliability, robustness, maintainability, integrity, portability,
efficiency
Design Objectives

 Identify critical interaction aspects of the

product (Conceptual Design)
 Select the appropriate tools and methods to
provide interactivity (Physical Design)
 Realize that design of products usually
involves several intermediate stages
 Consider the importance of early feedback
for interaction design (Prototypes and
Scenarios)
Definition: ‘Conceptual Design’

“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.”
Conceptual Design
 Transformation of user
requirements/needs into a conceptual
model
 Stepwise refinement
 iterate, iterate and then iterate some
more
 Consideration of alternatives
 prototyping & scenarios
Three perspectives for a conceptual
model
 Interaction mode
 Metaphor
 Interaction paradigm

 Running Example:
 Shared Calendar – Used in a corporate
environment for employees to maintain
their schedule and organize meetings
based on that
Interaction Mode
 How the user invokes actions
 activities by the user and the system’s responses
 Activity-based
 instructing, conversing, manipulating and navigating,
exploring and browsing
 Object-based
 structured around real-world objects
 Process-oriented
 support work processes (e.g. financial software)
 Product-oriented
 develop products that users create, modify and
maintain (e.g. Microsoft Excel, Word)
Three perspectives for a conceptual
model

 Interaction mode
 Metaphor
 Interaction paradigm
Metaphors
 Interface Metaphors
 partial mapping of the software to a real object
 combine familiar knowledge with new knowledge
 help the user understand the product
 Three-step process for choosing a good
metaphor
 understand system functionality,
 identify potential problem or complicated/critical
areas,
 generate metaphors
Evaluation of a metaphor
 How much structure does it provide?
 requires a sound and familiar structure
 How relevant is it to the problem?
 reduce confusion and false expectations
 Is it easy to represent?
 visual and audio elements combined with words
 Will the audience understand it?
 How extensible is it?
 extra aspects that can be useful later on
Three perspectives for a conceptual
model

 Interaction mode
 Metaphor
 Interaction paradigm
Interaction Paradigm
 Coherent collection of interaction methods
 Addresses environmental requirements
 Desktop paradigm
 WIMP interface (windows, icons, menus and
pointers)
 Ubiquitous computing
 Pervasive computing
 Wearable computing
 Mobile devices
Three perspectives for a conceptual
model

 Interaction mode
 Metaphor
 Interaction paradigm
Expanding the conceptual model
 Functionality
 task allocation
 What will the product do and what will the
human do?
 Relationship of subtasks
 categorizations
 all actions related to one particular aspect
 temporal associations (sequential or parallel)
 e.g. CASE tools
 Information
 data required to perform the task
 transformation of data by the system
Scenarios in Conceptual Design
 Express proposed or imagined situations
 Used throughout the design process in
various ways
 scripts for user evaluation of prototypes
 concrete examples of tasks
 as a means of co-operation across professional
boundaries (shared understanding of the
system)
 sell ideas to users and potential customers
 ‘Plus’ and ‘Minus’ scenarios
 exploration of extreme cases
Prototypes in Conceptual Design
 Evaluation of emerging ideas
 user feedback, feasibility
 choice of methods and materials
 Continuous prototyping
 low-fidelity prototypes early on
 high-fidelity prototypes later
 Evolutionary prototyping
 early prototypes are gradually enhanced and
augmented
 appearance
 functionality
Physical Design
 Concrete, detailed issues of designing the
interface
 although inaccurate, the term is also used for
software-based systems
 Pervasive physical/conceptual design
 Guidelines for physical design
 Nielsen’s heuristics
 Shneiderman’s eight golden rules
 Style guides: commercial/corporate purposes
 collection of design rules and principles
 decide ‘look and feel’
Physical design for Computer
Interaction
 Different kinds of ‘widgets’
 dialog boxes, toolbars, icons, menus,
etc
 Emphasis
 Menu design
 Icon design
 Screen design
 Information display
Menu Design

 Arrangement
 number of menus
 length
 order of items
 Grouping
 categorization
 visual division (colours, dividing lines)
 Structure
 sub-menus, dialog boxes
 Terminology
 Constraints
 screen size, input method
 Context
 applicability of entries
Activity Menu Design
 Compare the menu systems used on
 a digital camera
 a cell phone
 a digital music player (e.g. iPod)
 Criteria
 Functionality
 number of functions, categories
 Usability
 frequency of use, importance, consequences
 Constraints
 space, input methods
Physical Design - Emphasis

 Menu Design
 Icon Design
 Screen Design
 Information Display
Icon design
 Good icon design is difficult
 has to be widely acceptable
 meaning must be readily perceivable
 distinguishable from each other
 Meaning of icons
 cultural and context sensitive
 Practical tips
 always draw on existing traditions or standards
 concrete objects or things are easier to
represent than actions
Physical Design - Emphasis

 Menu Design
 Icon Design
 Screen Design
 Information Display
Screen design
 Splitting functions across screens
 moving around within and between screens
 how much interaction per screen
 serial or workbench style
 Individual screen design
 white space
 balance between information/interaction
and clarity
 grouping of items
 separation with boxes, lines, colors
Splitting Functions across Screens
 Task analysis as a starting point
 each screen should contain a single
simple step
 user frustration
 too many simple screens
 Context
 all pertinent information must be made
available at relevant times
 multiple screens open at once
Individual Screen Design

 User attention
 directed to salient point
 e.g. via colour, motion, etc
 animation is very powerful but can be distracting
 Organization
 Grouping
 physical proximity, colour, shape,
 Structure
 connections between related items
 Trade-off
 sparse population vs. overcrowding
Physical Design - Emphasis

 Menu Design
 Icon Design
 Screen Design
 Information Display
Information display
 Context
 relevant information is available at all times in the
most efficient format for the specific task
 Types of information
 imply different kinds of display
 alpha-numerical, chart, graphs
 Consistency
 paper display and screen data entry
 different screens with similar information
(customisable)
 information content vs. presentation
Physical Design - Emphasis

 Menu Design
 Icon Design
 Screen Design
 Information Display
Summary
 Different kinds of prototyping is used for
different purposes and at different stages
 Construction: Make sure the final product is
engineered appropriately
 Conceptual design (the first step of design)
 Physical design: e.g. menus, icons, screen
design, information display
 Prototypes and scenarios are used
throughout design as well
Thank You !