1. Week 5 – 2015 Usability Engineering: People

2. Overview Key ideas and terms – Mental models – System image – Conceptual models – User Models Key theory for design and critique – Fitts’ law

3. Mental models Definitions, links to most other parts of HCI, valuable language and mental tools

4. http://magamaps.com/mental-models/ Craik KJW. The Nature of Explanation. Cambridge University Press; Cambridge, UK: 1943.

5. Mental models http://www.nngroup.com/articles/mental-models/ Summary: – What people believe Users System designers – Strongly impacts all aspects of interaction – Mismatched mental models are common, especially with designs that try something new Note: – Beliefs …. Not facts – Mental models drive predictions, planning actions – Individual MMs differ …. Designer MM versus “user” MM – MMs change…. Implications for One Sentence Statement

6. http://normfujisaki.com/wp-content/uploads/2013/09/mental- model.jpg

7. System image Aspects the user can actually perceive Part of the explanation for differences between user’s and designer’s mental models And has done so at this time – Aspects they are potentially aware of

8. (2015): Mental models. In: Soegaard, Mads and Dam, Rikke Friis (eds.). "The Glossary of Human Computer Interaction". Aarhus, Denmark: The Interaction Design Foundation. Available online at https://www.interaction- design.org/encyclopedia/mental_models_glossary.htmlSoegaardDamhttps://www.interaction- design.org/encyclopedia/mental_models_glossary.html

9. Some illustrative mental models classics

10. Example: “Cannot save file…. No space”

13. Mental models…. What was the user’s mental model? What is the designer’s (actual) system model Cause of the problem??? How to overcome it??? In this case In general

14. The refrigerator challenge Your refrigerator’s freezer section is not cold enough You find a dial at the back of the freezer labelled as below and set on 3 – warmer 1 2 3 4 5 6 7 colder What will you do? Will it work? What is your mental model?

15. How to address mental model problems Fix the system – make it match users' mental models – eg If people look for something in the wrong place, then move it to the place where they look for it. Fix the user - improve users' mental models so that they more accurately reflect your system. – eg explaining things better – making labels clearer to make the UI more transparent (even though the underlying system remains unchanged) – Help that insists that the user pays attention

16. Some useful distinctions Slips: – correct user model, inadvertent incorrect action – eg car “malfunction”, tap caps lock accidentally Mistakes: incorrect mental model Use this tightened vocabulary for your think- aloud reports

17. Conceptual model Representation of the system – Captures key concepts, processes – Helps a person build a mental model Depiction of the system What is the potential role of personalisation in conceptual models?

18. User model A set of beliefs about the user In HCI, the designers record of the important aspects of the user – written down to help designers ensure they are considered throughout design In personalisation, the machine’s model of the user – Based on rich data such as click streams, user- elicited information, expert domain knowledge

19. How do you define a user model? Studies of users? How to do that? Why? How to take account of the context?

20. User model case study: online dating How to make good recommendations? – The user model is core – What system believes about the user Individual user model – Explicit Information about me (eg age, height, weight, portrait…) Information about the person I want to me – Observations of the user My history of interactions with system: my likes and dislikes + who likes and dislikes me Knowledge base and group user models – Stereotypes (eg males aged 18-30) – Known inaccuracies (eg males tend to over-estimate height, females underestimate weight, scammers….) – Collaborative filtering (eg people who liked XXX also liked YYY)

21. Effect of user model that includes who will like/reject the user Pizzato, L., Rej, T., Akehurst, J., Koprinska, I., Yacef, K., & Kay, J. (2013). Recommending people to people: the nature of reciprocal recommenders with a case study in online dating. User Modeling and User-Adapted Interaction, 23(5), 447-488.

22. How accurately does explicit user model match the inferred user model, based on what people actually do?

23. Stereotypes Are men more proactive than women?

25. Pizzato, L. A., Akehurst, J., Silvestrini, C., Yacef, K., Koprinska, I., & Kay, J. (2012). The effect of suspicious profiles on people recommenders. In User Modeling, Adaptation, and Personalization (pp. 225-236). Springer Berlin Heidelberg.

26. Pizzato, L. A., Rej, T., Yacef, K., Koprinska, I., & Kay, J. (2011). Finding someone you will like and who won’t reject you. In User Modeling, Adaption and Personalization (pp. 269-280). Springer Berlin Heidelberg.

27. Why does this matter for usability engineering?

28. Tools for eliciting and documenting mental models in usability engineering Context-dependence Individuality of mental models (in contrast to “observing” users to building user models)

29. Affinity diagrams Affinity means….. Commonly used after storming stage of brainstorming Aims to group ideas to determine useful collections, relations Same set of ideas can produce many different organisations Shafer, S. M., Smith, H. J., & Linder, J. C. (2005). The power of business models. Business horizons, 48(3), 199-207.

30. http://blog.acquitygroup.com/2013/03/15/affinity-diagramming/

31. http://www.dirkdewit.eu/podium

32. How to use affinity diagrams? Collect information about users then categorise Elicit – Questionnaire – Interview – Open ended … “listen” – Crowdsource … Mechanical Turk Observe – Weblogs – Interaction records – Video and sensors…..

33. Mental model maps http://www.smashingmagazine.com/2012/04 /mental-model-diagrams-cartoon http://www.smashingmagazine.com/2012/04 /mental-model-diagrams-cartoon Technique for identifying key components in the user’s mental model Then defining possible UI elements to address challenges related to each of them

34. Concept maps Typically start with a focus question – eg what is a mental model in usability engineering? Identify important concepts Place them hierarchically – Most important and inclusive at the top – More detailed ones lower on the map Ensure similar ones are near each other Draw the important links

35. Class activity Draw a concept map to show the meanings of the following terms: mental model, user model, conceptual model, concept map, user, system designer

36. Principles of good design Provide a good “conceptual model” – depicting the system – Enables user user to build good mental model of the device. – And to predict the effects of their actions. Make things visible/audible/tangible – “system image” – Ensure user can see, hear, feel… the state of the device and the alternatives for action. The Principle of Mapping – Relies on linking existing mental model to perceived system Natural mapping Physical analogies Cultural standards The Principle of Feedback – Information on what has been accomplished or is doing. – full and continuous feedback about results of actions.

37. Case study Moded interfaces: – The same interface action has a different meaning depending upon the context Class activity: define some examples of moded interaction in common interfaces eg text editor, Powerpoint, Word What are the challenges for the user? – In terms of their mental model as novice users? – In terms of the available conceptual model of the system?

38. Challenges for design: conceptual model doesn’t match the user’s mental model designers of the conceptual model needs to account for the user’s mental model – How does Think-Aloud help? multiple user groups conceptual model purely reflects underlying hardware, software or database creating materials/training to build an appropriate mental model

39. Fitts’ Law

41. http://sixrevisions.com/usabilityaccessibility/improving-usability-with-fitts-law/

42. http://mindhacks.com/2005/01/20/siz e-and-selection-times-fittss-law/

43. Age matters

44. http://hcil2.cs.umd.edu/trs/2003-16/2003-16.html Participant in (1) was a 4 year 6 month old female. Participant in (2) was a 5 year 8 month old female. Participant in (3) was a 21 year-old female.

45. http://hcil2.cs.umd.edu/trs/2003-16/2003-16.html All paths taken by 5 year old participants to click on a 32 pixel target at a distance of 256 pixels.

46. http://hcil2.cs.umd.edu/trs/2003-16/2003-16.html All paths taken by adult participants to click on a 32 pixel target at a distance of 256 pixels.

47. Beyond the mouse? Class activity: How does touch and mid- air-gesture interaction relate to Fitts’ Law? Similarities, differences

48. http://sixrevisions.com/usabilityaccessibility/improving-usability-with-fitts-law/ Fitts’ Law in action – Grouping, layout, hierarchies

49. http://sixrevisions.com/usabilityaccessibility/improving-usability-with-fitts-law/ Fitts’ Law in action – The prime pixel……where your cursor is now

50. Windows, …. right-click ….contextual menu of options usually appears that has its point of origin at the prime pixel. http://sixrevisions.com/usabilityaccessibility/improving-usability-with-fitts-law/

51. Magic pixels….. What are they? Fitts’ link? Why are they important? http://sixrevisions.com/usabilityaccessibility/improving-usability-with-fitts-law/

52. Summary Empirical foundations Heuristics for designers – Grouping items for flow of action Special locations – Prime pixel – Magic pixels

53. A Quiz Designed to Give You Fitts http://www.asktog.com/columns/022DesignedToGiveFitts.html Microsoft Toolbars offer the user the option of displaying a label below each tool. Name at least one reason why labeled tools can be accessed faster. (Assume, for this, that the user knows the tool and does not need the label just simply to identify the tool.) You have a palette of tools in a graphics application that consists of a matrix of 16x16-pixel icons laid out as a 2x8 array that lies along the left-hand edge of the screen. Without moving the array from the left-hand side of the screen or changing the size of the icons, what steps can you take to decrease the time necessary to access the average tool? A right-handed user is known to be within 10 pixels of the exact center of a large, 1600 X 1200 screen. You will place a single-pixel target on the screen that the user must point to exactly. List the five pixel locations on the screen that the user can access fastest. For extra credit, list them in order from fastest to slowest access. Microsoft offers a Taskbar which can be oriented along the top, side or bottom of the screen, enabling users to get to hidden windows and applications. This Taskbar may either be hidden or constantly displayed. Describe at least two reasons why the method of triggering an auto-hidden Microsoft Taskbar is grossly inefficient.

54. A Quiz Designed to Give You Fitts http://www.asktog.com/columns/022DesignedToGiveFitts.html Explain why a Macintosh pull-down menu can be accessed at least five times faster than a typical Windows pull-down menu. For extra credit, suggest at least two reasons why Microsoft made such an apparently stupid decision. What is the bottleneck in hierarchical menus and what techniques could make that bottleneck less of a problem? Name at least one advantage circular popup menus have over standard, linear popup menus. What can you do to linear popup menus to better balance access time for all items? The industrial designers let loose on the Mac have screwed up most of the keyboards by cutting their function keys in half so the total depth of the keyboard was reduced by half a key. Why was this incredibly stupid? What do the primary solutions to all these questions have in common?

55. Summary and homework People’s models – Mental models – System image – Conceptual models Empirically based principle – Fitts’ Law – Application and implications Homework: complete Assignment 1