The user experience of the website optimization carousel figure skills


Hua: some optimization recently made to the site map carousel, although it seems simple, but from the user’s perspective, but it can get interesting experience.

4, move the mouse on the picture from the picture immediately after the pause, skip to the next picture and continue the carousel;

, 2 digital pictures together with navigation cycle;

experience is not uncomfortable, such as the mouse into pictures just want to see clearly the details when they jump to the next, yes, this is very hurt the feelings of the user. How to solve the problem, the principle is very simple, the mouse into suspended picture carousel, mouse out of recovery carousel.


you can click here to experience the realization of the basic functions of the carousel figure.

front-end technology JavaScript carousel figure is not difficult, first of all to achieve 3 basic functions:

3 digital picture display, navigation and control;

although many websites have realized this function, but without exception there is a problem: the mouse out of the picture, still need to wait a few seconds will jump to the next one, this experience is reasonable? When the user from the user’s point of view, after reading, the mouse out of pictures, the reasonable logic should be immediately jump to the next piece from the product; or the operation angle they want users to be able to see more advertising map.

carousel is essential for many websites, it shows more content in the limited space, and can use the switching effect of dazzling to attract users, here are some well-known Web site:

The use of .


above all, enhance the experience of functions to be achieved are as follows:

needs to give its fault tolerance mechanism is delayed response, if it is found that the user is not only a moment to move through the response, as the mouse had never been picture; when the mouse is in the picture to stay for some time, it is assumed that the user is to look at the picture, the method will respond, the delay time is generally not less than 200ms.

some of the site’s carousel map size is relatively large, especially electricity supplier website, in order to attract users attention, create a festive atmosphere, these are reasonable. But the carousel figure becomes larger, which occupies the first screen space will be larger, when users operate on the page, may accidentally over the picture, and then slid out of the picture, this process is very short, if the immediate response to corresponding methods cause the page to happen or not change, will give users even confused inconvenience. For example, users in a period of time by sliding in and out carousel figure several times, resulting in the response of the suspended carousel figure has been stuck in the picture, fixed, it will make the user feel crousel failure.

1, according to a certain time interval loop;

5, after the mouse delayed response;