screen design attention, colour psychological and physiological constraints
TRANSCRIPT
![Page 1: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/1.jpg)
Screen design Attention, Colour
psychological and physiological constraints
![Page 2: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/2.jpg)
Attention
![Page 3: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/3.jpg)
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
![Page 4: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/4.jpg)
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
![Page 5: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/5.jpg)
Perception
• Translating external stimuli into the memory– Senses– Processing their information– Tightly interlinked physical and cognitive
• Simple example, reading a screen– Vision… visibility
![Page 6: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/6.jpg)
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
![Page 7: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/7.jpg)
Colour
• Valuable for screen design– Performance ++– Affect ++
• Well understood challenges that are avoidable but failure to do so can compromise performance
![Page 8: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/8.jpg)
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.
![Page 9: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/9.jpg)
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/.
![Page 10: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/10.jpg)
Coblis — Color Blindness SimulatorTheir demo: normal vision
![Page 11: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/11.jpg)
Green-Blind/Deuteranopia
![Page 12: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/12.jpg)
Blue-Blind/Tritanopia
![Page 13: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/13.jpg)
Red-Blind/Protanopia
![Page 14: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/14.jpg)
What can you do about colour blindness?
• Be aware!• Design in black and white and add colour
sparingly• What else? …. Class activity
![Page 15: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/15.jpg)
Colour
• Valuable for screen design– Performance ++– Affect ++
• Well understood challenges that are avoidable but failure to do so can compromise performance
![Page 16: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/16.jpg)
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 ...
![Page 17: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/17.jpg)
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
![Page 18: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/18.jpg)
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
![Page 19: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/19.jpg)
Stroop effect
http://faculty.washington.edu/chudler/java/ready.html
![Page 20: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/20.jpg)
Stroop Effect say the colour of the words here
From http://faculty.washington.edu/chudler/words.html
![Page 21: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/21.jpg)
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
![Page 22: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/22.jpg)
Visible Spectrum
Winter 2013 CSE 440: User Interface Design, Prototyping, and Evaluation 22
![Page 23: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/23.jpg)
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
![Page 24: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/24.jpg)
• 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
![Page 25: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/25.jpg)
• 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
![Page 26: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/26.jpg)
Light text on a dark background
Dark text on a light background
![Page 27: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/27.jpg)
Blooming – light text on dark background seem larger
Light text on a dark background
Dark text on a light background
![Page 28: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/28.jpg)
Red text on a dark background
Red text on a light background
![Page 29: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/29.jpg)
Red text seems to focus differently
![Page 30: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/30.jpg)
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
![Page 31: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/31.jpg)
So many ways to make mistakes...
![Page 32: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/32.jpg)
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
![Page 33: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/33.jpg)
Guidelineseg http://colorusage.arc.nasa.gov/guidelines.php
![Page 34: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/34.jpg)
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.
![Page 35: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/35.jpg)
• http://colorusage.arc.nasa.gov/assets/blue_1.gif
![Page 36: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/36.jpg)
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
![Page 37: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/37.jpg)
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
![Page 38: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/38.jpg)
Blinking and movementWhen is it good?
And not?
![Page 39: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/39.jpg)
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
![Page 40: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/40.jpg)
Shapes
• Conventions for some shapes– eg warning and errors
• Special shapes– eg little hand pointing
• Cultural boundaries
![Page 41: Screen design Attention, Colour psychological and physiological constraints](https://reader036.vdocument.in/reader036/viewer/2022081603/56649f385503460f94c5441b/html5/thumbnails/41.jpg)
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)