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

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:

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.

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.

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!

Related posts:

Yesterday I scheduled over 300 display fonts to my Pinterest account (feel free to follow me). A crazy and time-consuming experiment to see if I can get some traction on my account. It’s not…

Are you intrigued by the idea of owning a virtual private server? A VPS Server India, as they are more commonly known, can offer many advantages to users who need more control over their online data…

There can be many lessons in our memory. | Love like water always expands.