Understanding HCI

Vision

Vision is the most important of sense. When light enters the eye it has two main characteristics:

  • brightness (intensity) and
  • colour (wavelength).

The range of objects seen by the eye are as a direct result of these two sources of information.

The Retina

diagram of eye

  • Light enters the eye and triggers cells at the back of the eye, which form the retina.
  • The retina has a receptor layer which is made up of rods and cones.
  • Rods operate in bad light but cannot distinguish colour. The rods are concentrated on the sides of the retina.
  • The cones require good light and can detect colour. The cones are concentrated on the front of the retina in an area called the fovea.
  • This means that colour detection is good when images are placed in front of the eye, but not if an object is held to the side of a person.
  • This can be important in the development of systems that involve large screens or controls that intrude into the periphery of vision.
  • Vision involves interpretation by the brain as well. This is what causes optical illusions (see below).
  • In HCI it is important to avoid any confusing effects.
    • For example, a straight line can appear distorted if it is seen against a background of curving or radiating lines

Optical Illusions

Scintilllating Grid Illusion

Scintilllating Illusion

Distortion Illusion

Distortion Illusion

Colour Illusions

Colour Illusion

Perspective Illusion

Colour Illusion

Visual Acuity

  1. People should be able to distinguish between separate projections on the retina without seeing a blurred object. This is called visual acuity.
  2. In daylight, this is best at the front of the eye where the receptors are most dense.

Visual Field

  1. The range, in degrees, discernable to the average person.
  2. Allowing for slight movement, this is usually about 100 – 120 degrees.
  3. Too much movement can cause discomfort and eye strain.
  4. Too little movement can lead to fatigue.
  5. Opticians have reported cases of young VDU users who suffer temporary short sightedness.

Colour

  1. At a wavelength of 400nm we see blue.
  2. At 750nm we see red.
  3. Colour is classified according to
    1. hue,
    2. brightness and
    3. saturation.
  4. Contrast and luminance also affect how a colour is seen.

Hue

  1. This is normally what we mean by colour.
  2. Chromatic colours such as red and green have hue.
  3. Achromatic colours like black, white and grey don’t.
  4. Hue varies according to wavelength.

Brightness

  • Brightness is a subjective response to light.
  • There is no absolute way of measuring it.
  • Both chromatic colours and achromatic colours can have different perceived brightness.

Saturation

  • Saturation refers to the extent to which the colour is chromatic rather than an achromatic colour.
  • The more black, white or grey that is mixed with a colour the less saturated it is.
  • The colour grey has zero saturation.

Contrast

  • Contrast is the relationship between the light emitted from an object and the light emitted from the background.

Luminance

  • Luminance is the light reflected from an object and is measured in candelas per square metre.
  • The greater the luminance of an object, the greater the eye’s ability to see detail.
  • The eye also becomes more sensitive to flicker as the luminance of the object increases.
  • The brighter and larger the screen the more likely the user is to see a flicker.
  • Flicker can cause headaches, nausea and epileptic fits.

Colour blindness

  • 1 per cent of women and 8 per cent of men are colour blind.
  • The most common form is red-green, (protanopia and deuteranopia) - in these cases, red and green are seen as shades of grey.
  • Tritanopia is a blue-yellow colour blindness.
  • While red is a vivid colour to normally sighted individuals, to protanopic people, certain shades of red can appear almost black. When using red on a dark background, it is better to use certain shades of red such as vermillion, or to replace red with magenta.
  • Colours with low saturation of colour are more difficult to distinguish even though colour blind people tend to be more sensitive to differences in brightness and saturation.
  • One simple solution is to contrast the brightness of the colours as well as the hue
  • Redundant coding should also be used in charts and graphs by using different hatched fills as well as colours

Colour and Culture

  1. Green
    1. 61.4% of Americans associate Green with 'safe'
    2. 62.2% of Hong Kong Chinese associate Green with 'safe'
    3. 99.2% of Americans associate Green with 'go'
    4. 44.7% of Hong Kong Chinese associate Green with 'go'
    5. 22.3% of Hong Kong Chinese associate Green with 'on'
  2. Red
    1. 94.5% of Americans associate Red with 'hot'
    2. 31.1% of Hong Kong Chinese associate Red with 'hot'
    3. 89.8% of Americans associate Red with 'danger'
    4. 64.7% of Hong Kong Chinese associate Red with 'danger'
    5. 100% of Americans associate Red with 'stop'
    6. 48.5% of Hong Kong Chinese associate Red with 'stop'
  3. Yellow
    1. 81.1% of Americans associate Yellow with 'caution'
    2. 44.8% of Hong Kong Chinese associate Yellow with 'caution'
  4. Blue
    1. 96.1 % of Americans associate Blue with 'cold'
    2. 31.5 % of Americans associate Blue with 'off'
  5. Black
    1. 53.5% of Hong Kong Chinese associate Black with 'off'
  6. White
    1. 71.5% of Hong Kong Chinese associate White with 'cold'

So...

  1. It is not possible to assume that the correct assumptions will be made simply by the use of a particular colour.
  2. Furthermore, the colour perceived by the user will depend on the level of brightness and the particular settings of their screen.
  3. The eye also yellows with age making it even less susceptible to blue. Older users may be less sensitive to blue and may require higher levels of luminance.
  4. Games and interfaces designed for children are less likely to need restraint in the use of colour and more experimentation is possible in these areas.

Design Considerations for Colour

  • A person with normal vision is able to distinguish over 7 million different shades of colour.
  • Sensitivity to colour is not uniform across the whole field of vision.
  • At the periphery of colour vision, the eye is least sensitive to red, orange and yellow light and most sensitive to blue light.
  • For this reason, blue makes a good background colour, especially where the screen is large.
  • At the front of the eye where colour vision is best, the eye is most sensitive to red, orange and yellow light and least sensitive to blue light.
  • Small blue objects tend to disappear on the screen.
  • The human eye would find it difficult to cope with red and blue together since this would require re-focusing which is tiring.
  • However, red, yellow and orange can all be viewed comfortably together.
  • Also, warm colours are seen as coming towards the viewer, while cool colours are seen as going away from the viewer. This could be used in the development of graphical user interfaces to suggest levels of activity.

the eyes find it difficult to read red text on blue as they are on opposite ends of the colour spectrum

Design Considerations for Vision

Use visual alerts when:

  1. The information is long and complex
  2. The information will be referred to later
  3. For alerts which do not require the users immediate attention
  4. The users aural system is already overburdened
  5. The user is not moving about
  6. A verbal response is not needed
  7. Illumination is good

Exercise - Colour Meaning

You have been asked to help in the development of a system. The plan is to use colours to indicate the importance of items in a mailing system. Users can set their mail as being urgent, important, confidential, social and non-urgent.

Suggest five suitable colours for the five levels of mail and give reasons for your choice. Create an image in Photoshop or Illustrator with your chosen colours and test with aDesigner or vischeck for suitability with visually impaired individuals.

Further Reading