One way to think about designing for
web users is to consider what the brain is good at, and to design to
take the best advantage of those 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