user experience distilled

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/


The Surface Layer Describes Finished Visual Design Aspects

Surface

Skeleton

Structure

Scope

Strategy


The Skeleton Describes Screen Layout and Functional Compartments in the Screen

Surface

Skeleton

Structure

Scope

Strategy


Structure Defines Navigation from Place to Place in the User Interface

task panes

modal dialogs

modal wizards

Surface

Skeleton

Structure

Scope

Strategy


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


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


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


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.


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


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


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


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


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


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


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


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?


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.



• 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.



• 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.



• 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.


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




users opt-in

compelled use


user adoption

purpose




users opt-in

compelled use


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


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



• Actor & Goal


• User Role


• User Profile


• Persona


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



• Actor & Goal


• User Role


• User Profile


• Persona


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…



• Actor & Goal


• User Role


• User Profile


• Persona


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”


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


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?


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


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].


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


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


Build a Componentized Paper Prototype


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


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.


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


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


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?


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/


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


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


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


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


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


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

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?


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


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?


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


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


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)

user experience distilled

Technology

tools user

user interfaceare

user experience professional

user goals architectural

folder task task task

format user constituencies

joness user constituencies

user interface designers