Screen design Attention, Colour psychological and physiological constraints.
-
Upload
merry-mills -
Category
Documents
-
view
212 -
download
0
Transcript of Screen design Attention, Colour psychological and physiological constraints.
Screen design Attention, Colour
psychological and physiological constraints
Attention
Attention
• 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 22
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 32
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
Blinking and movementWhen is it good?
And not?
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)