Introduction: Process of Designing User Interfaces

1. Introduction: Process of Designing User Interfaces James A. Larson, PhD Larson Technical Services

2. Headline Medical Usability: How to Kill Patients through Bad Design [1] Nielsen, Jacob “Alertbox”, April 11, 2005, http://www.useit.com/alertbox/20050411.html [2] Koppel, R.; Metlay, J.P., Cohen, A..; Abaluck, B.; Localio, A.R.; Kimmel, S.E.; and Strom, B.L. “Role of Computerized Physician Order Entry Systems in Facilitating Medication Errors,” Journal of the American Medical Association. Vol. 293, No. 10 (2005)

3. User errors • Poor readability • Font difficult to read • Misleading default values • Dosage vs medication units • Memory overload • Multiple screens to see all of patient’s medications • Data description errors • “tomorrow”

4. System Lifecycle(Involve Users at Each Stage) 1. Identify Problem Shadowing 5. Deploy 2. Establish Requirements Users Usage scenarios Content model Control model Draft Layout Monitoring Focus Groups Wizard of Oz Experiments Controlled Testing 4. Quality Assurance and User Acceptance 3. Evaluate And Refine Prototypes

5. “Shadow” Perspective Users • Sometimes called “Ethnography study” • Goal: Identify new applications that will be useful to users • Record everything a perspective user does for several hours • Alternative: video tape perspective user • Analyze user activities to determine how automation can help user • Make it easier for user to perform an existing task • Enable user to perform a new task not previously possible

6. Ethnography • Qualitative and quantitative written descriptions of human social phenomena • Based on fieldwork. • Results of a holistic research method founded on the idea that a system's properties cannot necessarily be accurately understood independently of each other. • Based in social anthropology

7. Principles of Ethnography • Natural Setting • Holistic • Descriptive • Subjects point of view

8. Ethical Issues • Protect the interests of those who have agreed to participate • Change names • Don’t show pictures/video tapes without permission • HIPAA (Health Insurance Portability and Accountability Act of 1996) legislation for data privacy and security provisions of medical information

9. Select Appropriate Methodologies • Shadowing • Beeper study • Videotaping • Interviewing • Self-reporting—diaries, “throw-away camera”, web-cam • Artifact analysis • Record keeping

10. Ethnography: representation • Represent what you see/learn • Used for analysis • Share results with others

11. Activity log • 3:30 Patient arrived at clinic • 3:31 Checked in with receptionists; showed insurance card • 3:32 reads old National Geographic magazine • 3:48 admitted to examining room • 3:49 blood pressure, pulse, temperature taken • 3:51 asked what prescriptions taken • …

12. Artifacts • Copies of forms—both paper and electronics • Pictures of work aids

13. Organization charts

14. Floor plans

17. Analyze Data: Identify • Typical patterns of human behavior and experience • Categories and groupings • Levels of abstraction • E.g., basic actions to major activities • Frequencies of task performance, task criticality • Frameworks • E.g., matrix of activities vs stages • Tasks that can be automated

18. Analyze data • What can be done to automate existing tasks? • Frequently performed tasks • Critical tasks • What new tasks can automation enable?

19. Brainstorm • Group of people identify possible solutions • Growing phase • Suggest solutions • Free flow of ideas • No criticism or negative comment • Shrinking phase • Remove unrealistic ideas • Prioritize

20. List candidate applications

21. System Lifecycle 1. Identify Problem Shadowing 5. Deploy 2. Establish Requirements Users Usage scenarios Content model Control model Draft Layout Monitoring Focus Groups Wizard of Oz Experiments Controlled Testing 4. Quality Assurance and User Acceptance 3. Evaluate And Refine Prototypes

22. Scenarios • Written or “cartoon” descriptions of what the user can do with the application

23. Story Board • Goal: describe “usage model”—how a new application will be used

24. Written Scenarios • There is a scenario for each task (or set of tasks) the user can perform with the proposed application • Scenario 1: User logs on, selects a date, enters appointment info, and saves the data, logs off • Scenario 2: User logs on, views, logs off. appointments, locates appointment of interest • Scenario 3: User logs on, selects a day or week, prints all appointments on the day or week selected, logs off. Write two scenarios for your chosen application

25. Example Scenarios • User orders a small pizza with cheese and ham • User orders a large pizza with cheese, ham and peppers • User tries to order a small pizza with heese, ham, and pineapple but pineapple is not availabale • User orders a small pizza with just cheese, then cancels the order

26. UI = Content model + Control model + User interface widgets • Content model: describes the objects, their relationships, constraints • Consistent across all devices • Control model: describes the set of operations which users may perform on the object in the content model • Consistent across all devices • User interface widgets: the collection of widgets, and interaction objects used by the user to specify operations on objects • Varies from device to device

27. Content Model • “Nouns”—The names of application objects and their relationships • Application objects are often stored in a database • Many users use an entity-relationship diagrams to represent objects and their relationships Patient conta ct data Medical history Write content model for your chosen application

28. Example Content Model Order Pizza Topping

29. Control Model • “Verbs”—How the user may manipulate application objects and relationships • Commands and requests which the user may request Patient contact data Update, save Medical history Create, update, save Write control model for your chosen application

30. Example Control Model Order Submit Cancel Pizza Size (small, large) Topping Topping (cheese, ham, peppers)

31. User interface widgets • Used by the user to enter commands to objects • May vary in appearance from device to device

32. UI design is more than just layout • UI design involves • Design of content and control model • Choice of widgets • How the user interacts with the application • How the user “experiences” the application • How the user navigates among widgets • UI designers are now calling themselves “Experience designers”

33. GUI design • Specify widgets, layout, and navigation Sketch an example set of widgets and layout for the pizza app

34. Example Widgets and Layout

35. Prototype “Pages”

36. Example Prototyping Tools • wireframeSketcher • View https://www.youtube.com/watch?v=uynGrvrBFEI • download for free for 14 days http://wireframesketcher.com/ • Andriod SDK contains user interface builder tutorial • View https://www.youtube.com/watch?v=cOYzJN6A-JM • Balsamiq tutorial • View https://www.youtube.com/watch?v=MxWTGBQE7zE • download and use for free for 30 days https://balsamiq.com/download/

37. System Lifecycle 1. Identify Problem Shadowing 5. Deploy 2. Establish Requirements Users Usage scenarios Content model Control model Draft Layout Monitoring Focus Groups Wizard of Oz Experiments Controlled Testing 4. Quality Assurance and User Acceptance 3. Evaluate And Refine Prototypes

38. Wizard of Oz Testing • Term comes from the “Wizard of Oz” story in which an ordinary man hides behind a curtain pretending to a powerful Wizard

39. Focus Group • Several perspective users review several prototypes • Express opinions about each prototype

40. System Lifecycle 1. Identify Problem Shadowing 5. Deploy 2. Establish Requirements Users Usage scenarios Content model Control model Draft Layout Monitoring Focus Groups Wizard of Oz Experiments Controlled Testing 4. Quality Assurance and User Acceptance 3. Evaluate And Refine Prototypes

41. Why Write a Usability Test Script? • Subject tests app by him/her self • Subject can do usability test anywhere • Designers should not be in the same room as subjects • All subjects do the same test

42. Usability Test Script • Orientation • Introduce yourself • Offer refreshments • Explain why subjects are here • To test a new application • Stress that the subject is not being tested • Describe the equipment the subject will use • Explain that session is being recorded • Nondisclosure form • Lists of tasks to perform. For each task: • Provide data user needs to perform the task • Do not explain what commands to widgets the user should use. • Written debriefing questionnaire

43. In class exercise • Write Test Instruction Script for your application

44. Example Test Script • See http://www.larson-tech.com/CS560/ Example Lab page v2

45. Data Collection Log file Recordings Users Report Generation Survey Interview Preference Reports Performance Reports Measures likes and dislikes Measures what the user Actually accomplishes

46. 5. Monitor the test • Provide the user with the task goal and the information needed to perform the task • Enable rather than lead the subject • Real users will need use the UI to perform tasks without hints from the designer • Let the subject struggle • It should be obvious to the user how to perform each task. • “Help” should be embedded into the user interface • Real users will not be able to ask designers questions.

47. 6. Evaluation measures • Performance • Data collected during the test • Preference • Opinions collected during debreafing

48. Two Types of Usability Tests Did the application stop unexpectantly? Is the application enjoyable? Performance Preference Measure users’ likes and dislikes How long does it take to perform each task? Validate that users enjoyed the application and will uses it again Can the user perform all tasks?

49. User Task Measure Typical Criteria The user starts an application User successfully selects and launches an application 10 sec. The user submits a query The user correctly formulates and submits a query 15 sec The user navigates a list. The caller successfully selects the specified option. 8 sec. The user completes a transaction. The caller successfully completes the purchase option. 23 sec. Performance Data(Measured During Usability Test)

50. Caller Task Measure Typical Criteria Locate “Modern Girl” by Sleater-Kinney Complete successfully Less than 40 seconds Purchase “Modern Girl” Complete successfully Less than 2 minutes Performance Tasks Write performance metrics the example pizza app