The use of fixed floating window in design

Fixed floating window is a common technique in web design, which refers to the design that a certain block is fixed in the browser's response position without changing the position with the scroll bar moving.

The most common fixed floating window design is fixed in the bottom of the browser pop-up ads, such as Sina Homepage will have the window of Sina pop-up ads.

Recently Dangdang home page advertising is very strong, most of which are fixed at the bottom of the browser and both sides.

Because the fixed floating window always appears at the top of the page content, and sometimes even covers the value of the user wants, this design is really not pleasing. Sometimes, some fixed floating window provides a "close" button, but this obviously can not eliminate the user's aversion, because in a piece of advertising to find closure, is also a torment, and the Close button is always very small, do not notice will point to the advertising link, sometimes this "close" there may be false closure, And then jumped to the ad page.

These are negative or even rogue design behavior that we do not discuss today mainly to discuss the benign use of fixed floating windows in design. Before that, let's analyze the characteristics of the fixed floating window: Do not move with the scroll bar, appear in the browser's fixed position. How do you take advantage of this feature? We may be able to look for inspiration from the design of desktop software.

The first example, the label Directory page of the Fu Xin Reader, what does it do? In a long article, users can click on the tag to reach a specific part of the article. In the group 800 site to the left, there is a classified group buy the chain, click on the understanding can reach the corresponding category group buy part.

The second example is the WPS2012 toolbar and the bottom of the data display. The function is obvious, the user needs at any time or may need to use at any time the feature or sees the information, uses the fixed module to display. Sina Weibo top, Sina Weibo right "back to the Top" button, the bottom of everyone's web, beautiful said landing box, have such a module. Of course, from the website rather than the user's point of view, fixed floating window ads also want users to be able to pay attention to the advertising information at any time.

Therefore, the use of fixed floating window must have the condition that the page is very long or very wide (generally not very wide bar?!) , users may need to jump between different paragraphs at any time or at any time, or some features and information may be needed or available to the user at any time.

After sorting out some cases where the design of the fixed floating window was properly used, I also found the need for some websites to introduce fixed floating window design. The first is the domain name of GoDaddy shopping cart, in the user to buy a lot of domain names and scroll down to a certain extent, the specific information in the shopping cart is not visible, affecting the user experience. The second is the Googlecalender Add event interface, when the vertical resolution is insufficient, the user sliding to the lower part of the set interface, save the need to scroll to the top.

Finally, I offer today's amazing discovery, I write this blog motivation, but also I think the rare fly in the user experience on a little innovation. When a group of friends in a group of people enough, point open a team scroll to find friends, the letter will be the best friend group name at the top, and has a shrink list function.

Author: Yang Yuanlong

Article Source: Yang Yuanlong Sina Blog