Nowadays more cutting-edge eye tracking technology adds a new dimension to how we visually perceive the world. But importantly, this exciting new science technology is helping us better to understand and design the website, for making the website more beautiful and efficient.
Web design as a visual art follows many of the same design principles as more traditional forms of art. In this article, we will introduce the importance of visual organization, and then explain how the results of eye tracking can improve the layout design of web page interaction.
Create visual organization
There is no doubt that the appearance of a website will affect its success, but it is more important to find out the reason and know why. Visual performance is indispensable for web interface improvement in the following aspects Missing:
Guidance
A well-made interface can guide the user from one action to the next, but it will not make the user feel compelled. For example, Shopee’s business model, there is no doubt that Shopee’s website is extremely smooth and well-structured.
On the website, Shopee’s value proposition is at the top, followed by a clear and easy design that allows you to see different product options. Then user can shop at the Shopee absurdly. The whole purchasing process is very logical.
Effective communication
By combining pieces of information that seem to belong to different categories, a UI can form a network of contacts in the user’s mind, and information can be communicated without direct expression.
Let’s look at the layout of the very popular design website Abduzeedo: the overall classification is placed at the top of the page, the featured content is placed on the right, and the fixed position of menu is placed on the left.
Create emotional influence
Don’t think that your website is just a simple mechanical tool. A website can establish an emotional connection; if your website fails to do this, your competitors are likely to do so.
In fact, if your website can give people a positive emotional response, it is easier for people to forgive some of the deficiencies in your website interface. MailChimp is a perfect example of making a website interface useful, portable, and fun.
Predictable eye movement
Sometimes, it seems that your eyes have their own thoughts. Years of evolution have given us visual intuition. We intuitively pay attention to the things we think are important, such as whether someone crosses the road sexily, or the cute cartoon bear in the honey advertisement.
Although different people have different definitions of what is important, their behavioral mechanisms are the same. On a large scale, we can think that people’s behavior when browsing the web has the same trend.
Among these trends, we will discuss two of them in detail. In an article introducing visual principles, design writer Alex Bigman of 99Designs proposed that in a culture where people read from left to right, these two modes are the most common and most useful for designing website layouts: different, F mode, more use for text (but can be applied to other situations).
The second type, Z mode, can be used for any visual layout. Below we will introduce the advantages and disadvantages of these two modes.
F-mode
F-mode is the line-of-sight browsing mode that people display when they browse text-based web pages (such as blogs, news, articles, etc.).
When faced with a piece of text, most readers will scan a straight line at the bottom left of the article. In this process, they usually read the opening sentence of each paragraph, looking for keywords or points of interest. When readers find the part, they are interested in, they will start to read normally, at a level of sight.
The result is that the trend in their vision will look like the letter F or E. Nielsen’s Norman Group Jakob Nielson (Jakob Nielson) conducted a readability study based on 232 users browsing thousands of websites. In the research, he recorded what he believed to be the actual meaning of the F-mode:
In all cultures that read from left to right, the upper left corner is always the most important. Users usually read the entire topic horizontally, so this is a good place to place the navigation bar and attract readers to click.
Then, the user will swipe vertically to the bottom left until they encounter the content, they are interested in. Finally, the user’s line of sight will stop on the right side of the page, which is a good place to attract readers to click or place ads. Just don’t let the sidebar cover the content.
However, F mode does not provide a fixed template. It is not the exact steps that everyone will follow when browsing, but a general guide for most users’ browsing trends. Keep this in mind, the F mode loses its effectiveness after the top content.
The Kickstarter website uses a top card layout to display themed projects, which also ensures that the content after the first 500 pixels is not visually boring. The interface of the Odoo website adopts a more traditional way, which is more in line with the F-browsing mode.
However, they managed to avoid the templated look and put important headlines (“Website builder for businesses”) and places that entice readers to click on the big background image. We think this is the least use of this browsing mode to adjust the interface layout.
Z-mode
In addition to F-mode, Z-mode is the simplest and most used mode, which can be used for all text-based web pages. The reader first scans the top of the article horizontally, quickly scans down to return to the left, and then scans the bottom of the article horizontally again.
We need to understand the versatility of the Z model, because it can solve the core needs of cyber warfare, such as ranking, brand promotion, and attracting reader actions. Its beauty lies in its simplicity.
For a website, the ideal layout is to attract readers to act. However, for more complex content, the Z mode may seem too simple.
Are you considering whether Z-mode is suitable for your web page? Here are some best practices that best reflect the advantages of Z-mode:
Background: Make sure that the background is just the background, and you don’t want it to distract the reader.
Point #1 –Put your logo at the beginning of the page.
Point #2– Next, although the part that attracts readers’ actions should be later, here is the next level of content that attracts readers’ actions, and a horizontal navigation bar is placed here. (A nice graphic or image slider will help separate the top and bottom of the page and guide the reader’s gaze to stay on the predicted Z-pattern.)
Point #3 –Here, it will be a nice link for other links A place to attract attention, or as a pavement for the final sight target (point #4).
Point #4 –As the “end point”, this is the perfect place for you to attract readers to take action.
The first thing you need to do is to prioritize the elements on the page, so that you know which are the most important and which are the least important. After that, they were reasonably allocated to the visual “hot spots”.
Furthermore, the Z-pattern can be repeated on the web page and extended to the entire interface. We will see how Evernote uses continuous Z-patterns to alternately attract reader actions and display selling points.
Strikingly uses a simpler way to implement Z-mode, using a creative and interesting background pattern. On the contrary, all the relevant things and introduction are laid out directly in the interface.
Through “First Name, Email, and Create Password” to free for getting started, and can choose to sign up with Facebook directly. This also helps readers get started directly to the next relevant page without having a complicated steps for signed up everything.
Foresight
A good interface design should guide the reader at the speed of thinking like an invisible hand. The biggest revelation of F-mode and Z-mode is that you should put your most important content in places where readers can naturally “accidentally find” instead of trying to force them to see it.
Subtlety is the essence of any page layout, and these patterns can subtly recommend your content to readers instead of imposing your content on them.