Design, prototyping and construction By Anupa Mogili

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
prototype
- low developmental cost - limited error
checking - evaluate multiple
navigational and flow
design concepts
limitations
High-fidelity
prototype
- fully interactive
- look and feel of final
product
- clearly defines
navigational scheme
- more expensive to
develop
- time consuming to
build
- 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


Development philosophy



based on experiences and feedback gathered from the
prototypes
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


categorization
visual division (colours, dividing lines)

sub-menus, dialog boxes

screen size, input method

applicability of entries
Grouping
Structure
Terminology
Constraints
Context
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 !