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


Principles for Knowing Your Customers

Design

Technology People

Tasks

Fitt’s Law -> largeACTION BUTTONS (K4)

Large % of modem users -> FAST-DOWNLOADING IMAGES (L2)

7


Principles for Knowing Your Customers

Design

Organizational & Social Issues

Technology People

Tasks

8


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



• 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



• 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



• Task analysis• Scenario building• Observation &

interviews• Affinity diagramming

• Card sorting• Surveys• Focus groups• Analyzing existing sites

Which have you found successful in practice?

12


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


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


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”


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?


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?


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?


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


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!


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


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.


How are Tasks Learned?

• What does the customer need to know?• Do they need training?

– academic– general knowledge / skills– special instruction / training


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?


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?


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?


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]


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


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?


What Happens When Things Go Wrong?

• How do people deal with– task-related errors?– practical difficulties?– catastrophes?

• Is there a backup strategy?


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!


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)


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


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


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


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


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



• Expert reviews– heuristic evaluation w/ independent judges– cheap & easy to perform

• Informal evaluations

39



• 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


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


Design ProcessExploration

42


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


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



• 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



TASK-BASED ORGANIZATION (B4): Link the completion of one group of tasks to the beginning of the next related task(s)

46


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


Design #1ALPHABETICAL ORGANIZAION (B5)

48


Design #2TASK-BASED ORGANIZATION (B4)

49


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



• 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



• 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



• 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


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


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

iterative design & knowing your customers

Documents

design exploration phase

measurable goals

customersprofessor james

target customers

human abilities reviewcolor

itemssurveysadd survey

hall of fame

hall of shamecse