A new approach to web design based on the research into the central vision of humans

Hey, my name is Roman Makuev, I am a UX/UI designer and CEO in Neon Team, and in this article, I want to share some peculiar regularity and, in my view, a new approach to design, which is based on publicly available scientific studies into the central vision of people.

Not so long ago I began looking into the influence of central and peripheral vision on way information is perceived by people, and I found out some interesting data that later formed the basis for our designs and sites.

Web-design is an ever-evolving sphere, and despite the initial impression that all possible concepts and approaches have already been researched, design is still in constant search for new ideas.

According to general opinion, there are two main patterns of scanning information by users’ eyes when looking through a web-page: Z-pattern and F-pattern. They have been generally acknowledged.

Now, let’s go back to central vision

Experiments have shown that when scanning images and scenes a human eye focuses itself on the central part, while peripheral vision plays a secondary role in the perception of visual information. The further from the focus, the more blurred the data is.

Central vision is an essential part of human vision. It is used for reading, scanning images, faces, and for driving. Only something our eye is focused on do we see in details, in all its colors.

This can be seen by looking at the picture below and doing the following task

It is better to watch from a computer monitor or any device with a high screen resolution.

Focus on the plus symbol (+) in the very center of the line. If you look closely only at it, you will see letters «F» and «G» next to it. Possibly – «E» and «H» as well. As for the others, you most likely see them blurred or completely fail to see.

Let’s add one more picture, with a bigger script this time, it’s going to be just as difficult to see other letters.

And only on the last picture, where marginal letters are literally twice bigger than the central ones, are we able to read them, even if our eye is focused on the star.

If this data is located away from the center, it is non-existent for the brain. In the world overloaded with information, there is no use hoping that a visitor is going to scrutinize a site.

Central vision is responsible for detail recognition, but occupies a very limited part of vision (2 degrees). While peripheral vision is better at capturing movements and shapes.

On small pictures, our vision focuses on small patches of text, while on modern monitors with high definitions, significant volumes of information remain beyond the field of vision. We should also take into account the fact that pictures are as contrast as possible – black background and white letters, which implies that all letters are clearly seen.

Z and F eye movement patterns are too simplified and overlook the following important factors:

• On big screens, people tend to look through information vertically, not horizontally.
• The appearance of “clip thinking” brought about changes in the data perception, induced by such sites as TikTok, YouTube. The average attention span has shortened. Blocks of textual information are perceived worse, there is a need for shorter, more succinct wording. A modern user demands a more dynamic, visual and short content.
• The way a person studies a new site depends, to a large extent, on his previous experience in working with such sites. The appearance of such services as Webflow and Figma made it much easier to experiment with design, create new trends, styles, sites, which has not been possible ever before. Modern users come across unprecedented diversity of styles and information.
• Apart from that, eye movement patterns Z and F do not analyze the key point – the way certain elements of design and text affect user’s decision to make a purchase, to call or to fill in a form on a site, etc. As a rule, such factors as headlines, text and video have a much bigger effect than mere page structure.
• Cultural discrepancies. In western cultures people read from left to right, and from top to bottom.

Analyzing all the above mentioned, I came with the idea of structuring information on sites based on scientifically proven features of a human.

The span of eye focus performed by central vision comprises 200-400 milliseconds. Within this time, the brain manages to process what it sees. It is generally believed that large headings, sub-headings, images are more noticeable for peripheral vision, which allows to scan a page quicker, I have placed them to the center to make the task of scanning information simpler.

In my opinion, information placed within the central part of the vision field is the most effective for attention focus. Thus, key elements remain in the focus, helping to attend to possible questions, doubts, objections of the audience, to persuade. This enhances the effect on a potential client and facilitates the achievement of marketing goals. Last but not least is that the information is going to be seen, understood, perceived based on physiological features of the visual system of a human.

Design features

1. Web-sites are developed in a minimalistic style, with a lot of ‘air’, which make the perception of a content easier.
2. We also pay special attention to aesthetic design, as only pureness and visual consistency form the sense of comfort and trust in visitors.

According to the research by Verizon Media, visually attractive web-sites are in top by conversion and profitability. While ordinary-looking design, on average, loses up to 35% of potential clients.

This way, two researches were combined – the one on central vision, and on design aesthetics.

As the main component affecting the conversion and placed in the central part of a site on the way of a user’s eye movement, the following information was used:

• Video on the company and its approach to work, which are an effective marketing tool. We should not forget about ‘clip thinking’ either;
• Eye-catching headings with short meaningful texts emotionally appealing to readers;
• Advantages of cooperation with the company for potential clients;
• Information on the achievements of the company as a factor of trust;
• Banners with attractive offers. At site developing, the results of experiments supporting the fact that users still fix their eyes on banners placed in the central part of a page were taken into account. While banners located marginally – on the right and on the left – are often ignored because of the so-called ‘banner blindness’
• Call to action.

Conclusion. Why this approach is worth considering.

• The world is overloaded with content, advertisement and distracting factors. It’s difficult to get through this information noise and keep the attention of a target audience.
• Competition grows, companies invest huge budgets into marketing. Hundreds of companies fight for the attention of your first potential client.