How to Design for the Brain's Strengths

What is the brain great at?

Have a look at this picture.. Where are the lions?

Your brain has just completed an extremely complex task that would stretch some of the most powerful computers. You just analysed a complex image, identified recognisable shapes and matched them against models stored in your brain, and summarised the results.

How about this one? How would you stalk these impala?

You just did some more extremely high-level computations. Not only did you identify, position and enumerate the impala, you also projected where their eyes might be pointing, judged which of them might be moving, and created a mental map of relative risk. You did all that in a few moments - WOW!

What does this tell us about the brain's capabilities?

Matching shapes

The minds of higher order animals are highly skilled at recognising things by their shape, or outline. We have an amazing ability to associate shapes with their meanings very quickly. This can be helpful for spotting your quarry when hunting in thick vegetation or in poor light. We're more likely to use this skill when associating the shape of an icon with 'I can make a printed version of this page if I move my mouse and click on that', or to decide to ignore a banner ad based on its shape.

Seeing patterns

Our brains are great at spotting associations between objects, based on similarities, alignment and grouping. This is helpful for working out where to move in order to separate an animal from its herd, or for telling which strangers belong to which tribes. Today, we're more likely to use this ability to find the navigation on a new site, or to tell at a glance how many unopened emails we have.

Focusing on the important; ignoring the unimportant

When we match shapes and patterns, we quickly sort what to focus on from what to ignore. This is a talent we share with all natural predators. If the brain loses its ability to filter out noise, we go mad. We use this skill every time we look at a web page, by scanning for clues that help us get nearer our goal.

High-speed problem solving

When faced with new problems, we're great at working out new ways of addressing them, even by abstracting patterns that have worked for different problems. Our minds are tuned for computing available information, and quickly choosing a most likely solution. (This capacity is one of the things that distinguishes the intelligence of apes from monkeys.)

How to design to the brain's strengths

Our brains have evolved over millions of years to be extremely good at these kinds of tasks, learnt in wild situations where survival is critical. However we've only had a tiny amount of time to learn how to negotiate an online browsing situation. How do we respond when faced with an unfamiliar web site? (Remember, nearly all web sites are unfamiliar) That's right - we use those same advanced mental skills we've honed for millions of years, and which are hard-wired into our minds.

Web designers can't do much about the user's minds, but understanding the way the mind works, we can do a lot to make our pages easier to interact with, to maximise the user's chance of success.

Matching shapes

We can use the power of shape-recognition to convey desired meanings. We do this by applying recognisable signs where appropriate, using tone, colour and contrast to help direct the user's eye toward the most important elements.

Seeing patterns

We can take advantage of the user's pattern-matching ability, by using techniques of alignment, proximity, hierarchy and containment to create correct visual messages.

One of the things we do when scanning is quickly to group elements, based on their proximity and patterns. This is easier when different elements are clearly distinguishable. Elements are more distinguishable when they:

• Have significant tonal and/or colour contrast compared to other elements
• Have white space around them (helps define a shape)
• Are big enough

Focusing on the important; ignoring the unimportant

When you see a new web page, you use your hunter's skills to scan for what's relevant to your task. You use mental rules to filter out what is less important. This saves you time and mental energy. You've developed the mental rules mainly from your web-browsing experience.

When designing a page, we can help users be successful by making the most useful elements more noticeable, and making less important elements recede. We can make pages easily scannable, by using mechanics like whitespace, colour and contrast. We can make use of design conventions, putting mundane elements in conventional places and giving them conventional styles, which helps the user instantly identify them and their purpose.

High-speed problem solving

We can help the user quickly come up with correct interpretations to visual problems, by accurately identifying different elements and promoting the things the user is most likely to need. Useful techniques include:

• Clear headings and labels
• Clear hyperlinks
• Clearly differentiating form controls, such as buttons and input fields
• Highlighting key words or phrases in text