Landing Page Optimisation: Attention Shifting Patterns

This article will take around 7m 02s to read according to Read-o-Meter.

What The Experts Don’t Want You To Know – Find The White Rabbit

bunny-big-carrotAttention shift refers to the directing of attention to a specific point in space, with the subject processing the information in that space more efficiently. Due to the limited resources available in the human brain, a heightened inhibition to shift their attention towards other visual stimuli is also a common factor observed in trials.

While there is a degree of neural overlap, separate mechanisms can be observed for exogenous, endogenous, and emotional responses to external stimuli.

We can use this knowledge to our advantage when designing our landing pages in order to focus the visitors’ attention towards a specific point on the page, such as a Call To Action (CTA), a menu, or an email subscription form.

Exogenous

Exogenous attention shift occurs when the allocation of resources is a result of low-level physical properties of a stimulus being observed by the subject. These properties can include colour, shape, size or intensity. The shift in attention occurs without the subject being aware of, or making a conscious decision, to do so. This is also known as a bottom-up attention process.

Endogenous

In contrast, endogenous attention shift occurs as a result of a top-down process, in which the allocation of resources is the result of a conscious decision, usually after being instructed to do so. This process is driven by the subject’s current expectations, goals, intentions or beliefs.

Emotional

In addition to both exogenous and endogenous attention shifting mechanisms, there is a large body of research, which suggests that an important feature in the selection process is driven by emotional relevance.

Unlike both exogenous and endogenous mechanisms, this process operates without either subconscious awareness of the stimuli’s properties or a conscious decision as a result of instruction, respectively.

Research suggests that it is modulated by existing emotional traits in the subject’s internal affective state. This can include precursors such as anxiety, fear, love, empathy, desire, or a penchant for pictures of cute little bunnies…

rabbit-002rabbit-001rabbit-003rabbit-004

“Various emotional stimuli such as angry facial expressions, snakes, babies or emotionally arousing words have been found to be processed preferentially and to modulate attention brain mechanisms”
(Brosch, T., et al)

The Posner Spatial Cueing Task (named after it’s creator Michael Posner) has been used to measure and assess an individual’s attention shifting patterns.

The subject is placed in front of a monitor with two rectangles, one on each side of their field of vision. Between the two fields is a cross (+), indicating a point of fixation from which they are told to not look away from.

Cute bunny wearing glassesDuring the Posner Spatial Cueing Task, a cue is then presented on the screen (an arrow pointing in the direction of one of the boxes), then after a brief period of time the cue is removed and a visual stimulus is placed in one of the boxes. This usually takes place between 200-300ms. The subject is instructed to respond to the cue by pressing a button indicating the cued box.

Three types of trials are used:

  • Valid trials – in which the stimulus is presented in the cued box.
  • Invalid trials – in which the stimulus is presented in the opposite box to the one that is cued.
  • Neutral trials – in which either no cue, or a neutral cue, such as an arrow pointing in both directions, is presented, and the stimulus can appear in either box.

exogenous-attention-cues

 

endogenous-attention-cues

During his initial trials Posner used a ratio of around 8:2 (valid:invalid) trials, with neutral trials being added occasionally (a negligible amount for our purposes).

After a while, subjects respond to the initial cue, regardless of where the actual stimulus is presented – as would be expected, given that more times than not (80% of the time) they would be correct to do so – but when the stimulus is presented, their attention shifts to that area. This causes the subject to use more resources, and thus a delayed response in finding the stimulus.

This is an interesting experiment, because we can apply this to our web and app development front end layouts. The user, assuming they have been using apps for at least a small period of time, will assume certain elements to be in certain places due to ‘cues’ from previous experiences.

Take, for example, the designs of these three popular apps:

PayPal Home Screen Mobile Screenshot

Skype Home Screen Mobile Screenshot

GMail Home Screen Mobile Screenshot

PayPal Menu Screen Mobile Screenshot

Skype Menu Screen Mobile Screenshot

GMail Menu Screen Mobile Screenshot


Aside from telling you that I need to clear out my inboxes more frequently and that I probably eat too much pizza, what can we learn from these layouts?

  1. The latest and most relevant information is displayed chronologically on the main page.
  2. The menu button is in the top left corner and in hamburger style.
  3. The menu slides out from the left and displays options in order of importance to the user.

This is important, because the user assumes from valid subconscious endogenous cues in these frequently used apps where to find what they are looking for.

Remember that we only have a few seconds for the user to find what it is they’re looking for before they become frustrated or abandon the process altogether.

Placing your menu along the bottom of the screen, for example, means that when the user lands on your app page their attention is immediately drawn to the top left looking for the menu (as it should be). After realising that it’s not there, they then have to use precious brain processing power to determine where the menu is and how it works. This is subconsciously an uneasy experience and can take some time for the brain to process, causing distress.

If you should so choose to place your menu elsewhere, then it is essential that you use valid exogenous cues to direct the user to what it is they are looking for, as in the following examples of popular apps:

twitter-home-screen

alarms-home-screen

You will notice that in these two applications, despite the menu not being where it is expected to be, that there are very clear and valid exogenous cues as to where the menu actually is. In both cases that being an extreme contrast in colour and the presentation of large ‘descriptive’ icons.

Using the Posner Spatial Cueing theory, we can help our users to find what they are looking for with a minimal amount of effort – something they will be grateful for, even if they don’t consciously recognise it.

That’s the basics out of the way – now it’s time to get a little more in-depth…

Tobias Brosch, Gilles Pourtois, David Sander and Patrik Vuilleumier, expanded upon the Posner Spatial Cueing task. In their paper Additive effects of emotional, endogenous, and exogenous attention: Behavioral and electro-physiological evidence published in Neuropsychologia (2011). They included not just exogenous and endogenous stimuli, but also emotional stimuli.

The abstract of their paper states that: “multiple separate attention mechanisms can operate simultaneously to yield a rapid and efficient visual processing of various classes of potentially relevant stimuli.”

This is where both the experimental procedure and results start to get a bit more interesting.

Attention Shift-2

I won’t bore you with endless graphics to represent each trial. The figure above represents the basic experimental process for a valid trial. The endogenous, exogenous and emotional cues all point to the final stimulus.

This trial is repeated, replacing the different valid cues to be invalid cues, and thus resulting in an invalid trial.

The overall Analysis of Variance (ANOVA) showed that there were faster responses in identifying the correct stimulus in all trials where the emotional cue (in this case the picture of a cute little bunny wearing glasses) was presented.

In emotionally valid trials the test subjects responses were 5ms faster than in emotionally invalid trials – 400ms vs. 405ms.

This was to be expected and it may seem a little bit boring and irrelevant. What’s 5ms here or there?

What is interesting is how the three different attention manipulation methods were additive, as shown in the graph below.

chart

The decrease in response times is linear and can be described by the function:

f(1, 32) = 22.49, p < .001

From this, we can then conclude that an emotional cue will always supercede any other cues in terms of grabbing a visitor’s attention. And, that as we add other cues of any type the visitor’s response time increases exponentially.

Rather than pertaining to the position of a menu as in the previous example (rather dull), we can apply this knowledge to the design of our landing pages, copy, and calls to action, as we shall see in the next post.


References

  • Marois, R., Ivanoff, J. (2005). Capacity limits of information processing in the brain. Trends in Cognitive Sciences 9, 296–305.
  • Gazzaniga, M., Ivry, R., Mangun, G. (2002). Cognitive Neuroscience: The Biology of the Mind. W.W. Norton & Company, 247–252.
  • Theeuwes, J. (1994). Endogenous and exogenous control of visual selection. Perception, 429-440.
  • Compton, R. J. (2003). The interface between emotion and attention: A review of evidence from psychology and neuroscience. Behavioral and Cognitive Neuroscience Reviews 2, 115–129.
  • Vuilleumier, P., Brosch, T. (2009). Interactions of emotion and attention. The cognitive neurosciences IV, 925–934.
  • Brosch, T., et al. (2011). Additive effects of emotional, endogenous, and exogenous attention: Behavioral and electro-physiological evidence. Neuropsychologia.
  • Posner M. I., Snyder C. R., Davidson B. J. (1980). Attention and the detection of signals. Journal of Experimental Psychology 109, 160-174.
  • How Many Seconds Does Your Website Have to Capture User Attention?, EyeQuant (2013). http://blog.eyequant.com/blog/2013/04/08/how-many-seconds-does-your-website-have-to-capture-user-attention#block-139c583b10bf8458f26b [Accessed 1 Feb 2016].

Image Credits

learn more about

What We Do