Visual Design Fundamentals

This section is intended to draw your attention to some fundamental principles that underlie the practice of visual interface design.  It is not a comprehensive survey of principles but a selection that serve to illustrate a major meta principle: elements of visual presentation communicate conceptual information about the interface.   The language of visual communication should be used to enhance interaction; its careless use will degrade it.

Human visual perception has universal regularities in the way images are interpreted.  One categorisation of some of these is ‘the laws of Gestalt’ after a school of psychology that emphasises the human ability to perceive interconnection between elements that make larger objects; “The whole is other than the sum of the parts.”  Any graphic image relies on these universal regularities for it to make sense to the viewer, so it is useful to be aware of these when doing graphical interface design.

Below I have given some indication of the significance for interface design of the principles described.  These may seem obvious, but it might be worth reflecting on just why they seems so.

Figure-Ground

This describes the tendency to pick out shapes in the visual field as being objects set against a background.  Whilst a complex natural visual field may present issues of multi-stability (ambiguity of interpretation), this can easily be induced in graphic images as illustrated below.  Is it a white vase set against a black background or two faces silhouetted against a white background?

Gestalt - Figure-Ground Face

Playing with this effect has been used in art e.g. notably the works of M. C. Escher and 60’s Op-art.

The proportion of each block of colour can influence the way that the image is interpreted.

Gestalt - Figure-Ground Face Wide

As can the relative brightness of the colours.

Gestalt - Figure-Ground Face Inverted

Significance for interface design

Figure-ground perception makes graphical interaction design possible at all; that  lines and areas of colour presented on a flat surface can be interpreted as representing independent objects.

Generally in interface design the intention is to prevent multi-stability so that interpretation of the interface is straightforward.  Contrast and placement of graphical user-interface components, particularly blocks of text with a different background colour to that of the screen, should be considered so that the user’s attention is drawn to the appropriate objects and is not distracted by artefacts created out of interference with the background.

Continuity

Linear elements in the visual field are interpreted as single entities, even when they interact with others.  Linear entities with sharp kinks in them may appear disjoint.

Gestalt - Continuity

This would usually be interpreted as two lines crossing rather than four lines touching at their ends or two sharply bent lines touching at their apexes.

Significance for interface design

Where graphical frames are used to group interactive elements together to represent particular objects, ensure that when frames are aligned, sufficient margins are allowed so that the independence of each frame is apparent.  This may be a particular issue when border-less blocks are used.

When generating informational output (e.g. graphs) ensure that false interpretations cannot be caused by inappropriate perception of continuity.

Closure

Regular shapes are perceived even when they are not complete or are occluded; the human perceptual mechanism fills in the gaps.  This is the mechanism that enables us to perceive sparse sketches (e.g. cartoons) as images of identifiable objects; not all detail need be supplied.

Gestalt - Closure

A star shape is apparent in the image above even though the graphic content is only a set of shaded circles with bits cut out of them.  Actually the same phenomena makes us see all eight elements as circles, perhaps with the star laying on top.  You can almost see the inner angles of the arms of the star.

Significance for interface design

This phenomena allows elements to be partly occluded by others elements but still be recognisable (e.g. independent windows overlaying each-other on the desk top).  This is a strategy that may be valuable when screen real-estate is otherwise inadequate.  However care must be taken that multiple element needed for the current task may be made simultaneously visible whenever possible.

When stacking elements it is useful to laterally off-set each one slightly so that its full shape can be perceived and the Gestalt effect of continuity, which would otherwise make the stack appear as one object, is defeated.

Gestalt - Closure WindowsProximity

Objects that are close together are perceived as a group.

Gestalt - Proximity

This appears as three columns each of four squares, rather than twelve squares or four rows of three squares.

Significance for interface design

Proximity implies conceptual connectedness.  This is crucial when laying out tables of data; elements that should be seen as pairs (e.g. a label and its related data) must be closer together than unrelated items.

Module
Mark
Module
Mark
Module
Mark
Smith RT154
55
AB356
42
AZ117
59
Brown PF886
63
MC543
22
RT332
90
Jones MC543
73
RT154
65
AZ117
72

In the table above, did Brown pass or fail (score less than 40) module MC543?

Similarity

Objects that are similar will be perceived as a group.

Gestalt - Similarity

This appears as four rows of alternating light and darker squares rather than merely a grid of twenty squares.

Significance for interface design

Visual similarity implies conceptual similarity.  It may be necessary to visually distinguish one conceptually similar item from another, but take care to preserve sufficient similarity in the graphic representation.

Uniform Connectedness

Objects ordered in simple regular shapes are perceived as a group.

Gestalt - Uniform Connectedness

The darker column of four squares on the left and the lighter square of nine squares on the right appear as groups.  The lightest seven squares in the shape of an upper-case gamma appear as background rather than a group.

Significance for interface design

To indicate that items are conceptually grouped organise them in simple patterns; rows, columns and rectangles. The inverse also applies; beware of falsely indicating conceptual links by spurious alignment.

Optical Illusions

The physical and processing features of the perceptual mechanism can cause erroneous perceptions when presented with certain images.  This happens more easily when viewing graphic images rather than natural views.  An example immediately relevant to interface design is the effect produced by the high contrast grid shown below.

Illusion - Extra Dots

This is a still image, the shimmering dots appearing at the crossing points in the grid have been produced by your eye and brain processing the image.

Significance for interface design

High contrast grids should usually be avoided in interface layouts.

There are many other optical illusions of this sort that distort perception or introduce artefacts into the visual field.  Generally they are to be avoided.  This may be a particular issue when the display is generated automatically (e.g. data visualisation or adaptive design) and an unexpected pattern may result.

Further Reading

The foregoing was merely intended to indicate some of the detailed design issues that must be confronted in the visual design of an interface.  When working on anything other than the simplest project the interaction designer should expect to work with a graphic designer who can properly address visual design issues of corporate identity and branding, and the appropriate overall visual aesthetic of the product.  This may involve working directly with a graphic designer, or making use of a design style guide previously prepared.  Detail of layout, typography, colour pallet and image selection require a sophisticated aesthetic appreciation and knowledge of technical detail that is usually only acquired through intensive training.

For a fuller guide to visual design on the web see the section on visual design in  Patrick Lynch and Sarah Horton’s Web Style Guide, 3rd Edition.

For a technical but accessible introduction to visual perception see Peter Kaiser’s ‘The Joy of Visual Perception: A Web Book’.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s