designing for interaction, chris bernard
TRANSCRIPT
Designing for InteractionBuilding a Vision for Innovation in Interaction Design
Chris Bernard, User Experience Evangelist, Microsoft
This presentation is a collection of frameworks that I find
useful when talking about interaction design. Some of them
are dated but all of them are still relevant. These concepts
come from time at IBM and the Institute of Design
February 2008
Designing for Interaction is…• Setting objectives: Determining the target audiences,
intended users, and success criteria is central to all
design and user participation.
• Understanding audience: A commitment to understand
and involve the intended visitor is essential to the design
process. If you want a user to understand your solution,
you must first understand the audience.
• Understanding the alternatives: Superior design
requires ongoing awareness of the “competition” and its
customers. Once you understand your visitors' tasks, you
must test those same tasks against competitive
alternatives and compare their results with yours.
• Designing the total user experience: Everything a
visitor sees and touches is designed together by a
multidisciplinary team.
• Evaluating designs: User feedback is gathered early
and often, using prototypes of widely ranging fidelity, and
this feedback drives solution design and development.
• Continual user observation: Throughout the life of the
redesign, continue to monitor and listen to your users,
and let their feedback inform your responses to your
redesign efforts.
Design the total user
experience
Understand the
alternatives
Evaluate designs
Understand visitors
IxD IxD stepssteps
Setting objectivesSetting objectives
Continual user observation
• A methodology typically focuses on teaming, gathering
and validating requirements in a non-invasive matter.
• It identifies high impact initiatives with the largest ROI
or best strategic fit.
• It employs best practices from ourselves and from our
learnings with others. 3. Low-level design
4. Implementation
Business Strategy
Digital Branding
System/platform Design
Information Design
Interface Design
Environment Definition
Technical Architecture
Content Integration
Design Implementation
Technology Integration
5. Deployment & Feedback
Initiative Launch
Initiative Metrics
Initiative Management
2. High-level design
1. Intent Approach Development Innovation Workshops
Strategy
Design Technology
Innovation
IxD is integrated, iterative and accelerated through the use of specialized tools and methods
A Framework for Digital Branding
Brand Experience Assessment
Vis
itor
Nee
ds /
Goa
lsB
rand
Attr
ibut
e A
lignm
ent
Cro
ss C
hann
el E
xper
ienc
e
Onl
ine
Cha
nnel
Exp
erie
nce
Ser
vice
Pro
cess
Loya
lty P
rogr
ams
Exp
erie
nce
Ass
essm
ent
Brand Experience Design
Exp
erie
nce
Sce
nario
sIn
form
atio
n A
rchi
tect
ure
Wire
-fra
me
Des
ign
Bra
nded
Inte
rfac
e D
esig
n U
sabi
lity
Ver
ifica
tion
Pro
toty
pe
Bra
nd
Exp
erie
nce
Blu
epri
nt
Exi
stin
g C
apab
ilitie
sX
C In
tegr
atio
nP
roce
ss Im
pact
s G
over
nanc
eT
echn
olog
y A
lignm
ent
Pro
ject
Ass
et L
ever
age
Imp
lem
enta
tio
n R
oad
map
Brand Experience Implementation
Bra
nd H
ealth
Mea
sure
sV
isito
r Lo
yalty
Sal
es /
Rev
enue
Cha
nnel
Per
form
ance
Loya
lty P
rogr
am U
sage
RO
I
Exp
erie
nce
Su
cces
s R
epo
rtin
g
Brand Experience Management
Experience Improvement Continuum
Interest Generation Browse / Research Transact Service Support Expansion> > > > >
Maximizing the experience, from interest to completing transaction, the branded customer experience is realized through the following methodology.
What’s missing? The authenticity that social media trends bring to the branded conversation. This model is old and doesn’t reflect that dynamic.
Regarding innovation: The Core focus of our processes• Redefining the specifications of design solutions which can lead to better
guidelines for traditional design activities (graphic, industrial, architectural, web, etc.);
Incremental Innovations, Best Practices, Asset or Component-based Solutions
• Exploring possibilities and constraints by focusing critical thinking skills to research and define problem spaces for existing products or services—or the creation of new categories;
Breakthrough Innovations
• Managing the process of exploring, defining, creating artifacts continually over time
• Prototyping scenarios and solutions that incrementally or significantly address the problem
Source: Nate Burgos and Adam Kallish, WikiPedia
Sample methods and artifacts
Building a Vision for Innovation in Interaction Design
What is a ‘typical’ process?
Source: Vijay Kumar, Institute of Design
The process is iterative
Source: Vijay Kumar, Institute of Design
…And typically uses a toolkit-based approach
Source: Vijay Kumar, Institute of Design
A focus on knowing users
Source: Vijay Kumar, Institute of Design
How a toolkit is applied: Knowing users
Source: Vijay Kumar & Patrick Whitney, Institute of Design
Collecting data around insights and needs
Source: Vijay Kumar & Patrick Whitney, Institute of Design
Collecting data around insights and needs
Source: Vijay Kumar & Patrick Whitney, Institute of Design
Collecting data around insights and needs
Source: Vijay Kumar & Patrick Whitney, Institute of Design
Collecting data around insights and needsFrameworks can be used to sort, massage and prioritize data
Source: Vijay Kumar & Patrick Whitney, Institute of Design
Insights and needs to patterns
Source: Vijay Kumar & Patrick Whitney, Institute of Design
Insights and needs to patterns
Source: Vijay Kumar & Patrick Whitney, Institute of Design
Patterns to criteria
Source: Vijay Kumar & Patrick Whitney, Institute of Design
From criteria to concepts
Source: Vijay Kumar & Patrick Whitney, Institute of Design
Road Map DevelopmentBuilding a Vision for Innovation in Interaction Design
Sample Roadmap
Concept DevelopmentBuilding a Vision for Innovation in Interaction Design
Frequently used components
Project Vision
User Profiles & Scenarios
Feature Map
Information Architecture
Visual Design
Graphic Production
Design Style Guide
Content Assessment
Content Matrix
Content Plan / Strategy
Accessibility Review
Usability Test Plan
Usability Test Report
User Support Materials
Usability / Accessibility
Content
Visual Design
Information Architecture
Source: Jennifer Martin, IBM
Project Vision• The Project Vision clearly and
simply describes the project in ways that everyone can understand.
• The Project Vision can be used as the introduction to the solution design document and also as introductory material for new team members, partners, and vendors.
PhaseSolution Outline
Key RolesCreative Director
Source: Jennifer Martin, IBM
User Profiles & Scenarios• User Profiles document the
relevant characteristics of users.
• User Scenarios describe how the user interacts with the application.
• The primary purpose of User Profiles and Scenarios is to understand who will use the system so it can be designed to meet their needs.
PhaseSolution Outline
Key RolesInformation Architect
Source: Jennifer Martin, IBM
Feature Map• A Feature Map is a high
level master list of all features, functions, and content with potential value to users.
• The primary purpose of the Feature Map is to assist in prioritizing/inventorying available features and functions, and documenting the user types that will have access to the various features.
PhaseSolution Outline
Key RolesInformation Architect
Source: Jennifer Martin, IBM
Information Architecture• The Information Architecture is
the blueprint for the user interface of an application.
• It includes the site map, workflows, and wireframes.
• The primary purpose of the Information Architecture is to provide detailed guidance to the Visual Designers and developers about the behaviors and functions of the user interface and environment.
PhaseMacro Design
Key Roles Information Architect
Source: Jennifer Martin, IBM
Visual Design• The Visual Design defines the
“look” in the user interface “look and feel.”
• It expresses the brand and provides a consistent, logical and attractive visual language for the application.
• The primary purpose of the Visual Design is to express the functional design from the Information Architect, and to provide a framework to the Continuity Director for creation of user interface assets.
PhaseMacro Design
Key Roles Art Director
Source: Jennifer Martin, IBM
Design Style Guide• The Design Style Guide details
the guidelines for using and
extending the Visual Design.
• It provides detailed description
of all aspects of the design and
the thoughts behind it.
• The primary purpose of the
Design Style Guide is to ensure
that all current and future
implementations are consistent
with the objectives and details
of the Visual Design.
PhaseMicro Design
Key Roles Continuity Director
Source: Jennifer Martin, IBM
Content Assessment• The Content Assessment establishes
a baseline understanding of existing
content assets.
• The purpose of the Content
Assessment is to determine the
quality and quantity of existing
assets in order to accurately scope
the content work effort.
PhaseMicro Design
Key Roles Content Strategist
Source: Jennifer Martin, IBM
Content Matrix• The Content Matrix documents the
content that is required for a
project.
• The purpose of a Content Matrix is
to itemize, organize, and track the
content.
PhaseMacro Design
Key Roles Content Strategist
Source: Jennifer Martin, IBM
Content Plan & Strategy• The Content Strategy documents the
high-level content approach.
• The Content Plan describes how
content will be created, collected
and published.
PhaseMacro Design
Key Roles Content Strategist
Source: Jennifer Martin, IBM
Accessibility Review• The Accessibility Review evaluates
an application against IBM’s web
accessibility checklist.
• The purpose of the Accessibility
Review is to ensure that the
application is accessible to people
with disabilities.
PhaseBuild
Key Roles Usability
Source: Jennifer Martin, IBM
Usability Test Plan• A Usability Test is a controlled
evaluation of the usability of an application by a set of representative users.
• The purpose of a Usability Test is to predict the performance of actual users and to identify serious problems.
• A Usability Test Plan describes the participants, setting, materials, and procedures for a usability test.
• There are a variety of testing methods to suit the needs of various projects.
PhaseMicro Design
Key RolesUsability Director
Source: Jennifer Martin, IBM
Usability Test Report• A Usability Test Report documents
the findings of a usability test.
• The purpose of a Usability Test
Report is to summarize the key
findings and make prioritized
recommendations.
PhaseTesting
Key RolesUsability Director
Source: Jennifer Martin, IBM
User Support Materials• User Support Materials include all
user-focused documentation
including on-line help, reference
cards, tutorials, etc.
• The purpose of User Support
Materials is to explain the expected
use of and behaviors of the
application.
PhaseBuild
Key Roles Technical Writer
Source: Jennifer Martin, IBM