Collaborative Strategies for Designing Successful Web Sites

1
Collaborative Strategies forDesigning Successful
Web Sites

• Adaptive Path
• www.adaptivepath.com/workshops/tour2002/
• Lane Becker ltlane_at_adaptivepath.comgt
• Peter Merholz ltpeter_at_adaptivepath.comgt
• Jeffrey Veen ltjeff_at_adaptivepath.comgt

2
(No Transcript)
3
Our goal...
To develop an experience based on the patterns
inherent in your stuff that empowers users to
accomplish their goals.
4
Successful design comes from two approaches...

• Top-down
• Figure out what users need
• Derive mental models
• Focus on user research

• Bottom-up
• Figure out what you have
• Develop content model
• Domain of traditional IA

5
Yak yak yak yak yak yak yak yak yak yak yakYak
yak yak yak yak yak yak yak yak yak yak yak yak
yak yak yak yak yak yak yak yak yak yak yakYak
yak yak yak yak yak yak yak yak yak yak yak yak
yak yak yak yak yak yak yak yak yak yak yakYak
yak yak yak yak yak yak yak yak yak yak yak...
6
(No Transcript)
7
Ah Ha!
8
(No Transcript)
9
Current State Analysis What To Do

• Walk through the existing site
• Pay attention to details of implementation
• Dont think like a user but dont forget the
  user either

10
General Rules

• Use existing documentation
• Use the knowledge in peoples heads
• Final Goal Blueprints of the existing site

11
Levels of Current State Analysis

• Architecture review looks at overview of
  structure
• Captures high-level relationships between
  sections
• 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

12
High Level 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)

13
Q Can you automate the architecture review?

• A Not really.

14
Typical Site-Mapping Tool Output
15
The Desired Result
16
A Closer Look Content Audit

• Identify Broad Types of Content
• Typical Examples
• Executive biographies
• Press releases
• Product descriptions
• Product documentation
• Contact information
• Tutorials
• Case studies

17
Excruciating Detail Content Inventory

• For every single piece of content on the site,
  ask
• What is it about?
• Who is it for?
• What type is it?
• Where does it come from?

18
Content Inventory - Strategic Questions

• ROT Removal
• Is it redundant?
• Is it outdated?
• Is it trivial?
• Does it have historical value?
• Is it critical information for a small audience?
• --gtIn other words... can we get rid of it?
• Traffic analysis can help answer these questions.

19
Content Audit - Final Result

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

20
Organize Your Types

• Meaningful types are the crux of information
  architecture

21
Compare Content Types to Mental Model

• The types help achieve what tasks?

22
Comparison Gap Analysis

• Ideal Every task in the audiences mental model
  is served by content and functionality
• Practical That is never the case

23
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

24
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

25
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

26
Comparison Very Much a Team Effort

• Clients and stakeholders are essential in this
  process
• Need domain expertise to ensure completeness

27
Lets Look at What We Have

• A diagram depicting the audiences mental model
  across the top, and the companys supporting
  material beneath it
• Fuzzy user data has developed into a solid,
  rigorous model
• A foundation from which to build the information
  architecture

28
(No Transcript)
29
The Architecture Diagram
30
Task-based Information Architecture Step 1

• Mental model super-groups become highest level of
  navigation

31
Task-based Information Architecture Step 2

• Conceptual groups become the second level

32
Task-based Information Architecture Step 3
Slotted content and functionality from the
Comparison is placed in appropriate area
33
Task-based Information Architecture Why Do It?

• Makes certain that your sites 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
• Task-based Information Architecture - Caveats
• Its a first-pass at the information
  architecture
• Deep structures must come from content analysis
• All of it will need refinement
• Some tasks dont directly translate to navigation
  nodes
• Limited in its depth

34
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

35
But Where Do We Go From Here?
36
Organizing from the Bottom-up Taxonomies,
classification, metadata
37
Taxonomies and Classification Wine.com
38
Activity Generating a Classification System

• Divide into groups of five to seven
• First Appliance Attributes
• Each team member picks a different appliance
• List individual attributes e.g. Physical
  dimensions, color
• Decide which attributes are appropriate for which
  audience segment
• e.g. do-it-yourself-er, contractor, first-timer
• Second Document Attributes
• List content types
• e.g. product review, specifications

39
Activity Classification System Step 2

• Now match attributes with others on your team
• Match document types to appliances.
• Next Look for innovation

40
(No Transcript)
41
Innovation in Classification
42
Classification and Interfaces Faucet Facet
Finder
43
(No Transcript)
44
(No Transcript)
45
Step 1 The Big List

• Content Analysis and Content Map
• 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 dont have any problem
  telling you what they want, as long as they dont
  have to make it or pay for it.
• Real Challenge Choosing which features to build

46
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 cant launch without?

47
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

48
Step 4 Graph the Findings
High importance Low feasibility Watch for
new technology
High importance High feasibility Do Now
HI
Importance
Low importance High feasibility Consider
Low importance Low feasibility Dont Bother
LOW
LOW
Feasibility
HI
49
(No Transcript)
50
Information Architecture and Interaction Design

• Simply
• Information architecture is about content
• Interaction design is about behavior

51
Where Do We Go From Here? Part 2
52
Go With The Flow(s)

• Use standard symbols
• Include a legend explaining the symbols
• Include error cases
• Follow all pathways to their natural end or
  clearly mark where your flow connects with
  another flow

See also Visual Vocabulary, http//www.jjg.net/ia
/visvocab
53
Observe Diagram Feng Shui

• A flow should be logical and readable by anyone
  without explanation
• Use principles of good visual design
• Include meaningful labels for all lines that need
  them
• Dont cross lines

54
So What Does The Page Look Like?
Daunting, isnt it?
55
Interface Design

• 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

56
Four Principles of Transparent Interface Design

• Discoverable
• Recoverable
• Context
• Feedback

57
Discoverable

• The user must be able to easily see and
  understand the actions that they may take.
• Visibility acts as a suggestion, reminding the
  user of possibilities and inviting the
  exploration of new ideas and methods.
• Architecture and navigation nomenclature must be
  meaningful to the users (descriptive, evocative).

58
(No Transcript)
59
(No Transcript)
60
Bonus 10 Word Affordances (Clues)

• What does the thing make possible? What does it
  suggest you should do with it?
• In the atoms world Form, weight, surface
  texture, etc. In the bits world Color,
  texture, shape, groupings, labels
• Used in a sentence The handle affords pulling.

When simple things need instructions, the
design has failed.
61
Feedback

• The effect of each action must be visible and
  easy to interpret, so that the user can learn
  what the system does.
• Feedback must be immediate and contextual
• so they know the action they tried to take
  really did complete
• so users can recognize and recover from mistaken
  actions

62
(No Transcript)
63
(No Transcript)
64
Recoverable

• Actions should be without cost -- make errors
  less costly
• Errors must be easy to undo.
• The interface should help users recover.

When designing, assume that every possible
mishap will happen, so protect against it.
Poor design affords user errors.
65
(No Transcript)
66
How do you handle unrecoverable actions?

• Make clear what effect the action will have
  BEFORE the user takes the action.
• Provide sufficient opportunity to cancel the
  action.
• Make the action difficult to do.
• Make it impossible to do the action (make it
  non-explorable).

Most actions should be cost-free, explorable,
discoverable.
67
(No Transcript)
68
Bonus 10 Word Constraints

• Restrict options to encourage the user in the
  right direction.
• Constraints help guide users, especially in the
  case of unrecoverable actions, where mistakes can
  be very costly.

69
Context

• Give the user a sense of time
• How long will it take? How many steps are
  there? Where am I in the process?
• Give the user a sense of place
• Where am I now? Where should I go?
• Give the user a sense of meaning
• Why am I here? Whats likely to be here?

70
Visual Design for Transparency PARC

• Proximity
• Alignment
• Repetition
• Contrast
• Use all of your visual tools color, texture,
  size, layout, font
• From Robin Williams, Non-Designers Design Book

71
Why is PARC so important?

• The goal of visual design is not aesthetic, but
  rather communication. Visual design uses visual
  devices (color, texture, size, etc.) to create
  logical associations and hierarchical
  relationships among all page elements (words,
  buttons, headings, controls, links, logos, ads,
  pictures, captions, etc.).

PARC is how they do it.
72
(No Transcript)
73
(No Transcript)
74
(No Transcript)
75
(No Transcript)
76
(No Transcript)
77

• Screener Text
• Make a table with a script the recruiter can
  follow when talking with a possible interviewee
• Introduction
• Greeting
• Who we are and why were calling
• How well determine if were mutually interested
  in an interview
• Screener Questions
• Compiled from the persona attributes and summary
  matrix
• Give decision criteria whether to continue or end
  the screening
• Conversation
• Conclusion
• Whether or not the person qualifies
• Appointment date and time
• Thank you

78

• Screener Text
• Make a table with a script the recruiter can
  follow when talking with a possible interviewee
• Introduction
• Greeting
• Who we are and why were calling
• How well determine if were mutually interested
  in an interview
• Screener Questions
• Compiled from the persona attributes and summary
  matrix
• Give decision criteria whether to continue or end
  the screening
• conversation
• Conclusion
• Whether or not the person qualifies
• Appointment date and time
• Thank you

79

• Screener Text
• Make a table with a script the recruiter can
  follow when talking with a possible interviewee
• Introduction
• Greeting
• Who we are and why were calling
• How well determine if were mutually interested
  in an interview
• Screener Questions
• Compiled from the persona attributes and summary
  matrix
• Give decision criteria whether to continue or end
  the screening
• conversation
• Conclusion
• Whether or not the person qualifies
• Appointment date and time
• Thank you

80

• Screener Text
• Make a table with a script the recruiter can
  follow when talking with a possible interviewee
• Introduction
• Greeting
• Who we are and why were calling
• How well determine if were mutually interested
  in an interview
• Screener Questions
• Compiled from the persona attributes and summary
  matrix
• Give decision criteria whether to continue or end
  the screening
• conversation
• Conclusion
• Whether or not the person qualifies
• Appointment date and time
• Thank you

81

• Screener Text
• Make a table with a script the recruiter can
  follow when talking with a possible interviewee
• Introduction
• Greeting
• Who we are and why were calling
• How well determine if were mutually interested
  in an interview
• Screener Questions
• Compiled from the persona attributes and summary
  matrix
• Give decision criteria whether to continue or end
  the screening
• conversation
• Conclusion
• Whether or not the person qualifies
• Appointment date and time
• Thank you

82
Proximity

• Things that are placed near one another will be
  perceived as related.
• Things that are separated from one another will
  be perceived as different.

83
Alignment

• Things that are lined up with one another will be
  perceived to have a parallel relationship
• Things that are out of alignment will be
  perceived to have a superior or subordinate
  relationship (broader/narrower)

84
Contrast

• Things that are larger, brighter, bolder will be
  perceived as being more important, more broad
• Things that are smaller, less bold will be
  perceived as being less important
• Things that are the same color, size, etc, will
  be perceived asthe same.

Make differences noticeable wimpy contrast
causes confusion.
85
Repetition

• Carry out your decisions regarding Proximity,
  Alignment and Contrast throughout your site.
  (Users expect similar items to look the same
  throughout the interface.
• Set up a visual style for specific features
  (headlines, buttons, alerts, etc.), and use them
  over and over be consistent!

Dont make it look different unless you want
them to believe its different.
86
Now Start Drawing Schematics (aka Wireframes)

• DO NOT include any visual design direction!
• Use call-outs to describe any functionality that
  isnt self-explanatory
• Use good visual design principles
• One schematic can serve multiple pages

• 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

87
From Collaborative Design to Prototype

• Print schematics as PDF files
• Add hyperlinks in Acrobat
• Fake the forms if you can
• Full screen mode makes it your prototype!

88
Save as Deliverables

• Documentation becomes What we learned, not
  What I want you to do.
• No more 50-page specs!
• Use as a layer of your site when browsing

No More Specs!
89
(No Transcript)
90
Prototyping Tips

• Try to work in the Webs native language if
  possible
• Extremely tight iterations (daily!) serves as
  high-bandwidth team communication
• Documentation captures What weve learned, not
  What I want you to do
• Avoid the handoff the team refines a
  prototype through higher resolution versions,
  testing frequently

91
(No Transcript)
92
Historically, Page Design Hasnt Scaled

• 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
• Todays dilemma We need the flexibility of
  dynamic design, but the rigidity of templates is
  often too much

93
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

94
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

95
The Process Before Dynamic Sites
Author
Editor
Copy Edit
Production
Design
QA
Post
96
The Process After Dynamic Site
Operations
Development
Author
Production
Design
Editor
Copy Edit
Template System
Post
97
Bottom Up Designing with patterns
98
Abstract solutions to common problems in context
99
Patterns are applicable not only to architecture,
but all kinds of design computer science,
corporate organization, traffic signage and (of
course) Web design
100
(No Transcript)
101
(No Transcript)
102
A hierarchy of patterns
Knobs
Doors
Walls
Rooms
Buildings
Communities
Regions
103
A hierarchy of patterns
Radio Button
Forms
Search Interface
Page Layout
Navigation System
Site Architecture
Integration
104
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

105
Components
Content
Item Detail
List
Input
Tabular Data
106
(No Transcript)
107
Self-Describing Content
lt?xml version"1.0"?gt ltitemgt lttitlegtNo Doubt
Makes Strong Return To Chartslt/titlegt ltimage
rdfaboutnodoubt.gif"gt ltdescriptiongt
XML.com features a rich mix of information and
services for the XML community. lt/descriptiongt
ltlinkgthttp//music.com/nodoubt.htm lt/linkgt
lt/itemgt
108
(No Transcript)
109
Usability is not a solution!
Usability is simply a check...
110
Usability Testing An Overview

• What is usability testing?
• Way of researching peoples abilities
• Uses structured interviews
• Watch people as they use your product
• When can you use usability testing? Any time!
• During initial design work
• Between design iterations
• To find out why your users complain so much
• Before a redesign

111
The Classic Approach To Usability Testing
2 WKs
3- 6 MONTHS
LAUNCH
Concept Budget
IA, UI, Visual Design
Build
Report
Test

• Test before launch
• Usability consultant (10,000-25,000)
• 12 participants
• Rented facility, viewing room with one-way glass
• MMs
• 1 week for test, 1 week for report
• Fixes? Whos got time?!

112
Problems with the Classic Approach

• Too much data, no time to use it
• You dont learn much (the consultants do)
• Infrequent tests become special events
  disruptive
• Communicating through reports doesnt allow for
  the same context as actually being with your
  users
• Small actual impact very high cost
• Huge report revealing all the things youve done
  wrong
• Handful of important changes that must be
  squeezed in before launch, very painfully
• You feel less secure, not more

113
A Better Way
3- 6 MONTHS
Big Projects
Little Projects
Daily Releases

• Fast
• Small
• Low-cost
• In-house

• Often
• Regular schedule
• Test whatevers done
• Integrate results quickly

114
Half the Cost Lots More Value
115
Usability Budget Detail
116
Caveats

• Youve got to commit to testing at the
  organizational level
• Test stuff all the time
• You have to want to do the work
• Use the findings right away
• Dont run tests on your own work be objective

117
5 Steps to a Usability Test

• Define an audience and their goals
• Find users that match your audience description
• Identify tasks based on those goals
• Have them try the tasks
• Look for trends

118
Step 1 Define your audience and their goals
119
Identifying Representative Users

• Narrow down your intended audience ahead of time
• Pick the people who will give you the best
  response
• Often a subset of the largest group of users (the
  middle of the bell curve)
• People whose problems generalize to the largest
  number of other people if you solve the problem
  for them, you solve it for many other groups, too
• Be specific about who you want
• Dont recruit people who could have strong
  opinions about the product separate from the
  interface
• Some people know too much
• Market researchers
• Designers
• Software developers

120
Step 2 Find users that match your audience
121
The Same Recruiting Techniques Apply

• Develop a screener
• Pester friends and family
• Sift through existing users
• Use a professional recruiter

122
Step 3 Identify tasks based on audience goals
123
Create Tasks

• Write down the five most important functions of
  your product
• Not the features, the functions
• What problem is being solved?
• What are the five things that people should be
  able to do above all others?
• Basic functions someone should be able to do with
  a kitchen remodel center
• Create an account
• Design lighting
• Create a one to two sentence scenario for each
  function
• An example of someone using each function, framed
  as a question
• Written from their perspective

124
Testable tasks should be

• Reasonable
• Specific
• Doable
• Described as end goals
• Appropriately sequenced
• Domain neutral
• Not too long, not too short

125
Step 4 Have users try the tasks
126
Logistics

• Create a comfortable space
• Set up a typical computer
• Nothing customized. No Google Toolbars, etc.
• Ideally, like your personas computer
• Set bookmarks for start of tasks
• Clear the cache/history!
• Make sure any other necessary apps work (Real
  Audio, etc.)
• 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

127
Usability Lab Ideal
128
Usability Lab Practical
129
Run the Test

• Prepare the participant
• Explain what its all about
• Tell them that theyre evaluating the product and
  that any problems are not their fault
• Ask them to say all their thoughts aloud
• Describe the product using your 30-second
  elevator pitch
• Give them the list of tasks
• Give them exactly as much detail as they need to
  get the job done, and no more - dont lead!

130
Ask good questions

• Focus on experience, not extrapolation
• Concentrate on immediate experience
• Be nonjudgmental
• Make questions open-ended
• Avoid closed questions

131
Be a Good Facilitator

• Dont help!
• if a user gets stuck, help them only if a future
  tasks requires it
• Ask people to explain their actions/statements
  when appropriate
• Describe this.
• What do you expect?
• Did that surprise you? Why?
• Dont be afraid to follow the conversation in a
  direction other than the one that was originally
  intended

132
Lets do a user test right here, right now
Kitchens.com
133
A Quick Screener

• Everyone, stand up
• Sit down if
• You dont want to participate
• You have participated in a research study in the
  last 6 months
• You do not own your own home
• You have never done a remodel project before
• You have used Kitchens.com before

134
Come on down!
135
Some Observing Tips

• Imagine theres a mirror in the room
• Pay careful attention to the feedback the
  participants give
• Look for patterns in an individual participants
  actions, and across multiple participants
• Dont get too hung up on one particular phrase,
  comment, or problem that a single user has
• Be a detached observer leave your opinions
  outside the observation room

136
Lets Test!
137
Tasks for Kitchens.com

• You are redoing the tile in your kitchen and
  need instructions for how to grout. Can you use
  this site to do that?
• Your kitchen project is just about to start. How
  are you going to prepare food while everything is
  torn up?

138
Step 5 Look for trends
139
Questions to Ask Yourself

• Did the users consistently misunderstand
  anything? If so, what?
• Were there any mistakes consistently made? If
  so, what?
• Did they do what you had expected? If not, what
  did they 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?

140
More Questions to Consider

• How many of the tasks were they able to do?
  Which ones did they have the most trouble with?
• When did they look frustrated? What were they
  doing?
• Did the application meet their expectations? If
  not, where did it fail them?
• Were they ever confused? What were they doing?

141
Usability Test Timeline
142
How It All Fits TogetherUser Experience in the
Organization
143
Design Isnt Performed in a Vacuum

• Like project management, a hub in the
  multi-disciplinary process
• Many disciplines contribute to what the user
  experiences

144
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

145
Visual Design

• Big Picture thinking
• Strong visualization skills
• Task To develop a visual language
• Colors
• Typography
• Graphic style

146
Content Strategy and Writing

• Its The Content, Stupid
• Visitors interact with your site for the content,
  not the design
• Task To define a voice
• Copy guidelines
• Style manual
• Nomenclature

147
Brand Strategy and Marketing

• The user experience is a key component of an
  organizations brand
• A user experience can be informed by brand
  attributes
• Tasks
• To identify brand attributes
• To provide market segmentation

148
Data Analysis and Reporting

• Components of a users 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

149
Web Development and Engineering

• Technologists clue user experience designers in
  to feasibility
• Web developers know whats 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

150
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

151
Two Frameworks for Putting This All Together
152
Developing the Single Face

• User Goals and Tasks Company Mission Business
  Goals Branded Design Solution
• User Goals and Tasks
• User-centered design processes
• Company Mission
• Principles and vision statements that guide the
  company
• Business Goals
• Concrete metrics and objectives
• Branded Design Solution
• The substance of the interaction informs how
  customers will perceive the brand

153
8 Steps For Taking Control Of Your Site
154
Thank You! www.adaptivepath.com/workshops/tour2
002/ lane_at_adaptivepath.competer_at_adaptivepath.c
om jeff_at_adaptivepath.com