Designing for Interaction, Chris Bernard

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


…And typically uses a toolkit-based approach


A focus on knowing users


How a toolkit is applied: Knowing users

Source: Vijay Kumar & Patrick Whitney, Institute of Design

Collecting data around insights and needs


Collecting data around insights and needsFrameworks can be used to sort, massage and prioritize data


Insights and needs to patterns


Patterns to criteria


From criteria to concepts


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


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.


Key RolesInformation Architect


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.


Key RolesInformation Architect


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


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


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


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


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



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



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


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


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


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


Designing for Interaction, Chris Bernard

Design

Transcript of Designing for Interaction, Chris Bernard