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
desirability
viability
feasibility
3
(No Transcript)
4

5
Hi, I'm remodeling my kitchen and buying new
appliances. While researching my decisions, I
visited your site to see how your refrigerators
compared to other manufactures. One of the most
important factors in my decision is the amount of
energy the product uses -- but I couldn't find
this information listed on your site anywhere. Am
I not looking in the right place? -jeff
6
Dear Jeff, Thank you for visiting the Maytag
Home Page. We welcome the opportunity to assist
you. Please forward your model number and we can
send the energy rating for the model. Eric Maytag
Customer Service
7
Eric, I think you may be misunderstanding my
query. I'm interested in buying a new
refrigerator. One of my key decision-making
points is the energy rating of the product. I'd
like to be able to see the rating of all of your
models on their respective product description
pages. -jeff
8
Dear Jeff, Unfortunately, the energy ratings are
not listed on the web page. Sorry for the
inconvenience. Jennifer Maytag Customer Service
9
Jennifer, Right. I realize that. That's why I
mentioned it. It's a pretty crucial
decision-making point for a lot of people
(including me). You should consider having your
Web team add it to the standard product page.
-jeff
10
Dear Jeff, Thank you for your comments regarding
the Maytag.com Home Page. In the future, please
include the model number of your Maytag appliance
so that we may assist you more efficiently. Scott
Maytag Customer Service
11
Defining Experience Design

• Functional Design
• The design of systems that support end-users'
  tasks and goals
• User research
• Information Architecture
• Interaction Design
• Communication Design
• The design of how these systems are expressed to
  the user
• Interface design
• Visual design
• Content strategy

12
Good design means following rules! My rules!
13
Top Ten Guidelines for Homepage Usability
Following are ten things you can do to increase
the usability of your homepage and thus
enhance your website's business value.

1. Include a One-Sentence Tagline
2. Write a Window Title with Good Visibility in
   Search Engines and Bookmark Lists
3. Group all Corporate Information in One Distinct
   Area
4. Emphasize the Site's Top High-Priority Tasks
5. Include a Search Input Box

1. Show Examples of Real Site Content
2. Begin Link Names with the Most Important Keyword
3. Offer Easy Access to Recent Homepage Features
4. Don't Over-Format Critical Content, Such as
   Navigation Areas
5. Use Meaningful Graphics

Jakob Nielson Alertbox, May 12, 2002
http//www.useit.com/alertbox/20020512.html
14
(No Transcript)
15
A Different Perspective

• There is no One True Way or Four-Step Process
• The Web may have best practices for user
  experience design, but it is too early to depend
  on them exclusively
• The separation between functional design and
  communication design is messy at best

16
But wont the rules limit my creativity...?
17
Obeying rules without an understanding of the
reasons behind them creates an approximation of
competence which leaves one vulnerable to the
exceptions.
Sea Kayaker's Deep Trouble
18
About the Project

• iRemodel.com leading home improvement portal
• Features
• Tutorial Content for users new to home
  improvement
• Idea File
• Product database with comparison engiine
• Contractor/architect locator
• Budget estimator
• New features
• Kitchen design center
• Contractors management application

19
Our goal...
To develop an experience based on the patterns
inherent in your stuff that empowers users to
accomplish their goals.
20
Its how we get a pile of stuff...
21
...into a structured experience.
22
This includes labeling...
23
...and navigation systems...
24
...that are intuitive to users.
Ah Ha!
25
But! Not all users have the same goals.
Shapes!
Colors!
26
So, good design lets many users...
27
...access lots of content...
28
...in many ways.
29
But this isnt always as easy as it sounds...
30
What do you call this?
31
Is it Coke? Pop? Soda?
http//www.ugcs.caltech.edu/almccon/pop_soda/
32
But wait! Theres more...

• fizz
• fris
• phosphate
• bubble-water
• lolly-water
• Tingle Fizz Fuzz

• mixer
• sweet drink
• tonic
• sodie
• cocola
• soder
• dopes

33
Design faces global issues...
Colors?
Colours?
De Colores?
? ? ? ? ? ? ?
? ?
34
(No Transcript)
35
(No Transcript)
36
(No Transcript)
37
Design faces accessibility issues...
Colors
???
38
(No Transcript)
39
(No Transcript)
40
Design suffers from jargon...
Shapes WebBeanstm
? ? ? ? ? ? ?
? ?
41
(No Transcript)
42
(No Transcript)
43
Design suffers from politics...
Excellent!
???
User
CEO
44
Customers used to interact directly with
departments...
Big Corp
A
B
C
D
E
45
But that doesnt translate to the Web at all...
Big Corp
A
B
C
D
E
46
(No Transcript)
47
Design must also be extensible...
!?!
48
(No Transcript)
49
(No Transcript)
50
(No Transcript)
51
We dont even know what else they are doing
!!!
52
The Two Parts of IA, Diagrammed
Surface architecturecomes from Mental Model
Deep architecture comes from the Content Model
53
(No Transcript)
54
So who are these people, your users?
55
Remember You Are Not Your Audience

• You do not
• see things like they do
• know what they know
• want what they want
• work how they work
• This is critical information when designing a
  product

So how do you figure out all of these things?
56
User Research!

• The study of what makes peoples lives difficult
  and how to make them easier
• NeedsWhat people need to make their life easier
• DesiresWhat they want (does not equate to what
  they need)
• AbilitiesWhat they can understand and do
• MethodsHow they do things now

57
Conceptual Research (need)

• Timing Early in the design process
• Purpose Investigates needs and methods
• Techniques
• Task Analysis/Contextual Inquiry
• Surveys
• Ethnography
• Outcome Encourages innovative thought at the
  very outset of design

58
Preference Research (like)

• Timing Mid-process
• Purpose Investigates desires, expectations,
  priorities
• Techniques
• Surveys
• Focus Groups
• Interviews
• Card sorting
• Outcome Ensures that design solutions appeals
  to the desired audience

59
Ability Research (do)

• Timing End of the process (and the beginning of
  the next iteration).
• Purpose Investigates abilities and reactions
• Pre-Launch Techniques
• Prototypes (paper and mockup)
• Usability Testing
• Post-Launch Techniques
• Log analysis
• Customer feedback analysis
• Outcome Ensures that design solutions are
  usable for the desired audience

60
User Research in the Design Process Practical

• Linear process
• One big step for each type of user research
  (conceptual, preference, ability)
• Handed off at the end, as opposed to beginning
  the cycle again
• Ideally, the process is collaborative and
  iterative...

61
About These Methodologies

• Scalability Many of these techniques can be
  used tomorrow, or as a 6-month project.
• Live it User research, information architecture
  and good design are not something to consider
  doing every so often.
• Balance Too much reliance on methodologies and
  technique can be as bad as not using them at all.
• Remember Be open minded!

62
(No Transcript)
63
What is Discovery?

• Useful and often overlooked
• Tool for understanding business needs and context
  (rather than user needs and context)
• An early opportunity to head off problems before
  they happen
• Answer important questions about the project
• Why do it? (Business/Marketing purpose)
• What does it do? (Scope/Definition)
• Who cares about it? (Stakeholders/Decision
  Makers)

64
Why Do Discovery?

• No matter how good your solution is, if it
  doesnt fit within the existing expectations and
  processes of your organization, it will fail
• Remember A sick body will reject a healthy organ
  if the body isnt prepared properly first

65
10 Roadblocks Discovery Can Help You Avoid

1. Project gets bogged down in approvals
2. Your assumptions about the goals of the project
   are way off base
3. You discover half-way through that the scope is
   much greater than you imagined
4. Feature creep
5. Disenfranchised people become obstacles
6. Nobody listens to youeven though youre
   supposedly in charge
7. Nobody understands what youre saying (maybe
   because you dont have the same understanding of
   the project)
8. Someone important and powerful (e.g., the CEO)
   hates the final solution a week before launch
9. Your final solution, though cool, doesnt solve
   the original problem
10. Your proposed solution cant be implemented

66
Purpose of Discovery (Soft)

• Understand the context in which you are working
• Political landscape
• Stakeholders
• Decision structures (who/how/when)
• Business mandates
• Technologies
• Build relationships
• Introduce yourself
• Explain what you do
• Get to know everyone involved (listen)
• Communicate your goals internally as well as
  externally

67
Purpose of Discovery (Concrete)

• Define project criteria
• Stakeholders
• Definitions
• Scope
• Business mandate
• Formulate strategies
• Resources
• Methods
• Process
• Schedule
• Budget

68
How this Affects You

• Answers these questions
• What is your relationship with your organization?
• How effectively do you communicate your value to
  the key stakeholders on your project?
• Develops these skills
• Learn the company language (jargon not buzzwords)
• Understand the decision-making environment you're
  working in

69
Potential Roadblocks to Doing Discovery

• Schedule pressure
• Stakeholders dont see the value
• Lack of access to key players (distance,
  vacation, schedule conflicts, etc.)

70
Methods for facilitating meetings

• Always prepare, even (especially) when
  brainstorming
• Use only open questions
• Make meetings into active working sessions

71
Method Kickoff Meeting

• Who Everybody you can get together in the
  conference room
• Purpose
• Introduce yourself, team, and the stakeholders
• Explain the project
• Let stakeholders know how they will be involved
• Establish working relationships get the team on
  board
• Form Presentation and discussion
• Timing Beginning of discovery
• Content Goals, team, process, schedule, and
  deliverables
• Leave-behinds Project plan (draft only),
  presentation slides

72
Method Project Sponsor Interviews

• Who Whos signing the check?
• The most senior person or people who approved the
  project, and their peers
• Purpose
• Understand political context
• Define decision process
• Understand business imperative and goals
• Learn what other departments should be included
  and how
• Form One-on-one conversations
• Timing After kickoff
• Leave-behinds Project plan (draft only)

73
Method Stakeholder Group Sessions

• Who Key stakeholders
• Purpose
• Discover expectations for the project
• Discuss pain points, features
• Make people feel involved
• Establish cross-departmental communication among
  stakeholders
• Form Similar to focus groups
• Open, brainstorming
• Smaller, intimate
• Timing Soon after kickoff
• Leave-behinds Notes, email

74
Method Stakeholder One-on-Ones

• Who Anyone you can corner for at least 15
  minutes
• Purpose
• Learn details about the project
• Learn the truth about the organization
• Let people know that they can talk to you (i.e.,
  listen!)
• Venting
• Talk through definitions, goals, methods,
  processes
• Solidify requirements and discover potential
  roadblocks
• Identify existing documentation
• Form Informal conversations
• Timing After kickoff
• Leave-behinds Notes, email

75
Method Review of Existing Documentation

• Gather and review previous materials any
  documentation that seems relevant. It might be
• Server logs
• Previous product specs
• Usability or other research
• Explanation of key technologies
• Even if theres nothing to review, showing
  interest will go a long way toward establishing
  relationships

76
Exercise Sketch Assumptions

• Without sharing, sketch the product as quickly as
  you can
• Front page showing features
• Scribble out the top page of the kitchen design
  application
• You only have 10 minutes. Dont design! Just
  draw!

77
Discovery Deliverables Vary

• Summarize your findings for distribution to the
  stakeholders and/or project sponsor
• Lets people review what theyve said and correct
  as necessary
• Review of docs will show that youre leveraging
  prior investments
• Contents include business goals, any mandatory
  features, assumptions, definitions
• Formal documentation MRD, PRD, Project Brief,
  etc.

78
(No Transcript)
79
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

80
Identifying Competitors

• Start with known rivals
• See marketing plan, business plan, etc.
• Use online tools to broaden scope
• Whats related, Alexa, browse online
  directories
• Look for other sites with similar features, even
  if theyre in a completely different industry
• Try to identify conventions
• Search, navigation, interface widgets, etc.
• Use analyst reports to identify industry trends
• Forrester, Jupiter, et al.

81
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

82
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

83
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

84
(No Transcript)
85
What Is a Persona?

• A fictitious person for whom you are designing
• Represents the archetypal qualities of your
  audience
• Plural personas not personae
• Its ... well ... less pretentious

86
Why Personas?

• Provides focus for the design
• Talk about Lori not the user
• Humanizes the design
• Name them
• Have photos of them (corbis.com,
  images.google.com)
• Remarkably effective for bringing user-centered
  design into an organization
• Turn personas into big posters, place throughout
  organization

87
Developing Personas

• Start with market research and segmentation
• Demographic
• Age, Gender, Occupation
• Psychographic
• Goals, tasks, motivation
• Webographic
• Net usage and experience, gear, usage habits,
  favorite sites

88
Personas Are Not

• Demographic ranges
• 18-34 year old college educated females making
  50K
• Job Descriptions
• IT managers in Fortune 1000 with purchasing
  power for routers
• Your CEO
• Mr. Burns wants to be able to use his WebTV on
  the site

89
Personas Are

• Stereotypes
• This isnt an exercise in politically correct
  thinking
• Edge cases can lead you off track, e.g. male
  nurses, private pilots
• Design targets, not sales targets
• Tools for thinking about features and functions,
  not character studies

90
Persona Chart
Steven Joy and Eric
Age 36
Occupation Design/Build Remodeler, CGR.
Net usage 30-60 min day, cable modem, my.yahoo.com, cnn.com, theonion.com
Gear Dell Pentium III, 750Mhz, 17Palm Vx
Trigger for action Responding to client call Not so much triggered as it is Stevens job.
Ultimate Goal To make the client very happy with a kitchen remodel while pocketing a sizable profit.
Familiarity/Anxiety Steven is comfortable using the computer and the Web for job-related needs.
91
Scenarios

• Stories of personas engaged in tasks or achieving
  goals
• Narrative structure enforces making sense
• The flow of writing feels more real than the
  discrete collections of tasks and attributes

92
Writing Scenarios

• Keep the task focused 4 to 5 paragraphs
• Incorporate the personas environment
• Make them messy
• Try not to design while writing
• Write three or four scenarios per persona

93
Benefits of Scenarios

• Allows for a holistic description of the users
  experience
• Context, context, context
• From inside the users head to the environment
  surrounding them
• Excellent communication tool all humans
  understand stories
• Works well across multi-disciplinary teams
• Fleshes out personas existence

94
Potential Pitfalls

• The Scenario Where Everything Works Like Magic
• Digressing too much
• Too much response from a designed system

95
(No Transcript)
96
How Do You Create a Design that Users Can
Understand?

• Figure out what users need develop a mental
  model
• Figure out what you have develop a content model
• Match them up
• Use it to create your site design
• Make a high-level structure based on mental model
• Make the detailed structure based on the content
  model

97
What is a Mental Model?

• How an audience thinks about and approaches
• its tasks and goals
• (separate from a Web experience)

98
(No Transcript)
99
What is a Mental Model?
Talk to spouse
Look in fridge
How much time do I have?
Does the car need gas?
Look for discounts
Clip coupons
Plan meals
Prepare shopping list
Walk the store aisles
Grocery Shopping
100
What Does a Mental Model Look Like?

• Our Mental Model Diagram looks like this, with
  tasks arranged into ever-broader groupings

101
Ultimate Goal

• A design that corresponds to your users mental
  models

Talk to spouse
Look in fridge
Clip coupons
Does the car need gas?
Look for discounts
Plan meals
Prepare shopping list
How much time do I have?
102
Ultimate Goal, Pt 2

• A design that corresponds to your users mental
  models
• that also meets your business needs

Talk to spouse
Look in fridge
Clip coupons

Does the car need gas?
Look for discounts
Plan meals
Prepare shopping list
How much time do I have?
103
(No Transcript)
104
(No Transcript)
105
Ah Ha!
106
Why Perform Task Analysis?

• Helps you figure out what features are important
  to your users, and what they would call those
  features
• Ensures that the design meets those user
  requirements as well as the business requirements
• Provides a way to trace back all aspects of the
  interface to the users task flow
• Goal To remove the phrase I think from
  discussions about what your users need
• So that you can create a Mental Model Diagram,
  which is really cool

107
1. Find Some Users

• Start immediately the better the subjects, the
  better the outcome
• Getting started tomorrow friends, family,
  coworkers
• Pros cheap, easy
• Cons bias (they may know too much), not close
  enough to the real target audience
• Some do-it-yourself options
• Existing user base, customer support inquiries,
  advertise on existing site
• User groups, email discussion lists
• Traditional market research means classified
  ads, etc.

108
Finding Users Let the Pros Do It

• Better yet, get the budget to use a recruiting
  agency
• Pros can get people who know nothing about the
  product, can get people who are exactly your
  audience, can recruit people in a variety of
  geographic locales
• Cons money
• In San Francisco
• Jonathan Gauntlett at G Focus Groups
• jonathan_at_gfocusgroups.com
• [phone]

109
Writing a Screener

• A simple script to weed out subjects
• Write 20 questions that narrow in on who youre
  after
• Order questions from generic to specific
• Be very clear and specific
• Avoid jargon

110
2. Conduct Interviews
Yak yak yak yak yak yak yak yak yak yak yak yak
kak yak yak yak yak yak yak yak yak yak yak...

• Use ethnographic inquiry techniques
• Encourage open answers, rather than to lead the
  interviewee in any preconceived direction
• Use predefined questions as prompts in a
  conversation, not a verbatim script
• Allow the interviewee to direct the flow of
  conversation
• Interview about 5 people per audience type
• Prepare verbatim transcripts, if possible.

111
Ask good questions

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

112
3. Analyze the Transcripts

• Scan interview transcripts for tasks
• Copy each task to the atomic task table
• Notice patterns across users. Group similar
  atomic tasks together under one task name
• Adjust these groups as the patterns grow and
  shift
• Estimate 4 hours per interview

113
4. Organize Tasks into Groups

• Arrange the tasks into conceptual groups based
  on
• Steps the users described
• Similarity of tasks
• Do this for each audience, if there are multiple
  audiences
• Compare results between audiences and combine if
  appropriate
• Alphabetize groups for easy reference

114
A Collaborative Approach to Organizing Tasks

• Your team, an afternoon, a large blank wall,
  millions of Post-Its
• Read notes and make stickies
• One person plucks tasks from the transcript, the
  other writes them down on stickies
• One task per sticky, different colored stickies
  depending on the number of times different people
  mentioned the same task
• Make stickies and move them around until they
  make sense
• Cluster similar stickies on the wall and give
  them a name
• Cluster similar clusters together, and give them
  a name, too
• Voila! Tasks, Task Groups, and Mental Spaces

115
Walls of Stickies
Thanks Marc Rettig
116
5. Build the Mental Model

• Arrange the mental spaces into a meaningful
  order, if possible
• Name your mental spaces with verbs, not nouns
• Make it a team effort one person makes a first
  draft, but team members and clients should
  participate in refining it

117
What a Mental Model Looks Like

• Consists of Tasks
• The individual tasks that people perform when
  attempting to achieve a larger goal

118
What a Mental Model Looks Like

• Consists of Task Groups
• Tasks for the same goal grouped together

119
What a Mental Model Looks Like

• Consists of Mental Spaces
• The set of goals which together form a complete
  activity

120
How a Mental Model is Used

• Content Slotting

Online Discussion Boards
Proposal Template

• Existing site content from audit is slotted
  underneath to show where current site meets (or
  doesnt) users needs.

Proposal Submission Form
121
End result Horizon Chart

• Detailed map of your users everyday goals, and
  the individual tasks they undertake to achieve
  them
• Shows where the existing site succeeds in meeting
  these goals where it overshoots where
  opportunities for future development lie
• Excels as a reference document, a starting point
  for discussions about user requirements

122
Exercise Building a Mental Model

• With your group, look for trends in remodeling
  tasks
• Organize tasks into conceptual groups
• Use stickies to label each group

123
Diagram Mental Model Building Tips

• Arrange the mental spaces into a meaningful
  order, if possible
• Name your mental spaces with verbs, not nouns
• Make it a team effort one person makes a first
  draft, but team members and clients should
  participate in refining it

124
(No Transcript)
125
Thank You! www.adaptivepath.com/workshops/tour2
002/ lane_at_adaptivepath.competer_at_adaptivepath.c
om jeff_at_adaptivepath.com