The Anatomy of a Great Website Hero
Website heroes aren’t complex, but they play a critical role in creating a solid user experience.
This posting expresses the views and opinions of the authors and does not necessarily reflect the views of Yext and its affiliates, employees, officers, directors or representatives.
Have you ever seen a burger on a billboard or a splash of lemonade in a commercial that caught your attention? Even make you a tad bit hungry? Humans are an incredibly visual species, which is why visual marketing and design techniques have soared in popularity. This is how the “hero” image arrived on the scene. First utilized on newspaper covers, hero images are the oversized visual appeal that spark the audience’s curiosity and attract attention. For you etymology fans, “heroes” are named after the “hero prop” in movies that are more detailed than regular props with the intent of being seen by the audience at close range (think, the DeLorean Time Machine in “Back to the Future” or a newspaper headline that assists the plot).
In the age of digital media, heroes have gracefully made their way into website design and have become instrumental in company branding. A study conducted by Chartbeat showed that 55% of users will spend fewer than 15 seconds on a web page if their attention is not captured, which makes great content and imagery above the fold paramount.
So why do hero images work?
When flashy imagery was first introduced to print, publishers were worried it would detract from the headlines. However, passersby were intrigued by images of events, news and celebrities that made them stop to pick up the paper. Heroes can be used on landing pages the same way — to deliver important information and enhance your company brand.
Here’s how Yext Consulting breaks down a great website hero:
The Imagery
Depending on your brand, there are multiple ways to incorporate imagery above the fold. We recommend opting for background images only if high resolution photography can be provided. Alternatively, consider a background color or pattern if your brand is more minimalist, or a 50/50 layout with an image to the right (so that content is read naturally from left to right). This can be especially effective if you want to preserve the text legibility on a flat background.
One important note on background images and colors is to keep ADA accessibility in mind, as lower contrast text is difficult for visually impaired users to read. If you’re planning to use white text over a background image, we recommend using a black overlay or gradient, with a minimum of 60% opacity. If you want to use black text, we recommend making the overlay or gradient white. You are also free to use other colors, but be sure to double check they have a sufficient contrast using a color contrast checker. Alternatively, text shadows and borders can also make your hero easier to read.
The Heading
Nielsen Norman found that users rarely read web pages; they scan for the information they’re looking for. A BIG, bold heading hierarchy is super important so that the user knows whether they’re in the right place, and keeping the heading short and to the point is always a good idea.
The Copy
As far as the rest of the copy in the hero goes, we recommend only including the most pertinent information to the rest of the page. For a product page, you may want to include a short description that is rich in natural language SEO key terms to attract organic traffic to your site. For a store page, including the star rating and the business hours might be more relevant for the user. Whatever you decide, we recommend keeping the copy to a minimum and focusing on what information will help the user the most.
The Call to Action
Finally, every good hero has a call-to-action (CTA) that invites the user to engage with their business, usually in the form of a button or link. In general, we recommend two (a primary and secondary) or fewer, since too many CTAs can be confusing and overwhelm the user. Even if it’s simply an anchor link taking the user further down the page, it should direct the user to what they should act on next. It is incredibly important that the button or link copy is short and understandable, and that the user knows exactly what clicking it will do.
And there you have it: the anatomy of a great website hero! Although these pieces have been individually dissected, they should all mesh together seamlessly both in content and layout. Let us know what you think, and if there are elements that you think should be added to this list!
