Where and when should you use a hero banner?
Hero banners are great. They are perfect for conveying the mission statement of your website through strong visuals and a large tagline. They’re almost like billboards in the digital era, but they are one step better as they also have a call-to-action button that will complete the task you are probably on the website to carry out in the first place.
As I wrote in my 2015 article, “Hero Banners: Why are they so attractive?“, the purpose of a hero banner is to efficiently deliver a solution to a top task or the most important content to a customer. This importance is determined by numerous factors: institutional priority, user journeys, and analytical data to convey the user need.
Yeah, hero banners are great. So, every webpage should have them, right? That might not be the best practice, and echoes of this old paradox come to mind: If everything is important, nothing is important.
On the University of St Andrews website, we have a hero banner on the homepage of each main section. These include school websites, business service units, and of course, the main University homepage. Apart from that, they don’t appear in many other places, as is their intended use. Adding hero banners in multiple places other than the top of the homepage may cause disorientation among users and in turn affect performance.
So, where and when should you use a hero banner?
Answer: Only at the top of your homepage, underneath the main navigation.
Closely related to this post, we have added some more hero banner options to the digital pattern library.
Hero banner with transparent overlay
One difficulty we kept finding with hero banners was selecting a great image and then the text being barely legible because there was too much white or complexity to the photograph. We have overcome this by developing a hero banner option that veils the image with a coloured overlay making the text legible in all circumstances. Now there is no need for compromise when selecting hero banner images.
Hero banner with embedded video
Sometimes, a few lines of text isn’t enough to convey the main mission statement of a website. We have allowed videos hosted on either YouTube or Vimeo to be included on hero banners where necessary. After all, if a picture is worth a thousand words, a video must be worth a million at least.
