User Experience Distilled
Upcoming SlideShare
Loading in...5
×
 

User Experience Distilled

on

  • 1,896 views

User Experience Distilled

User Experience Distilled

Statistics

Views

Total Views
1,896
Views on SlideShare
1,894
Embed Views
2

Actions

Likes
10
Downloads
104
Comments
0

1 Embed 2

http://clickwatchlearn.blogspot.com 2

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • user models 10 (30)

User Experience Distilled User Experience Distilled Presentation Transcript

  • User Experience Distilled Jeff Patton Architect, Interaction Designer, & Agile User Experience Evangelist [email_address] www.AgileProductDesign.com
    • Five topics today:
    • User Experience
    • explained simply
    • and then:
    • Users
    • and modeling what you know about them
    • Usability
    • evaluating & testing it
    • Visual Design
    • guidelines to help visual design to communicate what you intend
    • Emotional Design
    • how do users feel about your software?
    • You can download the most current version of these slides at: http://www.agileproductdesign.com/presentations/
    • 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
  • 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 Relationship Between Goals, Tasks, & Tools is Critical Software Product Goals Tasks Tools Features 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 interaction context 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) 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
    Surface Skeleton Structure Scope Strategy
  • 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.
    activity manage email task task task task task task read message send message create folder delete message prioritize message place message in folder task task task task
  • 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
    • User Experience
    • User-Centered Design
    • Interaction Design
    • Information Architecture
    • Visual Design
    • Usability
    • 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.
  • 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.
  • 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.
  • 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.
  • 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 revenue reduce costs 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 user adoption purpose
  • 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 revenue reduce costs user adoption purpose
  • 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 revenue reduce costs 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? user adoption purpose
    • 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
  • 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
  • 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…
  • 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 Powell competitive 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 Down Your 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:
      • # of users that occupy this user type
      • General responsibilities
      • Computer skills
      • Domain expertise
      • Goals: how does this software tool help this user reach their goals?
      • Pain Points: what nagging problems can this software help solve?
      • Usage Contexts: where will this software be used?
      • Software Ecosystem: what other software tools does this user type rely on?
      • Collaborators: who does this user work with to help reach their goals?
      • Frequency of Use: how often is this type of user likely to use this software?
      • 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?
    • 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)
    • Visibility of system status (keep the user informed)
      • be forthcoming - don’t hide information, does the system know something the user doesn’t?
    • Match between system and real world (user language and real world conventions)
      • watch your language, does it match your users’ vocabulary?
    • 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?
    • Consistency and standards
      • same thing the same way, are elements of the UI that do the same thing presented consistently?
    • Error prevention
      • does the system take steps to stop unnecessary errors?
  • Nielsen’s 10 Usability Heuristics (2 of 2)
    • 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)
    • Flexibility and efficiency of use (customization and support for advanced users)
      • speed keys and buttons support quick access to frequently used tasks
    • Aesthetic and minimalist design (reduce irrelevant or rarely needed information)
      • Less is more, WYSIWYN: what you see is what you need
    • Help in recognizing, diagnosing, and recovering from errors
      • do errors explain what went wrong in the users’ language and give steps to recover?
    • 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
    • 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
  •  
    • 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
    • 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 Patton [email_address] www.AgileProductDesign.com 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)