Designing the Complete User Experience Day 2 Adaptive Path [email protected].

117
Designing the Complete User Experience Day 2 Adaptive Path www.adaptivepath.com/presentations/complete/ [email protected]

Transcript of Designing the Complete User Experience Day 2 Adaptive Path [email protected].

Designing the Complete User ExperienceDay 2

Adaptive Path

www.adaptivepath.com/presentations/complete/

[email protected]

2Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Yesterday

• Discovery

• Personas and scenarios

• User research

• Task analysis and mental models

• High-level information architecture

3Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Today

• Designing the deep structures – Competitive analysis, content inventory, low-level IA

• Prioritizing features

• Interaction design – With notes on visual design

• Prototyping, process, patterns in design

• Usability testing

• Design in the organization

4Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Defining Web Design

• Mastering applications

• Understanding technologies

• Techniques and methodologies for creating more effective

design solutions

5Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Defining Web Design

• Functional DesignThe design of systems that support end-users' tasks and goals– User research– Information Architecture– Interaction Design

• Communication DesignThe design of how these systems are expressed to the user– Interface design– Visual design– Content strategy

6Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Mostly “Big Projects,” scaled down for small projects- yearly, quarterly

This is “Business as Usual”- daily/weekly (small & fast)

Mental Model ValidateDiagram &Prototype

I nitialDiscovery

AudienceDefinition

Content Audit

Task Analysis

Prioritiztaion

Mental Model

Content Model

Align MM & Content

Define the Audience

Prioritize

IA &Interaction

Diagrams and Prototypes

Overview

Designing the IA: A Bottom-Up Approach

8Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

What Is Information Architecture?

A structure based on the patterns

inherent in data that allows users

to accomplish their goals.

9Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Yesterday We Talked About High-Level Structures and Mental Models:

1. Figure out what users need: develop a mental model

2. Figure out what you have: develop a content model

3. Match them up.

4. Use it to create your IA• Make a high-level structure based on mental model• Make the detailed structure based on the content model

10Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Today We’ll Talk About Deep Structures and Content

1. Figure out what users need: develop a mental model

2. Figure out what you have: develop a content model

3. Match them up

4. Use it to create your IA• Make a high-level structure based on mental model• Make the detailed structure based on the content model

11Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

The Process: Two Tracks

TASK ANALYSIS

Initial Discovery

User ResearchUser DataAnalysis

Mental ModelDiagram

Mental Model

Content Audit

Mental Model

Content Model

Define the Audience

Align MM & Content

User Task Interviews

Task Data Analysis

Mental ModelDiagram

Prioritize Features

Content Model

Current StateResearch

CompetitiveReview

Content ModelDiagram

IA &Interaction

Diagrams and Prototypes

12Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

The Two Tracks, Diagrammed

Surface architecturecomes from Mental Model

Deep architecture comes from the Content Model

13Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

The Two Tracks, Described

1. Task-based information architecture• Based on ethnography and usability principles• Take user tasks apart (analysis)• Then put them back together into a Mental Model (synthesis)• Tasks become major content ‘buckets’• High-level model yields high-level architecture

2. Content-based information architecture• Based on library science and information retrieval principles• Take all the content and features apart (analysis)• Then put it all back together again (synthesis)• Content groups form deep structures of the architecture

14Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Current State Research: Figure Out What You Have

TASK ANALYSIS

Initial Discovery

User ResearchUser DataAnalysis

Mental ModelDiagram

Mental Model

Content Audit

Mental Model

Content Model

Define the Audience

Align MM & Content

User Task Interviews

Task Data Analysis

Mental ModelDiagram

Prioritize Features

Content Model

Current StateResearch

CompetitiveReview

Content ModelDiagram

IA &Interaction

Diagrams and Prototypes

15Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Four Things To Look At

• Content

• Architecture

• Interaction

• Technology

16Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

What To Do

• Walk through the existing site

• Pay attention to details of implementation

• Don’t think like a user – but don’t forget the user either

17Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

General Rules

• Use existing documentation

• Use the knowledge in people’s heads

• Do all four activities concurrently

Final Goal: “Blueprints” of the existing site

18Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Content Audit

• Content audit looks at broad categories – Sampling of pages– Sufficient for most projects

• A more detailed content inventory looks is more thorough– Make a big list of every piece and its URL– Give each piece a unique ID– Use this for CMS and other migration projects

19Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Identify Broad Types of Content

• Typical Examples:– Executive biographies– Press releases– Product descriptions– Product documentation– Contact information– Tutorials– Case studies

20Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Content Audit - Basic Questions

For each piece of content on the site, ask:

• What is it about?

• Who is it for?

• What type is it?

• Where does it come from?

21Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Content Audit - Strategic Questions

• Is it redundant?

• Is it in line with current thinking?

• Is it outdated?

• Is it trivial?

• Does it have historical value?

-->In other words... can we get rid of it?

Traffic analysis can help answer these questions.

22Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Content Audit - Final Result

• Spreadsheet with hundreds or thousands of lines, one line per

page

23Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Architecture Review

• An overview of how content is structured

• Identify organizational schemes

• Map the site– Outline– Diagram

• Refine content types (content types will be very important in a

little while…)

24Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Q: Can you automate the architecture review?

A: Not really.

25Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Typical Site-Mapping Tool Output

26Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

What You Actually Need To Know

27Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

The Desired Result

28Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Interaction Review

• Walk through existing interactive functionality– Registration process– Shopping cart– Newsletter signup– Etc.

• Play out scenarios with a test account

• Document interaction

• Think like a QA tester – try to generate errors

29Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Documenting Interactions:

The Visual Vocabulary

http://jjg.net/visvocab/

30Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Technology Review

• Identify technologies during walk-through:– Server-side technologies such as Cold Fusion, JSP, PHP, etc.– Client-side technologies such as DHTML, JavaScript, etc.

• Talk to the technical people

• Don’t be afraid to ask dumb questions

• Ask “What’s that connected to?”

31Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Current State Analysis Deliverables

Content Audit Spreadsheet or database showing

content by type and topic

Architecture Outlines or diagrams of site structureReview

Interaction ReviewDiagrams, notes, lists

Technology Review Technical brief

32Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Next, Figure Out What They Have

TASK ANALYSIS

Initial Discovery

User ResearchUser DataAnalysis

Mental ModelDiagram

Mental Model

Content Audit

Mental Model

Content Model

Define the Audience

Align MM & Content

User Task Interviews

Task Data Analysis

Mental ModelDiagram

Prioritize Features

Content Model

Current StateResearch

CompetitiveReview

Content ModelDiagram

IA &Interaction

Diagrams and Prototypes

33Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Competitive Analysis

• A thorough deconstruction of your competitors’ Web sites

• Similar to market and customer research, but with an

emphasis on functional implementations

• Not simply limited to direct competitors

34Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Identifying Competitors

• Start with known rivals– See: marketing plan, business plan, etc.

• Use online tools to broaden scope– “What’s related,” Alexa, browse online directories

• Look for other sites with similar features, even if they’re in a

completely different industry– Search work, navigation, interface widgets, etc.

• Use analyst reports to identify industry trends– Forrester, Jupiter, et al.

35Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

The Competitive Matrix

• List features against competitors in a spreadsheet (build off of

your findings from the current state analysis)

• Use online tools to help fill in the technical details– www.websitegarage.com– www.siteowner.com

36Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

The Competitive Matrix

• Build spreadsheet with feature-set against competitors’ sites

• Fill in short descriptions of similarities and differences

• Point out radically different solutions

• Use principles of Heuristic Evaluation

37Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

The Competitive Matrix

• Feature set and content types

• Interface characteristics– Navigation vocabulary– Renderings (Tabs, Pull-down menus, etc.)

• Technology choices– Browser targeting– Advanced CSS or Javascript usage

• Performance Statistics– Bandwidth usage and rendering speed for page types

• Meta Tag Contents

38Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Make Your Research Usable

TASK ANALYSIS

Initial Discovery

User ResearchUser DataAnalysis

Mental ModelDiagram

Mental Model

Content Audit

Mental Model

Content Model

Define the Audience

Align MM & Content

User Task Interviews

Task Data Analysis

Mental ModelDiagram

Prioritize Features

Content Model

Current StateResearch

CompetitiveReview

Content ModelDiagram

IA &Interaction

Diagrams and Prototypes

39Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

“Chunk” Up the Existing and Desired Content

• Review content audit and competitive matrix

• Identify patterns within the content (subject, doc type,

etc.)

• Group similar content together

• Organize groups into hierarchies

--> For a whole site, you want maybe 50-100 “chunks”

40Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Primary and Secondary Taxonomies - Wine

Wine.com

Bestcellars.com

41Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Content Map

• Same type of tool as the

mental model diagram

• Lets you understand what you

have and want in a single

glance

• Arrange the chunks in a

meaningful way

(e.g., subject + type)

• We use Visio

CheeseProductDetail

Wine

Product Detail

Gift BasketCheese

CategoryInfo

Review

Tools

OrganicCheesemaking

VarietalComparison

Chart

Wine SpectatorReprints

VarietalProfile

WineProduct

Detail

Cheese Selector

Basket Product

Detail

SpecialtyBaskest

RegionProfile

42Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Bringing Content Together with the Mental Model

TASK ANALYSIS

Initial Discovery

User ResearchUser DataAnalysis

Mental ModelDiagram

Mental Model

Content Audit

Mental Model

Content Model

Define the Audience

Align MM & Content

User Task Interviews

Task Data Analysis

Mental ModelDiagram

Prioritize Features

Content Model

Current StateResearch

CompetitiveReview

Content ModelDiagram

IA &Interaction

Diagrams and Prototypes

Align the MM &Content Model

43Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Slot Content Analysis Results Where it Fits the Mental Model

• Content goes below the line

• Review gaps (from yesterday)

Refine Requirements

Find Out What OtherPeople Say

Set TechnologyRequirements Get Proposals

Find Out High-LevelInformation

Find Vendors

Get Input from Peoplewithin Company

Research CorporateNeeds

UnderstandExistingProcess

Determine theROI

Set Requirements

Set FeatureRequirements

Set ReportRequirements

Set DataStorage

Requirements

Set SecurityRequirements

Set IntegrationRequirements

Solicit End-User Input for

Features

Get Buy-Infrom KeyPlayers

Get Buy-Infrom IT

DepartmentFind Vendors

Write Requestsfor Proposals

ReadProposals

Get Input fromOther

Customers

Read VendorMarketingMaterials

DistrustMarketingMaterial

Read ReviewsAttend

Conferences

Explore Web-Based

Solutions

ExploreWirelessSolutions

RefineRequirements

Based onResearch

Research the ProductsResearch the Needs

(Improved)InteractiveDiagram

Super Demo

Product Tour

BusinessSolutions

White PaperDownload

(Improved)Product

Module Page

eBusiness IQTest

Advisor ToolsWizard (future

version)

Partner ProfilesCyber

SeminarsRegistration

CyberSeminars

PackageSolutions

Descriptions

IndustrySolutions

Descriptions

Product LineDescriptions

See HowComponents Relate to

One Another

Customer Listby Product or

Industry

ProductConfigurators

ProductConfigurators

44Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Deep-Structure Architecture Revealed

Surface structures come from the mental model. Deep structures

come from the taxonomy-based Content MapFind Out High-Level

Information

Read VendorMarketingMaterials

DistrustMarketingMaterial

AttendConferences

(Improved)InteractiveDiagram

Super Demo

Product Tour

Feature/BenefitDescriptions

Research theProducts

Find Out High-Level Information

ImprovedInteractive Diagram

Super Demo Product TourFeature/Benefit

Descriptions

Prioritizing:

What do we do first…second…never?

46Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Prioritize the Features

TASK ANALYSIS

Initial Discovery

User ResearchUser DataAnalysis

Mental ModelDiagram

Mental Model

Content Audit

Mental Model

Content Model

Define the Audience

Align MM & Content

User Task Interviews

Task Data Analysis

Mental ModelDiagram

Prioritize Features

Content Model

Current StateResearch

CompetitiveReview

Content ModelDiagram

IA &Interaction

Diagrams and Prototypes

Align the MM &Content Model

47Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Step 1: The “Big List”

1. Content Analysis and Content Map

2. Ten people in a room for an hour or two

• Talk through scenarios

• Blue sky

• Focus on what it should be (brainstorming rules)

• General Rule: People don’t have any problem telling you what they

want, as long as they don’t have to make it or pay for it.

• Real Challenge: Choosing which features to build

48Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Step 2: Identify Dependencies and Baseline

• What things must happen first? What are the mandatory

groupings?

• What is baseline? What are the “Must-Haves” that you can’t

launch without?

49Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Step 3: Have Stakeholders Figure Out

• Feasibility: easy or hard, expensive or not, short or long to implement

Rate each item in the list 1 = low feasibility 5 = high feasibility

• Importance: to business, to user

Rate each item in the list 1 = low importance 5 = high importance

50Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Step 4: Graph the Findings

Importance

Feasibility

High importance+Low feasibility =

Watch for new technology

High importance+High feasibility =

Do Now

Low importance+ High feasibility =

Consider

Low importance+ Low feasibility =

Don’t Bother

LOW

HI

HI LOW

51Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Now Let’s BUILD Stuff!!

Mental Model ValidateDiagram &Prototype

I nitialDiscovery

AudienceDefinition

Content Audit

Task Analysis

Prioritiztaion

Mental Model

Content Model

Align MM & Content

Define the Audience

Prioritize

IA &Interaction

Diagrams and Prototypes

Iterative Process

52Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Quick Iteration vs. Long Process

• Operating a site – day to day

• Adding features – weekly/monthly launches

• “Big” projects – significant redesigns, yearly/quarterly

53Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Now Let’s BUILD Stuff!!

Mental Model ValidateDiagram &Prototype

I nitialDiscovery

AudienceDefinition

Content Audit

Task Analysis

Prioritiztaion

Mental Model

Content Model

Align MM & Content

Define the Audience

Prioritize

IA &Interaction

Diagrams and Prototypes

This is “Business as Usual”- daily/weekly (small & fast)

Mostly “Big Projects,” scaled down for small projects- yearly, quarterly

Interaction Design

55Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Information Architecture and Interaction Design

• IA is about content and the structure in which it is located– How is it organized?– Where is it located?– Navigation and way finding systems

• Interaction Design is about functions, and the flows that

enable the user to accomplish them– What actions can the user do?– Entering and retrieving data– Exposing system capabilities

56Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

How Are They Different?

Information Architecture Interaction Design

Architecture Diagram

Organizing Content

Hierarchies and Words

Seek help from librarians

Flow Diagram

Interacting with Systems

Processes and Activities

Seek help from engineers

57Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Common Web-Based Interactions

• Registration

• Web-based Email

• Shopping cart

• Checkout

• Setting up personal web pages, like “My Yahoo” and “My

Netscape”

• Online banking

58Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

The Interaction Designer’s Job

• Understand how the user thinks about the tasks at hand

• Show the parts of the system that enable the user to

accomplish those tasks

• Craft the visible parts to convey the right messages and clues

59Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Good Thinking

“Our conscious mind is constantly reducing visual input into patterns….The philosophy is to present the components on the screen as recognizable visual patterns [so that] the user can choose, on a purely pattern-matching, unconscious level, which objects to consider consciously.”

- Alan Cooper, About Face

60Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Principles of Interaction Design

• Controls disappear when they use natural signals that can be

unconsciously interpreted

Interaction

Discoverable

Feedback

Recoverable

Context

Visual Design*

Proximity

Alignment

Repetition

Contrast

*From Robin Williams, Non-Designer’s Design Book

61Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

62Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Methods: Flow Diagrams

• Use standard symbols

• Include a Legend explaining the symbols

• Avoid crossing lines

• Include meaningful labels for all lines that need them

• Include error cases

• Follow all pathways to their natural end, OR

• Clearly mark where your flow connects with another flow

• Use good visual design principles

Visual Vocabulary: http://www.jjg.net/ia/visvocab

63Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Methods: Schematics

• Make schematics that correlate to the flow diagram

• Use standard symbols to represent interaction devices

• Show all functions

• Use consistent names and labels across all flows and schematics

• DO NOT include any visual design direction!

• Use call-outs to describe any functionality that isn’t self-explanatory

• Use good visual design principles

• One schematic can serve multiple pages

Prototyping, Process and Patterns

65Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Some Problems With Design Process

• Research is effective and valuable, but never gets

applied to end product

• Communication gaps between research, design and

development

• Architects (or consultants) spending days creating

deliverables nobody ever bothers to read

• “Show me the numbers”

66Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Historically, Page Design Didn’t Scale

• In the olden days, designers would design HTML pages and

put them on a server

• But sites grew...– And grew...– And grew...

• Suddenly, redesigning or adding site-wide features was nearly

impossible

• Everyone clamored for template-based design– Put content in databases, squirt it out through consistent designs

• Today’s dilemma: We need the flexibility of dynamic design,

but the rigidity of templates is often too much

67Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Prototyping Tips

• Try to work in the Web’s native language if possible

• Extremely tight iterations (daily!) serves as high-bandwidth

team communication

• Documentation captures “What we’ve learned,” not “What I

want you to do”

• Avoid the “handoff” – the team refines a prototype through

higher resolution versions, testing frequently

68Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Going Dynamic

• Prototype is built according mental model and architecture

diagrams

• Templates and content components can go through iterative

design

• Changes can be viewed globally and instantly tested

69Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Benefits of Dynamic Sites

• Higher initial development cost, but much lower maintenance

• Separates operations of site from development

• Do more with fewer resources

• Inherent interface consistency benefits user experience

70Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

The Process: Before Dynamic Sites

Author

Editor

Copy Edit

Production

Design

QA

Post

71Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

The Process: After Dynamic Sites

Author

Editor

Copy Edit

Post

Production Design

Template System

Operations Development

72Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

73Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

74Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Patterns in Design

• Patterns are abstracted solutions to common problems in context

• Think of a tailor’s pattern for a garment.

• Applicable not only to architecture, but computer science,

corporate organization, and (of course) Web design

75Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

76Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

77Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

• “Text Input boxes should be sized based on expected query

length”

• “For selecting between distinct search options, radio buttons

are most appropriate”

• “HTML submit buttons are more appropriate than image

buttons”

Remember: In Context

78Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

A hierarchy of patterns

Knobs

Doors

Walls

Rooms

Buildings

Communities

Regions

An almost infinite number of decisions at this level

79Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

A hierarchy of patterns

Radio Button

Forms

Search Interface

Page Layout

Navigation System

Site Architecture

Integration

80Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Patterns and Components

• Group smallest patterns together into either content-inspired or

user task-based components

• Creates a heuristically-derived system of interface Legos

• Can be mixed and matched to create site designs

81Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Content Item Detail

List Input Tabular Data

Components

82Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Standard Page Elements

• Network Nav Bar

• Personalization

• Brand header– Logo– Search– Cobrand– Structured

Navigation

• Topic Path

• Page Footer

83Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Page Types

• Components can be grouped together in any number of ways

to create pages. Pages have distinct types, based on the tasks

that can be accomplished on them.

84Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

85Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Self-Describing Content

<?xml version="1.0"?>

<item>

<title>No Doubt Makes Strong Return To Charts</title>

<image rdf:about=”nodoubt.gif">

<description> XML.com features a rich mix of information and services for the XML community. </description>

<link>http://music.com/nodoubt.htm </link>

</item>

Usability Testing

87Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Usability Testing = Easy Validation of Your Designs

Mental Model ValidateDiagram &Prototype

I nitialDiscovery

AudienceDefinition

Content Audit

Task Analysis

Prioritiztaion

Mental Model

Content Model

Align MM & Content

Define the Audience

Prioritize

IA &Interaction

Diagrams and Prototypes

Validate

88Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Usability Testing: An Overview

• Protocol development

• Recruiting

• Facilitating

• Analysis

89Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

When To Test? NOW!

• Anyone can do user research

• A fast, easy and effective way to evaluate if your

audience can use your product or site

• Start simple: Friends and Family Test

• Only one prerequisite: a semi-working prototype

90Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Recruiting Users

• For a simple test, find 3-4 people similar to your site’s

audience– Friends, family, coworkers from other departments

• Personas should determine your test group

• Start immediately: the better the subjects, the better

the outcome

91Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Recruiting Users

• Determine target audience– demographic/webographic/psychographic

• Seek them out– Existing user base, customer support inquiries, advertise

on existing site– User groups, email discussion lists– Traditional means: classified ads, etc.– Use a recruiter: Charge per user based on how specialized

your population needs to be

92Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Developing the Screener

• A simple script to weed out subjects

• Write 20 questions that narrow in on who you’re after

• Order questions from generic to specific

• Be very clear and specific

• Avoid jargon

93Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Developing a Protocol

• What is your site about?

• What five features are most important?

• Create a list of “tasks”– Two sentence mini-scenario for each feature

• For more focused tests, do a feature prioritization

exercise– Map feature importance with implementation difficulty

94Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

More on Tasks...

• Testable tasks should be:– Reasonable– Specific– Doable– Described as end goals– Appropriately sequenced– Domain neutral– Not too long, not too short

95Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Running the Test (Mechanics)

• Have the room ready– Computer set up in a generic state– Have appropriate start pages bookmarked

• Make users comfortable– Describe how the test works and what they’ll have to do– Be clear that they are testing a product, they’re not being

tested themselves

96Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Running the Test (Interview Style)

• Ask the right questions– “Describe this.”– “What do you expect?”– “Did that surprise you? Why?”

• Don’t offer help– If a task is too difficult for the user, tell them to stop and

ask them to describe what happened

97Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Logistics

• Record the session with a camcorder arranged to

capture both the screen and user

• Have a partner take notes throughout session

• Convince decision makers of the value of watching the

tests – from coders to marketing to the CEO

98Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

What Did You Learn?

• Did the evaluators consistently misunderstand anything?

• Were they ever confused? What were they doing?

• What mistakes were consistently made?

• Which tasks did they have the most trouble with?

• When did they look frustrated? What were they doing?

• How many of the tasks were they able to do?

99Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

What Did You Learn?

• Did they do the things that you had expected them to do?

• Did they do things in the order in which you had expected? If not, what

order did they do them in?

• What did they find interesting? What did you expect them to find

interesting, which they did not?

• Did the site meet their expectations? If not, where did it fail them?

• Do you know what their expectations were?

• Did they know what the site is for?

100Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Timing Activity

t –2 weeks Determine test audience, start recruiting immediately

t –2 weeks Determine feature set to be tested

t –1 week Write first version of guide, discuss with team, check on recruiting

t –3 days Write second version of guide, recruiting should be completed

t –2 days Complete guide, schedule practice test, set up and check equipment

t –1 day Do practice test in the morning, adjust guide/tasks as appropriate

t Test (usually 1-2 days, depending on scheduling)

t +1 day Discuss with observers, collect copies of all notes

t +3 days Watch all tapes, take notes

t +1 week Combine notes, write analysis

t +1 week Present to team, discuss and note directions for further research

Usability Test Timeline

How It All Fits Together

102Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Design Isn’t Performed in a Vacuum

• Like project management, a hub in the multi-disciplinary process

• Many disciplines contribute to what the user experiences

Visual Design

DesignContent Strategy

Brand / Marketing

Data Analysis

Web Development

Server Engineering

PM

DatabaseArchitecture

103Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Design in the Organization

• In agencies, typically grouped with “Creative”

disciplines

• In-house, often a part of marketing

• In Web-centered companies, a separate department

104Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Visual Design

• Big Picture thinking

• Strong visualization skills

• Task: To develop a visual language– Colors– Typography– Graphic style

105Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Content Strategy and Writing

• It’s The Content, Stupid

• Visitors interact with your site for the content, not the

design

• Task: To define a voice– Copy guidelines– Style manual– Nomenclature

106Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Brand Strategy and Marketing

• The user experience is a key component of an

organization’s brand

• A user experience can be informed by brand attributes

• Tasks:– To identify brand attributes – To provide market segmentation

107Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Data Analysis and Reporting

• Components of a user’s experience can be measured

through interaction data

• Usability and data analysis often go hand-in-hand

• Task – analyze usage statistics (typically server logs) for

important trends

108Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Web Development and Engineering

• Technologists clue user experience designers in to feasibility

• Web developers know what’s possible on the front end– Help you create flows/schematics

• Server engineers tackle deeper “Can we do that?” questions– How long will a process take? How many hits to the database?

• Database architects will develop schemas that impact the

information architecture

109Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Project Management

• User Experience types tend to work closely with Project

Managers

• Both have “process” focus

• Task – to make sure the project moves forward

smoothly

So Who Does All of This?

111Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

• Producer

• Program Manager

• Product Manager

• Project Manager

• Site Manager

• Information Architect

• Interaction Designer

• Designer

• Visual Designer

• Art Director

• Creative Director

• Design Director

• UI Designer

• Human Factors

Engineer

• Usability Engineer

• Content Specialist

• Content Strategist

• Editor

• Developer

• Web Developer

• XYZ “Specialist”

• Creative Integrator

• DBA

• System Specialist

• Engineer

• QA Manager

• QA Specialist

There Are a Million Titles in This Business…

112Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

PRODUCER as Leader

• Plans the project

• Manages team

• Creates requirements

documentation

• Takes responsibility for

the project meeting

business and user

objectives

One Title Can Mean Many Things…

PRODUCER as Builder

• Writes HTML,

JavaScript, XML

• Manages delivery of

front-end display

code

• Implements pages

as specified by

design team

PRODUCER as Facilitator

• Receives request

from internal client

• Hires and manages

external design or

development vendor

• Reviews interim

deliverables

• Coordinates

approval cycle

113Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Wanted:

Experienced professional to provide leadership for multiple

sections of the web site. This person will establish a mission for

each section, define business and user requirements, manage

internal and external designers, developers, and copy writers to

launch content and applications supporting the Company’s

business goals. Some hands-on design and development work

required.

What’s the title?

And Many Titles Can Mean the Same Thing…

114Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

– Producer– Program Manager– Product Manager– Site Manager– Creative Director

The Title Could Be…

115Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

Lead Producer or Product Manager

Creative Information Architect

Visual Designer or Art Director

Research Producer, IA, or Researcher

Implement Developers

HTML/JavaScript/XML coders

Production Artists

A Typical Project Team

116Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

This Project

Internal Discovery Producer

Task Analysis

Personas & Scenarios

Competitive Analysis

Model Comparison

Info Architecture

Interaction Design

Prototype

Usability Testing

Researcher, IA

Prod., Team, Stakeholders

Producer

Researcher, IA, Prod. (Stakeholders)

IA

IA, Producer

Team

Researcher, Vendor (Team)

Current State Analysis

IA

117Copyright 2001 Adaptive Path, LLC · [email protected] · Designing the Complete User Experience · http://adaptivepath.com/presentations/complete/

www.adaptivepath.com/presentations/complete/

[email protected]