2. Utah School of Computing Preliminaries I CS5540 HCI Rich Riesenfeld Fall 2010 Lecture Set 1

3. Student Name Server Utah School of Computing slide 2 Fall 2010 What is the HCI Issue? Is the interface the concern?Is the interface the concern? Is the issue a matter of accomplishing work, some set of tasks?Is the issue a matter of accomplishing work, some set of tasks? Are we focusing on wrong thing?Are we focusing on wrong thing? Do we often discuss telephone interfaces?Do we often discuss telephone interfaces?

4. Student Name Server Utah School of Computing slide 3 Fall 2010 What is the HCI Issue? Is the interface the concern?Is the interface the concern? Is the issue a matter of accomplishing work, some set of tasks?Is the issue a matter of accomplishing work, some set of tasks? Are we focusing on wrong thing?Are we focusing on wrong thing? Do we often discuss telephone interfaces?Do we often discuss telephone interfaces?

5. Student Name Server Utah School of Computing slide 4 Fall 2010 Is Discussion about Interface? - 2 Do we often discuss telephone interfaces?Do we often discuss telephone interfaces? Does dancer look at his/her feet?Does dancer look at his/her feet? Does guitar player look at string?Does guitar player look at string? Does driver look at pedals?Does driver look at pedals? Does …?Does …?

6. Student Name Server Utah School of Computing slide 5 Fall 2010 Doing Work View Need to understand the user and human behaviorNeed to understand the user and human behavior How does an architect approach a custom home design for a new client?How does an architect approach a custom home design for a new client?

7. Student Name Server Utah School of Computing slide 6 Ex: Architectures Bubble Diagram Ex: Architectures Bubble Diagram - 1 - 1- 1 - 1 _____________ Succeeding Bubble Diagram section based on Flickr post.., (Aug 2009) by Harrison Architects Tool architects use during early designTool architects use during early design Assists in capturing living dynamics & flowAssists in capturing living dynamics & flow Helps to drive suitable layoutHelps to drive suitable layout Fall 2010

8. Student Name Server Utah School of Computing slide 7 Ex: Architectures Bubble Diagram Ex: Architectures Bubble Diagram - 2 - 2- 2 - 2 Quick way of diagramming basic relationships among roomsQuick way of diagramming basic relationships among rooms Exposes functions in buildingExposes functions in building Heavier lines imply stronger connectionsHeavier lines imply stronger connections Need not translate directly to a floor planNeed not translate directly to a floor plan -Helps clarify where rooms ought to be Fall 2010

9. Student Name Server Utah School of Computing slide 8 Ex: Architectures Bubble Diagram Ex: Architectures Bubble Diagram - 3 - 3- 3 - 3 Legend:Legend: Dining Room (DR)Dining Room (DR) Kitchen (K)Kitchen (K) Mud Room/Laundry (MR)Mud Room/Laundry (MR) Living (LR)Living (LR) Great Room (GR)Great Room (GR) Study Nook (S)Study Nook (S) Away Room (AR)Away Room (AR) Toilet (WC)Toilet (WC) Bathing Rooms (BR)Bathing Rooms (BR) Fall 2010

10. Student Name Server Utah School of Computing slide 9 Ex: Architectures Bubble Diagram Ex: Architectures Bubble Diagram - 4 - 4- 4 - 4 Next is 1 st bubble diag of main floor (More) Affordable Green Home: S connected to LRS connected to LR AR connected to LRAR connected to LR -not connected as directly -AR intended to be away Fall 2010

11. Student Name Server Utah School of Computing slide 10 Ex: Architectures Bubble Diagram Ex: Architectures Bubble Diagram - 5 - 5- 5 - 5 Next is 1 st bubble diagram of main floor (More) Affordable Green Home: WC & BR need to be near MR & ARWC & BR need to be near MR & AR -not connected as directly – -intended to be away -AR will function as an occasional BR Fall 2010

12. Student Name Server Utah School of Computing slide 11 Ex: Architectures Bubble Diagram Ex: Architectures Bubble Diagram - 6 - 6- 6 - 6 1 st Diagram capturing flows Fall 2010

13. Student Name Server Utah School of Computing slide 12 Ex: Architectures Bubble Diagram Ex: Architectures Bubble Diagram - 7 - 7- 7 - 7 2 nd Diagram rearranges blobs into a vague shape Fall 2010

14. Student Name Server Utah School of Computing slide 13 Ex: Architectures Bubble Diagram Ex: Architectures Bubble Diagram - 8 - 8- 8 - 8 3 rd Diagram attempts metric space allocation; looks at effects of arrangement on quality Fall 2010

15. Student Name Server Utah School of Computing slide 14 Ex: Architectures Bubble Diagram Ex: Architectures Bubble Diagram - 9 - 9- 9 - 9 4 rd Diagram further tries to resolve conflicts bet building and owner lot. Some dimensions do not work Fall 2010

16. Student Name Server Utah School of Computing slide 15 Ex: Architectures Bubble Diagram Ex: Architectures Bubble Diagram - 10 5 th Diagram involves a whack at second floor Fall 2010

17. Student Name Server Utah School of Computing slide 16 Ex: Architectures Bubble Diagram Ex: Architectures Bubble Diagram - 11 6 th Diagram becomes increasing realistic; Many calculations to establich feasibility, satisfaction of constraints, determine what specs to relax Fall 2010

18. Student Name Server Utah School of Computing slide 17 Assignment Fall 2010 General Task: In teams of two, create a sequence of progressively refined bubble diagrams with text description explaining what is being illustrated. Final diagram should reveal the final floorplan as it actually exists. Although accurate scaling is not necessary, a representative scale should be applied to the final floor plan.

19. Student Name Server Utah School of Computing slide 18 Assignment Fall 2010 Requirements: Interview someone intimately familiar with and a representative for a space that hosts significant activity and traffic for several individuals who use the space.

20. Student Name Server Utah School of Computing slide 19 Assignment Fall 2010 Treat this exercise as an inquiry about lifestyle and flow requirements. Then create a sequence of bubble diagrams, perhaps with an interveening interview to enhance your grasp of how the space is used.

21. Student Name Server Utah School of Computing slide 20 Assignment Fall 2010 Finally, compare your sense of optimal layout specification with what is actually in existence and use. Compare your analysis versus the existing instance. Which comes closer to serving the true needs, your analysis or the existing space. Incorporate any constraints that inhibited the original design.

22. Student Name Server Utah School of Computing slide 21 Fall 2010

23. Student Name Server Utah School of Computing slide 22 Fall 2010 Effective to useEffective to use Interesting, pleasing, attractive, invitingInteresting, pleasing, attractive, inviting Intuitive à la Alan Kays childrenIntuitive à la Alan Kays children Organized, hierarchically structured, cleanOrganized, hierarchically structured, clean What good interface principles - 1 do we already know ?

24. Student Name Server Utah School of Computing slide 23 Fall 2010 Help functions, Search, etcHelp functions, Search, etc Consistent form (aka design integrity)Consistent form (aka design integrity) Automatic assistanceAutomatic assistance -Completions -Spelling What good interface principles - 2 do we already know?

25. Student Name Server Utah School of Computing slide 24 Fall 2010 Lead the userLead the user -Prompts -Indicate nature of any problem No indication No indication Vague, misleading indication Vague, misleading indication Wrong indication (Latex) Wrong indication (Latex) -Specific communication Navigational aids: navi syss often hugeNavigational aids: navi syss often huge What good interface principles - 3 do we already know?

26. Student Name Server Utah School of Computing slide 25 Fall 2010 Meaningful error msgsMeaningful error msgs -Dont send you elsewhere -Give useful data -Area of inadequate traditions Multiple paths to a functionMultiple paths to a function Keep it simpleKeep it simple What good interface principles - 4 do we already know?

27. Student Name Server Utah School of Computing slide 26 Fall 2010 Gain users trustGain users trust Bottom up is probably most comfortableBottom up is probably most comfortable Simple tasks should be simpleSimple tasks should be simple WYSIWYG – easy to get startedWYSIWYG – easy to get started -piano v violin What good interface principles - 5 do we already know?

28. Student Name Server Utah School of Computing slide 27 Fall 2010 Our history hurts us… - 1 Developed poor communications habitsDeveloped poor communications habits Natural language terribly ambiguousNatural language terribly ambiguous -Meaning: Mary had a little lamb Resources used 2B scarceResources used 2B scarce Other priorities, historicallyOther priorities, historically

29. Student Name Server Utah School of Computing slide 28 Fall 2010 Our history hurts us… - 2 Error MessagesError Messages -Early computing: Compiler error -Even now: Sys Error EM732851 -Check Engine -Error from wrong module: Latex Confusing directionsConfusing directions -400 S HOV Interchange on I15

30. Student Name Server Utah School of Computing slide 29 Fall 2010 Our history hurts us… - 2 Small road signs Small road signs Small road signs Small road signs

31. Student Name Server Utah School of Computing slide 30 Fall 2010 Our history hurts us: KE007 - 3 KE007 1 Sep 1983

32. Student Name Server Utah School of Computing slide 31 Fall 2010 Our history hurts us… KE007 - 4 Korean Airlines Flight 007Korean Airlines Flight 007 269 onboard, veered over Soviet airspace in Pacific, and was shot down269 onboard, veered over Soviet airspace in Pacific, and was shot down Pilot/Navigator keyed in numerical coordinates by hand for flight plan!Pilot/Navigator keyed in numerical coordinates by hand for flight plan!

33. Student Name Server Utah School of Computing slide 32 Fall 2010 Our history hurts us… KE007 - 5 How about: Automatic download?Automatic download? Picking from a menu?Picking from a menu? Symbolic names?Symbolic names? Confirmation playback?Confirmation playback?

34. Student Name Server Utah School of Computing slide 33 Fall 2010 Our history hurts us… KE007 - 6 How about: Context check (like type-checking…)?Context check (like type-checking…)? -Pilot, run, time, plane, schedules, assignments, etc

35. Student Name Server Utah School of Computing slide 34 Fall 2010 Our history hurts us… KE007 - 7 How about:How about: Monitors, Alarms, Inhibitors?Monitors, Alarms, Inhibitors? Confirmation message?Confirmation message? -Aviation tower communications -Telephone technical conversations Parity checks?Parity checks?

36. Student Name Server Utah School of Computing slide 35 Fall 2010 Audi Cars took off from a standing positionCars took off from a standing position Driver error, claimed Audi…Driver error, claimed Audi… Whose error was it?Whose error was it? Our history hurts us… - 8

37. Student Name Server Utah School of Computing slide 36 Fall 2010 Our history hurts us… - 9 NASAs Mars Orbiter space probe NASAs Mars Orbiter space probe NASAs Polar Lander Mars space probe

38. Student Name Server Utah School of Computing slide 37 Fall 2010 Our history hurts us… - 10 NASA space probeNASA space probe Lost major mission over units mistakeLost major mission over units mistake JPL group worked in SI unitsJPL group worked in SI units Colorado group worked in English unitsColorado group worked in English units Combining results led to bad numbersCombining results led to bad numbers Type checking issues?Type checking issues?

39. Fall 2010

40. Student Name Server Utah School of Computing slide 39 Fall 2010 What does this sign mean? Culture -1

41. Student Name Server Utah School of Computing slide 40 Fall 2010 What does this sign mean? Culture -2

42. Student Name Server Utah School of Computing slide 41 Fall 2010 Culture - 3

43. Student Name Server Utah School of Computing slide 42 Fall 2010 Culture - 3

44. Student Name Server Utah School of Computing slide 43 Fall 2010 Culture - 3

45. Student Name Server Utah School of Computing slide 44 Fall 2010 Up is better than down -Religion, Dante, … When we refer to ourselves -We point to our noses? -Our chests? Point with index finger or hand ? Culture - 4

46. Student Name Server Utah School of Computing slide 45 Fall 2010 Critical Interfaces Nuclear power plants: 1961 SL1 nuclear disasterNuclear power plants: 1961 SL1 nuclear disaster1961 SL1 nuclear disaster1961 SL1 nuclear disaster -Interface had better be clear and foolproof Airplane cockpitAirplane cockpit -Computer graphics has simplified controls, information Power saw, laser indicatorPower saw, laser indicator TMITMI

47. Student Name Server Utah School of Computing slide 46 Fall 2010 Accessibility of Controls Where is the interface?Where is the interface? Where is the emergency Off ?Where is the emergency Off ? Access causes:Access causes: -Exposure to danger -Confusion -Loss of critical time -Distraction (John Denvers plane crash) -Disorientation

48. Student Name Server Utah School of Computing slide 47 Fall 2010 Parameter Overload Too many choicesToo many choices What does a parameter (widget) do?What does a parameter (widget) do? Which is the most important at this time?Which is the most important at this time? ExamplesExamples

49. Student Name Server Utah School of Computing slide 48 Fall 2010 Effect of Function: Examples Water faucets in a sinkWater faucets in a sink Manual gear shift: 4 on the floorManual gear shift: 4 on the floor Chords on a guitar: hard!Chords on a guitar: hard! Interface is dictated (confused) by needed functionInterface is dictated (confused) by needed function

50. Student Name Server Utah School of Computing slide 49 Fall 2010 Other Historical Examples Books are essentially linearBooks are essentially linear Stories or communications needs are notStories or communications needs are not Hyper-textHyper-text -Breaks the shackles of linear text stream -Digress as needed, desired

51. Student Name Server Utah School of Computing slide 50 Fall 2010 HCI is a Design Problem Design is old subjectDesign is old subject Well studied, rich traditionsWell studied, rich traditions Apply design methodologies to build better interfacesApply design methodologies to build better interfaces We will look at this viewpointWe will look at this viewpoint

52. Student Name Server Utah School of Computing slide 51 Fall 2010 Important Operational Issues ReliabilityReliability AvailabilityAvailability SecuritySecurity Data integrityData integrity

53. Student Name Server Utah School of Computing slide 52 Fall 2010 Important Basics Standardization across appsStandardization across apps -Apple did this first Integration of packages and toolsIntegration of packages and tools -Unix does this well Consistency in actions, design style, terms, menus, color, fonts, etcConsistency in actions, design style, terms, menus, color, fonts, etc Portability across platformsPortability across platforms -Less than advertised (Quicken, eg)

54. Student Name Server Utah School of Computing slide 53 Fall 2010

55. Student Name Server Utah School of Computing slide 54 Inconsistent Placement Fall 2010 Full Cup Button

56. Student Name Server Utah School of Computing slide 55 Fall 2010 Palm Desktop Calendar

57. Student Name Server Utah School of Computing slide 56 Fall 2010 Palm Handheld Calendar

58. Student Name Server Utah School of Computing slide 57 Fall 2010 Important Stats -1 Time to learnTime to learn Speed of performanceSpeed of performance -How much coffee can one drink? Rate of errors by usersRate of errors by users -The user is always right!

59. Student Name Server Utah School of Computing slide 58 Fall 2010 Important Stats -2 Retention over timeRetention over time -Do you have to start at square 1? Subjective satisfactionSubjective satisfaction -Do you like it (no explanation needed!) -Can you develop attachment for it?

60. Student Name Server Utah School of Computing slide 59 Fall 2010 Dramatically Different Needs - 1 Life-critical systemsLife-critical systems -Air traffic; nuclear reactors; cockpits; power utilities; emergency, military, medical, operations CommercialCommercial -Banks, resvs, inventory, point-of-sales (Hertz, Fedex,..), registration,..

61. Student Name Server Utah School of Computing slide 60 Fall 2010 Dramatically Different Needs - 2 Home, office, entertainmentHome, office, entertainment -Obvious needs Exploratory, creative, cooperative systemsExploratory, creative, cooperative systems -Bad interface (computer or otherwise) can destroy the process

62. Student Name Server Utah School of Computing slide 61 Fall 2010 Human Diversity Ergonomics, anthropometryErgonomics, anthropometry -Are you average? Physical considerationPhysical consideration -Height, stiffness, posture, shape, size of working area -IPD, head size, light sensitivity -Left-handedness

63. Student Name Server Utah School of Computing slide 62 Fall 2010 Short-term memoryShort-term memory Long-term memoryLong-term memory (Over 40 year old users…)(Over 40 year old users…) Problem solvingProblem solving Decision makingDecision making -Armageddon situations Cognitive Processes - 1 (from Engineering Abstracts)

64. Student Name Server Utah School of Computing slide 63 Fall 2010 Attention and set (scope of concern)Attention and set (scope of concern) -ADHD, Ritalin population (5%)… Search and scanningSearch and scanning Time perceptionTime perception Cognitive Processes (fr Eng Abs) - 2

65. Student Name Server Utah School of Computing slide 64 Fall 2010 Arousal and vigilanceArousal and vigilance FatigueFatigue Perceptual (mental) loadPerceptual (mental) load Knowledge of resultsKnowledge of results Monotony and boredomMonotony and boredom Perceptual & Motor Performance Factors (ibid) - 1

66. Student Name Server Utah School of Computing slide 65 Fall 2010 Sensory deprivationSensory deprivation Sleep deprivationSleep deprivation -New driving regulations -Medical interns/residents Anxiety and fearAnxiety and fear IsolationIsolation Perceptual and Motor - 2 Performance Factors (ibid)

67. Student Name Server Utah School of Computing slide 66 AgingAging Drugs and alcoholDrugs and alcohol Circadian rhythmsCircadian rhythms Fall 2010 Perceptual and Motor - 3 Performance Factors (ibid)

68. Student Name Server Utah School of Computing slide 67 Fall 2010 Gender Differences Males and Females are different!Males and Females are different! -Aggressiveness comparisons -Learning environments Positive v. Negative Reinforcement Positive v. Negative Reinforcement -Sensitivities Much has been observedMuch has been observed Firm principles are scarceFirm principles are scarce -Some research at Stanford

69. Student Name Server Utah School of Computing slide 68 Fall 2010 Extrovert v IntrovertExtrovert v Introvert -Extroverts like action Sensing v IntuitionSensing v Intuition -Routine v (Discovering New) Carl Jungs - 1 Personality Differences

70. Student Name Server Utah School of Computing slide 69 Fall 2010 Perceptive v JudgingPerceptive v Judging -New situations v planning Feeling v ThinkingFeeling v Thinking -Sensitive v logical Carl Jungs Personality Differences - 2

71. Student Name Server Utah School of Computing slide 70 Fall 2010 Recent Study Result … Multi-tasking does not work!Multi-tasking does not work! Ergo, one should not:Ergo, one should not: -Drive a car -Talk on a mobile phone Q: Is driving a car a single task??Q: Is driving a car a single task?? Q: Is playing piano a single task??Q: Is playing piano a single task?? Q: Is speaking a foreign language??Q: Is speaking a foreign language??

72. Student Name Server Utah School of Computing slide 71 Fall 2010 Cultural & International Diversity - 1 Characters, numerals, special characters, diacriticalsCharacters, numerals, special characters, diacriticals Left-to-right v (right-to-left or vertical reading)Left-to-right v (right-to-left or vertical reading) Date and time formatsDate and time formats -International standards Numeric and currency formatsNumeric and currency formats

73. Student Name Server Utah School of Computing slide 72 Fall 2010 Cultural & International Diversity - 2 Weights and measuresWeights and measures Telephones and addressesTelephones and addresses -Fixed v variable length Names and titlesNames and titles -Mr., Ms., Mme, M., Dr. SSNs, national IDs,SSNs, national IDs, Capitalization and punctuationCapitalization and punctuation

74. Student Name Server Utah School of Computing slide 73 Fall 2010 Cultural & International Diversity - 3 Sorting sequencesSorting sequences -Different alphabets Icons, buttons, colorsIcons, buttons, colors Pluralization, grammar, spellingPluralization, grammar, spelling Etiquette, policies, tone, formality, metaphorsEtiquette, policies, tone, formality, metaphors

75. Student Name Server Utah School of Computing slide 74 Fall 2010 Users with Disabilities Can truly open doorsCan truly open doors -Man with ALS who uses head to type Doing it well requires good client modelDoing it well requires good client model Designer challengesDesigner challenges

76. Student Name Server Utah School of Computing slide 75 Fall 2010 Evaluating Interfaces - 1 Understanding of a practical problemUnderstanding of a practical problem Lucid statement of a testable hypothesisLucid statement of a testable hypothesis Manipulation of small number of independent variablesManipulation of small number of independent variables Measurement of specific dependent variablesMeasurement of specific dependent variables

77. Student Name Server Utah School of Computing slide 76 Fall 2010 Evaluating Interfaces - 2 Careful selection and assignment of subjectsCareful selection and assignment of subjects Control for bias in subjects, procedures, and materialsControl for bias in subjects, procedures, and materials Application of statistical testsApplication of statistical tests Interpretation of results, refinement of theory, and guidance for experimentersInterpretation of results, refinement of theory, and guidance for experimenters

78. Student Name Server Utah School of Computing slide 77 Fall 2010 Possible Research Directions - 1 Reduced anxiety of computersReduced anxiety of computers Graceful evolution of systemsGraceful evolution of systems Specification and implementation of interactionSpecification and implementation of interaction Direct manipulationDirect manipulation

79. Student Name Server Utah School of Computing slide 78 Fall 2010 Possible Research Directions - 2 Input devicesInput devices Online assistanceOnline assistance Information explorationInformation exploration Applications across platformsApplications across platforms

80. Utah School of Computing End of Lecture Set 1 Preliminaries End Lec Set 1

81. Student Name Server Utah School of Computing slide 80 Fall 2010 Our history hurts us… - 2a Small road signs Small road signs Small road signs Small road signs CircuitCalculator CircuitCalculator CircuitCalculator <example error msg>CircuitCalculator <example error msg>

82. Student Name Server Utah School of Computing slide 81 Our history hurts us: KE007 - 3a from Wikipedia article: "Korean Airlines Flight 007" Fall 2010