1. Iterative Design & Knowing Your Customers Professor James A. Landay University of Washington CSE 490L – Web Design, Prototyping, & Implementation Spring 2008 April 15, 2008

2. April 3, 20082 Hall of Fame or Shame? CSE 490 L - Spring 2008

3. April 3, 20083 Hall of Shame CSE 490 L - Spring 2008

4. Iterative Design & Knowing Your Customers Professor James A. Landay University of Washington CSE 490L – Web Design, Prototyping, & Implementation Spring 2008 April 15, 2008

5. April 3, 2008CSE 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

6. April 3, 20086 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 ms CSE 490 L - Spring 2008

7. April 3, 2008CSE 490 L - Spring 2008 Principles for Knowing Your Customers Design Technology People Tasks Fitt’s Law -> large ACTION BUTTONS (K4) Large % of modem users -> FAST-DOWNLOADING IMAGES (L2) 7

8. April 3, 2008CSE 490 L - Spring 2008 Principles for Knowing Your Customers Design Organizational & Social Issues Technology People Tasks 8

9. April 3, 2008CSE 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

10. April 3, 2008CSE 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

11. April 3, 2008CSE 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

12. April 3, 2008CSE 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

13. April 3, 2008CSE 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

14. April 3, 2008CSE 490 L - Spring 2008 Designing with Measurable Goals in Mind Example 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

15. April 3, 2008CSE 490 L - Spring 200815 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

16. April 3, 2008CSE 490 L - Spring 200816 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”

17. April 3, 2008CSE 490 L - Spring 200817 Task Analysis 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?

18. April 3, 2008CSE 490 L - Spring 200818 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?

19. April 3, 2008CSE 490 L - Spring 200819 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?

20. April 3, 2008CSE 490 L - Spring 200820 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

21. April 3, 2008CSE 490 L - Spring 200821 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!

22. April 3, 2008CSE 490 L - Spring 200822 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

23. April 3, 2008CSE 490 L - Spring 200823 What Tasks? Important for both automation and new 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.

24. April 3, 2008CSE 490 L - Spring 200824 How are Tasks Learned? What does the customer need to know? Do they need training? –academic –general knowledge / skills –special instruction / training

25. April 3, 2008CSE 490 L - Spring 200825 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?

26. April 3, 2008CSE 490 L - Spring 200826 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?

27. April 3, 2008CSE 490 L - Spring 200827 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?

28. April 3, 2008CSE 490 L - Spring 200828 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]

29. April 3, 2008CSE 490 L - Spring 200829 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

30. April 3, 2008CSE 490 L - Spring 200830 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?

31. April 3, 2008CSE 490 L - Spring 200831 What Happens When Things Go Wrong? How do people deal with –task-related errors? –practical difficulties? –catastrophes? Is there a backup strategy?

32. April 3, 2008CSE 490 L - Spring 200832 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!

33. April 3, 2008CSE 490 L - Spring 200833 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)

34. April 3, 2008CSE 490 L - Spring 200834 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

35. April 3, 2008CSE 490 L - Spring 200835 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

36. April 3, 2008CSE 490 L - Spring 200836 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

37. April 3, 2008CSE 490 L - Spring 200837 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

38. April 3, 2008CSE 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

39. April 3, 2008CSE 490 L - Spring 2008 Evaluating Your Web Site Expert reviews –heuristic evaluation w/ independent judges –cheap & easy to perform Informal evaluations 39

40. April 3, 2008CSE 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

41. April 3, 2008CSE 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 & improve 41

42. April 3, 2008CSE 490 L - Spring 2008 Design Process Exploration 42

43. April 3, 2008CSE 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

44. April 3, 2008CSE 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

45. April 3, 2008CSE 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

46. April 3, 2008CSE 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

47. April 3, 2008CSE 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

48. April 3, 2008CSE 490 L - Spring 2008 Design #1 ALPHABETICAL ORGANIZAION (B5) 48

49. April 3, 2008CSE 490 L - Spring 2008 Design #2 TASK-BASED ORGANIZATION (B4) 49

50. April 3, 2008CSE 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 Tasks 1) look up 1645 Solano Ave., Berkeley CA 2) look up 1700 California Ave, San Francisco CA & find Tadich Grill 3) look up 2106 N 55th St, Seattle WA & find a Sushi restaurant nearby 50

51. April 3, 2008CSE 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

52. April 3, 2008CSE 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

53. April 3, 2008CSE 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

54. April 3, 2008CSE 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

55. April 3, 2008CSE 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 reviews 55