Week11 – 2014Usability Engineering

psychological and physiological constraints

People: psychological and physiological constraints

First Principles of Interaction Design (Revised & Expanded) March 2014http://asktog.com/atc/principles-of-

interaction-design/

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

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

normantheoryofaction.html

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"

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)

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

normantheoryofaction.html

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?

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.

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.

“… A conceptual model is the actual model [available] to the user through the interface of the product.

[eg] iPad ebook … 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.

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?

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

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?

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?

Attention

Attention

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

• Daniel Simons

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

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

Perception

• Translating external stimuli into the memory– Senses– Processing their information– Tightly interlinked physical and cognitive

• Simple example, reading a screen– Vision… visibility

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

Colour

• Valuable for screen design– Performance ++– Affect ++

• Well understood challenges that are avoidable but failure to do so can compromise performance

Tog Principleshttp://asktog.com/atc/principles-of-interaction-design/

• “Principle: Any time you use color to convey information in the interface, you should also use clear, secondary cues to convey the information to those who cannot see the colors presented

• Principle: Test your site to see what color-blind individuals see

• Principle: Do not avoid color in the interface just because not every user can see every color.

• Principle: Do not strip away or overwhelm color cues in the interface because of a passing graphic-design fad.

Colour blindness

• Affected ~ 8% of men, .5% women• Testing tools eg

– http://enably.com/chrometric/. • For images images

– http://www.colblindor.com/coblis-color-blindness-simulator/.

Coblis — Color Blindness SimulatorTheir demo: normal vision

Green-Blind/Deuteranopia

Blue-Blind/Tritanopia

Red-Blind/Protanopia

What can you do about colour blindness?

• Be aware!• Design in black and white and add colour

sparingly• What else? …. Class activity

Colour

• Valuable for screen design– Performance ++– Affect ++

• Well understood challenges that are avoidable but failure to do so can compromise performance

Coding

• Means distinguishing different parts of an interface• Includes

– Font changes such as these

– Font with style and size– Use of colour such as here and here – seriously– Special symbols, shapes– Sound– Movement

• All are about ...

Coding

• Means distinguishing different parts of an interface• Includes

– Font changes such as these

– Font with style and size– Use of colour such as here and here – seriously– Special symbols, shapes– Sound– Movement

• All are about ... gaining attention

HAI2008.Lifelong ambient companions:

challenges and steps to overcome them

Colour can be poorly used• Means distinguishing different parts of an interface• Includes

– Font changes such as these

– Font with style and size– Use of colour such as here and here – seriously– Special symbols, shapes– Sound– Movement

• All are about ... gaining attention

Stroop effect

http://faculty.washington.edu/chudler/java/ready.html

Stroop Effect say the colour of the words here

From http://faculty.washington.edu/chudler/words.html

Colour

• Properties– Hue – wavelength (red .. violet)– Saturation, chroma (purity, mix of wavelengths)

• High saturation very pure• Low saturation, greyish

– Brightness, intensity, value • very low intensity becomes black

Visible Spectrum

Winter 2013 CSE 440: User Interface Design, Prototyping, and Evaluation 39

Physiology and colour

• Rods and cones• Fovea – detailed vision (eg text)• Only cones sensitive to colour

– 64% respond to red– 32% to green– 2% to blue (none in fovea!)

• Opposing colours at the neuron level– Red-green, yellow-blue

• Visual acuity reduced for violet end of spectrum• Insensitivity to blue increases with age• Blue seems harder to read, especially on some

backgrounds• With normal light, we see mid-spectrum colours

best (ie green, yellow)• Colour blindness

– Use additional redundant cue eg colour + box + brightness difference and this improves broad performance

• Reds appear closer than blues• Warm colours appear larger than cool colours

– eg red larger than blue• Blooming effect

– Light colours on dark backgrounds appear larger• Colours distant on spectrum require refocusing• After images and shadows can follow

– Opposing colours– Highly saturated colours

• Illumination matters too

Light text on a dark background

Dark text on a light background

Blooming – light text on dark background seem larger

Light text on a dark background

Dark text on a light background

Red text on a dark background

Red text on a light background

Red text seems to focus differently

Red text seems to focus differently

Red text seems to focus differently

Red text seems to focus differentlyRed text seems to focus differently

Red text seems to focus differently

So many ways to make mistakes...

Color GuidelinesAvoid simultaneous display of highly saturated, spectrally extreme colors

– e.g., no cyans/blues at the same time as reds, why?• refocusing!

– desaturated combinations are better pastelsWinter 2013 From: CSE 440: User Interface Design,

Prototyping, and Evaluation 51

Using the Hue Circle• Pick non-adjacent colors

– opponent colors go well together

• (red & green) or (yellow & blue)

Winter 2013 CSE 440: User Interface Design, Prototyping, and Evaluation 52

Guidelineseg http://colorusage.arc.nasa.gov/guidelines.php

Examples:

• Pure blue shall not be used on a dark background for text, thin lines, or high resolution information. [Source: DOE-HFAC 1, 1992] FAA Human Factors Design Standard, p 8-58

• 8.6.2.2.7 Blue. Blue should not be used as the foreground color if resolution of fine details is required. [Source: DOD HCISG V2.0, 1992] FAA Human Factors Design Standard, p 8-57.

• http://colorusage.arc.nasa.gov/assets/blue_1.gif

More examples from NASA:from http://colorusage.arc.nasa.gov/guidelines_discrim_id.php

• Use no more than six colors to label graphic elements.

• Use colors in conformity with cultural conventions.

• Use color coding consistently across displays and pages

• Use color coding redundantly with other graphic dimensions.

• Don't use color coding on small graphic elements

Recommendations

• Use colour sparingly• Maximum codings 5 (+ or – 2) matching short term

memory• Design in monochrome first• Optimise all other aspects of design and layout• Add colour (with awareness of problems)• Use colour to:

– Draw attention (better than shape, size, brightness)– Show organisation, status, relationships

cont

• With black foreground, use cyan, magenta, white• Ensure contrast ib hue and brightness of fore-

and background

• Allow users to control colour coding• Use colour consistently across system• Use other (redundant) cues as well• Avoid saturated blue for small text and thin lines

Blinking and movementWhen is it good?

And not?

Take yourself back to hunter and gatherer times:

A hungry tiger is coming from the distance at your right

Blinking and movement

• Hard to ignore• Reduces legibility• Can be really annoying

• Helpful for tiny cursors (otherwise hard to find and large ones are obtrusive)

• Helpful for critical situations

Shapes

• Conventions for some shapes– eg warning and errors

• Special shapes– eg little hand pointing

• Cultural boundaries

Summary

• Awareness of human factors affecting design

• Awareness of some basic guidelines for use of colour– Apply these for a simple form of no-user testing

by checking your UI against guidelines– Better done by person other than designer (role

for your teams to desk-check each other’s designs)