Collaborative Strategies for Designing Successful Web Sites - PowerPoint PPT Presentation

1 / 125
About This Presentation
Title:

Collaborative Strategies for Designing Successful Web Sites

Description:

Title: PowerPoint Presentation Author: Jeffrey Veen, Janice Fraser Last modified by: Preferred Customer Created Date: 3/16/2001 8:35:31 PM Document presentation format – PowerPoint PPT presentation

Number of Views:407
Avg rating:3.0/5.0
Slides: 126
Provided by: JeffreyVe2
Category:

less

Transcript and Presenter's Notes

Title: 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
  • (415) 928-2795

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
Write a Comment
User Comments (0)
About PowerShow.com