According to Curt Cloninger, "Usability experts are from Mars, graphic designers are from Venus"

Since the early days of web design and development, the enduring perception has lingered of a clash between two incompatible approaches.

According to the somewhat exaggerated popular concept of brain lateralisation, these might correspond to 'right brain' thinking (represented by art and aesthetics) and 'left brain' thinking (represented by engineering or usability).

This, of course, is simply not the case. Any website, (or any other form of communication) needs a combination of them all to be successful, and as the discipline of user experience (UX) has matured over the past few years this perceived divide has begun to contract.

Today, UX professionals are using the basic tools of visual communication to provide clearer, more intuitive user journeys.

Visual communication can be thought of in terms of two intertwined parts: ‘personality’ and visual organisation. The personality of a website or other customer touchpoint is driven by its look and feel: colours, shapes, images, patterns, interactive behaviours – that drive the emotional response to what the audience experiences.

But an equally important part of the user experience is less immediately obvious. The usability of a page, whether printed or displayed on-screen, relies on an intuitive visual organisation, a coherent visual narrative that leads the user through a logical progression of elements on the page.

Using tried and trusted rules of visual design we can tell a story that will guide the user to our desired end point, whatever that may be: a ‘buy now’ button, further instruction, request for donation or any other call-to-action.

Father Ted Crilly:

These...are small. But the ones out there...are far away. 

A sizeable proportion of our visual processing is solely concerned with identifying similarities and differences (60% of our cortex is devoted to vision).

These similarities and differences let us not only differentiate between objects, but also give them meaning. For instance, a difference in colour implies two objects (or different parts of the same object).

A difference in scale may suggest that one object is further away than the other, especially if this is reinforced by a difference in texture (blurriness or haziness) – or colour (objects that are further away tend to appear ‘bluer’ than those in the foreground).

Once we gain an understanding of the relationships between elements we can put together the whole story and make sense of what we’re seeing. Throw in a few other processing tricks that the brain performs and we have a visual system that allows us to navigate the world.

This identification process is accelerated by the brain’s inbuilt tendency to group information visually. Knowledge of the whole determines what we see.

Exactly how we group information can be described in a set of rules or observations first described by the Gestalt school of psychologists who were studying visual perception at the turn of the last century.

There are four properties of perception:

  • Emergence.
  • Reification.
  • Multistability.
  • Invariance.

Emergence describes how we tend to see patterns that describe the whole rather than building up a picture from individual details.

There is a famous picture that demonstrates this – can you see the Dalmation dog in the pattern of black and white below? In this case the ‘individual details’ don’t even really exist, only a seemingly random scattering of spots,  and yet the dog exists in our perception.

Econsultancy blog image

Reification is our seeming ability to create information from nothing in order to create a ‘whole’ that makes sense to us.

A common example of this is the illusory triangle shown below. There is no white triangle except in our perception. 

Econsultancy blog 2

Multistability describes our ability to switch between two (or more) alternative interpretations of a depicted object, as in the famous ‘vase or two faces’ optical illusion or the animation of a ballet dancer who can appear to us to be rotating clockwise or counter-clockwise.

Invariance, finally, is the property of perception that allows us to recognize an object as being the same even when it is viewed from different angles, stretched or deformed.

As well as these four properties, the Gestalt psychologists also defined a number of ‘principles’, which govern exactly how we group things visually.

They are collectively known as the ‘principles of perception’ or ‘gestalt laws of grouping’, and it is these principles which we can use to manipulate our audience’s perception to create our visual narratives. 

Among the most common of these principles are:

Proximity: objects that are close together will be perceived as belonging together while those further apart will be seen as separate.  

See how the squares below form a single block, four columns or two columns depending on small adjustments in spacing.

image 3 

Similarity: objects that share a common characteristic, e.g. colour, shape, size, orientation, will be seen as belonging to a group.

image 4

Continuance. We want to see continuation, so we see separate but aligned elements as part of a continuous single element.

In the figure below, for example, we tend to see a single cross rather than two overlapping  ‘sticks’. 

image 5

Closure. We see things as whole even when they are not. So our visual perception ‘fills in the blanks’ and combines separate elements into an entire figure (there’s our white triangle again!). 

Image 6

Enclosure and Connectedness. Objects that are contained within a larger visual element will be seen as belonging together, as will objects that are explicitly connected.

Image 7 

These, and the other principles, all rely on our apparent need to order our experiences into patterns that are as simple as possible. So, how can we use these principles, and that underlying need for patterns, to create clear, easy to understand visual narratives?

John Updike:

A narrative is like a room on whose walls a number of false doors have been painted; while within the narrative we have many apparent choices of exit, but when the author leads us to one particular door we know it is the right one because it opens.

The principles of perception enable us to understand the psychology behind our grouping of visual information. But that’s not really enough if we want to communicate a particular message.

We need to know how to use these visual relationships to our advantage. We need to know what makes things different.

We can group distinct visual characteristics into basic five main groups: colour, texture, shape, direction or alignment and size. 

image 8

Introducing variations into one or more of these categories creates visual contrast.

And the more contrast between two objects the more likely they will be perceived as distinct and unrelated. So, how do we use this ability to visually distinguish objects to create visual relationships?

A good visual narrative arranges elements on a page in an easily understood order of importance, from the primary focus of attention that first attracts the viewer’s eye through each subsequent focal point in the hierarchy.

This hierarchy forms the narrative, the pattern of movement (or attention), through the story. We can use the principles of perception to give visual weight to our page elements, establishing the pattern of movement and conveying both the direction and the order in which the various elements should be read.

Visually dominant features (those with the heaviest ‘weight’) tend to be noticed most. They are the centre of interest in the layout and usually mark where the story begins, or where we want to strongly direct our audience’s attention at key points in their journey.

Large red type, for instance, will contrast strongly with a white background and will grab attention first, much more than pale grey text, or even a picture of a kitten… even though a picture of a kitten might hold our attention longer because it’s a detailed (and cute) image.

Likewise, slanted text or large text or text enclosed in a ‘call-out’ box will also stand out from standard body text and will create focal points within the flow of the narrative, as will images, strong shapes and areas of ‘white-space’.

In the illustration below, it should be easy to see which of the two layouts is likely to be easier to read and understand.

The reason one seems more intuitive is because we have used the gestalt principles to group and differentiate elements, and visual weight to create a hierarchy of importance. Together, they guide the user through the ‘story’ of the page.

A balanced hierarchy like the one on the left provides a clear path for recognising and understanding information, helping unify the various elements into a cohesive whole. Elements stop competing for attention and everything exists in an appropriate place.

image 9

And that, in a nutshell, is visual narrative, the key to creating clear, effective and usable designs.

Guided by the interaction of the page’s elements, the user is taken on a simple, unambiguous journey through the page from its obvious beginning to its clearly-defined end.

And you can’t ask for much more than that.

Jon Dixon

Published 16 October, 2013 by Jon Dixon

Jon Dixon is Senior Interaction Designer at Bunnyfoot, principal sponsors of the UXUK Awards, and a contributor to Econsultancy. You can connect with Jon on Google Plus. 

1 more post from this author

Comments (0)

Save or Cancel

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.