How users browse your website

In fact, there is no big difference between the habits of Internet users to browse Web pages and the habits of customers to browse items in stores. Open a new page, scan some text, and click the first link that interests you. In this process, a large number of regional users have not even seen the page. Most users search for the content they are interested in and can click on the page. Once a target is found, the click behavior will occur. However, if the page does not meet expectations, the back or close button will be immediately clicked.

How users browse your website

1.Most of the time, users are not reading the content on the screen, but scanning.
Users are used to scanning and quickly searching for key points on the page that can help them understand the content.

2.Do not test user patience
When a page cannot meet users' expectations, it is inevitable to leave. It is expected that adding relevant content to enrich pages and retain users will often be ineffective or even counterproductive. The more information the page carries, the heavier the cognitive burden, and the more time it takes to process the information. If some of the information is not expected by the user, then you need to spend extra energy to get more than the information out of your attention. Jakbo Nielsen's research conclusion also shows that the heavier the recognition burden on a page, the more difficult navigation and browsing, and the more likely users to leave and find other alternatives.

3.The user does not make the best choice
Users are not the fastest way to find the best options, nor are they able to read the content on the screen in a linear way (from one module to another in sequence ). When the user finds the first reasonable option or finds the possible target content, it is highly likely to click it immediately. In fact, users are looking for content that can make them feel adequate or appropriate, rather than looking for the best choice. The reason is also intuitive, it takes a lot of time and effort for the user to make the best choice, and it is already testing the user's patience (cost ).

The images from eyetools show the user's attention points and non-linear browsing paths during browsing.

F-shaped browsing hot zone of jakbo Nielsen

Jakbo Nielsen tracked the eye movement of 232 users browsing thousands of pages, and found that users' browsing behavior on different sites was significantly consistent, visualize the browsing hotspot and then present a pattern similar to F. This kind of browsing behavior has three features:
1.The user first browses horizontally in the upper part of the content area.
2.The user's line of sight is moved down for a while and then browsed horizontally within a small range.
3.Finally, you can perform a quick vertical view on the left side of the content area.

PS. obviously, users' browsing behaviors do not exactly include these three processes. Sometimes, after these three processes, there will be horizontal browsing hotspots at the bottom, make the entire browsing heat map look more like E rather than F. Sometimes, the user only reflects the above Behavior 1 and behavior 3 during browsing, so that the browsing hotspot image is a inverted L. However, from the overall perspective of all data, the user's screen view heat map is still consistent with the F image.

How to Use F-shaped reading behavior for design:
1.The user does not browse all the content on the page (a large blank area out of F)
2.Place the most important information in the first two sections (two transverse thermal zones in the f thermal zone)
3.In the subsequent content, the keywords and information are placed at the beginning of the segment, which makes it easier for users to focus on the left-side navigation.

Conclusion and Inspiration

1. Users are used to scanning, rather than reading
2. the user does not pay attention to all content on the page.
3. Do not test the user's patience or increase the user's cognitive burden.
4. the user does not make the best choice.
5. The browsing heat area on the screen is F-shaped as a whole"
6. For f-shaped browsing behaviors, place the most important information on the top and the key content and information on the left side of the content area.

References:
1. F-shaped pattern for reading web content, by jakbo Nielsen
2. Common email layouts: B2C electronics template, by Teresa Hernandez
3. But what does it all mean? Understanding eye-tracking results, by Teresa Hernandez

(This article is from the Tencent CDC blog. Please indicate the source when reprinting)