Doing some research for this article, I quickly found there is not much information on how to optimize website headers. I found a bunch of stuff on trends, and pages full of “Cool” header images. But nothing much on the element as a whole, and how it relates to your sites overall conversion.
What exactly is a header? I think the answer to this is very much left open to the site itself, and the interpretation of the designer that builds it. I personally consider the header on the home page as anything above the fold. On any other page of the site, anything above the content.
The basic elements of a home page header are Navigation, Logos, Images, Sliders, Search, Phone Number, Opt-in, and CTA. Depending on the desired outcome some of these elements may or may not be needed. Phone Number, Search, and opt-in, fall into this category, and it is dependent on the type of site you are working with. A Commerce site you will want search. A lead Gen page, search – not so much, but the phone number and or the opt-in, yes.
So let’s talk about navigation. My personal design style, as well as my oh too many years of testing have lead me to using static or fixed top navigation. I would say in the order of 95% of all the sites I personally and professionally built have fixed navigation. That being said, 90% of my work over the years has been commerce sites, and I believe navigation plays a bigger part in the conversion process than in commerce vs. lead generation.
Navigation needs to be easy to understand, and easily identifiable. Sounds obvious, but I could show you so many cases proving otherwise, it is kind of scary. Below is from a current client that I have. The before portion is the main navigation for the site before I started. As you might expect, Bounce Rate was a bit high, and conversion… well it was south of bad. Adding the text tags to the navigation cut the bounce rate by 50%, and increased overall conversion by 980%. ( My largest single implemented change increase to date )
The sad part of this story… the site had been like this for almost 2 years. The client is an artist, and a major portion of the increase came in the form of 2 sales the first day the change was implemented. The client and I both were left to wonder if it was the change that instigated the sale, or would they have happened anyways. The client did finally after a few days of communication release the buyer’s phone numbers, and I personally called each of them.
Without question, the clearer navigation is what leads to the purchases. Both of the client’s customers made it more than clear that they have been to the site many times before, and were always confused of where they were and how to move forward. They both stated that the clear navigation is what leads them to finally make a purchase.
Navigation Drop Down Menu
One of the most common elements in Navigation is the drop down menu. My testing and personal use has kept me away from “Mega Drop Down Menus” as an implemented element in my design. By the very nature of “Mega” they tend to cover up a lot of space when they are used. Below is an example from Starbucks, I might go so far to say that this is an extreme, but overly not so out of the norm.
Part of my personal conversion process is using the element of time to my advantage. The longer you spend on the page / site, the more likely you will convert. However, part of this is not just the time spent, but the factor of time spent seeing an offer, and being presented opportunities to click or take action. Looking at the image above, you can clearly see that Hero Image CTA is all but covered… Basically the power of the image and the message that is attached is degraded considerably.
I had recently been on the WF, and looking at the website forum. Reading the usual I need help and can you please critique my site stuff. I happened on the below page. First off the image is above the fold. And just to clarify… that is ALL navigation. Just thought I would share that… I find it amusing to say the least!
Where navigation is located does matter.
My own personally testing and testing and testing over the years indicates that Top as in top of the page navigation performs the best. Split top navigation has its place in say a commerce environment. Using the lower header navigation unto itself is just bad CRO in general… but everything should be subject to testing.
Pulling an image from the last article I wrote here the below shows the F layout. There happens to be 2 nav bars. The TOP bar and then the lower bottom of header bar.
When I caught this image they were in a “test” they were flipping the top number ( local number ) with the lower number. ( 800 Number ) I happen to know, because I know the gentleman that number is pointing to, the number of direct calls vs. 800 number calls is something in the order of 100:1 BUT, when the 800 number was on top, the calls would be flipped and the 800 calls would go through the roof.
What’s trending with Navigation?
I have seen a recent push for the navigation to be right justified vs. the standard left justified. I have tested this a few times as of late, and there is without question a preference to left justification. I think as we will discuss in some later elements, time may change this. I don’t think it will become a “Standard” but it will become an indication or “current” and depending on your target audience, this is something that you may want to watch over time.
This topic kind of can go two ways. There is using the logo to Brand, and then there is just having your company logo. I find that regardless of the intention, bigger is NOT better. Below is an example of “Big” it actually consumes 20% of the page. You have to ask, is the logo REALLY that important?
If you start looking at the internet big boys you will start to see a pattern. Logos are almost ALWAYS in the top menu bar, they are positioned to the far left, and they are a lot smaller than you would think. Looking at Amazon, at Wal-Mart, Google, TigerDirect, Microsoft, and Apple you see the same location and about the same size repeated over and over.
2 out of the 6 are straight text ( Tiger and Google ). Another 2 out of the 6 implement minimal graphics ( Wal-Mart and Amazon ). Microsoft is simply too scared to go with the block logo… and Apple, well what can be said?
All of them are easy to read. Google and TigerDirect are the only 2 to implement color change… and I would bet TigerDirect could pull away from that ( and should – it looks so late 90’s at this point ) The look and feel of the logo can label your business / your clients business in a positive or negative light. As designers and site creators we need to get an idea of what the logo is doing.
I use the coffee shop test all of the time. I will go hang in a coffee shop during a busy period and have my tablet with a page of 6 or so different options and ask which one people like better. The idea of this test is getting in front of the people you intend on targeting. In some cases a coffee shop is not the right place for that… so a bingo hall ( if you are targeting an older demographic ) or the parents that are there with you when you go to pick up your kid from school.
IMAGES AND SLIDERS
If there is an element in all of this that can increase bounce rate other than bad navigation these items are it. Page load is the #1 killer of conversion, and images and sliders tend to be the biggest load hog on a page. There are studies that indicate for every second it takes for a page to load, you lose 7% to bounce. I have seen pages with 5 second load times that have INSTANT 80% bounce rate, and 90% of that is before the page is even seen.
It is said that an image is worth a Thousand words. I think the concept is one of those that is over looked A LOT. Think for a moment… how much time will you spend putting 1000 words on your site, and then how much time will you spend looking for an image to put on your site? Images can literally make or break your chance for conversion.
I have a current client in Belize that sells Cigars. The site has a very nice flow and for the most part converts well. I have made some minor UX changes, but everything else is coming down to removing some steps here and there and IMAGES. The site owner is allowing me to use the images below as long as I have removed the opt-in box and text.
Looking at the images I don’t think there will be much surprise to you that the lower image converts better. What may surprise you from onsite linking to this page, the top image was converting at 20%. The lower image converts at 65%.
This specifically was one of those cases… It took 2 weeks to find the image… we then tested the image and got the results. I had the pleasure of telling the site owner the results, and that the image will cost $2000 for the rights to use it. Uh he blew up! LOL About an hour later his accountant calls. We went over the financial details of the deal, and plausible financial gain from using the image vs. the old. We are talking about a 325% increase here. It turns out that the 20% converting image was producing on average $4500 a month in business, and the change would potentially bring $14,625.
The image is exceeding expectations, and paid for itself in the first 4 days it was “officially” implemented. This client has been particularly interesting to work with. Not only is he very involved in the site, but he has an “accountant” that pretty much knows what elements are making what, and how much. Actually kind of scary but cool because with this project I am able to understand the dollar amounts associated to the changes.
Get alerted when new posts are published, enter your email below!
What’s trending with Images?
I am seeing more and more softening of edges, IE rounded corners. This has been kind of going back and forth a bit for the last 3 to 4 years. Will probably never make “Main Stream” but I am starting to see it more prevalent in Travel sites. What I find interesting with this is how the “square edged” advertising blocks stand out when you in contrast to the rounded edges. A good example of this is hotels.com. Scroll down towards the bottom of the page you will see the advertising block.
As kind of an experiment I have recently converted one of my amazon sites to a rounded corner design. In WordPress the process was pretty easy. About 30 segments of CSS code to get the job done. Below is an idea of the look. Interesting to note, in the timeframe I changed the site there was a decrease in traffic ( has to do with the site being seasonal ) there was actually an overall increase in conversion by about 2% overall. Should be interesting to see if #1 once traffic builds back if I can test to see how accurate that is, and #2 how long term the change truly is.
This could about be a topic unto itself. I think sliders have passed the trendy mark, and have hit mainstream. The problem is what do you do with them? I think for most they are more problematic than they are worth. The overall issue is “Message” As I believe and tests show one message multiple deliveries is the way to go. Gmail.com is a great example of this. 3 panels… all doing 1 thing, giving you the reasons to sign up.
I get it… that’s Google… how does that apply to the real world? Pick a niche… and go look how may use this element. One panel will be “We have been in business for blah blah years” and other will say “Family owned” another will say “ we do this” and the next “we do that” And the entire time if you look at the images used.. You may have no clue by looking at that element alone, what it is the business does.
Not picking on any industries here.. But how many times have we looked at a stone masons site and seen a sidewalk up to a nice home. Look at a roofer’s site and a siding company’s site. More often than not, they are almost the same images ( nice home front view “showcasing” the roof or siding – but really it is just an image of a home ) The POWER in these panels is the image, and the context, to yours or your client’s site.
If you do not have a CTA on each panel, and you are sliding images and portions of a message.. You seriously will find that removing the slider may help conversions. If each and every panel is defined with image and message and has a CTA… well that is where things get fun.
What’s Trending with Sliders?
The most common thing that I see looking about the net is the reduction in slider panels. Most common today is 2 to 3 panels. More and more I am seeing that the call to action across the panels remains the same. The Slider becomes a method to connect with different levels of client needs but focusing on the core. IE a plumbers site as an example “Have a leaky sink?” – Click here “Have clogged pipes” – click here “Rattling pipes?” – click here.
UNIQUE SELLING PROPOSITION ( USP )
How I made it to this point without as much as mentioning this has been a chore. All the above mentioned elements are the framework… the vehicle… to the delivery of this message. To better understand USP lets begin by defining it:
UNIQUE SELLING PROPOSITION: ( Also known as unique selling point ) is a factor that separates a product or service from its competitors.
Alright, so now we know what it is.. Well, we may have just an idea. The biggest discussion I have with most clients is over this very topic. The greatest amount of confusion comes from the idea that a business slogan, and a USP “should” be 2 different statements. Slogans define the business, and USP’s Sell. Even at 6000 miles away from my clients… I can see the look on their faces when I say this to them.
What happens once you start thinking in these terms is that the USP becomes a sales element. A USP should attract and in cases repel potential customers. I personally think of USP as an aspect of pre-qualification. Let’s take a moment and go back to gmail.com for a moment. In those 3 sliders… there are 3 USP’s. Look at the overall message even further. Look at the colors of the hands. Look at the faces. Look at Male and female. There is a whole lot going on there.
I think we can all agree the hardest thing to sell is something that is FREE. Google without question knocks it out of the park. And when you start looking at the factors I mention above it is real clear they have not done so by accident.
So the first step in determining your USP is to simply look at your competitors. I kid around a bit and say that there is a fine line between a Universal and Unique Selling Position. If you do not take the time to see what your competition is doing and saying, then how do you know if what you are stating about yours or your clients business is all that unique?
OK I understand Google… great, we can all aspire to that level. Here is an example of one of my own pages and the use of USP:
My companies name is Assets Network, and its overall slogan is “leverage for tomorrow” The slogan is not present on the home page, but it is deeper in the site. ( You will understand why in a moment ) So I have a decent headline. I do keep testing this, but it has been holding its own in terms of effective. The USP I played with a bit and ended up with “No Hoops, No Loops, Just a Check” and backed that up with the 2 lines below. “…Simple Sign-up, Shop and Earn”.
How I got here was I looked at a bunch of sites pushing the exact same product that I am. I also looked at other “competing” programs to see what was going on there. I believe I have separated myself from about 99% of my competition, and probably closer to 99.99%. So you ask… what could be so different? Well… this page is pushing a MLM Opportunity, and I could care less about the “Opportunity” and am focused on the actual product.
Same program, a totally unique approach. I’m not hiding the $399 sign up anywhere. I’m not being Slick Rick the snake oil salesman. I am saying here… try this for free. Sure, later I am coming back in and e-mail targeting them into the opportunity, but even then my approach is different. I don’t have to hide anything, they know the concept and the product works.
Using the USP as a sales mechanism changes things. I’m not saying cheaper, faster, or better – I detest those as USP’s myself! lol You clearly want to separate and define yourself in the market place.
THE WRAP UP
Within the header section there is a lot that goes on. What happens in this section of your website truly effects the experience of the end user and outcome that user has on your site as well. By far the biggest thing I would like people to take away from this is the importance of USP. But not just the message, but how many of the elements play in the building and development of a USP.
The devil in the details. Images, Navigation, Logos, Wording… they all have to be looked at with a microscope. When in doubt, hang out in a coffee shop for a few hours and have people give you their opinion on how things are worded and how they look. – Great way to meet people btw. I seriously could not tell you how many clients I have obtained this way.