10 ways to design for the human brain

designing for the human brain

Last week I attended a brilliant day of training by Jon Dixon at Bunnyfoot in London.The day was about applying key principles to design for people’s natural thinking processes. These principles work across personas and demographics.

A lot was covered in a short space of time and I have taken my top ten points from the day to share.

1. Faces attract and guide attention

Over years of evolution, the brain is trained to pick out faces. Eye tracking on the below image shows heat spots on an advert, focusing on the woman’s face, especially around the eyes. Now look at the image on the right. The only change is the direction that the eyes are looking. The user follows the path of where the person in the picture is looking. Correct placement of copy next to an image of a person looking at it can help nudge the user to read what you want them to.

eye tracking example

source: http://www.1stwebdesigner.com/images-on-web-design-usability-guide/

2. People decide quickly and then validate that decision

Look at the image below and find the odd one out…

leaves with an odd one

The brain is very good at deciding which things it really needs to pay attention to. The usual process of the above is to scan and quickly find the odd leaf. You may be looking for a slight colour change, or for a shape change or a size difference. Once spotted, you validate this hypothesis by going over the options to check that your quick decision is correct. The decision is actually made very quickly. The things that stand out are called salient cues and guide you through decision making. Working with these cues creates a better user experience.

Take a simple form with some required fields. Usability testing has shown that adding an asterisk to indicate a required field is the best solution. People understand this at first glance. If all fields but one are compulsory, adding “(optional)” next to the odd one out will not get read because people are trained to pick out the asterisk.

3. You only consciously process a fraction of the information that enters through your senses

A lot enters your brain through your senses. The processing power of the brain is incredible, filtering out anything that isn’t needed in the conscious part. The table below shows the bits per second for the five senses. In computing terms a bit is the smallest piece of information- it is a 1 or a 0, a binary value. It is the same here- the smallest possible piece of information. The most interesting part is the relationship between the amount of data that comes in and the amount that is consciously processed.

bits of information that the brain processes per second

4. Design calls to action relative to importance

When designing buttons and interactions, understand the potential actions and the consequences.

Take this example…

There is a light in front of you. When it illuminates, you have to press a button.


There are four potential outcomes…

The light turns on

  • You press the button – correct identification and execution – success
  • You don’t press the button – you miss

The light doesn’t turn on

  • You press the button and it is a false alarm
  • You don’t press the button – correct – rejection

Now you have to weigh up the risks.

Lets say the light is replaced with a fire. If you see a fire you want it to be easy to operate a fire extinguisher. If you detect the fire but can’t press the button then the fire could kill you. If you have a false alarm and release the extinguisher accidentally you will have to clean the floor. The risk of missing is much higher than operating on a false alarm. Make it easy to act at the expense of the potential of a false alarm.

The other side is something like a banking app where you want to transfer money. The risk of transferring money when you don’t want to is greater than not transferring the money. Make it harder to transfer while also making it harder to make a mistake and send the money when you don’t intend to.

Design around this.

5. You only see what you want to see

Have a look at this video- can you figure out how they have done this colour changing card trick?


Selective attention is when your mind focuses on one thing and everything around becomes invisible. Keep this in mind when designing. If something distracts your users on the page then they may not focus on the very thing that you want them to.

6. Two thumbs make up your focused vision

Looking at a person’s field of view, peripheral vision makes up a lot of it. When we focus, the clear, none peripheral vision makes up 3° – that is equivalent to two thumb widths at arms length. Remember this when designing for a screen.

7. Tell a story with your placement

Not all people read everything. A lot of people don’t read everything. People respond to stories; a beginning, a middle and an end. Web pages can be designed to follow a story pattern in the flow of the page. A clear opening line opens a story, a clear call to action at the bottom of the page closes it. If the eye follows an easy path from the top of the page to the bottom, rather than jumping all over, you are designing for a better experience.

In script writing, a key point is repeated three times so that the viewer remembers it. This can be done in web design to help people take away what you want them to remember.

8. Some activities require more brain power than others

The three different types of mental resource (below) require different mental load. ‘Visual’ requires more than ‘motor’ and ‘cognitive’ requires most of all.

Motor (least effort) – pressing buttons, moving the mouse etc.

Visual – See things- take them in.

Cognitive (most effort) – thinking, remembering, making decisions.

A good experience is the result of reducing all three but especially cognitive load.

The question often arises about whether to have a long page or a series of smaller pages which you have to click to navigate through. Scrolling is a motor skill- it takes less brain power and is less tiring than clicking through smaller screens where each click requires a cognitive process to think about what to do.

9. Six ways to persuade

Robert Cialdini writes about six main principles in “Yes!: 50 secrets from the science of persuasion” – we can learn from these as designers…

Reciprocity – If you give something to someone they are more likely to give something back.

Scarcity – The more exclusive something is the more desirable. The more specific the better. “This price until September 30th 10pm” is more effective than “this price until October” or just showing the price.

Authority – Ratings by trusted sources help. A few bad reviews add credibility and builds trust.

Commitment – “A foot in the door leads to more” – A small commitment such as signing someone up just using their email address is less of a step for the user but shows commitment, meaning that they are more likely to add other data in the future.

Social Proof – If a user thinks that others are doing the same thing then this increases their confidence and entices them to transact.

Likeability – if you can relate to something then you are more likely to want to interact – ” That picture looks just like me and my friends”

10. The eyes can trick the brain

Placement of objects can trick the brain into thinking something exists when it really doesn’t. Shapes on a page can distract from the overall flow or enhance the flow.  User testing and eye tracking can help to assess this.


Thanks Jon and Bunnyfoot for an excellent day!

A lot more was covered on the course. For more information and other courses…

Bunnyfoot training

Any questions or discussions, please leave a reply below. Thanks for reading.

You may also like...

1 Response

  1. Sivaprasad says:

    Excellent observations. I was actually reading Susan Weinschenk and her observations can supplement many of the points you have mentioned above. Anyway very nicely compiled.

Leave a Reply

Your email address will not be published. Required fields are marked *