- Don’t Let Carousels Kill Your Application
- Isuri Devindi
- The Nuggets translation Project
- Permanent link to this article: github.com/xitu/gold-m…
- Translator: jaredliw
- Proofread by: KimYangOfCat, Nia3y
Don’t let rotation ruin your application
Today, rotation is widely used in Web applications as a slideshow component to loop through elements in a collection.
While rotation can make your application unique, it can cause usability problems and degrade application performance.
Therefore, in this article, I will discuss the negative effects of using round casting and how to solve these problems.
First, let’s look at the problems that rotation can cause.
Impact on performance
A good rotation should have little or no effect on performance. However, if it contains a large media resource, it can cause load delays visible to the user.
There are many reasons for the load delay. We can describe most of this through the following core network metrics.
1. Maximum Content Rendering (LCP)
The rotation often contains images of various sizes and high resolution. These images will eventually become the LCP elements of the page. As a result, the LCP value of a site that includes round-robin may exceed 2.5 seconds (the recommended value), which severely affects the load performance of the site.
2. First input delay (FID)
Because traditional round-robin has minimal JavaScript requirements, they do not affect the interactivity of the page. That being said, incorrectly implementing round casting can cause JavaScript to run for too long, making web pages unresponsive and leading to higher FID.
3. Cumulative Layout Offset (CLS)
Many castings (especially auto-played ones) contain non-synthetic animations. This can cause visual instability for the user, increasing the CLS value.
Note: Since Google uses core Web metrics to rank Web applications, a poor metric score will cause your application to rank lower in Google search results.
Impact on user experience (UX)
For presenting multiple pieces of information in a limited space, rotation seems to be an attractive solution. However, there are some negative effects on the user experience that are hard to spot at first glance.
1. 视而不见的 Banner
The main use of rotation is animation and layout that mimics advertising design aesthetics. As a result, many users began to ignore round casts, treating them as ads and finding content elsewhere.
2. Low controllability
Giving the user control is fundamental to improving the user experience. The controllability of rotation is terrible, especially when it’s autoplay. This is because users must react quickly to information before it disappears.
This forces users into unplanned and confusing interactions that make them feel out of control.
3. No accessibility function is supported
We should serve our visitors fairly, regardless of whether they have any disability or not. However, auto-playing rounds can be difficult to read for users with low literacy or visual impairments.
In addition, the small arrows/ICONS in the rotation make navigation difficult for mobile users and people with disabilities.
Text annotation: Autoplay wheel and extension panel components can annoy the user and reduce visibility.
I think you now understand the negative impact that rotation can have on your application.
However, you can overcome these problems if you know the best implementations and techniques for rotation.
Optimization of shuffling
Although round casting affects application performance, we still need them in certain scenarios. The following tips and tricks can help you overcome these problems and make your rotation more attractive to users.
1. Choose the right image size
Images in rotation are the main factors that affect LCP index of websites.
To keep the LCP value within an acceptable range, we must ensure that the image size does not exceed 500 kB and that all images are the same size.
The easiest way to do this is to compress the images in the broadcast before uploading them. JPEG 2000, JPG XR, WebP and other next-generation image formats compress images better than PNG or JPEG.
2. Remove render blocking resources
Some JavaScript files used for rotation can be very large and sometimes block rendering.
In this case, a better solution is to split out the blocking inline JavaScript/CSS and preload it, especially if the scrolling graph is on the home page.
3. Avoid links to an absolute layout layer
If the cast is linked to an absolute layout layer, its position will be relative to that layer and not to the container. The rotation first needs to calculate the position of the absolute positioning layer to which it is linked, and then calculate the position of its own layer.
Therefore, it takes time — the rotation cannot be shown until the position of each layer has been calculated.
To reduce load times, avoid using link layers.
4. Reduce the number of slides
Unless rotation is used for gallery effects, it’s not good to have too many slides because most of them will be ignored by the user. On the other hand, more slides means more layers, which can have a negative impact on loading speed.
5. Provide eye-catching navigation controls
Choose a bold color and size for the navigation control.
6. The navigation progress is displayed
Provide some information about the number of slides and the content of the next page. This makes browsing content easier and increases engagement.
In the example above, the wheel cast contains very few slides with navigation controls indicating the user’s progress.
7. Gesture support on mobile terminals
On mobile, in addition to traditional navigation controls such as buttons, applications should also support sliding gestures.
8. Provide alternative navigation
The content in the rotating slides should be accessible from other means, since not all users will be interested in every piece of content.
9. Don’t use autoplay
Autoplay can distract the reader and make the content difficult to read. As a result, users are more likely to ignore them, which results in less exposure to important content in the round.
The best solution is to let the user control the navigation progress through controls.
10. Separate text from pictures
When the image contains text content in the round play, the reading assist function, language localization and compression rate will be affected.
Therefore, I recommend that you use HTML to display the text separately.
conclusion
There is no doubt that rotation can make your application unique and attractive. However, we should be aware of its negative effects to avoid stepping on pits.
Therefore, if you follow the best practices discussed in this article, you will be better able to implement rotation while maintaining availability and performance.
Thank you for reading!
If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.
The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.