Week 5 – 2015Usability Engineering: People

Overview

• Key ideas and terms– Mental models– System image– Conceptual models– User Models

• Key theory for design and critique– Fitts’ law

Mental models

Definitions, links to most other parts of HCI, valuable language and mental

tools

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

Mental modelshttp://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

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

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

(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.html

Some illustrative mental models

classics

Example: “Cannot save file…. No space”

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

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?

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

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

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?

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

How do you define a user model?

Studies of users? How to do that? Why? How to take account of the

context?

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)

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.

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

Stereotypes

Are men more proactive than women?

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.

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.

Why does this matter for usability engineering?

Tools for eliciting and documenting mental models in usability engineering

Context-dependenceIndividuality of mental models

(in contrast to “observing” users to building user models)

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.

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

http://www.dirkdewit.eu/podium

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

Mental model maps

• 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

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

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

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.

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?

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

Fitts’ Law

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

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

Age matters

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.

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.

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.

Beyond the mouse?

Class activity: How does touch and mid-air-gesture interaction relate to Fitts’ Law?

Similarities, differences

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

Fitts’ Law in action – Grouping, layout, hierarchies

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

Fitts’ Law in action – The prime pixel……where your cursor is now

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/

Magic pixels….. What are they? Fitts’ link? Why are they important?

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

Summary

• Empirical foundations• Heuristics for designers

– Grouping items for flow of action• Special locations

– Prime pixel– Magic pixels

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.

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?

Summary and homework

• People’s models– Mental models– System image– Conceptual models

• Empirically based principle– Fitts’ Law– Application and implications

• Homework: complete Assignment 1