designing the complete user experience day 2 adaptive path [email protected]
TRANSCRIPT
Designing the Complete User ExperienceDay 2
Adaptive Path
www.adaptivepath.com/presentations/complete/
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
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
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
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
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>
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
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
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/