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.
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.
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.
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.