Making the Most of Your Website Header
Location, location, location. We’ve all heard the expression regarding real estate, but how does it apply to your website?
Since most visitors scan (rather than read) website content, a clean, uncluttered design helps direct their attention to well-placed information and images. First, identify your key conversion elements. Then capitalize on the natural Z-pattern of a visitor’s eye path by including those elements on your header to create interest, interaction and engagement.
Recent website trends include use of a large “hero” image or series of images in a rotating carousel on the home page, offering a highly visual experience and sometimes including relevant text and/or links to internal pages. The key conversion elements may be integrated within a header image or they can reside in the open space between the navigation or header image and the main page content.
Two elements which are most often placed in the header space are your logo (clickable on any page to return a user to the Home page) and navigation. If you have vacant space in your header, consider adding any of the following items:
1. Contact info (email address and phone) – Don’t be the mysterious voice behind the Oz-like curtain. Make it easy to get in touch with you to increase visitor confidence.
2) Physical address and hours (for brick and mortar businesses) – Link to your Contact page for directions and additional details.
In this screen shot, the slider image and copy are used to create an emotional connection with the target client, and the white space in the header is used for physical address and phone.
3) Promotional offer such as a sale or free shipping.
4) Testimonial or other endorsement – Provide credibility with a well-placed review or endorsement, like this one from the Winnetu Resort.
5) Product guarantee icon (link to a detailed explanation).
6) Call to action such as an upcoming event registration, free trial or Donate button, such as this one from the American Cancer Society. Make the image a link to provide additional information or functionality.
7) Blog icon and link to blog landing page, as well as links to receive your blog posts via RSS feed or email.
8) Social media links with icons or feed/follow. More is not always better. Be certain you are actively engaged on any platforms you’re including. See this law firm’s website header, which includes links to reach the principal attorneys on LinkedIn.
9) Email newsletter signup – To encourage signups, include a few words about what kinds of information you’ll provide and how often.
10) Search box – While it seems obvious to include search capability, many sites omit functionality enabling a visitor to navigate directly to content of interest.
Since a clean design preserves white space, be selective in determining which items to place in your header. Choose appropriate ones for your site based on your particular business goals. Then validate your choices by reviewing your website analytics to determine which website content drives longer visits and desired conversions.
I need a bit more guidance I think. How does adding something in the header space about a sale or promotion help me? Should I make it clickable to somewhere? Can you walk me through the steps? Thank you.
Hi JC. Since the header is a highly viewed space on your website, it’s a good place to add a key conversion goal (i.e. something that you want visitors to see and act on) because more people are likely to see it than would navigate to the interior page of your online store without it. Steps you could take are as follows:
1) Create a visual element, like a colored box with the words “Sale! All items 40% off through 3/31/14”
2) Save the visual element as an image file (jpg) and have your designer overlay the image in your header image file
3) Make the “sale” image a clickable link to the landing page on your store which contains the sale items
The page flow data on your website analytics should show you visitors who navigated from the new header element to the sale landing page.
Please feel free to email me directly if you need additional guidance.
Wow – I never really thought of using that space on my website. I have my logo and navigation but then it’s a big white vacant field — ripe for the opportunity! Thanks for the ideas; useful information as always.
Ripe for the opportunity is correct! Glad to hear you found the post useful, Michele!