My first job, back when I was in high school, was at a local Best Buy store. I forget what year it was exactly, but I have a feeling it was 1999 when I walked into Best Buy as an employee for the first time to start my training.
After the obligatory paperwork, safety videos, and corporate pep talk; the manager, aided by a large poster board, started telling us about the layout of the store. Simple stuff, like where each department was located and why it was arranged the way it was.
The media department was front and center because that is where most customers wanted to go first. Flanking the media department was the video, audio, games, home theater and home office departments. On the far side of the store were the appliances, furniture, and car audio departments.
This particular store plan was the fourth or fifth iteration of the layout. Best Buy, perhaps a little ahead of its time, was spending a lot of time optimizing the layout of their stores. Many Best Buy stores then and now are considered conceptual and are essentially experiments to see how visitors respond to the design.
This is really important to Best Buy because, in retail, success is basically measured by the amount of sales per square foot, and this is influenced by how the store is arranged, what products are where, and how customers browse the aisles.
Okay, that’s cool. What does it have to do with my website?
Everything. Your website is your store. It’s where your customers go to explore what you have to offer, and hopefully, buy something from you. But because it is virtual, you have a lot more flexibility than Best Buy does. You have a huge advantage over retailers with physical presence because you can measure and respond much faster.
Like a physical storefront, you have shoppers. And they are walking up and down your aisles as they click links and read pages on your site. It really doesn’t matter if you sell a service, like hosting, or products. Just like in retail, the more they scroll down your pages, the further down your aisle they go, and the more pages they click on, the more products, services, or supporting value propositions they look at and are exposed to. Once they find what they need and feel comfortable about you selling it to them, they will naturally checkout and buy it.
To optimize their floor plans, Best Buy has to observe how their customers walk their stores and then somehow correlate that information to their sales figures. Best Buy, and most other retailers who engage in this practice, most likely have a lot of trouble getting the underlying data they need to actually make intelligent optimizations to their layouts. I would not be surprised if they literally watch security camera footage and then try to draw correlations with that and sales figures to see if there is any inefficiency in their store layout that they can squeeze out.
If they see better sales per square foot in a concept store, and they can draw a connection to the layout, they take the concept mainstream, and deploy it to a test group of stores. The more successful it is, the more stores pick it up, with the best concepts going national and becoming standard floor plans. This is what I call a “control” design.
Okay, that is dandy. What does it mean for me?
So here is how you can apply the same principal of optimization to your website in a few easy steps. I suggest starting this process with just ONE page on your website – like your homepage – and then expanding out to other key pages over time. Don’t try to over-optimize, making too many changes all at once makes it hard to know what change had what impact.
Meet Website Heat Mapping
Heat mapping aka click mapping is a form of web analytics where you track where your visitors click to get a better idea of how they interact with your website.
This is an example of SingleHop’s homepage from earlier this year after a heat mapping test. The colors indicate where visitors clicked. The brighter the colors, the more visitors that clicked on it.
Immediate Goals vs. Long Term Goals
You sell widgets. And your ultimate goal is to “sell more widgets.” That’s NOT what I’m talking about here. What I’m talking about is more like: “The goal of my homepage is to get visitors to click on this green button and go to my product page.” In reality, there are usually more than just one goal. For example, for SingleHop.com, our homepage goals are:
- Get the visitors attention; AND
- Get the visitor to look at our Dedicated Server list; OR
- Get the visitor to click on Live Sales Chat; OR
- Get the visitor to visit our Cloud Server section
If you think that is oversimplified for an e-commerce site, you would be right. But that’s the point. You’re not trying to measure the number of sales generated, or the number of leads generated. You’re trying to measure user interaction. You should think of users buying cycle as a process and their interaction as the first part of the process.
Don’t move too fast
In other words, unless you sell a product that is purchased on impulse, don’t mistake of trying to optimize every page for your end-goal. Yes, I know, your ultimate goal is to make some sales—but before you get there, you have to help guide your customers through your store by optimizing their browsing pattern so that they eventually end up at the checkout counter with a basket full of stuff.
Once you figure out what your goals are, it’s time to figure out a way to measure it. There are a number of good tools for website optimization out there. I have tested a lot of them over the past few years, and have settled on CrazyEgg.com (more on them later) because of its simplicity and dependability, but there are at least a dozen similar services I have encountered.
Once you pick your tool, and set it up, you need to decide what pages to test. My suggestion is your homepage alone in the beginning, then expand to other pages.
Run a control test
Before you make any changes, just watch how people interact with your homepage. Remember, you cannot get a meaningful heat map without a statistically relevant number of visitors. I suggest 10,000 visitors for each test, but depending on how much traffic your website gets, you may want to do just a thousand. The more people, the better the results. If you don’t get a ton of traffic, then try to run a test for a longer period of time to capture a larger sample size. This first heat map is your control for now.
Interpret results and form a hypothesis
Once you have installed your heat map software and tested it on your homepage with a decent sized sample, you can start to form a hypothesis.
First, take you the goals you made out. Note which parts of the page your visitor would have to click to trigger any of the goals. Then see if your visitors are clicking there on the heat map.
Then ask yourself these questions for each of your goals:
- Are visitors clicking where you want them to click?
- If so:
- Why do you think they are clicking there?
- If not:
- Can they see the link or button clearly?
- Is there enough contrast around it?
- Is it the offer? Is it the design?
- What does it say? Is the CTA message enticing? (e.g. does it just say something like “Learn more” or something more meaningful like “See the feature list”?)
- Are there too many links on the page for them to know where to click? Are they distracted?
- Does the text and imagery around the links support the message and give them reasons to click on it?
- What can you change that would make them more likely to click there?
Once you have thought about it, form a hypothesis. Often for me this means the messaging, imagery, and button text need to be updated.
Forming a Hypothesis
Once you have gone through the above, you can start to brainstorm ideas. What if you moved the button to the other side and changed its color? What if you changed the message to something a bit more aggressive?
There are thousands of articles on the web on optimizing for clicks and conversions. You can even find a few on this blog to help get you started.
But don’t just make changes willy-nilly. Make a list of changes and make sure you understand two things about each of them:
- Why are you making this change?
- What do you expect to happen once you make the change?
Avoid making too many changes at once… Then make the changes, start a new heat map and see how it goes.
A quick note about split testing
One thing that I did not cover here that is relatively basic is split testing.
The best way to do large scale heat mapping and website optimization is to split test changes instead of making them to the live version. There is a little more work involved here, but basically you just slow things down and run tests against your control in parallel instead of consecutively.
Instead of making the change to your main homepage, make a test version and redirect half your traffic there. There are a lot of great tools out there for this and we make heavy use of it at SingleHop, but that is an entirely different blog post all together.
The tool we use at SingleHop for this is called CrazyEgg.com. I reached out to them before writing this blog post to see if they would be interested in offering an introductory discount to our customers who may find this post useful and they have agreed. If you found this guide interesting and want to give this a shot yourself, then here is a 90 day free trial + 10% lifetime discount off CrazyEgg’s analytics packages.