On the relationship between visual focus and Web page layout design

I have always believed that the user experience is not the product design to customer satisfaction, but let the customer in a comfortable state according to the steps we want to move forward, a good product designer for his customers to design an invisible path of action. But first of all, to meet the customer's comfortable feeling, for the site, the customer's organ experience mainly from three-eyes, hands, ears. The eye is the most important, let it feel comfortable, the customer at least more than 50% satisfied.

The previous analysis of the breadth of the 7-user Web site has created an obstacle to browsing, due to visual focus.

Here is a picture, you put the pictures in the center of the screen display, and then look at the bottom of the blue doll, now there is a problem, can see the whole picture of a few blue dolls?

The answer is not, because the focus on a point, the focus of the eye will be round the shape of the outside gradually blurred, only staring at the most central point is clear, this is the visual focus.

The concept of visual focus is originally from photography, and the visual focus is to quickly capture what you think attracts you within a limited range of sight. reflected in the Internet product design, refers to the design of the page is the most eye-catching place, the focus of attention on the intersection of places, this position is called focus. In Web design, guide users to focus on the area you want him to focus on, and this is what I've described as the invisible path of behavior.

How does the visual focus be embodied in the actual work?

Note: All the following examples in the experience, please enlarge the single page, and put the picture in the center of the screen display

Look at the first picture first

This is a full text of the PPT, please forget the last log said the PPT of the rules, hehe, we say here the visual focus. This is a promotional article, at first glance, the most common person's reaction is, the whole screen is a blur, do not know where to start to see, do not understand the article to write something, what the object is, there is no use for themselves, this series of problems with a burst out, the head began to ache, then the brain issued the final instructions, do not look, what things, too tired , close the window.

Second picture

We weaken the information interference, will focus prominently, can very clearly see the focus of the entire promotional text-China density Board portal. The visual focus will remain unconscious in the "China Density Board portal" on top of several words. But believe it, the brain knows it's not fun to read the whole article, the text of the pure advertisement still resists, our promotion goal still did not achieve (this kind of promotion article I generally rarely expect the customer to read when the popular novel, I expect the customer to be able to glance at the view to stay in a few minutes, the key information can sweep to his mind sweeping)

Third picture

We do editors, always remember that the reader in the reading of the article is never word for word, but used to jump scan, so we must highlight the key information to make it easier for readers to grasp important information. In this amendment we will highlight the site, hope to seduce interested customers can copy this site to visit the site.

This is a relatively simple visual focus to use. But the reader's visual focus is not as simple as we think.

Picture Four

Although using the same technique as the third one, the "China Density Board Portal" was highlighted in bold, but most of the reader's visual focus will stay at the bottom of the picture of the three numbers above (there are rice, there are meters to see the number, Hee-ha), because our brain is simple and easy to understand things more preference, will automatically find the most understandable content to read first. This is a lot of research said that with pictures of the article browsing degree is high, not the picture is easy to attract users to read, but the picture can help the user's brain rest and easy to read text.

Fifth photo

Sixth photo

We understand the visual focus, and what does the visual focus have to do with the user experience, I said the first level of user experience is to make users feel comfortable. When people look at the screen, the most comfortable visual position in the bottom of the screen position, this position, the person's eyeball is slightly down, the neck is slightly downward, is the most relaxed state. By comparing the fifth and sixth charts, it is clear that the human eye will capture the font of different colors first, but look at the fifth picture, the human eye can hardly move to see the highlighted text, and look at the sixth picture, the human eye will have a very obvious move down, if then the eye to move to the first line of the article, There will be a feeling of fatigue and nervousness, with the Shu Yu of the eyeball down.

And in the Web page layout design, the visual focus is how to embody it? Although many reports that users visit the site when the attention of the "F phenomenon", people like the first to see the top left corner of the content, in fact, is moving from the middle to the upper left corner, but this action is relatively natural time is also short, not easy to let people notice. In general, the first look at the pink position shown in the picture

The current mainstream computer screen is wider, but does not mean that we design the Web page to be followed by widening, if a line of text from the left side of the screen to the right side of the screen, users will not only need to move the eyeball, but also need to move the neck, if it is more pictures of the site, okay, but if it is a pure text of the information site it will be a tragedy, Not every website can be like a remarkable one. Now the web design width standard is 960 pixels, although this number does not take into account the 800*600 users, but for the mainstream resolution, the site will appear in the center of the screen and on both sides have left white, give people with no narrow sense of overcrowding.

We must always remember that we are not users of the idol, they will not use the searchlight from beginning to end unlike attention to our work, users are accustomed to scanning and quickly find some of the page to guide him to understand the content of the key points. JAKBO Nielsen's research shows that the heavier the burden of understanding on one page, the more difficult it is to navigate and navigate, and the greater the likelihood that users will leave and look for alternatives. Reducing the burden of understanding begins with a lower eye movement.