Interactions such as Carousels seem to be commonplace in the Web age. When a group of people are in a conference room fighting over the priority of the focus image on the first screen, using a rotation image seems like an easy way to resolve the dispute, with no one losing. However, does this approach really work? How to design to bring users a better experience?

In fact, the “universal Peacemaker” rotation image usually has a low click-through rate and does not translate well, but often occupies the most eye-catching large area of the page. Imagine walking into a library looking for a particular book to read, and a salesman standing in front of you shows you a large advertisement, and then, when you haven’t finished reading what it says, suddenly changes to another one. The same is true of the design of most rote graphics.

Make sure you really need to use a rotation chart

First of all, poorly designed images are easily ignored by users as advertising images irrelevant to the content they want to view. Experienced web users choose the fastest way to find and browse the content they want. It is obviously inefficient to focus on scrolling through unanticipated rote charts, which automatically enters the user’s visual blind spot. The heat map below shows users’ browsing habits: scanning quickly to find the area they want to read, then engaging in an orderly reading, they invariably ignore the part of the image that looks like an advertisement.

(Above heat map from James Royal-Lawson)

(Heat map from Nielsen Norman Group)

In addition, research results in 2013 showed that the interactive effect of the wheel map was not ideal: only 1% of users clicked the switch button on the wheel map, and 84% of them clicked the switch button on the first screen only once.

(The above image is derived from Erik Runyon’s research results)

Other scholars have studied and analyzed the websites of more than 30 B2B websites and divided them into three categories according to the content of the round-robin graph: Branding, white papers/webinars, and Service Promtion. I found that no matter what kind of content, the click-through rate was very low (0.16%~0.65%) :

(The image above is taken from Harrison Jones’s research)

Not only that, many sites using the rotation map also have the following SEO problems:

Complex large images lead to poor performance and slow loading of websites. Generally, a lot of image information will be carried by the rotating image, especially those websites whose first screen is covered with high resolution rotating image. Such huge image information will have a great impact on the loading speed. Every second you load, you lose more users. Both users and search engines prefer websites that load faster.

Use alternate headings. A lot of developers tend to put round images at the top of the page

Tabs that rotate 4-5 different ones on the page

Tags, resulting in reduced retrieval ability of related keywords.

Use of Flash. Some web sites use Flash to display their content in a roundabout image, which is cool but can’t be captured by any search engine.

To sum up, poorly designed rote images are easy to be ignored, have less than ideal click-through rates, and may have a negative impact on SEO. So we shouldn’t “need” to move where we want to go without thinking through the priorities and effects that the page wants to convey to the user. In fact, there are many other ways to help us solve problems and bring better results:

1. Find the content that needs to be touched most to the user, and display the secondary content in the secondary position

Google cloud platform has a wide range of products and services, but it does not display all products and features using the rotation chart. Instead, it clearly shows the concentrated brand value and concept in front of users, and provides the main (free trial) and the second (contact with sales staff) two obvious transformation entrance. At the same time, other secondary entrances are placed at the bottom, so that users can choose to navigate through the top or continue to browse down to quickly find the content they are interested in, as shown below:

(The above picture is taken fromGoogle Cloud Plantform)

2. Make it part of the content

Oxygen is an app that focuses on providing underwear purchase recommendations. When you scroll through products on the page in sequence, promotional information will appear in front of you in the same form as usual product recommendations, with a low sense of disturbance and a good conversion effect for users who enter into immersive reading, as shown below:

(The above picture is taken from oxygen APP)

3. Cut out unimportant promotions and show content directly

The picture on the right seems to be more “good-looking” and “attractive”. However, in the actual scene, users always habitually ignore the content of the banner part, selectively browse the body part and directly display the content they need, which can improve the retrieval efficiency of users and thus bring a higher conversion rate:

(Image from “Behavior, Design, Conversion — Guiding User Behavior through Design to Improve Conversion”)

So, when your partner tells you that he wants to “add a banner, the kind that can be rotated”, don’t rush to draw a picture, might as well follow the following steps to discuss with him:

1. What is the purpose of doing this? What content do users want them to focus on most when they open the page

2. Based on existing research conclusions, rationally understand the effect of rote map (it is not a panacea, and may bring negative effects if improperly designed)

3. Think about whether there’s a better way to achieve the same goal

4. When in doubt, do ABtest

If you read this, you might wonder: Is it really so inefficient and hard to use, and why do so many sites still use it? Why is there a discrepancy between the data on my website and the data above? The data above is based on the Web scenario, how would it be different in the mobile scenario?

Of course, there are situations in which rotatable graphics are best suited — when the information the user wants to see is most efficient in the form of images, and the images are in the same category and the user expects them to be. Google Image experience is a typical example. After searching for a keyword of an image, users will first see a list of small images. After clicking one of the small images to view the original image, they can browse more images of the same type through the left and right arrows or related image recommendations:

(Above image is from Google Image)

In addition, there are other scenarios that simply show images or rent out advertising space.

In addition, in mobile scenarios, click-through rates are usually higher because of the smaller vertical height of the screen, the larger proportion of the rotation image, and the larger trigger area for interactive operations than for mouse clicks on the Web. Some scholars have studied and analyzed the interactive effect of the rotograph of e-commerce websites on mobile terminals, and come to a slightly different conclusion from Erik: 23% of users click on the content of the rotograph, 54.1% of them complete transformation on the first graph, and 15.7% of them operate on the second graph. Although the data graph is also linearly decreasing, both the click-through rate for the image itself (23 percent) and the click-through rate after the first screen (45.9 percent of all clicks on the image) are higher than the previous data Erik obtained at ND.edu.

(The images above are from Kyle Peatt’s research)

The data can vary from site to site due to different historical backgrounds, user habits, concerns and design solutions. What we need to know is that it is not the use of rotation graphics itself that determines the click conversion rate, it is the design of a suitable solution based on the actual scene that matters. In the right circumstances, a good experience of the rotation map can also bring surprising results.

How to design a good rotation map

If you really need to use a wheel feed and want to get more clicks, here are some design tips:

1. Make it look like a part of the site

Brand elements throughout the design, using consistent fonts and typography, make the wheel image the unified face of the site, rather than the flashy, disorganized stickers that are easy to ignore. Provides a clear hierarchy of titles, text, and transitions to improve readability, as shown below:

(Photo taken from Heroku)

2. Automatic switching with caution

“A fixed still banner has a higher click-through rate than an automatically switched banner. If you don’t know your audience well enough, it’s almost impossible to deliver content that meets 100% of their expectations, and it seems like giving them more choice in content = more clicks = more sales. It just doesn’t work.” — E-commerce expert Depesh Mandalia

Web usability guru Jakob Nielsen has also done usability studies specifically on auto-toggle graphics, and concluded that auto-toggle graphics annoy users and are more likely to be ignored.

(Above picture from Taobao)

This design seems to be quite common: in a fixed area, an image is displayed automatically every five seconds. This may seem like a convenient way to increase exposure for more content. However, not many users will look at the image and wait patiently for 5 seconds for the unknown content. This is inefficient and their eyes are already elsewhere. In addition, when the user is interested in the current picture content and enters the reading state, the sudden automatic switch will interrupt the user’s reading process, leaving the user with a sense of loss of control, frustration and irritation. Crucially, images that automatically switch will look more like ads than the default still images, and less like part of the native site.

Some sites use a compromise approach, stopping automatic switching when the mouse hover over the banner, or providing a pause button on the banner, which is more advanced than the original automatic switching regardless of the occasion, but it does not solve the problem of mobile consistency. Because there is no hover state in a mobile scenario, the use of the pause button is poor. At the same time, due to the limited content on one screen of mobile terminal, users will scroll down to look at other content without too much time. The interaction mode of “automatic switch” not only fails to expose more content, but affects the experience. A good idea is to leave your page in a stable state, with progress points or hidden sections that tell users to swipe left or right to see more.

In the example of douban app below, part of the second recommendation group is not displayed, so that the user can obviously perceive that there are more similar recommendations behind, and can swipe left and right to view them:

(The above picture is from Douban app)

Instagram uses a similar approach when recommending users, in addition to showing all the controls. Users are minimally disturbed and the operation is more efficient.

(Photo taken from Instagram app)

So, it’s better to have your images rest on the latest or most important content by default, give the expectation that you can switch, and only switch when the user triggers the switch.

3. Provide clear operational feedback and content expectations

Presents information of information should be geared to the needs of most of the visitors, belong to the same category or associations (such as is an image of the hotel, all is the tourist city landmark figure, is released in the new figure, etc.), interest visitors and induce switching to explore further, rather than randomly put some pictures of no obvious correlation in the same position.

Allows users to quickly identify click areas, reducing the possibility of error. Provide larger click areas and hover feedback so that users can clearly perceive which areas are clickable.

At the same time, for the small click area (such as positioning indicator point), give appropriate fault tolerance interval.

Prompts the location of the user and the contents that can be seen after the user performs the operation. When a user has an expectation of what to expect, he can find the content he’s interested in more easily, and the click-through rate is higher. The example below combines steps with positioning indicators, and the picture shows the instructions for the current step in sequence.

In the example below, thumbnails and caption text from different views are displayed below the banner area, allowing the user to retrieve the hidden message content without making any switch and then select the action that interests him.

(Photo taken by John Deere)

4. Ensure availability and give consideration to SEO

Finally, it is important to design your site with loading speed in mind, optimize your content, use lightweight image elements and transitions, and keep your site usable.

Tags: Banner, Carousels, Interactive Design, rotation