Article introduction of Wulin.com (www.vevb.com): There are fewer articles that use front-end technology to drive user experience. I hope this article will bring you new perspectives and thinking. The ultimate goal is to hope that users can have a better experience.
Hua: Recently, I have made some optimizations to the website carousel. Although it seems simple, thinking from the user's perspective can give you an interesting experience.
Carousel pictures are essential for many websites. They display more content in limited space and can use dazzling switching effects to attract users. Here are screenshots of some well-known websites:
It is not difficult to use front-end technology javascript to create carousel images. First, we need to implement 3 basic functions:
1. The picture is played cyclically at a certain time interval;
2. Digital navigation loops with the picture;
3. Digital navigation control picture display;
Do you feel unhappy after the experience? For example, when the mouse moves into the picture and just wants to see the details clearly, you jump to the next picture. Yes, this is very harmful to the user's feelings. How to solve it, the principle is very simple. Move the mouse into the picture and pause the carousel, and the mouse out of the mouse to resume the carousel.
Although many websites have already implemented this function, there is a problem without exception - when the mouse moves out the image, it still needs to wait for a few seconds before jumping to the next picture. Is this experience reasonable? From the user's perspective, when the user finishes viewing, the mouse moves out the picture, and the reasonable logic should be to jump to the next picture immediately; from the product or operational perspective, they also hope that the user can see more advertising pictures.
The carousel image size of some websites is often relatively large, especially e-commerce websites. In order to attract users' attention and create a happy atmosphere, these are reasonable. However, the carousel image becomes larger and the space occupied by the first screen will become larger. When the user operates on the page, he may accidentally slide over the picture and then slide out the picture. This process is extremely short. If the corresponding method immediately responds to the corresponding method causes the page to occur or does not change, it will cause confusion or even inconvenience to the user. For example, if the user accidentally slides in and out of the carousel image many times over a period of time, the carousel image response is paused and stays on the fixed image, which will make the user feel that the carousel is invalid.
Therefore, a fault tolerance mechanism is needed for this situation, that is, delayed response. If you find that the user has only moved by instantly, it will not respond, just like the mouse never passes through the picture; when the mouse stays in the picture for a certain period of time, it is believed that the user really needs to look at the picture, and the corresponding method will respond. This delay time is generally considered not to be less than 200ms.
To sum up, there are two points to implement the enhanced experience function:
4. Move the picture up and pause it. After moving the picture out, jump to the next picture immediately and continue to carousel;
5. The mouse responds after delay;
After complaining so much, let’s take a look at the code. Non-front-end students may think that implementing the above two functions requires a lot of code, but in fact they are only a few lines:
Although there is not much code, there are still some basic techniques, such as Boolean control in the red box is the key to the delay function.
Having written this, the user experience seems to be pretty good, so is there still room for optimization? !
China's Internet speed ranks second in the world, and even in many places the Internet speed is around 1M, so it is also important to improve the user experience of low-speed Internet speed. Loading carousel pictures on demand is one of the methods. When you jump to the corresponding picture, you can download the required pictures. This is the only way to speed up image display and save traffic. But everything has two sides, with advantages and disadvantages, see the picture:
This should be a picture you see frequently. The image loading process is exposed to users, which is particularly obvious at low network speeds. The method to make up for this defect is also very simple - the image is preloaded and a waiting icon prompt is given when loading, and continue to look at the picture:
Preloading can enable the image to be fully displayed at one time without exposing the loading process, thus giving users reasonable expectations.
The two enhanced experiences that were finally implemented are as follows:
6. Pictures load as needed;
7. The image is preloaded and a waiting icon prompt is given during the loading process.
Students can click here to experience the enhanced carousel image effect.
There are few articles that use front-end technology to drive user experience. I hope this article will bring you new perspectives and thinking. The ultimate goal is to hope that users can have a better experience.