The UX of Hero Banners

Hero banners are common but to design them well may not be easy. Here are two articles and a video related to the UX of hero banners that you probably don’t want to miss.

You Might Want to Think Twice before Using a Carousel

Carousels are rotating hero banners. The potential pitfalls of using a carousel are that the first slide gets much more exposure, and that banner blindness could prevent the information within the carousel to be effectively communicated to the user. Furthermore, for a carousel to be user-friendly on both mobile and desktop, it needs to meet quite a few UX requirements. According to the following article, the usage of carousels is declining on e-commerce websites. Instead of using a poorly designed carousel which causes usability problems, the article suggests static images as the alternative, which are simple and effective.

9 UX Requirements for Designing a User-Friendly Homepage Carousel (If You Need One)

Beware of Banner Blindness

Users have learned that hero banners often contain marketing information which may not be valuable to them. If a carousel or hero banner looks too similar to an ad, they may simply ignore it. This behavior is explained in detail in the video below. If the information inside a hero image or the content it links to is important, make sure that there are multiple ways to access it.

Banner Blindness: Ad-Like Elements Divert Attention (Video)

Scale Hero Images Properly

If not handled properly, the images of a hero banner could be scaled disproportionately, cropped and repositioned when the viewport changes. The article below offers several methods to resolve these problems, including scaling and cropping, carefully choosing a good image etc.

Small Pictures on Big Screens: Scaling Up from Mobile to Desktop


That’s it. That’s what we should pay attention to when designing a hero banner or a carousel. Hope you find the articles and video helpful.

Author: Simon Li

Designer, coder and animator.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>