patton user story to user interface
TRANSCRIPT
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 1/71
Jeff Patton [email protected]
www.AgileProductDesign.com
Please join a work group of 4-6 people – thanks.
Collaboratively designing and testing user
interface that help your users succeed
Copyright is held by the author/owner(s).
OOPSLA 2007, October 21–25, 2007,
Montréal, Québec, Canada.
ACM 07/0010.
from UsetoUser
Interface
from UsetoUser
Interface
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 2/71
©Alistair Cockburn2005-6
PEOPLE Learn Skills in a 3-stage Progression:
Follow / Break Away / Achieve Fluency
Level 1:following(shu)
Learn “a technique that works”
(Success = following the technique)
Level 2:breakingaway(ha )
Learn limits of the techniqueLearn to shift between techniques
Level 3:fluent( ri )
Shift techniques at any moment
Possibly unable to describe the shifts
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 3/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 3
We’ll be using a process miniature to explore and practiceproduct design techniques
We’ll practice each technique in an abbreviated manner
You’ll get just enough time to feel what the technique is like to practice –
but not enough to practice it well
Practicing it well, takes… practice
Pay attention to what’s working and what’s troublesome for you
about the technique
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 4/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 4
Section 1: Starting With Use
13:30 – 15:00
User Experience Distilled Using Garrett’s Elements
Model
Exploring Use Elements of Use: User, Goal, Context Use Cases, Task Models, User Scenarios
The User Story
Identifying User Needs as Canonical Components
The Interaction Context & Component Placement
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 5/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 5
User Experience is Built From DependentLayers
Jesse James Garrett’s Elements of User Experience
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 6/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 6
The Surface Layer Describes Finished VisualDesign Aspects
Surface
Skeleton
Structure
Scope
Strategy
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 7/71© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 7
The Skeleton Describes Screen Layout andFunctional Compartments in the Screen
Surface
Skeleton
Structure
Scope
Strategy
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 8/71© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 8
Structure Defines Navigation from Place toPlace in the User Interface
task panes
modal dialogs
modal wizards
Surface
Skeleton
Structure
Scope
Strategy
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 9/71© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 9
The Places in the User Interface are Built toSupport User Tasks
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
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 10/71© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 10
Business Goals Drive User Constituencies andContexts 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
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 11/71© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 11
Garret’s Elements of Ux Stack Applies to the User Experienceof 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.
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 12/71© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 12
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
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 13/71© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 13
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
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 14/71© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 14
Arranging tasks by affinity allows me to think about contextsthat best support tasks. Contexts in a home have commonnames we all know.
Surface
Skeleton
Structure
Scope
Strategy
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 15/71© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 15
When designing a particular interaction context –a kitchen for instance – I optimize layout and tool choices tosupport tasks I’ll do there.
Surface
Skeleton
Structure
Scope
Strategy
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 16/71© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 16
I’m going to spend a lot of time here, I want my experience tobe as pleasant as possible…
Surface
Skeleton
Structure
Scope
Strategy
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 17/71© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 17
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 asworkpractice
Surface
Skeleton
Structure
Scope
Strategy
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 18/71© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 18
Garrett’s model provideshelpful guidance for tool builders
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
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 19/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 19
Today we’ll place our focus on tool-building: thestructure, skeleton, & surface
Surface
Skeleton
Structure
Scope
Strategy
User InterfacePrototyping Activities
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 20/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 20
Getting started with a UI design problem
Read the Barney’s Information Kiosk problem onpages 35-36
Begin thinking about: Business goals
Users and their goals
The types of user tasks users would likely choose to reach their goals
A kiosk tool that might support those tasks
(5 minutes)
As a workgroup discuss the users, goals, and
most likely tasks performed on the kiosk Try to talk about tasks without talking about the kiosk (tool) – this
can be difficult
(5 minutes)
Barney’s
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 21/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 21
To design a tool, we first need to understand use –the preceding layer
Elements of Use:
A Type of User Actor
User Role
User Profile
User Persona
User Goal If I as a user accomplish this goal, I’ll consider myself successful.
Look for goals that motivate the use of software
Context of Use Where and when will I be when I’m trying to accomplish this goal?
What other activities might I be engaged in when I attempt this goal?
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 22/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 22
Modeling Use
Various types of models are used to capture whatwe understand about users engaged in tasks in
pursuit of a goal. Workflow Model
Use Case User Task Model
User Scenario
User Story
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 23/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 23
activity
User Interface Designers Often Use “User Tasks” toDescribe What People Do
Tasks require intentional action on behalf of a tool’s user
Tasks have an objective that can be completed
Tasks decompose into smaller tasks
Activities are used to describe a broader goal, one that might use many
tasks, any may or may not ever be completed.
“Read an email message” is a task, “Managing email” is an activity.
task
task task task task
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 24/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 24
Use Cockburn’s goal level to understand theabstraction level of a user task
Start to think aboutuser interface
design at sea level
or above.
* from Cockburn’s Writing Effective Use Cases
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 25/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 25
A Agile User Story Might Model Use... It’s Easier toDesign User Interface if it Does
Originally eXtreme Programming described a user story as asmall amount of text written on an index card to function as areminder for a conversation between developer and customer.
From Wikipedia:“A user story is a software system requirement formulated as one or two sentences in the everyday
language of the user.”
The user story form credited to Rachel Davies in Cohn’s UserStories Applied combines user, task, and goal:
As a[type of user]
I want to[perform some task ]
so that I can[achieve some goal]
As aharried shopper
I want tolocate a specific CD in the store
so that I canpurchase it quickly, leave, and
continue with my day.
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 26/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 26
U s er
S t or y
User stories may describe user tasksor the tool that supports them
Software Product
Goals
Tasks
Tools
As aharried shopper
I want tolocate a specific
CD in the store
As aharried shopper
I want toenter a CD title
into the search
box and initiate
a search
More task-centric:
More tool-centric:
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 27/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 27
Favor user task-centric stories to base UIdesign on
Especially during early scoping and release planning project stages
Especially before prototyping and testing proposed user interfaces
Be prepared to split task-centric user stories as necessary to: defer expensive-to-implement user interactions for future release.
to break up large user interface construction into more manageable pieces.
Stories may become more tool-centric over time, and closer to
development time
Defer tool-centricity to the latest responsible moment
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 28/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 28
Constantine & Lockwood’s Essential Use Case or “TaskCase” is an easy way to begin to describe tool use
A use case focusing on the interaction between user and system
Avoid describing what the user specifically does by focusing on the user’s intention
Determine the system responsibilities based on user goals and expectations
User Intention System Responsibility
Step one
System response
Step two
System response
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 29/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 29
Activity: Write an Essential Use Case
Review the business problem from your handouts (4-5 minutes)
As a team, using supplies on the table, write an essential use case for:
User: Casual Browser
Task: Find most current release for a particular artist
As a casual browser
I want to find the most current release for a particular artist
so that I can get more information to make a buying decision.
(10 minutes)
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 30/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 30
Begin to envision a solution by writing a userscenario
A user scenario tells a story about a main character with aproblem or goal
The scenario describes how our character reaches their goal
using the proposed product
The scenario includes important facts, external context
important to use, and goals and concerns of our character
The scenario should include interesting plot points that help
us envision the more important aspects of the system
The scenario can gloss over uninteresting details
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 31/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 31
User scenario:Field Manager enters daily shift performance reports
Field Manager’s Scenario
The shift has just ended and his reps are coming up with their totals. They
have printed sheets with totals written on them. Steve quickly looks
them over and signs them off. His assistant manager brings him other
sheets with totals he’s signed off.
In between visits by reps, Steve opens his Field Manager Workbench on his
laptop. After logging in he sees today’s date and the planned number of
applications his reps should be gathering – 180 for today.
He also sees yesterday’s numbers, and last week’s numbers, and the last
30 days in graph that shows applications relative to approval rate. Last
week’s numbers were bad, and it’s the last week of the month, so Steve
knows he’s got to do well today.
Steve clicks “enter rep performance data.” He shuffles his reps
performance sheets and grabs the first one.
5. The date is defaulted to today, and the shift is defaulted to‘morning’ since he hasn’t yet entered info for today. Steve
begins to enter the reps name, but after a few characters thesystem auto-completes his name.
6. The rep’s ID is already filled in, along with the code for thecredit card promotion they’re working on today.
7. Steve fills in the shift information for his rep. He then enters thetotal number of applications taken.
8. It looks like from the notes on this sheet that this rep left sicktwo hours early. Steve adds a note about this in the system.
9. Time passes as more reps bring in their sheets and Stevecompletes entering them in between conversations.
10. After all the sheets are done, Steve looks at a summary screenfor the day. It looks like he’s close to his goal. If the next shiftcontinues at this rate he’ll beat the plan by 5% or so. That’sgood.
11. Steve validates that the base pay is correct at $5 per app, andthat he’s set an individual bonus giving reps $50 each if theyreach 20 apps. Next to each rep he sees the calculated pay,base, bonus, and total pay for the day.
12. The annual sale at Macy’s has brought a lot of people in today.Steve chooses a “sale increases mall foot traffic” code to add tohis shift data sheet. Frank, his boss, has pestered him to make
sure he includes this type of information in his daily summaries.
Steven
• Credit Card Marketing Field
Manager
• Steven is a field manager
working at the local shopping
center. He’s in the middle of a
long workday supervising 13
reps who are busy talking to
people trying to convince them
to apply for a credit card.
i k kfl d l i
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 32/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 32
Leveraging your task workflow model, writea user scenario for your focal user
Begin to think of a kiosk that will make the life of your focal user better
Tell a story of typical use
Include interesting plot points
Include goals and pains of your user
Describe how the system helps the user overcome
problems or achieve goals
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 33/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 33
Identifying UI tools that allow the system to meet itsresponsibilities to its user as abstract UI components
For each system responsibility, what sort of tool will the systemneed to offer to meet that responsibility to the user?
Preliminarily decide on tools as abstract components. An abstract component (describe by Larry Constantine) refers to a general type of
component with a certain responsibility
Container: contains and presents information.
Action: allows execution of an action.
Actionable Container: contains and presents information and allows the information to be acted on through selection or manipulation.
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 34/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 34
Exercise: Identify the abstract components in youressential use case
Using post-it notes, identify abstract components to support your essential use case, and the
essential use case in your handouts.
Give each component a descriptive name that suggests its responsibility.
(10 minutes)
Selectable List
I t ti C t t G th
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 35/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 35
Interaction Contexts Gather Tools to Support Tasks
An Interaction Context is an abstract “place” in your software that supports a number of tasks.
When the goal of a user changes, it’s grounds for an interaction context change.
For our design problem possible contexts might be:
Starting Point: give the user a clear starting point for
starting a search for titles in the store.
Search Return: Evaluation: help the user decide if the
searched for items were the items she was looking for or an
easy way to reinitiate the search if not. Also aid in the quick
decision to buy any successfully found item.
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 36/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 36
Exercise: Build Up Interaction Contexts
As a group decide on and name your interaction contexts.
Use a name that suggests the type of tasks the context
supports.
For each interaction context set aside a sheet of paper orcard stock.
Relocate your post-it note abstract components to each
context. If components belong in more than one context,
write more post-it notes.
(10 minutes)
From Use
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 37/71
From Use to User
Interface
Jeff Patton
www.AgileProductDesig
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 38/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 38
Section 2: Designing &Validating For Use
15:30 – 17:00
Building a Paper UI Prototype
Testing the Paper Prototype
Usability vs. Visual Design
Williams’ Simple Visual Design Heuristics
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 39/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 39
Paper Prototyping Basics
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)
Team approach Someone direct traffic Various people build components
Someone assemble the user interface from the components Someone continuously review what’s being assembled against your use
case – will it work?
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 40/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 40
Paper Prototyping Kit Demonstration
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 41/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 41
Finished prototypes are pieced together frommoveable and removable paper components
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 42/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 42
Exercise: Build Your Prototype
As a team within the short time-box, build your prototype tosupport the two user stories:
As a casual browserI want to find the most current release for a particular
artist-and- As an impatient buyerI want to find the location of a specific CD quickly
Suggestions: One or more people build components
One or more assemble the prototype using the components
Someone use the task cases to validate the UI supports these user stories
(15 minutes)
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 43/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 43
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
sports caster
scientist
Decide on test approach – single or paired subjects
Setup your testing facility
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 44/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 44
Run Your Usability Test
Facilitator introduces the team.
Facilitator introduces tasks to perform andgoals, then invites test participants to “thinkout loud” and begin.
Facilitator plays sports-caster; keeps subjecttalking, narrating when necessary.
Observers record data – use post-it notes tomake downstream analysis move faster.
When the test is complete observers mayask test participants questions.
Thank test participants.
Consolidate data. How many issues did you detect? Consider issues
as items you’d change.
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 45/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 45
Testing In Action
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 46/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 46
Exercise: Test Your Paper Prototype
(10 minutes)
casual browser, find the most current release for a particular artist
-and-
impatient buyer, find the location of a specific CD quickly
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 movefaster.
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.
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 47/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 47
Exercise: Fix Issues
As a team decide on which of the issues youdiscovered to fix.
Adjust your prototype to prepare for you next test.
(10 minutes)
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 48/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 48
Exercise: Re-test Your Prototype
(10 minutes)
casual browser, find the most current release for a particular artist
-and-
impatient buyer, find the location of a specific CD quickly
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 movefaster.
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.
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 49/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 49
This isn’t just the right way to test, it’s RITE
Traditional usability testing focuses on: Identifying repeatable user misteps errors
UI concerns that may make the software difficult to learn, orlearned behavior hard to maintain
Reporting those errors back along with suggestions forcorrecting problems
The RITE method: Rapid Iterative Testing andEvaluation
First documented by Microsoft (Medlock, Wixon, Terrano,Romero, and Fulton)
Rather than focusing on number of errors identified, emphasizenumber of errors fixed
Required the capability to correct errors between iterative tests
For higher-fidelity prototypes or working code, this requiresdeveloper participation
Unraveling Usability Concerns From Visual
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 50/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 50
Unraveling Usability Concerns From VisualDesign Concerns
Usability is a measured characteristic of your software.
Typical usability tests measure: Task completion frequency
Task completion time
Errors or mis-steps
Professionals [and novices] can give their subjective evaluation onusability, but you can’t really be sure until you test [or ship].
Paper Prototype usability testing helps identify usability issues before the
software is built.
Visual design adds look and feel that may affect usability.
Don’t assume those skilled at visual design are also skilled at usability.
Layer in user interface concerns – like a
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 51/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 51
Layer in user interface concerns – like alayer cake
Start with usefulness: Utility first
Usability second
Follow on with designesthetics
Defer user stories about
design esthetics until
after the software is
useful
utility(does the software offer functionality to
support my goals?)
usability(can that functionality easily learned, and
effectively used?)
design esthetics(is the software fun, pleasant, exciting –
what is my emotional response?)
usefulness
Test First – Building Confidence into Software
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 52/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 52
Test First – Building Confidence into SoftwareDevelopment
Agile development’s test-first technique doesn’t justapply to code.
Use paper prototyping and usability testing to
validate that your user interface requirements areaccurate and the software you intend to build can be
effectively used.
Iteration and testing of user interface using low-
fidelity prototyping is faster than working code.
Iterate to learn in the fastest medium available
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 53/71
William’s 4 Basic Design Principles
Visual Design Basics
Robin Williams’ The Non-Designer’s Design Book
Good Visual Design
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 54/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 54
Good Visual DesignObserves 4 Simple Principles
Learn the principles
Recognize when you are and aren’t using them
Apply them to help users achieve their goals
CR
A
P
ContrastRepetition
Alignment
Proximity
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 55/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 55
Proximity
Proximity communicates affinity – distance communicates lack of affinity.
Group related items together.
“Clumps” of items can feel like one item.
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 56/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 56
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
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 57/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 57
Repetition
Repeated elements blend in.
Repeat some aspects of the design throughout the entire application.
Repetition can be thought of as consistency. Appropriate repetition makes the
application appear cohesive.
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.
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 58/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 58
Contrast
Contrast communicates importance.
Use contrast to focus the users 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.
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 59/71
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 60/71
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 61/71
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 62/71
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 63/71
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 64/71
From Use to User
Interface Jeff Patton
www.AgileProductDesign.com
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 65/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 65
User Experience Words
User Centered Design refers to a class of methodologies where design decisions are
based on some tangible user model. That user model must bebased 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 Designersare generally User Centered Designers.
Visual Design refers to the design of the visual appearance of software,advertising, or other commercial products. Visual Design focusesa bit more on esthetics. Visual Designers are often NOT UserCentered Designers.
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 66/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 66
User Experience Words
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 testsubjects that reflect 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 tocomplete 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 makingrecommendations for improvement. Usability Engineers are generallyUser Centered, but they may not be Designers.
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 67/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 67
User Experience Words
Information Architecture refers to the structuring of information so that it best supports the
consumption by its target users. An IA professional is oftenconsidered a counterpart to an Interaction Designer where InteractionDesigners 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 bea researcher, a designer, a psychologist, or anyone who might focus
on human-computer interaction as part of their work or study.
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 68/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 68
User Experience Words
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 startswith the advertising and presenting of the brand through thepurchase to the use and the day-to-day feeling the user carrieswith 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 allaspects of user experience.
We are all directly or indirectly User Experience Practitioners…how professional we are at it may be up for discussion.
Usability Refers To The Ability of a User To
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 69/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 69
Usability Refers To The Ability of a User ToEffectively Execute A Task Using a Tool
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
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 70/71
© 2006-2007 Jeff Patton, All rights reserved, www.agileproductdesign.com 70
Nielsen’s 10 Usability Heuristics
Visibility of system status (keep the user informed)
Be forthcoming - don’t hide information
Match between system and real world (user language and real world conventions) Watch your language
User control and freedom (easy exits, undo and redo) padded corners, hand rails, and safety nets
Consistency and standards same thing the same way
Error prevention
Recognition rather than recall (reduce remembering with visible options, actions,and instructions)
Flexibility and efficiency of use (customization and support for advanced users)
Aesthetic and minimalist design (reduce irrelevant or rarely needed information)
Help in recognizing, diagnosing, and recovering from errors
Good help and documentation
Jakob Nielsen’s Usability Engineering
8/8/2019 Patton User Story to User Interface
http://slidepdf.com/reader/full/patton-user-story-to-user-interface 71/71
From Use to User
Interface Jeff Patton
www.AgileProductDesign.com