Cognition, information processing and visual perception

Interaction is cognitive, so human limits shape interface limits

Intuition

A screen is not read the way a page of text is scanned by a camera. A person sees a small sharp patch and a blurry surround, then moves their eyes. Good interfaces are designed around that patch.

Lecture 2 opens with cognition in HCI. Interacting with technology is cognitive. Cognition tells designers what users can and cannot be expected to do, identifies and explains the nature and causes of the problems users meet, and supplies theories, models and guidelines that lead to better products.

The lecture frames this with the human information processing model: stimuli arrive through the senses, are processed (perception, memory, attention, reasoning, decision) and produce movement. The model returns as a picture at the start of each section on a sense or process. The figure itself did not extract, so remember it as input, processing, output.

Fovea and periphery see in different ways

The lecture draws on Johnson, Designing with the Mind in Mind. Foveal vision uses cones. Only a small part of our field of view is in focus, the central area at roughly 5 to 18 degrees, and it is what we use for reading. Peripheral vision uses rods. The outer field is blurred and is used for discovering stimuli such as movement or a brightness change.

Compare

Fovea

Cones. Small, central, sharp. Reading and detail.

Periphery

Rods. Large, outer, blurred. Detecting movement and brightness change.

Exam detail

Slide numbers: central area with an angle of sight of around 5 to 18 degrees. Cones for fovea, rods for periphery. The “thumbs up” activity used a block of lorem ipsum text to make you notice how little you can read without moving your eyes.

Design for the patch, then for the pop

Two design implications follow. First, put content where users are looking. The lecture example is an error message: place it by the field being filled, not in a corner. Second, make important information stand out with peripheral pop-out. A visual target pops out in your periphery if it differs from surrounding objects in features the periphery can detect, and the more distinctive features the target has, the more it pops. The find-the-Z and find-the-G tasks on the slide demonstrate this: how fast you find the target depends on how many distinctive features it has.

The colour examples are red for potential collisions in air traffic control and red for traffic jams in Google Maps.

Pitfall

Pop-out depends on a contrast in a feature the periphery can detect. Many similar red items together do not pop, and subtle changes far from the user’s gaze go unseen.

Recall

Which receptor type serves the periphery and what is it good at?

Rods. The periphery is blurred but good at discovering stimuli such as movement and change in brightness.