user experience distilled
DESCRIPTION
User Experience DistilledTRANSCRIPT
User Experience
Distilled
Jeff PattonArchitect, Interaction Designer, & Agile User Experience [email protected]
2
Five topics today:
User Experienceexplained simply
and then:
Usersand modeling what you know about them
Usabilityevaluating & testing it
Visual Designguidelines to help visual design to
communicate what you intendEmotional Design
how do users feel about your software?
You can download the most current version of these slides at: http://www.agileproductdesign.com/presentations/
3
If user experience is a new topic for you, this will be a good primer
If you’re already a user experience professional, this may give you some additional ways to
explain your work to others
4 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
User Experience is Built From Dependent Layers
Jesse James Garrett’s Elements of User Experience: http://www.jjg.net/elements/
5 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
The Surface Layer Describes Finished Visual Design Aspects
Surface
Skeleton
Structure
Scope
Strategy
6 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
The Skeleton Describes Screen Layout and Functional Compartments in the Screen
Surface
Skeleton
Structure
Scope
Strategy
7 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Structure Defines Navigation from Place to Place in the User Interface
task panes
modal dialogs
modal wizards
Surface
Skeleton
Structure
Scope
Strategy
8 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
The Places in the User Interface are Built to Support User Task-Centric Scope
user tasks:• enter numbers• enter text• enter formulas• format cells• sort information• filter information• aggregate information• graph data• save data• import data • export data• print • …..
Surface
Skeleton
Structure
Scope
Strategy
9 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Business Goals Drive User Constituencies and Contexts Supported To Form Strategy
business goals:• displace competitive products• motivate sale of other
integrated products• establish file format as default
information sharing format• …user constituencies:• accountant• business planner• housewife• …usage contexts:• office desktop• laptop on airplane• pda in car• …
Surface
Skeleton
Structure
Scope
Strategy
10 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Understanding the RelationshipBetween Goals, Tasks, & Tools is Critical
Software Product
Goals
Tasks
ToolsFeatures
one or more users engaged in many tasks in support of a
common high level goal is often referred to as
workpractice
11 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Garret’s Elements of Ux Stack Can Apply to the User Experience of Other Complex Products
• These layers of concerns apply not only to software but a variety of products.
• In particular, products that support a wide variety of user tasks benefit from this kind of thinking.
12 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Let’s Look At a Product We All Use: The Place We Live
goals:• live comfortably • eat well• stay clean• be healthy• keep up with Jones’s• …user constituencies:• me• spouse• child• …usage contexts:• suburban neighborhood• near good schools• near shopping• …
Surface
Skeleton
Structure
Scope
Strategy
13 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
What might I do to reach my goals?
user tasks:• store food• prepare food• eat food• sleep• bathe• store changes of clothing• stay out of rain• entertain guests• entertain self• …
Surface
Skeleton
Structure
Scope
Strategy
14 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Arranging tasks by affinity allows me to think about contexts that best support tasks. Contexts in a home have common names we all know.
Surface
Skeleton
Structure
Scope
Strategy
15 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
When designing a particular interactioncontext such as a “kitchen,” I optimize layout and tool choices to support tasks I’ll do there
Surface
Skeleton
Structure
Scope
Strategy
16 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
I’m going to spend a lot of time here, I want my experience to be as pleasant as possible…
Surface
Skeleton
Structure
Scope
Strategy
17 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Tool Design to Ux Designers is as Snow is to Eskimos (or Cross Country Skiers)
Surface
Skeleton
Structure
Scope
Strategy Goals
Tasks
Tools
• Business Goals• User Model with
User Goals
• Architectural Goals Based On Context of Use
• User Tasks & Activities, or Use Cases• Technology Independent
• Navigation Map• Page Wireframes• UI Design Guidelines
18 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
activitymanage email
User Interface Designers Often Use “User Tasks” to Describe What People Do
• Tasks require intentional action on behalf of a tool’s user and have an objective that can be completed.
• Tasks decompose into smaller tasks.
• Activities are used to describe a number of tasks that my be completed in an any order in pursuit of a general goal.
• “Read an email message” is a task, “Managing email” is an activity.
task task task tasktask
task
task
task
task
taskread
messagesend
messagecreatefolder delete
message
prioritizemessage
placemessagein folder
19 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Each Layer Validates The Next
• As we move up layers in Garrett’s model it’s easy to see how each layer validates the previous layer
• This doesn’t mean that decisions on each layer must be made before moving on to the next – that’s often impractical
– When making a decision on one layer, consider the assumptions that must be true on the next layer down
– When information changes on lower layers – information such as business or user goals, or our understanding of tasks, consider the implications on layers above
20
User ExperienceUser-Centered Design
Interaction DesignInformation Architecture
Visual DesignUsability
Human Computer Interaction
So, why all the different words?
21 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
User Experience Words Describe Distinct Concepts & Responsibilities
• User Centered Design
– refers to a class of methodologies where design decisions are based on some tangible user model. That user model must be based on the research of the users of the application.
• Interaction Design
– refers to the specific choices of user interactions we make to allow users to meet their goals in the software. Interaction Designers are generally User Centered Designers.
• Visual Design
– refers to the design of the visual appearance of software, advertising, or other commercial products. Visual Design focuses a bit more on esthetics. Visual Designers are often NOT User Centered Designers.
22 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
User Experience Words Describe Distinct Concepts & Responsibilities
• Usability
– Usability refers to the ability of a specific type of user to be able to effectively carry out a task using a product.
– Usability is usually measured through testing. Given a number of test subjects that reflects the type of user that will use the application:
• how many successfully complete a task.
• on average how quickly do they complete that task.
• on average how many user errors are made while attempting to complete that task.
• Usability Engineering
– refers to the practice of usability. Usability Engineers often have much in common with testers. While they may design the user interface, often their emphasis is on evaluating the user interface and making recommendations for improvement. Usability Engineers are generally User Centered, but they may not be Designers.
23 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
User Experience Words Describe Distinct Concepts & Responsibilities
• Information Architecture
– refers to the structuring of information so that it best supports the consumption by its target users. An IA professional is often considered a counterpart to an Interaction Designer where Interaction Designers focus on how people use computers to accomplish work, and Information Architects focus on how people leverage information to support goals.
• HCI or CHI
– Human-Computer, or Computer-Human interaction refers to the study of how humans and computers interact. An HCI professional may be a researcher, a designer, a psychologist, or anyone who might focus on human-computer interaction as part of their work or study.
24 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
User Experience Words Describe Distinct Concepts & Responsibilities
• User Experience
– refers to the overall experience a user has with a product. This experience doesn’t stop at the use of the product but starts with the advertising and presenting of the brand, through the purchase to the use and the day-to-day feeling the user carries with them about the product.
• User Experience Professional
– may refer to any of the roles already discussed. Someone whose day-to-day practice focuses on improving some or all aspects of user experience.
– We are all directly or indirectly User Experience Practitioners… how professional we are at it may be up for discussion.
25 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
For a given piece of software user experience is often considered more or less relevant often for economic reasons
Internal use commercial sale
users opt-in
compelled use
generates revenuereduce costs
user adoption
purpose
company portal
online tools(google, yahoo)
shrink-wrap consumer software(quicken, ms money)
ecommerce software(amazon, expedia)
enterprise class accounting(sap, oracle)
crm applications(salesforce.com, siebel)
call center software
company time tracking
26 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
For a given piece of software user experience is often considered more or less relevant often for economic reasons
Internal use commercial sale
users opt-in
compelled use
generates revenuereduce costs
user adoption
purpose
27 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
For a given piece of software user experience is often considered more or less relevant often for economic reasons
Internal use commercial sale
users opt-in
compelled use
generates revenuereduce costs
user adoption
purpose
company portal
online tools(google, yahoo)
shrink-wrap consumer software(quicken, ms money)
ecommerce software(amazon, expedia)
enterprise class accounting(sap, oracle)
crm applications(salesforce.com, siebel)
call center software
company time tracking
How relevant is user experience in your company?
Does it vary for the different pieces of software in your
company?
28
so what should you do about all this?
start by understanding
your users
29 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Actors, Roles, Profiles, & Personas Describe Users
• Actor & Goal
– Often a job title or the common name for the type of user in a system
• User Role
– Short name describing a user in pursuit of a goal – users change roles as their goals change
• User Profile
– Adding summary information about the types of users who fill a role or perform as an actor begins a process of “profiling”
• Persona
– Choosing specific characteristics of a person and compiling those into a archetypal description of that person creates a strong design target
On-line Shopper: browse and purchase merchandise on line
Customer Support Rep: aid customers over the phone and on line with issues
30 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Actors, Roles, Profiles, & Personas Describe Users
• Actor & Goal
– Often a job title or the common name for the type of user in a system
• User Role
– Short name describing a user in pursuit of a goal – users change roles as their goals change
• User Profile
– Adding summary information about the types of users who fill a role or perform as an actor begins a process of “profiling”
• Persona
– Choosing specific characteristics of a person and compiling those into a archetypal description of that person creates a strong design target
Casual Browser: pass time by browsing products online
Comparison Shopper: compare price and features for items I wish to buy
Gift Shopper: find a gift for someone that likes the types of products this website sells
Impatient Buyer: find what I need and get through the checkout process quickly
31 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Actors, Roles, Profiles, & Personas Describe Users
• Actor & Goal
– Often a job title or the common name for the type of user in a system
• User Role
– Short name describing a user in pursuit of a goal – users change roles as their goals change
• User Profile
– Adding summary information about the types of users who fill a role or perform as an actor begins a process of “profiling”
• Persona
– Choosing specific characteristics of a person and compiling those into a archetypal description of that person creates a strong design target
Web Shoppers
Users: 50,000 customer visit this sporting goods website monthly
Activities: browsing, price comparing, gift shopping, handling returns
Computer Skills: vary wildly from first time users to expert – although moderate computer skills are typical
Domain expertise: typical customers are avid outdoor enthusiasts…
32 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Actors, Roles, Profiles, & Personas Describe Users
• Actor & Goal
– Often a job title or the common name for the type of user in a system
• User Role
– Short name describing a user in pursuit of a goal – users change roles as their goals change
• User Profile
– Adding summary information about the types of users who fill a role or perform as an actor begins a process of “profiling”
• Persona
– Choosing specific characteristics of a person and compiling those into a archetypal description of that person creates a strong design target
Steve races mountain bikes competitively. He shops the web on a regular basis to keep abreast of new equipment releases on the market, and to make sure he has the best equipment he can afford.
He’s used computers for years and considers himself an expert user. He maintains his own website and blogs about his races and upcoming schedule.
Steve relies on reviews from his peers to judge the quality of equipment. He often writes reviews of his own for stuff he’s tried out.
Steve Powellcompetitive mountain biker
“I’m looking for stuff that’ll help me stay ahead of the pack”
33 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Model Users Using a Technique Appropriate For Your Product, Team, and Available Information
• There are many ways to understand users, and depending on the product being designed, different approaches offer different advantages
• Build a user model to function as a design target for task support and user interface decisions
• Examples of user models include
– Actor, Goal List
– User Roles and Role Model
– User Profiles
– User Personas
– The profiled actor
– The personified role
• User models illustrate the tension that exists between user goals and business goals
products for internal users, enterprise products
consumer products
better design targets
34 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Create an Assumption Based User Profile by Writing DownYour Assumptions About Your User as a Team
• As a team, gather together to discuss the types of user that use your system
– Start by brainstorming types of users
• Starting with the user you believe is the highest priority for your software, discuss the following characteristics of that user type:
1. # of users that occupy this user type
2. General responsibilities
3. Computer skills
4. Domain expertise
5. Goals: how does this software tool help this user reach their goals?
6. Pain Points: what nagging problems can this software help solve?
7. Usage Contexts: where will this software be used?
8. Software Ecosystem: what other software tools does this user type rely on?
9. Collaborators: who does this user work with to help reach their goals?
10.Frequency of Use: how often is this type of user likely to use this software?
11.Design Opportunities: given all this, what opportunities are there to help and delight this user type?
35 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Designers Get Information About Users Through Research
• Interviewing users from target user groups
• Observing users
• Questionnaires
• Existing published demographics
• Existing published research
• Customer service records and representatives
• Sales and marketing
• Usability testing
• Focus groups
• Look at the assumptions your user information is based on
• How could you replace assumptions with facts gathered from research?
36
now what?
evaluate your product’s usability
37 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Usability is a Measured Quality Characteristic of Software
• Usability is measured through testing
• Users placed in front of a prospective system are asked to perform specific tasks without instruction or guidance
• Typical usability tests measure:
– Task completion frequency
– Task completion time
– Errors or mis-steps
• Professionals [and novices] can [and will] give their subjective evaluation on usability, but you can’t really be sure until you test [or ship].
38 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Lightweight Usability Testing Is Fast & Cheap
• Lightweight usability testing can be performed by directly observing users working with software or workign with a paper prototype of your software
• To test software before it’s built
– Build a componentized paper prototype
– Choose a task or set tasks
– Test it
39 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Build a Componentized Paper Prototype
• Tools
– Card Stock (use for screen backgrounds and cut up for components)
– Index Cards (lined cards make great lists)
– Scissors or Xacto knife
– Cello tape
– Repositionable tape
– Pencils
– Sharp felt tip pens
– Transparency film (great to write on)
• Draw each component on card stock, cut it out, and stick it to the prototype using repositionable tape
40 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Build a Componentized Paper Prototype
41 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Preparing to Testing Your Paper Prototype
• Identify test subjects– Should match the characteristics and skills of our your target user
constituencies
– Actual end users or stand-ins
• Identify tasks to test
• Assemble your test team– facilitator
– computer
– observers
• Coach the test team on the testing personalities:– flight attendant: makes sure test subjects are informed and safe
– sports caster: makes sure there’s a play-by-play dialogue to inform observers
– scientist: makes sure that none of the information gathered is biased or tainted
• Decide on test approach – single or paired subjects
• Setup your testing facility
42 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Testing In Action
• Facilitator introduces the team.
• Facilitator introduces tasks to perform and goals, then invites test participants to “think out loud” and begin.
• Facilitator plays sports-caster; keeps subject talking, narrating when necessary.
• Observers record data – use post-it notes to make downstream analysis move faster.
• When the test is complete observers may ask test participants questions.
• Thank test participants
• Consolidate data
– How many issues did you detect? Consider issues as items you’d change.
43 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Test First – Building Confidence into Software Development
• Agile development’s test-first technique doesn’t just apply to code
• Use paper prototyping and usability testing to validate that your requirements are accurate and the software you intend to build can be effectively used
• It’s normal to perform several iterations of design and test in paper in a few hours
44 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Heuristic Evaluations May Help Predict Usability Problems
• While usability is a measured characteristic of software, years of measuring product usability has resulted in common categories of usability errors
• Jakob Nielsen’s Heuristic Evaluation process uses these 10 categories in an inspection process to help identify likely usability errors
• It’s important to remember that the results of heuristic evaluation are educated guesses
– They may not reveal all the usability errors
– They may result in correcting issues that aren’t really a problem in practice for your user types
45 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Nielsen’s 10 Usability Heuristics (1 of 2)
1. Visibility of system status (keep the user informed)– be forthcoming - don’t hide information, does the system know
something the user doesn’t?
2. Match between system and real world (user language and real world conventions)
– watch your language, does it match your users’ vocabulary?
3. User control and freedom (easy exits, undo and redo)– padded corners, hand rails, and safety nets, can I explore the
system safely without damaging my work?
4. Consistency and standards– same thing the same way, are elements of the UI that do the
same thing presented consistently?
5. Error prevention– does the system take steps to stop unnecessary errors?
46 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Nielsen’s 10 Usability Heuristics (2 of 2)
6. Recognition rather than recall (reduce remembering with visible options, actions, and instructions)
– can I see what my options are? (brail user interfaces don’t count)
7. Flexibility and efficiency of use (customization and support for advanced users)
– speed keys and buttons support quick access to frequently used tasks
8. Aesthetic and minimalist design (reduce irrelevant or rarely needed information)
– Less is more, WYSIWYN: what you see is what you need
9. Help in recognizing, diagnosing, and recovering from errors
– do errors explain what went wrong in the users’ language and give steps to recover?
10.Good help and documentation– does documentation explain how to accomplish a task, or merely what
each button does?
Jakob Nielsen’s Heuristic Evaluation: http://www.useit.com/papers/heuristic/
47 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Usability Refers To The Ability of a User To Effectively Execute A Task Using a Tool, Not Esthetics
• Usability is a measured characteristic of your software
• Visual design adds look and feel that may affect usability
– Don’t assume because software looks good that it is usable
– Don’t assume that because software looks bad that it isn’t usable
http://www.uie.com/brainsparks/2006/03/27/is-ugly-the-new-black/
• Don’t assume those skilled at visual design are also skilled at usability
• While Visual Design certainly can affect usability, it’s quite possible for a product to have pleasing visual design, but intolerable usability
Don Norman’s The Design of Everyday Things
48
beauty is skin deep, or is it?
strong visual design improves esthetics and usability
49 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Good Visual Design Observes 4 Simple Principles
• Learn the principles
• Recognize when you are and aren’t using them
• Apply them to help users achieve their goals
C
R
A
P
Contrast
Repetition
Alignment
Proximity
50 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Contrast
• Contrast communicates importance
• Use contrast to focus the user’s attention, to guide him/her through the application
• Contrast, or don’t. If two items are not exactly the same, make them different – really different - subtle difference isn’t contrast, it’s perceived by users as tension in the screen and often looks like a mistake
51
52 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Repetition
• Repeat some aspects of the design throughout the entire application
• Repeated elements blend in
• Elements that repeat each page become static – or “visually persistent.” As users move from place to place in your software, they need only observe what’s changed
• Repetition can be thought of as consistency - appropriate repetition makes the application appear cohesive
53
54
55 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Alignment
• Alignment communicates association
• Nothing should be placed on the screen arbitrarily. Every item should have a connection with something else on the screen – after all if it’s on the same screen it’s associated
• 3 Horizontal Alignments: Left Center Right
– Center alignments are visually the weakest
56
57 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Proximity
• Proximity communicates affinity – distance communicates lack of affinity
• Group related items together
• “Clumps” of items can feel like one item
• Many items displayed as a few clumps of items seems simpler and more visually pleasing
58
59
Suppose you’ve done everything right…
you’ve considered users, usability, and tuned your visual design, but users
don’t love your software
How do they feel about it?
60 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Don Norman explains that beauty, at least for products, isn’t skin deep
“Attractive things make people feel good, which in turn makes them think more creatively…. making it easier for people to find solutions to the problems they encounter.”
-- Don Norman
61 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Norman explains three characteristics of design to observe: Visceral, Behavioral, & Reflective
Visceral
• What is the products initial impact or appearance?
Behavioral
• How does the object feel to use?
Reflective
• What does the object make you think about? What does it say about it’s owner?
62 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Noriaki Kano asks us to consider quality as being composed of objective and subjective elements
“Discussions of quality have revolved around the two aspects of subjectivity and objectivity since the time of Aristotle.
Embedded in this objective-subjective split is the idea that objective quality pertains to the ‘conformance to requirements’ while subjective quality pertains to the ‘satisfaction of users.’”
--Noriaki Kano
63 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Kano explains three general classifications for product features: must-haves, one dimensionals, and delighters
Must-haves
• The products must have this features for me to be happy
One dimensionals
• The more of this I get, the better
Delighters
• I love this element of the product!
“This car has many flaws. Buy it anyway. It’s so much fun to drive”
-- from a NY Times review of the Mini Cooper
64
parting words:
user experience is a function of users, their goals, and the tasks your software supports to help them reach their goals. Finally, how do your users “feel” about
your product?
the quality of your software’s user experience turns on your
understanding of those elements.
Jeff [email protected]
User Experience
Distilled
You can download the most current version of these slides at: http://www.agileproductdesign.com/presentations
66 © 2006-2008 Jeff Patton, All rights reserved, www.agileproductdesign.com
Further Reading
• Constantine & Lockwood, Software For Use (Addison-Wesley, 1999)
• Cooper & Rheimann, About Face 2.0 (Wiley, 2003)
• Garrett, The Elements of User Experience (New Riders Press, 2002)
• Hackos & Redish, User & Task Analysis for Interface Design (Wiley, 1998)
• Krugg, Don’t Make Me Think (New Riders Press, 2005)
• Pruitt & Adlin, The Persona Lifecycle (Morgan Kaufman, 2006)
• Snyder, Paper Prototyping (Morgan Kaufman, 2003)
• Tidwell, Designing Interfaces (O’Reilly, 2005)
• Williams, The Non Designer’s Design Book (Peachpit Press, 2003)