Week 5 – 2014 HCI – COMP3315

1. psychological and physiological constraints Week 5 – 2014HCI – COMP3315

2. People: psychological and physiological constraints First Principles of Interaction Design (Revised & Expanded) March 2014 http://asktog.com/atc/principles-of-interaction-design/

3. A challenge for HCI lectures… lecture notes versus the experience People learn more if they engage eg have to click to see the information, have to think about issues and use information rather than just read it. Human cognition…. Impact on assignment

4. Overview Thinking about people Cognitive Physical Physiological Some theories and terms Mental models Gulf of execution Conceptual models Fitts’ Law Some very fine-grained guidelines, useful for design and for no-user Heuristic Evaluation Importance of empirical validation of all theories

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

6. Mental modelshttp://www.nngroup.com/articles/mental-models/ • Summary: What users believe they know about a UI strongly impacts how they use it. Mismatched mental models are common, especially with designs that try something new. • Definition: A mental model is what the user believes about the system at hand. • 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

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

10. 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

11. 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?

12. Neilsen on MM • ….many less-techy users don't understand the differences between many other common features: • Operating-system windows vs. browser windows • A window vs. an application, • Icons vs. applications, • Browser commands vs. native commands in a Web-based app • Local vs. remote info • Different passwords and log-in options (users often log in to other websites as if they were logging in to their email) • Implications for • usable security? • Building on metaphors

13. How to address… • “Make the system conform to users' mental models — …. This is the approach we usually recommend to fix IA problems: • eg If people look for something in the wrong place, then move it to the place where they look for it. • Card sorting is a useful way to discover users' mental model of an information space so that you can design your navigation accordingly. • 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).

14. 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

15. Norman’s Gulf of Executionhttp://learnline.cdu.edu.au/units/hit381/resources/popups/normantheoryofaction.html

16. Norman’s Gulf of Evaluationhttp://learnline.cdu.edu.au/units/hit381/resources/popups/normantheoryofaction.html • Gulf of evaluation: the amount of effort required to determine the system state • When problems occur in the evaluation phase, the "gulf of execution" widens • Some examples • "What happened then?" • "What did I do wrong" • User repeats the action (e.g. clicks the NEXT or SUBMIT button)

17. Norman’s Gulf of Executionhttp://learnline.cdu.edu.au/units/hit381/resources/popups/normantheoryofaction.html Gulf of execution….distance between the user's goals and the means of achieving them through the system Some examples: "What do I do now?" "How do I [...]?" "I wanted to [...], but I can't see how I would do that?" "Do I press this?" "Do I type this in here?" "I'm looking for [...] but I can't find it"

18. Norman’s Gulf of Executionhttp://learnline.cdu.edu.au/units/hit381/resources/popups/normantheoryofaction.html

19. Overcoming gulfs - Norman’s questions :Norman, D.A.  1988  "The Design of Everyday Things."  MIT Press • How easily can a person determine: • 1 determine the function of the device? • 2 tell what actions are possible? • 3 determine mapping from intention to physical movement? • 4 perform the action? • 5 tell  what state the system is in? • 6 tell if system is in desired state? • 7 determine mapping from system state to interpretation?

20. Principles of good design • Provide a good conceptual model • Enables user user to build good mental model of the device. • And to predict the effects of their actions. • Make things visible/audible/tangible • 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.

21. Mental versus conceptual modelshttp://uxmag.com/articles/the-secret-to-designing-an-intuitive-user-experience • “…. a mental model refers to the representation of something—the real world, a device, software, etc.—that the user has in mind. It is a representation of an external reality. Users create mental models very quickly, often before they even use the software or device. Users’ mental models come from their prior experience with similar software or devices, assumptions they have, things they’ve heard others say, and also from their direct experience with the product or device. Mental models are subject to change. Users refer to mental models to predict what the system, software, or product is going to do, or what they should do with it.

22. “… A conceptual model is the actual model [available] to the user through the interface of the product. [eg] iPadebook … mental model about .. • what reading a book will be like in the iPad, • how it will work, what you can do with it. But when you sit down with the iPad, the “system” (the iPad) will display …. screens, and buttons, and things that happen. The actual interface is representing the conceptual model. Someone designed a user interface and that interface is communicating to you the conceptual model of the product.

23. 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?

24. Redraw this, adding conceptual model, and making changes to correct any errors

25. 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 CI help? • And the role of Think-Aloud? • multiple user groups • conceptual model purely reflects underlying hardware, software or database • creating materials/training to build an appropriate mental model • One Sentence Statement?

26. Returning to Assignment 1 • Why are sketches better for exploring the space of conceptual models? • Some students used software for wireframes and prototyping – why is this dangerous? • Clarity on differences between mental model, conceptual model, actual system

27. Fitts’ Law

28. http://sixrevisions.com/usabilityaccessibility/improving-usability-with-fitts-law/http://sixrevisions.com/usabilityaccessibility/improving-usability-with-fitts-law/ time …. to complete the action a and b are empirically determined regression coefficients, …..values gained from direct observation that build a slope. distance … from the starting point to the …target object width is the width of the target object

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

31. http://mindhacks.com/2005/01/20/size-and-selection-times-fittss-law/http://mindhacks.com/2005/01/20/size-and-selection-times-fittss-law/

33. Age matters

34. 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.

35. 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.

36. 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.

37. Beyond the mouse?

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

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

40. 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/

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

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

43. A Quiz Designed to Give You Fittshttp://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.

44. A Quiz Designed to Give You Fittshttp://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?

45. Attention

46. Attention • http://www.youtube.com/watch?v=vJG698U2Mvo&feature=c4-overview-vl&list=PLB228A1652CD49370 • Daniel Simons

47. Attention • Why did this happen? • What is attention? • Visual ** • Audio • What are the implications for UI designers? • Multi-tasking • Attention-grabbers • And for UI evaluations? • Eye tracking • Think-aloud • For your project • Guiding the user in where to attend

48. Memory • Working memory • Miller, George A. "The magical number seven, plus or minus two: some limits on our capacity for processing information." Psychological review 63.2 (1956): 81. (>17K gcites, Sep 2013) http://cogprints.org/730/1/miller.html • WM very limited • Chunking is really important • Complex to user this to predict … but may explain think-aloud observations • (Claude Shannon theory of information .. Brain as information processing machine) • Long term memory • Critical for recall at UI • And learning about UI • Mental model

49. Perception • Translating external stimuli into the memory • Senses • Processing their information • Tightly interlinked physical and cognitive • Simple example, reading a screen • Vision… visibility

50. Screen design • Tullis, Thomas S. "The formatting of alphanumeric displays: A review and analysis." Human Factors: The Journal of the Human Factors and Ergonomics Society 25.6 (1983): 657-682. • http://www.eastonmass.net/tullis/publications/1983-HF/FormattingAlphanumericDisplays.pdf • Key outcomes in terms of • Performance versus affect (preferences) • Density (local/overall), grouping, layout complexity • Grouping related elements, organised for vertical scanning, with space between them aids search in speed and preference • Science of screen design • Careful empirical studies • Design of initial study • Replication • Impact of different technology • Impact of the particular task • Impact of user’s mental model, standards for device, application • Translation to your interface