Research: Why You Should Replace Image Sliders With Hero Images

sarah@technivorz.com'
Sarah Green 2 years ago 5

The psychology behind users’ online behavior has always played a major role in designing for excellent experience. This is especially the case with ecommerce or retail websites, which typically have a precisely defined sales funnel that needs to be supported by every element on a page. Optimizing for conversions, therefore, means relying on some stats, rather than one’s hunch.

One of the trends that relatively recently emerged from such a practice is replacing previously popular automatic sliders or carousels with seemingly oversized hero images that occupy the greatest portion of a website’s above the fold section. The simple idea is that automatic sliders have never actually performed that well in terms of converting users, which is proven by multiple eye-tracking studies and A/B tests.

99% of people ignore sliders because they simply have no time for them

According to a study by WeedyGarden, slightly over 1% of website visitors click on sliders, meaning that the greatest portion never actually gets to see the content beyond the first slide. Obviously, using multiple slides to convey a single message may not always be a good idea. As opposed to this, hero images present readable information in an accessible format and thus enable visitors to understand what the web page is about in a matter of seconds.

Image sliders distract users and reduce content visibility

It is not surprising that static information display would communicate the message faster. The dynamic nature of sliders makes it difficult for the people to focus on the content presented, as they are unable to rest their eyes and read the copy. The effect of messages presented via sliders was analyzed in a Nielsen Norman Group usability study, which suggests that they distract users and reduce content visibility.

There’s no single right transition time for everyone

The Nielsen Norman Group study further points to the problem of readability among low-literacy users and non-native speakers, who may have a hard time reading and understanding the message before it is removed. In addition to this, if the slider moves too fast, it can trigger banner-blindness that results in misinterpreting the whole message. On the other hand, a too slow transition of images might irritate native speakers.

Lack of control over the interface (usually, not always)

Similarly, the lack of control over the interface may trigger negative user experience since it doesn’t allow visitors to navigate at their own pace. Evidently, even in this respect it may be smarter to use a hero image, which requires minimum effort by users to read and understand a message.

Sliders can be difficult to optimize for mobile devices

In the age when over 60% of people use mobile devices to browse the web, it is critical to optimize a website for mobile conversions. This means that mobile users need to have the same sleek experience regardless of their device’s screen size. Hence the fuss about responsive design, which is Google’s recommended pattern for building a mobile site because it serves the same HTML code across multiple screen sizes.

Image optimization is very important in responsive design because it reduces page load time and prevents a visitor from bounding off. A problem that may emerge, however, is optimizing multiple slider images to perform nicely on various screen size. Therefore, this is yet another aspect where automatic sliders fail. Instead, hero images may be easier to optimize as they do not burden a website to such an extent.

This is additionally important considering the fact that speed is an essential factor of converting users. Namely, studies show that users, especially those on mobile devices, get frustrated if they need to wait for a page to load for more than 3 seconds. This is why it is important to optimize all the images for an instant display, which is, of course, only possible with an appropriate web hosting solution that can handle large amounts of traffic from different sources.

More is not better

Automatic sliders may seem like an excellent way to present more content or promoting multiple offers. However, different studies show that this is not necessarily the case. Namely, when designed to promote special offers, automatic sliders are likely to trigger banner blindness and thus fail to communicate the message properly.

On the other hand, large hero images combine graphics and brief copy to send a simple message and reduce the number of possible distractions. This enables visitors to understand the message in an instant and proceed to the next step of the funnel. In relation to this, a study by CrazyEgg gives some interesting examples of websites that managed to increase conversions substantially only by replacing automatic sliders with hero images.

Wrapping things up

Based on the data presented, it’s easy to understand why hero images are not simply a trend, but rather a conversion strategy. Of course, there may still be a limited number of scenarios where sliders (when users are allowed to control them!) may still work. Nevertheless, when optimizing for conversions, hero images are likely to be a better idea regardless of a website’s target group, as long as graphics and the copy are efficiently combined.

sarah@technivorz.com'

Sarah Green

Sarah Green is a tech blogger covering the latest trends in web design and hosting industry. You can reach her on Twitter at @sarahh_green

  • Dainius R

    Is anyone still has slider on their websites? Share what is a conversion rate.

  • Pingback: 別再用圖片輪播了,單張大圖才是王道 - kgl 's blog()

  • The sliders are difficult to optimize but in some cases they are preferred. It depends on the demand of the websites. Although Images are far better and they are easily optimized. Web Developers needs to know about this. Thanks for sharing. Share the conversions which you might have noticed before and after the sliders implemented.

    • Dainius R

      What’s the point of image sliders with our today’s attention span and when we spend just seconds on a landing page?

  • Pingback: Tweet Parade (no.13 2015) - Best Articles of Last Week | gonzoblog()

Get feedback and collaborate right on websites and images in real time

TrackDuck is a visual bug-tracking tool for web projects saving up to 80% of time spent on remote communication. It integrates with JIRA, Trello, Asana, Slack and all other major project management tools.