Time to read: 15 min

Managing User Attention in Interface Design

Managing User Attention in Interface Design

In the realm of interface design, user attention is as prized as oil in the Middle East. Faced with choices between complex gradients and hand-drawn elements, animation and minimalism, or perhaps a combination of all, what should designers opt for to keep a user's attention on their interface?
Together with Svetlana Motorkina, Head of Design at Friflex, we explore the laws governing user attention.

Understanding Attention

Attention is the concentration of sensory organs on an object, process, or piece of information at a given moment. It can be voluntary or involuntary.

Involuntary attention occurs when we are not trying hard to focus on something. For example, a bright banner on an interface catches our eye automatically.

Voluntary attention is activated when we consciously focus on an object, process, or information, like when reading a book in a library amidst noise, movement, and vivid book cover — our brain chooses to ignore these stimuli.

The goal for digital product interfaces is not only to capture but also to retain user attention. Ideally, users should navigate the app predictively, moving seamlessly between screens, finding buttons easily, and not missing important information. But how can this be achieved?

The Laws of Attention

Fortunately, scientists have been studying attention for years and have formulated numerous theories, laws, and principles on how it functions. These insights may help you.

The Zeigarnik Effect

Have you noticed that unfinished tasks are easier to remember than completed ones? This phenomenon, known as the Zeigarnik Effect, was identified by Soviet psychologist Bluma Zeigarnik. She found that people better remember interrupted or incomplete tasks because the emotional tension arising during the task lacks resolution, imprinting the task more firmly in memory.

In digital products, the Zeigarnik Effect is often employed on checkout pages, when designers are breaking down the process into steps to motivate users to complete the action.

Hick’s Law

British psychologist Edmund Hick, along with his colleague Ray Hyman, explored how decision-making time varies with the number of choices available. This research led to Hick’s Law, stating that more choices—be it sections, fields, or buttons—require more time for decision-making.

For example, organizing cities into alphabetical groups for a user looking for the nearest store simplifies and speeds up the decision process compared to a chaotic display.

Fitts's Law

Ever noticed how large and conspicuous is usually an ‘Add to Cart’ button? This application of Fitts's Law, formulated by American psychologist Paul Fitts, highlights that the time to reach a target (like a button) depends on its size and distance.

Simply put, the more noticeable and larger an element, the easier it is to interact with, whether clicking, swiping, or grabbing. The closer the element, the faster the interaction can occur.

Jakob Nielsen’s Law

When developers asked usability ‘king’ Jakob Nielsen for the main rule of good user experience, he famously replied, ‘You are not the users. You are too smart.’

Nielsen’s Law emphasizes that familiarity breeds liking. User expectations from your digital product will be based on their experiences with other digital products, so adhering to standard patterns is often wise.

For instance, users expect to find an image, price, characteristics, options, and an ‘Add to Cart’ button on a product card in an app.

The Von Restorff Effect

In the 1930s, psychologist Hedwig von Restorff researched how the structure of material affects its memorability. She found that items differing from their surroundings are more likely to be remembered—a principle applied in interface design as the Von Restorff or isolation effect.

The effects and laws by von Restorff, Zeigarnik, Hick, Fitts, and Nielsen are just a few guidelines that help highlight important elements, ease information perception, and enhance user confidence. In our next article, we will discuss how aesthetics, implication, and the Gutenberg Diagram work.

If you have questions or would like to discuss your project, write to us. We will help find the right solution.


Share:

Logo
panda
Any ideas? Let`s chat! Start a project