Analyze the user browsing method and use the floating effect reasonably

Article Description: my view on the floating layer of web pages.

A floating layer is a form of web page effect that is always displayed in a specific position on the screen, scrolling without the scrolling of the mouse to emphasize its content or the effect of a cohesive contextual explanation.

Floating layer in the previous period of silence, now, and again out of the lake, has been paid attention to play its huge role (PS: Floating advertising does not count its columns).

Floating layer in the application of the Web page mainly have the following situations (their summary, not comprehensive please add OH):

1 navigation class floating layer:

When a user browses content on a page and discovers that he or she has no interest or finds what he or she wants to find, it is necessary to continue browsing or searching from the navigation into another page. So when many of the existing navigation for fixed navigation, users need to pull the page back to the top or combine the "return to the top" button to do the next step (no "back to the Top" button is more tragic t_t). But if the navigation is made floating, the problem is solved more perfectly.

As shown in Figure A. The new version of Sina Weibo's top-level navigation using a floating effect, in line with the micro-blog user's psychology (very few micro-blog users can be a page patiently carefully look at micro-blog, micro-blog browsing is a leap-type), jump more convenient. At the same time, Taobao commodity details page also carried out a minor revision, the product details of the switch to use the floating layer effect, but also the existence of the "return to the top" to do the integration, to meet the current commodity display more and more fine, more and more pages longer actual situation.

2 Comparison class floating layer

Now a variety of products more and more rich, more and more users, so all kinds of product pages have increased the function of contrast, there are two, three, four products at the same time contrast, and the comparison of the parameters are more and more, resulting in the comparison of the page more and more long.

If there are 4 kinds of products at the same time, the comparison of the list height of 1 screen more than, then browse to the following, the user will have a brain confusion of the possible, a parameter in the end is which product? Classmate, do you have this kind of situation happen? When the name row of the product is made floating, always prompts the user a certain parameter to control a certain product, the user mind will be clear many, corresponding, also can make a choice to the product quickly.

For example, in Figure B of the QQ car comparison page, the car parameters are many, so this comparison page is very high, there are 365 commercial real estate in the planning and design of the comparison page, at the same time there are 4 shops for comparison, page unit information is too large, so this kind of comparison page product name row made float is more appropriate, Let the user at a glance, no longer have parameters and products are not on the feeling.

3 Hint class floating layer

This type of floating layer application is the most extensive, various customer service, return to the top of the page, the new version of the hint and so on, will take this form. As shown in Figure C.

Although the advantages of a lot of floating layer, but also can not abuse, for all kinds of situations to conduct user browsing methods of analysis, reasonable use of floating effect. But also to control the number of floating layer, not the more the better. Thank you!

Author: text Hits each ear