Every now and then I’ll stop in to a new store that I haven’t been in before, feel somewhat overwhelmed at the experience, and really not know where I want to go. A trip to a new grocery store was like that for me once. My options were to go left, right, forward – and I could see a set of stairs going up to who knows where. I could see the produce section, the meat counter, and I could hear someone saying, “Would you like to sample…?” Truth be told, it was a little confusing for me. (I just wanted to find the two items I was looking for – bananas and green olives. You know, the usual.) A website can give that same feeling of being overwhelmed to users, especially when it comes to the header of the website.
When we talk about the header of the website, I’m not referring to things like the individual page headings (H1 tag for you HTML junkies); we’re talking about the area at the very top with the logo and navigation. This header is usually above the main content of the site and has a few elements that can help a user navigate through your site as well as increase the chances of a conversion (however that may be measured on your site). The elements we usually find in a header are the logo, navigation, a Call To Action (CTA), oftentimes a tagline and/or links to social media, and the business phone number and email address.
I’ve been on some sites where it almost feels like they are wanting to cram every last little detail about the organization into that header space: the year the company was started, if it’s family owned, calls to action such as “sign up for this newsletter” or “request this catalog,” a million different social media links, and all kinds of other stuff. The kind of stuff that should be on the site, but not in the header. While we’re at it, let me just say: for the love of all things good and righteous, do NOT put a slideshow in the header.
What should you put in the header? Keep it simple: your logo, navigation, a tagline or Call to Action, and links to social media. That’s all. There are a number of ways to do this. One of the most effective ways that we’ve found is to do a sort of ‘header sandwich’: we’ll have one line of smaller text going across the top that has the social media links, phone number, email address, and depending on the business. possibly their street address. Below that, we’ll have the logo on the left side of the page (or sometimes centered), and a tagline or call to action on the right. Below all of that is usually where the navigation will go, though sometimes the navigation is off to the right of the logo. Why do we usually follow such a layout? Yes, this formula may get repetitive, but with well-planned creative and design elements, we can follow this extremely effective layout that has proven successful time and time again, site after site.
I know it can be tempting to add a ton of information and features into your header, but keep it simple. Just like going into a store, we want to help give visitors clear direction regarding where they should go next and help them navigate through the experience. If your site isn’t getting the results you were hoping for, start at the top, and see what the header looks like. Oftentimes, a cluttered and overcrowded header will have a negative impact on a site’s overall performance.
