Having recently read The Web Psych’s “Webs Of Influence: The Psychology of Online Persuasion”, I was interested to learn more about the developing new field of Neuroesthetics which essentially seeks to understand how beauty stimulates the brain and how the brain responds to different components of a piece of artwork.
Since CRO/UX experts are constantly looking for unique, effective ways of attracting users’ attention online, I was interested to read how the latest research in Neuroesthetics can be quite suitably applied to the layout of a web page. For example, in the book it’s explained how humans have an innate tendency to subconsciously respond to the tilt of another person’s head or the direction of someone’s gaze, and that this principle can be used as a way of directing users’ attention to specific areas of a landing page to add extra emphasis.
For a CRO geek like me, the notion that our brains are hard-wired to respond to visual stimuli in a certain way is pretty damn fascinating. To continue this theme I wanted to highlight a couple of additional examples of how our brains automatically respond to visual cues and how we might be able to apply these to the design of a web page.
Firstly, the human brain is remarkably good at detecting movement: the visual cortex comprises hundreds of cells specifically tuned to the direction and speed of moving stimuli which are activated without conscious awareness. This makes it virtually impossible for us to ignore the presence of movement in our surroundings since there is little we can do to override such an instantaneous response. Ever been so captivated by the tweets running along the bottom of the TV screen that you ended up completely ignoring the programme you were watching?
The fact we can identify the presence of movement so readily is likely to have evolved from an early survival technique i.e. recognising another member of the same species. Even short sighted individuals - such as myself - have the ability to recognise someone familiar from a distance simply by the way that they walk/move. This is pretty impressive given that I can barely read the words on the screen in front of me without my glasses.
Homepage sliders often serve little or no purpose except for wasting valuable time on site, leading to frustration and, ‘uh oh they’ve hit the back button’.
So, if you want to draw attention to a specific area of a web page try adding movement. However, make sure animation is subtle and short lived to ensure that it does not become distracting. And there has to be a purpose – often sliders can be found on a homepage, just because it’s trendy. They often serve little or no purpose except for wasting valuable time on site, leading to frustration and, uh oh they’ve hit the back button.
Given that we use considerable cognitive resources during instant detection of movement, too much animation can become cognitively demanding and may distract the user from other key areas. Take a look at the Ben & Jerry’s homepage for a good example of a site that utilises animation to highlight areas of importance in a fun and smart way.
As well as having cells in our brains dedicated to the detection of movement in our visual field, it has also been demonstrated that we have cells which respond more forcefully to contrasting colours than smooth gradients of luminance. In a Nobel Prize winning experiment, Hubel and Weisel identified the presence of orientation-specific brain cells (or, simple cells) which are scattered throughout the many layers of the visual cortex and respond only to the presence of a vertical edge.
Whilst it seems strange to waste the limited neural space in our brains with cells which are so choosy in terms of what they re-act to, these cells are likely to have evolved as a way to quickly identify areas of significance (or in other words, predators). Ultimately, our brains have evolved to detect areas of importance as quickly as possible. In doing this we pick out areas of high contrast (edges) and discard more ambiguous information.
Whether we like it or not, the regions of contrast in our visual field require more attention from our brains than areas of softer, blended colours. Therefore, if you want to highlight something on a page, use contrasting colours such as red and green, blue and yellow, or black and white, together with strong lines to grab the users’ attention. The nature of these colours will mean that the viewer will be forced to use more brain cells and they won’t be able to help but notice! However, like with movement, make sure your use of clashing colours is very subtle. Keep in mind that such techniques should only be used to gently direct viewers’ attention to certain information on the page and that if used erroneously may actually take emphasis away from other vital areas that lead to a conversion.
* Anyone confused by the reference in this blog post title need listen to this