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 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 steps Setting objectives Continual user observation

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.

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

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.

Business Strategy

Digital Branding

System/platform Design

Information Design

Interface Design

Environment Definition

Technical Architecture

Content Integration

Design Implementation

Technology Integration

Initiative Launch

Initiative Metrics

Initiative Management

Approach Development

Innovation Workshops

A Framework for Digital Branding Brand Experience Assessment Visitor Needs / Goals Brand Attribute Alignment Cross Channel Experience Online Channel Experience Service Process Loyalty Programs Experience Assessment Brand Experience Design Experience Scenarios Information Architecture Wire-frame Design Branded Interface Design Usability Verification Prototype Brand Experience Blueprint Brand Health Measures Visitor Loyalty Sales / Revenue Channel Performance Loyalty Program Usage ROI Experience Success Reporting 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. Existing Capabilities XC Integration Process Impacts Governance Technology Alignment Project Asset Leverage Implementation Roadmap Brand Experience Implementation

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

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

Sample methods and artifacts Building a Vision for Innovation in Interaction Design

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 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

Road Map Development Building a Vision for Innovation in Interaction Design

Building a Vision for Innovation in Interaction Design

Sample Roadmap

Concept Development Building a Vision for Innovation in Interaction Design

Building 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

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

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

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.

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

The Content Strategy documents the high-level content approach.

The Content Plan describes how content will be created, collected and published.

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

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.

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. Phase Micro Design Key Roles Usability Director Source: Jennifer Martin, IBM

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.

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

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.

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

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.