Collaborative Strategies for Designing Successful Web Sites - PowerPoint PPT Presentation

Loading...

PPT – Collaborative Strategies for Designing Successful Web Sites PowerPoint presentation | free to download - id: 57a52a-YjIzZ



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
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:482
Avg rating:3.0/5.0
Slides: 155
Provided by: JeffreyVe
Learn more at: http://www.adaptivepath.com
Category:

less

Write a Comment
User Comments (0)
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
(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
OLD WAY NEW WAY
COST (Year 1) 38,800 17,700
What you get 2 round of tests (at milestones) 24 participants (12 per test) 0 trained testers Results delivered as long reports Exec summary recommendations are addressed 12 rounds of tests (1 per month) 72 participants (6 per test) 2 trained testers Results are delivered as short action lists Most recommendations are addressed
115
Usability Budget Detail
Startup OLD WAY NEW WAY
Training 0 2000 workshop (2 people, 1k each) 100 books (like Dont Make Me Think) 0 web sites (like www.usableweb.com)
Equipment Provided by consultant 1200 video camera, tripod, cables, TV (optional, for remote live viewing)
Each Year Each Year Each Year
Recruiting Stipend 2400 (100/participant) 2400 (100/participant) 7200 (100/participant) 7200 (100/participant)
Facilities 4000 (1000/day) 0 Conference room at your office
Test Prep, Admin, Reporting 30,000 (15,000 per session) 0 You do it all in-house
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
  1. Define an audience and their goals
  2. Find users that match your audience description
  3. Identify tasks based on those goals
  4. Have them try the tasks
  5. 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
About PowerShow.com