Users’ attention is nowadays a precious resource and getting it is one of the most challenging objectives of UX / UI design and marketing. The scarcity of this resource is due to the fact that, unlike what happened in the past, today you do not actively choose what to see but you are literally bombarded by a myriad of information that flows through each channel, including digital, of which only a small part is of our actual interest.
To extricate itself in the chaos of information, the human brain adopts a series of cognitive shortcuts to minimize the effort of selecting and acquiring what is really interesting. Even the app, which in theory have a somewhat different and privileged condition (the user has already decided to download that specific app and is naturally more prepared to give it some attention), have to deal with this problem not to lose the control of the user’s attention.
A good UI / UX Designer will therefore have to know these shortcuts and use some tricks of the trade. Let’s see what …
Eyes: The mirror of the soul!
A good interface allows you to guide users on an emotional journey that will take them, in no time at all, to perform a desired action without making them lose or confuse. For example, a series of experiments on eye tracking has shown that the human brain “scans” a screen before reading its contents and that it does so by following patterns, called patterns. These models reflect the eye movement of users in the first seconds of interaction with a screen. But what are these models? And what do they say? According to the most important study on the subject, the user who displays screens with a lot of text will tend to scan the content vertically along the left side, looking for signs that capture his attention. When an object captures its interest, the user returns to read horizontally, hence the name F-Pattern, because the eyes travel the page drawing an imaginary F along the screen.
Vice versa, in the case of pages with few textual content our brain behaves differently: first draw a horizontal line of sight at the top of the page and as soon as you reach the right margin it goes down diagonally until you reach the opposite end repeating a horizontal search in bottom of the page. In this case, the user’s eyes draw a Z-shaped trajectory, hence the “Z” pattern (Z-Pattern). This visual movement allows him to get a quick idea of the contents of the page and their weight with the minimum possible effort.
Design Measures
Set up a visual hierarchy
The visual hierarchy is the way to manage and visually organize the content of the page in the most natural way possible for human perception. The main objective is to allow users to immediately understand the level of importance of each individual content.
A solid visual hierarchy is the basis of a successful digital product. It helps to organize the elements of the user interface effectively so that the content is easy to understand and enjoyable to see. The presentation of visual elements has a great impact on the user experience: if the components are organized wisely, users navigate and interact with a product without effort and enjoy this process.
A clear main navigation
All the eye scan templates mentioned above have a common feature: they both start at the top of the web page or app screen. This is the fundamental reason why the design of the website header is considered an essential point not only by UI / UX designers, but also by copywriters and marketers.
But be careful, for this reason the header of a screen should never be overloaded with information: too much information makes focusing more difficult. Attempting to put everything at the top of the page can turn the layout into a real chaos.
Do not forget the empty space
The empty space is the area of the screen that is left empty and free of contents, not only around objects but also between and within them. It is a space that serves the eye to “breathe” and which defines the limits of objects, creates the necessary bonds between them according to the principles of Gestalt and builds effective visual architectures. In the design of the user interfaces, the negative space (i.e. “empty”) is a fundamental factor for the high navigability of the interface: without sufficient air, the elements of the layout are not displayed correctly.
Verify that the CTA is displayed correctly
The vast majority of screens have one or more calls to action (called CTA: call to action) that users must complete: in an Email screen, it will be the point to plug in to write a new email, for example; on Facebook, it will be the area in which to write a new post and so on. The elements that contain the call to action – typically buttons or data entry forms – should be displayed instantly and effortlessly, to allow users to quickly understand what actions they can perform on a given screen.
Numbers, faces, shapes … not words!
Among the many techniques to attract attention the UX / UI designers prefer some because they are more effective: one of these is the insertion of numbers, faces and shapes that break the homogeneity of the page / screen. These elements help the user to interpret the space when it is devoid of distinctive signs, that is when there is a lot of dense text or generally when there is a visual homogeneity situation that pushes the brain to adopt its own analysis strategy space that is effective but also not very demanding.
Eye tracking studies have shown that in the process of scanning Web pages, numbers, in congruent forms and faces often capture the user’s eye and attract the fixation of his gaze. This is why they are a useful means of managing the user’s attention and helping them to get to the end of the content that we want them to enjoy.
Conclusions
In conclusion, creating a good user interface also means knowing how to guide users invisibly by positioning the elements that you want to show according to the right logic and using the appropriate techniques.
Our work as UX / UI designer is by no means obvious: there are hundreds of little and big notions that we need to know, not only operational but also linked to neuroscience, that is, to the functioning of the human brain in the face of certain situations.