Digital Attention Review!

So, in the last article we discussed some of the models that govern the way digital persuasion works and how we can make use of these techniques while designing our websites, crafting our web copy and creating the user experience.

Humans are emotional beings, and they make decisions based on emotions and then justify it with logic. That is why it is very important to feed both parts of their decision-making process.

In this article, we will be reviewing how attention works and what makes us read the way we read and how can we leverage this information to design experiences that will produce the desired result.

Studies have shown that we tend to focus on the top left corner of the website more than any other part. Gutenberg’s diagram for attention span for homepage design gives us an idea how we should place our content.

The area marked by ‘1’ is the primary optical area and has our attention more than anything else. The pattern in which we skim through the page follows a diagonal from top-left to bottom right towards the area marked by ‘4’. Since, this is the area that is paid attention at last, we should be placing our call to attention here, so that users are more likely to take action and click on the CTA button.

More studies have been done and users reading patterns have been recorded using eye-tracking technology. This has given more useful information for us to design our pages in a way so that we make the most out of their attention on our landing page. There are three main patterns in which users usually consume content on the web:

1.     F-pattern: Users tend to go through first few lines in a horizontal manner and then switch to skimming through the page in a vertical fashion, giving rise to a F-shaped reading pattern. How can you leverage this information? Try to follow this pattern and start experimenting with it. This is also based on the fact that we tend to start reading from the left side of the margin, so place navigation buttons either on the left or at the top.

2.     Layer-cake Pattern: When the users find the content/topic interesting, they start exploring the horizontal lines quickly and find more things that strike their interest.

3.     Spotted Pattern: This pattern is often observed when the users are only looking for the main ideas on the webpage.

So, how do you figure out which pattern users are more accustomed to reading in? It depends on what’s the goal of the user. Are they on your website to buy something, or read something that they might be interested in or are they looking for main ideas and not really the details or other factors? Depending upon their goal they use of these patterns. So, if you want to figure out how to place your content so that it matches one of these reading patterns, start by figuring out the goal of your webpage and why people visit that page. Once you’ve done that, you’re good to design the webpage using one of these patterns.

While we talk about user attention and their decision making, one law that needs to be talked about is the ‘Fitts’ Law’. It states that, ‘It is easier to hit larger targets that are closer to you than smaller targets that are farther away from you.’ This is an essential principle when it comes to designing user experience.

This is applicable in how a keyboard is designed. Think how some keys on the keyboard (spacebar, enter, shift, backspace) are made larger and closer to fingers than other keys like (printsc, numlock, delete etc), which are made smaller and away from the fingers. This is because the usability of the first set of keys is way more than the latter set of keys. All of this makes sure that user have ease and comfort while using the keyboard, as they are more likely to hit larger targets closer to them than smaller targets farther away from them.

While designing webpages, we can use this law for our advantage. We can make the call-to-action button, if it’s smaller and place it closer to the place where we ask the user to take action. On the other hand, we can make other things smaller, which does not require their attention or even eliminate them to reduce unnecessary cognitive load.

While I was going through the courses at CXL Institute, I also came across the topic of cognitive overload and how that impacts the user attention and retention. Cognitive overload is defined as the difficulty in processing of information by the user due to various factors: difficulty of the material, overloaded webpage with unnecessary information, bad presentation styles, bad UX/UI design and various other reasons. It dramatically drops the user attention and affects the way users interact with our website. Based on the various reasons of cognitive overload, it has been divided into three main categories:

1.     Intrinsic Cognitive Overload: This kind of cognitive overload is caused by the complexity of information at hand. The load depends on the learner and how complex is the information perceived by the user. For example, if we have blogposts about building a rocket and building a bird house. The former is inherently a bit complex for normal audiences and the latter not so much.

This kind of cognitive overload is almost unavoidable but can surely be minimised by chunking information in various parts, organising it well so that it’s easier for the users to go through information.

2.     Extraneous Cognitive Load: This kind of load arises due to external reasons like bad presentations/speeches, webpage with so much of unnecessary information, bad UX/UI design, ineffective teaching, etc. We can overcome by making sure the content is presented in a way that it’s easier for the users to go through and digest.

Here are some ways to tackle this cognitive overload: use readable fonts, simple vocabulary, reduce the unnecessary distractions on the webpage that doesn’t help the main goal, etc.

3.     Germane Cognitive Load: This kind of cognitive overload arises when we try to make sense of new information and try to relate it to the old information. This is, however, recommended when learning new things as it allows you to work your brain to make associations to the things that you already know and shift things to the long-term memory.

So, by far we’ve discussed how our attention is affected by various factors and how we can deal with them and use this information to create web pages that will lead our users to complete our desired goal. Do make sure to apply these learnings in your web design and see the improved results for yourself.