Download - Iterative Design & Knowing Your Customers
Iterative Design & Knowing Your Customers
Professor James A. LandayUniversity of Washington
CSE 490L – Web Design, Prototyping, & ImplementationSpring 2008April 15, 2008
April 3, 2008 2
Hall of Fame or Shame?
CSE 490 L - Spring 2008
April 3, 2008 3
Hall of Shame
CSE 490 L - Spring 2008
Iterative Design & Knowing Your Customers
Professor James A. LandayUniversity of Washington
CSE 490L – Web Design, Prototyping, & ImplementationSpring 2008April 15, 2008
April 3, 2008 CSE 490 L - Spring 2008
Outline
• Review• Principles & Techniques for Knowing Your
Customers• Iterative Design• Designing with Measurable Goals in Mind• Task Analysis• Evaluating Your Web Site• Web Design Processes Overview• Using Patterns in Design Exploration Phase
5
April 3, 2008 6
Human Abilities Review
• Color can be helpful, but pay attention to ?
– how colors combine– limitations of human perception– people with color deficiency
• Model Human Processor (MHP) – 3 processors ?
– perceptual, motor, cognitive processors– model allows us to make predictions
• e.g., perceive distinct events in same cycle as one• MHP Memory ?
– three types: sensor, WM, & LTM– interference can make hard to access LTM– cues in WM can make it easier to access LTM
• Key time to remember: 100 msCSE 490 L - Spring 2008
April 3, 2008 CSE 490 L - Spring 2008
Principles for Knowing Your Customers
Design
Technology People
Tasks
Fitt’s Law -> largeACTION BUTTONS (K4)
Large % of modem users -> FAST-DOWNLOADING IMAGES (L2)
7
April 3, 2008 CSE 490 L - Spring 2008
Principles for Knowing Your Customers
Design
Organizational & Social Issues
Technology People
Tasks
8
April 3, 2008 CSE 490 L - Spring 2008
Techniques for Knowing Your Customers
• Task analysis– use experience & informal
interviews to answer basic questions on people, tasks, technology, & social issues
• Scenario building– stories rich in context focusing on
what people do, not how– create different scenarios for
each type of customer– often include photos or
storyboards to illustrate
9
April 3, 2008 CSE 490 L - Spring 2008
Techniques for Knowing Your Customers
• Observation & interviews– locate representative customers & find out what they do by
mainly observing as an apprentice (contextual inquiry)
• Affinity diagramming– organize information you discover -> site organization
Contextual Design, by Hugh Beyer & Karen Holtzblatt
10
April 3, 2008 CSE 490 L - Spring 2008
Techniques for Knowing Your Customers
• Card sorting– create site organization by seeing how people group items
• Surveys– add survey to existing site to get feedback from large numbers of
current customers– watch out for what people “say” vs. what they “do”
• Focus groups– 6-12 target customers brought together as a group– watch out for dominate personalities -> run several groups
• Analyzing existing sites– user study on your web site or a competitors– observe what works & what doesn’t & also survey
11
April 3, 2008 CSE 490 L - Spring 2008
Techniques for Knowing Your Customers
• Task analysis• Scenario building• Observation &
interviews• Affinity diagramming
• Card sorting• Surveys• Focus groups• Analyzing existing sites
Which have you found successful in practice?
12
April 3, 2008 CSE 490 L - Spring 2008
Designing with Measurable Goals in Mind
– faster task completion– successful completion of
more tasks– greater ease of learning– fewer errors– fewer abandoned
shopping carts
– greater satisfaction– more fun– increased visitor-to-
customer conversion– increased customer
repeat visits– increased revenue
• Goals come from analyzing your business & customer needs
• Measurable design goals let you test progress
• Key to achieving goals is testing & measuring
13
April 3, 2008 CSE 490 L - Spring 2008
Designing with Measurable Goals in MindExample
• Interested in task completion rate
• Server logs show customers who start to post messages have low completion rate
• Follow-on usability study confirms they are distracted in middle of posting process
• Good place to apply a PROCESS FUNNEL (H1)
14
April 3, 2008 CSE 490 L - Spring 2008 15
Task Analysis
• Find out– who customers are– what tasks they need to perform
• Observe existing work practices• Create scenarios of actual use
• This allows us to try out new ideas before building software!– get rid of problems early in the design process
April 3, 2008 CSE 490 L - Spring 2008 16
Why Task Analysis?
• System will fail if it– does not do what the customer needs– is inappropriate to the customer– “the system must match the customer’ tasks”
• Can’t we just define “good” interfaces?– “good” has to be taken in context of users
• might be acceptable for office work, not for play• infinite variety of tasks and customers
– guidelines are too vague to be generative• e.g.,“give adequate feedback”
April 3, 2008 CSE 490 L - Spring 2008 17
TaskAnalysis
Task Analysis Questions
• Who is going to use the system?• What tasks do they now perform?• What tasks are desired?• How are the tasks learned?• Where are the tasks performed?• What’s the relationship between customer &
data?
April 3, 2008 CSE 490 L - Spring 2008 18
Task Analysis Questions (cont.)
• What other tools does the customer have?• How do users communicate with each other?• How often are the tasks performed? • What are the time constraints on the tasks?• What happens when things go wrong?
April 3, 2008 CSE 490 L - Spring 2008 19
Who?
• Identity– in-house or specific customer is easy– need several typical users for broad product
• Background• Skills• Work habits and preferences• Physical characteristics
– height?
April 3, 2008 CSE 490 L - Spring 2008 20
Who (BART)?
• Identity?– people who ride BART
• business people, students, disabled, elderly, tourists
• Background?– may have an ATM or credit card– have used other fare machines before
• Skills?– may know how to put cards into ATM– know how to buy BART tickets
April 3, 2008 CSE 490 L - Spring 2008 21
Who (BART cont.)?
• Work habits and preferences?– use BART 5 days a week
• Physical characteristics?– varying heights don’t make it too high or
too low!
April 3, 2008 CSE 490 L - Spring 2008 22
Talk to Them
• Find some real customers• Talk to them
– find out what they do– how would your system fit in
• Are they too busy?– buy their time
• t-shirts, coffee mugs, etc.
– find substitutes• medical students in training
April 3, 2008 CSE 490 L - Spring 2008 23
What Tasks?
• Important for both automation andnew functionality
• Relative importance of tasks?• Observe customers, see it from their perspective
– on-line billing example• small dentists office had billing automated• assistants were unhappy with new system• old forms contained hand-written margin notes
– e.g., patient A’s insurance takes longer than most, etc.
April 3, 2008 CSE 490 L - Spring 2008 24
How are Tasks Learned?
• What does the customer need to know?• Do they need training?
– academic– general knowledge / skills– special instruction / training
April 3, 2008 CSE 490 L - Spring 2008 25
Where is the Task Performed?
• Office, laboratory, point of sale?
• Effects of environment on customers?
• Users under stress?• Confidentiality
required?
• Do they have wet, dirty, or slippery hands?
• Soft drinks?• Lighting?• Noise?
April 3, 2008 CSE 490 L - Spring 2008 26
What is the Relationship Between Customers & Data?
• Personal data – always accessed at same machine?– do users move between machines?
• Common data – used concurrently?– passed sequentially between customers?
• Remote access required?• Access to data restricted?
April 3, 2008 CSE 490 L - Spring 2008 27
What Other Tools Does the Customer Have?
• More than just compatibility• How customer works with collection of tools
– Ex. automating lab data collection• how is data collected now?• by what instruments and manual procedures?• how is the information analyzed?• are the results transcribed for records or publication?• what media/forms are used and how are they handled?
April 3, 2008 CSE 490 L - Spring 2008 28
How Do Customers Communicate with Each Other?
• Who communicates with whom?• About what?• Follow lines of the organization? Against it?• Example: assistant to manager
– installation of computers changes communication between them
– people would rather change their computer usage than their relationship [Hersh82]
April 3, 2008 CSE 490 L - Spring 2008 29
How Often Do Customers Perform the Tasks?
• Frequent customers remember more details• Infrequent customers may need more help
– even for simple operations– make these tasks possible to do
• Which function is performed – most frequently?– by which customers?– optimize system for these tasks will improve
perception of good performance
April 3, 2008 CSE 490 L - Spring 2008 30
What are the Time Constraints on the Task?
• What functions will customers be in a hurry for?
• Which can wait?• Is there a timing relationship between tasks?
April 3, 2008 CSE 490 L - Spring 2008 31
What Happens When Things Go Wrong?
• How do people deal with– task-related errors?– practical difficulties?– catastrophes?
• Is there a backup strategy?
April 3, 2008 CSE 490 L - Spring 2008 32
Involve Customers to Answer Task Analysis Questions
• Customers help designers learn – what is involved in their jobs– what tools they use– i.e., what they do
• Developers reveal technical capabilities– builds rapport & an idea of what is possible– customer’s can comment on whether ideas make
sense
• How do we do this?– observe & interview prospective users in work
place, home, or in the field!
April 3, 2008 CSE 490 L - Spring 2008 33
Selecting Tasks
• Real tasks customers have faced– collect any necessary materials
• Should provide reasonable coverage– compare check list of functions to tasks
• Mixture of simple & complex tasks– easy task (common or introductory)– moderate task– difficult task (infrequent or for power customers)
April 3, 2008 CSE 490 L - Spring 2008 34
What Should Tasks Look Like?
• Say what customer wants to do, but not how – allows comparing different design alternatives
• Be very specific – stories based on facts!– say who customers are (use personas or profiles)
• design can really differ depending on who• name names (allows getting more info later)• characteristics of customers (job, expertise, etc.)
– forces us to fill out description w/ relevant details• example: file browser story
• Some should describe a complete job– forces us to consider how features work together
• example: phone-in bank functions
April 3, 2008 CSE 490 L - Spring 2008 35
Using Tasks in Design
Manny is in the city at a club and would like to call his girlfriend, Sherry, to see when she will be arriving a the club. She called from a friends house while he was on BART, so he couldn’t answer the phone. He would like to check his missed calls and find the number so that he can call her back.
• Write up a description of tasks– formally or informally– run by customers and rest of the design team– get more information where needed
April 3, 2008 CSE 490 L - Spring 2008 36
Using Tasks in Design (cont.)
• Rough out an interface design– discard features that don’t support your tasks
• or add a real task that exercises that feature
– major screens & functions (not too detailed)– hand sketched
• Produce scenarios for each task– what customer has to do & what they would see– step-by-step performance of task– illustrate using storyboards
• sequences of sketches showing screens & transitions
April 3, 2008 CSE 490 L - Spring 2008 37
Scenarios (cont.)
• Scenarios are design specific, tasks aren’t
• Scenarios force us to – show how various features
will work together– settle design arguments by
seeing examples• only examples sometimes
need to look beyond
• Show users storyboards– get feedback
April 3, 2008 CSE 490 L - Spring 2008
Evaluating Your Web Site
• Expert reviews– heuristic evaluation w/ independent judges– cheap & easy to perform
• Informal evaluations– recruit 5-10 representative people & have them
perform tasks from your task analysis– can be on a paper UI or a running site– can run in person or online (remote)– look at the critical incidents in qualitative process data
rather than bottom-line data (time)
38
April 3, 2008 CSE 490 L - Spring 2008
Evaluating Your Web Site
• Expert reviews– heuristic evaluation w/ independent judges– cheap & easy to perform
• Informal evaluations
39
April 3, 2008 CSE 490 L - Spring 2008
Evaluating Your Web Site
• Formal usability studies– measure quantitative goals using running site
• online techniques help achieve statistical validity
– e.g., customers should be able to register & create an account in under 2 minutes
• How to choose an evaluation technique– use multiple techniques throughout– use cheap ones early & often
• What has worked well for you?40
April 3, 2008 CSE 490 L - Spring 2008
Web Design Processes Overview
• Discovery– assess needs
• Exploration– create multiple designs
• Refinement– detail chosen design
• Production– prepare for handoff
• Implementation– build site
• Launch• Maintenance
– measure & improve41
April 3, 2008 CSE 490 L - Spring 2008
Design ProcessExploration
42
April 3, 2008 CSE 490 L - Spring 2008
Goals of Exploration Phase
• Generate multiple designs– visualize solutions to discovered issues– information & navigation design– early graphic design
• Select one design for further development– use patterns, usability testing, & client feedback to
evaluate
43
April 3, 2008 CSE 490 L - Spring 2008
Patterns in Exploration Phase
Tend to be more abstract
Site genres
Navigational framework
Home page
Content management
Trust and credibility
Basic ecommerce
Advanced ecommerce
Completing tasks
Page layouts
Search
Page-level navigation
Speed
44
April 3, 2008 CSE 490 L - Spring 2008
Patterns in Exploration Phase
• Use Exploration-level patterns to design overall structure– different choices will give radically different
designs
• For example, how to organize information– HIERARCHICAL ORGANIZATION (B3)– TASK-BASED ORGANIZATION (B4)– ALHABETICAL ORGANIZATION (B5)– …
45
April 3, 2008 CSE 490 L - Spring 2008
Patterns in Exploration Phase
TASK-BASED ORGANIZATION (B4): Link the completion of one group of tasks to the beginning of the next related task(s)
46
April 3, 2008 CSE 490 L - Spring 2008
Design Exploration Example
• John given the task of designing a new subsite for showing maps to businesses– listings found by typing in address– key feature: show nearby businesses
• John comes up with two design sketches– Design #1 uses ALPHABETICAL ORGANIZATION (B5) for
list of all nearby businesses– Design #2 uses TASK-BASED ORGANIZATION (B4) for list
of related nearby businesses
47
April 3, 2008 CSE 490 L - Spring 2008
Design #1ALPHABETICAL ORGANIZAION (B5)
48
April 3, 2008 CSE 490 L - Spring 2008
Design #2TASK-BASED ORGANIZATION (B4)
49
April 3, 2008 CSE 490 L - Spring 2008
Evaluating Which Design to Choose
• Low-fidelity Usability Test– sketches the rest of the key screens on paper– brings in 5 participants to his office– asks each to carry out 3 tasks while John’s colleague Sam “plays
computer”– John observes how they perform
• Tasks1) look up 1645 Solano Ave., Berkeley CA2) look up 1700 California Ave, San Francisco CA & find Tadich Grill3) look up 2106 N 55th St, Seattle WA & find a Sushi restaurant
nearby
50
April 3, 2008 CSE 490 L - Spring 2008
Evaluating Which Design to Choose
• Results with Design #1 (Alphabetical)– Task 1: look up 1645 Solano Ave
• no difficulties encountered – warm-up task!
– Task 2: look up 1700 California & find Tadich Grill• several users didn’t notice that the list of nearby businesses
was scrollable (due to paper affordances?)• those that scrolled took awhile to find in list of over 500
– Task 3: look up 2106 55th St & find nearby Sushi restaurant• 3 users only picked restaurants that had “restaurant” in the
name & thus couldn’t find “Kisaku”
51
April 3, 2008 CSE 490 L - Spring 2008
Evaluating Which Design to Choose
• Results with Design #2 (Task-based)– Task 1: look up 1645 Solano Ave
• no difficulties encountered – warm-up task!
– Task 2: look up 1700 California & find Tadich Grill• 1 user took awhile to figure out that Tadich Grill was a
restaurant & to click on the “Restaurants” link• all others found it in 2 clicks (Restaurants->Tadich Grill)
– Task 3: look up 2106 55th St & find nearby Sushi restaurant• 3 found “Kisaku” in 2 clicks• 2 others asked for a listing of Japanese restaurants
52
April 3, 2008 CSE 490 L - Spring 2008
Evaluating Which Design to Choose
• General comments– 2 users said they often want to email maps to friends
who they will be meeting (task-based)– 3 users wanted driving directions (task-based)
→ TASK-BASED ORGANIZATION (B4) worked better, but still had some minor problems
53
April 3, 2008 CSE 490 L - Spring 2008
Teams
• Have you met yet?• First team assignment is due next Tuesday
– you will do a survey of potential users online, perform task analysis, and write up initial design ideas
– NOTE: I’m going to cut the contextual inquiry to make this more doable in the time you have. Get the new assignment online.
54
April 3, 2008 CSE 490 L - Spring 2008
Summary
• Key factors for web design are knowing ?– humans, tasks, technology, social/organization issues
• Techniques for knowing your customers– interviews, surveys, observation, task analysis, focus
groups, card sorting, analyzing existing sites
• Design with goals in mind. What are some typical goals for web design?– task completion %, task completion time, error rate,
use of back button, satisfaction, fun, conversion rate…
• Iterative design is the key to quality. Evaluate w/?
– Formal usability tests and expert reviews55