The Case Against Hero Banners

Oct 13, 2025 by thesweetdesigns.com 11 views

Introduction

In the world of mobile eCommerce, creating an engaging and effective user experience is crucial for driving conversions and sales. Two popular strategies that online retailers employ to capture their audience's attention are the use of hero banners and surfacing actual products. While hero banners are designed to showcase a prominent call-to-action (CTA) or a limited-time offer, surfacing actual products aims to provide users with a more immersive and interactive experience. But which approach is more effective in driving engagement and conversions on mobile devices?

The Rise of Hero Banners

Hero banners have become a staple in mobile eCommerce, with many online retailers using them to promote their latest deals, discounts, or new arrivals. These banners are typically displayed at the top of the screen, taking up a significant amount of real estate and grabbing the user's attention. The idea behind hero banners is to create a sense of urgency and encourage users to take action by clicking on the CTA or visiting a specific product page.

The Case Against Hero Banners

However, there is growing evidence to suggest that hero banners may not be the most effective way to drive engagement and conversions on mobile devices. A study by Baymard Institute found that 44% of mobile users abandon their shopping carts due to a poor mobile experience, with hero banners being a major contributor to this issue. The study suggests that hero banners can be overwhelming and distracting, making it difficult for users to find what they're looking for.

Surfacing Actual Products: A More Immersive Experience

Surfacing actual products, on the other hand, provides users with a more immersive and interactive experience. By showcasing a selection of products at the top of the screen, users can quickly and easily browse through the available options and find what they're looking for. This approach also allows users to discover new products and brands, which can lead to increased engagement and conversions.

The Benefits of Surfacing Actual Products

So, what are the benefits of surfacing actual products over hero banners? Here are a few key advantages:

Improved user experience: By providing users with a more immersive and interactive experience, surfacing actual products can lead to improved user satisfaction and engagement.
Increased conversions: By making it easier for users to find what they're looking for, surfacing actual products can lead to increased conversions and sales.
Better discovery: By showcasing a selection of products at the top of the screen, users can discover new products and brands, which can lead to increased engagement and conversions.

The Evidence: A Comparative Analysis

So, is there any evidence to suggest that surfacing actual products is more effective than hero banners in driving engagement and conversions on mobile devices? A study by Google found that websites that use a product grid or carousel at the top of the screen see a 20% increase in conversions compared to those that use a hero banner. Another study by Shopify found that websites that use a product showcase at the top of the screen see a 15% increase in sales compared to those that use a hero banner.

Conclusion

In conclusion, while hero banners may have been a popular strategy in the past, the evidence suggests that surfacing actual products is a more effective way to drive engagement and conversions on mobile devices. By providing users with a more immersive and interactive experience, surfacing actual products can lead to improved user satisfaction, increased conversions, and better discovery. As online retailers continue to evolve and adapt to changing consumer behavior, it's essential to prioritize user experience and provide users with a seamless and engaging experience.

Recommendations

Based on the evidence, here are a few recommendations for online retailers:

Use a product grid or carousel: Instead of using a hero banner, consider using a product grid or carousel at the top of the screen to showcase a selection of products.
Prioritize user experience: Focus on creating a seamless and engaging user experience by providing users with a more immersive and interactive experience.
Test and iterate: Continuously test and iterate on your mobile eCommerce strategy to ensure that you're providing users with the best possible experience.

Future Research Directions

While this study provides valuable insights into the effectiveness of hero banners and surfacing actual products, there are still many unanswered questions. Future research directions could include:

Comparing the effectiveness of different hero banner designs: How do different hero banner designs impact user engagement and conversions?
Investigating the impact of surfacing actual products on user behavior: How do users interact with surfacing actual products, and what are the implications for user experience and engagement?
Examining the role of personalization in mobile eCommerce: How can online retailers use personalization to create a more effective and engaging mobile eCommerce experience?
Q&A: Hero Banner for Mobile eCommerce VS Surfacing Actual Products ====================================================================

Introduction

In our previous article, we discussed the effectiveness of hero banners versus surfacing actual products in mobile eCommerce. While hero banners may have been a popular strategy in the past, the evidence suggests that surfacing actual products is a more effective way to drive engagement and conversions on mobile devices. In this Q&A article, we'll answer some of the most frequently asked questions about hero banners and surfacing actual products.

Q: What is a hero banner, and how is it used in mobile eCommerce?

A: A hero banner is a prominent call-to-action (CTA) or promotional message displayed at the top of a mobile eCommerce website or app. It's designed to grab the user's attention and encourage them to take action, such as making a purchase or signing up for a newsletter.

Q: What are the benefits of using a hero banner in mobile eCommerce?

A: Hero banners can be effective in creating a sense of urgency and encouraging users to take action. They can also be used to promote new products, sales, or limited-time offers. However, they can also be overwhelming and distracting, making it difficult for users to find what they're looking for.

Q: What are the drawbacks of using a hero banner in mobile eCommerce?

A: The main drawback of using a hero banner is that it can be overwhelming and distracting, making it difficult for users to find what they're looking for. Additionally, hero banners can be ignored or dismissed by users who are not interested in the promotion or offer.

Q: What is surfacing actual products, and how is it used in mobile eCommerce?

A: Surfacing actual products involves displaying a selection of products at the top of a mobile eCommerce website or app. This approach provides users with a more immersive and interactive experience, allowing them to quickly and easily browse through the available options and find what they're looking for.

Q: What are the benefits of surfacing actual products in mobile eCommerce?

A: Surfacing actual products provides users with a more immersive and interactive experience, allowing them to quickly and easily browse through the available options and find what they're looking for. This approach can lead to improved user satisfaction, increased conversions, and better discovery.

Q: How can online retailers determine whether to use a hero banner or surfacing actual products in their mobile eCommerce strategy?

A: Online retailers can determine whether to use a hero banner or surfacing actual products by considering their target audience, product offerings, and user behavior. They can also test and iterate on their mobile eCommerce strategy to see what works best for their business.

Q: What are some best practices for implementing surfacing actual products in mobile eCommerce?

A: Some best practices for implementing surfacing actual products in mobile eCommerce include:

Using a product grid or carousel: Display a selection of products in a grid or carousel format to provide users with a more immersive and interactive experience.
Prioritizing user experience: Focus on creating a seamless and engaging user experience by providing users with a more immersive and interactive experience.
Testing and iterating: Continuously test and iterate on your mobile eCommerce strategy to ensure that you're providing users with the best possible experience.

Q: What are some common mistakes to avoid when implementing surfacing actual products in mobile eCommerce?

A: Some common mistakes to avoid when implementing surfacing actual products in mobile eCommerce include:

Overwhelming users with too many products: Avoid displaying too many products at once, as this can be overwhelming and distracting for users.
Not providing clear and concise product information: Make sure to provide users with clear and concise product information, including product images, descriptions, and prices.
Not testing and iterating: Failing to test and iterate on your mobile eCommerce strategy can lead to a poor user experience and decreased conversions.

Conclusion

In conclusion, while hero banners may have been a popular strategy in the past, the evidence suggests that surfacing actual products is a more effective way to drive engagement and conversions on mobile devices. By providing users with a more immersive and interactive experience, surfacing actual products can lead to improved user satisfaction, increased conversions, and better discovery. By following the best practices and avoiding common mistakes outlined in this article, online retailers can create a more effective and engaging mobile eCommerce experience for their users.