designing the complete user experience day two adaptive path jeffrey veen jesse james garrett
TRANSCRIPT
Designing the Complete User ExperienceDay Two
Adaptive Path
www.adaptivepath.com/workshops/firstunion/
Jeffrey Veen <[email protected]>
Jesse James Garrett <[email protected]>
2User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Yesterday
• Discovery
• Personas and scenarios
• User research
• Task analysis and mental models
• High-level information architecture
3User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
4User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
6User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
What Is Information Architecture?
A structure based on the patterns
inherent in data that allows users
to accomplish their goals.
7User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
8User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
9User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
10User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
The Two Tracks, Diagrammed
Surface architecturecomes from Mental Model
Deep architecture comes from the Content Model
11User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
12User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Four Things To Look At
• Content (yesterday)
• Architecture
• Interaction
• Technology
13User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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…)
14User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Q: Can you automate the architecture review?
A: Not really.
15User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Typical Site-Mapping Tool Output
16User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
What You Actually Need To Know
17User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
The Desired Result
18User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
19User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Documenting Interactions:
The Visual Vocabulary
http://jjg.net/visvocab/
20User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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?”
21User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
22User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
23User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
24User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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.
25User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
26User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
27User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
28User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
29User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
“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”
30User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Taxonomies and Classification – Wine.com
31User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Activity: Generating a Classification System
• Divide into groups of six– 5 Information Architects– 1 Content Manager
• Information Architecture Team:– Each IA picks a different appliance– List individual attributes
e.g. Physical dimensions, color– Decide which attributes are appropriate for which audience
segmente.g. do-it-yourself-er, contractor, first-timer
• Content Manager– List document types
e.g. product review, specifications– List individual document attributes
e.g. headline, date
32User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Activity: Classification System Step 2
• Information Architecture Team: Now matches attributes with
other IAs on your team
• Content Manager: Match document types to IAs’ appliances.
• Next: Look for innovation
33User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Innovation in Classification
34User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Classification and Interfaces – Faucet Facet Finder
35User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
36User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Comparing What We Have To What Users Want
TASK ANALYSIS
Initial Discovery
User ResearchUser DataAnalysis
Mental ModelDiagram
Mental Model
Content Audit
Mental Model
Content Model
Define the Audience
User Task Interviews
Task Data AnalysisTask DataAnalysis
Mental ModelDiagram
Align MM & Content
37User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Comparison of Mental Model to Available Material
• This is where it begins to come together
• Slot content, functionality, and business goals where it
supports audiences’ mental model
• Make sure to address every significant content area
• If the project is “from scratch” and there are not many explicit
features, etc., use the mental model to drive product
requirements
38User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Comparison – Very Much a Team Effort
• Clients and stakeholders are essential in this process
• Need domain expertise to ensure completeness
39User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Comparison – Gap Analysis
• Ideal – Every task in the audiences’ mental model is served by
content and functionality
• Practical – That is never the case
40User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Gap Type 1 – User Needs Not Supported by Content
• Could be an important oversight in the content of the site
• Could be be an activity not appropriate for web content
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
41User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Gap Type 2 – Content Available But No User Need
• Could be extraneous content not worth maintaining (R.O.T.)
• Could be an important way to empower the user
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
42User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Let’s Look at What We Have
• A diagram depicting the audience’s mental model across the
top, and the company’s supporting material beneath it
• Fuzzy’ user data has developed into a solid, rigorous model
• A foundation from which to build the information architecture
43User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
And Now We Can Put It All Together…
TASK ANALYSIS
Initial Discovery
User ResearchUser DataAnalysis
Mental ModelDiagram
Mental Model
Content Audit
Mental Model
Content Model
Align MM & Content
User Task Interviews
Task Data AnalysisTask DataAnalysis
Mental ModelDiagram
IA &Interaction
Diagrams and Prototypes
44User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Q: So how do we get from the pile of content and features to a meaningful structured experience?
45User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
A: Let the mental model guide the way.
How To Develop a High-Level
IA In 2 E-Z Steps:
1. Organize information according to user expectations
2. Label content areas using familiar language
46User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Task-based Information Architecture – Step 1
Mental model super-groups become highest level of navigation
UnderstandWhat Vendoris Doing And
Decide
Research theNeeds
Research theProducts
Make Decision(DecidingFactors)
Implement Train
Home Page
47User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Task-based Information Architecture – Step 2
Conceptual groups become the second level
Refine Requirements
Find Out What OtherPeople SayGet Proposals
Find Out High-LevelInformation
Find Vendors
Find Vendors
Write Requestsfor Proposals
ReadProposals
Get Input fromOther
Customers
Read VendorMarketingMaterials
DistrustMarketingMaterial
Read ReviewsAttend
Conferences
RefineRequirements
Based onResearch
Research the Products
See HowComponents Relate to
One Another
Understand WhatVendor is Doing
and Decide
Research theNeeds
Research theProducts
Make Decision(Deciding Factors)
Implement Train
Home Page
Find VendorsFind Out High-
Level InformationGet Proposals
Find Out WhatOther People Say
RefineRequirements
See HowComponents
Relate To OneAnother
48User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Task-based Information Architecture – Step 3
Slotted content and functionality from the Comparison is placed
in appropriate areaFind 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
49User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Task-Based Information Architecture – Why Do It?
• Makes certain that your site’s architecture responds to your
visitors’ goals and tasks
• Helps achieve business goals by presenting marketing-
oriented content (e.g., cross-sells, up-sells) in a meaningful
context
50User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Task-Based Information Architecture - Caveats
• It’s a ‘first-pass’ at the information architecture– Deep structures must come from content analysis (Tomorrow)– All of it will need refinement
• Some tasks don’t directly translate to navigation nodes
• Limited in its depth
51User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Things To Remember – And Forget
Remember:
• Everything needs to have a place in the architecture – but not
necessarily only one way to get to it.
• Formality of this process is up to you
Forget for now:
• How content is produced
• How your company is structured
Prioritizing:
What do we do first…second…never?
53User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
54User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
55User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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?
56User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
57User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
58User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
59User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Quick Iteration vs. Long Process
• Operating a site – day to day
• Adding features – weekly/monthly launches
• “Big” projects – significant redesigns, yearly/quarterly
60User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
62User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
63User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
64User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Common Web-Based Interactions
• Registration
• Web-based Email
• Shopping cart
• Checkout
• Setting up personal web pages, like “My Yahoo” and “My
Netscape”
• Online banking
65User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
66User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
67User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
68User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
69User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
70User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
72User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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”
73User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
74User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
75User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
76User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
77User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
The Process: Before Dynamic Sites
Author
Editor
Copy Edit
Production
Design
QA
Post
78User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
The Process: After Dynamic Sites
Author
Editor
Copy Edit
Post
Production Design
Template System
Operations Development
79User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
80User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
81User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
82User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
83User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
84User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
• “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
85User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
A hierarchy of patterns
Knobs
Doors
Walls
Rooms
Buildings
Communities
Regions
An almost infinite number of decisions at this level
86User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
A hierarchy of patterns
Radio Button
Forms
Search Interface
Page Layout
Navigation System
Site Architecture
Integration
87User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
88User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Content Item Detail
List Input Tabular Data
Components
89User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Standard Page Elements
• Network Nav Bar
• Personalization
• Brand header– Logo– Search– Cobrand– Structured
Navigation
• Topic Path
• Page Footer
90User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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.
91User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
92User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
94User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
95User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Usability Testing: An Overview
• Protocol development
• Recruiting
• Facilitating
• Analysis
96User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
97User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
98User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
99User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
100User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
101User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
More on Tasks...
• Testable tasks should be:– Reasonable– Specific– Doable– Described as end goals– Appropriately sequenced– Not too long, not too short
102User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
103User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
104User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
105User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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?
106User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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?
107User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
109User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
110User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
111User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
Visual Design
• Big Picture thinking
• Strong visualization skills
• Task: To develop a visual language– Colors– Typography– Graphic style
112User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
113User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
114User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
115User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
116User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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?
118User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
• 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…
119User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
120User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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…
121User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
– Producer– Program Manager– Product Manager– Site Manager– Creative Director
The Title Could Be…
122User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
123User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
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
124User Experience 2001 Jeffrey Veen ([email protected]) & Janice Fraser ([email protected])
www.adaptivepath.com/workshops/firstunion/
Jesse James Garrett <[email protected]>Jeffrey Veen <[email protected]>