February 2008

Designing for Interaction

Building 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

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.

Setting objectives

Understand visitors
Design the total user experience

IxD steps

Understand the alternatives

Evaluate designs

Continual user observation

IxD is integrated, iterative and accelerated through the use of specialized tools and methods
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.

2. High-level design
 Business Strategy  Digital Branding  System/platform Design

3. Low-level design
 Information Design  Interface Design  Environment Definition
Strategy

 Technical Architecture

1. Intent
 Approach Development  Innovation Workshops
Design

Innovation
Technology

5. Deployment & Feedback

 Initiative Launch  Initiative Metrics  Initiative Management

4. Implementation
 Content Integration  Design Implementation  Technology Integration

Visitor Needs / Goals Brand Attribute Alignment Cross Channel Experience Online Channel Experience Service Process Loyalty Programs

Interest Generation

Brand Experience Assessment

Experience Assessment Experience Scenarios Information Architecture Wire-frame Design

>

Browse / Research

Brand Experience Design

Branded Interface Design Usability Verification Prototype

>

Brand Experience Blueprint Existing Capabilities XC Integration Process Impacts Governance Technology Alignment Project Asset Leverage

Transact

A Framework for Digital Branding

Maximizing the experience, from interest to completing transaction, the branded customer experience is realized through the following methodology.

Experience Improvement Continuum

Implementation Roadmap Brand Health Measures Visitor Loyalty Sales / Revenue Channel Performance Loyalty Program Usage ROI Experience Success Reporting

Brand Experience Implementation Brand Experience Management

> Service > Support > Expansion

Whats missing? The authenticity that social media trends bring to the branded conversation. This model is old and doesnt 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 servicesor 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

Building a Vision for Innovation in Interaction Design

Sample methods and artifacts

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 needs

Frameworks 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

Building a Vision for Innovation in Interaction Design

Road Map Development

Sample Roadmap

Building a Vision for Innovation in Interaction Design

Concept Development

Frequently used components

Project Vision
Information Architecture User Profiles & Scenarios Feature Map Information Architecture Content Content Assessment Content Matrix Content Plan / Strategy

Visual Design Visual Design Graphic Production Design Style Guide

Usability / Accessibility Accessibility Review Usability Test Plan Usability Test Report User Support Materials

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.

Phase Solution Outline Key Roles Creative 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.

Phase Solution Outline Key Roles Information 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.

Phase Solution Outline Key Roles Information 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.

Phase Macro 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.

Phase Macro 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.

Phase Micro 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.

Phase Micro 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.

Phase Macro 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.

Phase Macro Design Key Roles Content Strategist

Source: Jennifer Martin, IBM

Accessibility Review
The Accessibility Review evaluates an application against IBMs web accessibility checklist. The purpose of the Accessibility Review is to ensure that the application is accessible to people with disabilities.

Phase Build 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.
Source: Jennifer Martin, IBM

Phase Micro Design Key Roles Usability 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.

Phase Testing Key Roles Usability 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.

Phase Build Key Roles Technical Writer

Source: Jennifer Martin, IBM