In a famous A/B test, Dropbox tested two Hero Top versions.
Result: The simpler Hero Top (Version B) increased conversions by over 10%. The lesson? Don't make the user think. Your Hero Top is not the place to show off your engineering prowess; it is the place to get the click.
Including a time-sensitive element in the Hero Top (e.g., "Sale ends in 3 hours" or "Only 5 spots left") increases conversion by up to 30% because it triggers FOMO (Fear Of Missing Out). hero top
UX researchers have found that users form opinions about a brand’s credibility based exclusively on the Hero Top. If they cannot answer "What do you offer?" and "What should I do next?" within five seconds, they leave.
Bad Hero Top examples:
Not all hero tops are created equal. Depending on your personal aesthetic, you might gravitate toward one of these sub-categories.
Best for: Portfolios, Events, App Launches. Why it works: Everything is balanced. The headline sits in the middle, the CTA below it, and the background is a full-bleed video or image. This creates a feeling of sophistication and focus. In a famous A/B test, Dropbox tested two Hero Top versions
Best for: Luxury brands, High-end design agencies. Why it works: Removal of visual noise forces the user to read the typography. It screams confidence. However, this only works if your brand name is already famous.
The biggest fear surrounding the hero top is looking like you are "trying too hard." Here is the secret: The hero top thrives on contrast. Result: The simpler Hero Top (Version B) increased
To master the Hero Top, you must understand cognitive fluency.