Any user interface or UX designer worth their salt realizes that they can’t possibly know everything about how a site they’re building will work. When creating an interface design, whether it’s for the web, mobile or even an application, designers and marketers survey the landscape of competitors and similar organizations, apply what they know about current best practices, inject a healthy dose of magic and release it to the world. Many people simply leave it at that and wait for the site to do its thing.
As a conversion-focused inbound marketing agency, we know that it’s not enough to simply launch a site and stop there. We need to better understand how people experience what we build. There are a number of ways to accomplish this. The first and most common method of finding interface issues is by performing user testing in person or online. In this form of testing, a matrix of tasks is created and assigned to your test subjects who are asked to role play as a certain type of site user. The fundamental problem with traditional user testing, however, is that the tests you and your client can dream up may not accurately reflect what the broader userbase is thinking or requiring, and a test subject still needs to put themselves in the shoes of the persona you’re asking them to pretend to be. Although you can create scenarios for people to use as they perform the tests you set out for them, reviewing real usage data in aggregate is the best way to find the larger problems with your assumptions. You may still want to watch how people interact with your site, but it should not be your only source of data.
For that reason, it’s essential to install heat and click map tracking on your site’s key pages, and wait until you have a statistically significant number of users who have moved through the site before deciding what to change or test.
Download our Quick Start ebook to learn six things inbound marketers need to know about CRO.
Defining base assumptions
By way of an example, we have worked with the Halifax International Airport Authority for the past number of years to create and maintain a web presence that is truly of value to airport users. FlyHalifax.com needed to appropriately reflect the quality of an in-person experience at the airport, an experience that has garnered HIAA numerous international awards. As noted above, our first step was to evaluate the best airport sites in the world. We abstracted their content, and noticed what appeared to be a pattern of more people-centric design from those airports we saw to have the best web presences. These airports made sure to put information for airport visitors at the forefront: arrivals and departures, parking information, and directions were prioritized over branding, place photography and advertising, which was the opposite of the Halifax Airport site at the time of redesign.
The initial release of the site saw major traffic increases (more than 300% growth!) over the previous site due to consideration of the importance of mobile and a better-organized site architecture and interface design. It’s easy to view this as a success, but we knew that to truly make the site, ahem, fly, we’d need to listen to what our site visitors were silently telling us by way of how they used the site when they arrived. We implemented VWO’s heatmap and clickmap tools on the site and let some time pass before reviewing the data.
Results from our initial clickmap tests
Once we had seen sufficient traffic through the tested pages, we were surprised by what we had learned, and the results challenged our initial assumptions. In our review of the best-practice airport websites, the majority place arrivals and departures information above the fold on the homepage. All of them put Arrivals as the default view with Departures hidden behind a tab or other interface element. In our clickmap tests, we found that the number one place people clicked was on the Departures tab. In fact, 68% of all clicks on the homepage were on the Departures tab, and only 6% clicked back to the Arrivals tab.
Which, if you think about it, makes perfect sense.
Most people who are checking an airport website are on their way to fly somewhere, so they need to know if their flight is departing on time. Far fewer are going to the airport to pick someone up, nor do people who are currently on a plane use an airport website to find out when the flight will be landing. We hadn’t even thought to question the practice of showing arrivals first, since our research showed most other major airports giving it priority.
Making interface changes based on the results
Once we made the switch to show Departures in front of the Arrivals tab, we implemented a fresh heatmap and clickmap in VWO to test our hypothesis. The result? People still clicked through to Arrivals when the Departures tab was set as the default, but did so more than 20% less than when the inverse was the norm. Plus, site visitors were three times more likely to click back to the Departures tab than previously clicked back to Arrivals, suggesting that Departures is by far the most popular content on the page.
So, how might we use this to our advantage? I guess if you were a shameless marketer, you could make it impossible to access the full Departures flight list without clicking through to secondary page for those results to drive down your bounce rate or further monetize the content via display ads. These tactics are less about the people using the site and more about the profit of the airport itself. If, however, you want to take a people-matter approach to the marketing and sites you release, the most important thing we can do is to help your site visitors get to the content they are most likely to need, as quickly as possible.
A less intrusive way to help increase conversions or monetization could include interspersing simple offers after every tenth flight listed in the Departures area, such as a promotion for a vendor in the pre-board area of the airport. A tactic like this helps to drive revenue and facilities usage and is also sufficiently valuable to the user.
This is just one simple example of how to use heatmaps and clickmaps to better understand and improve the experience of the people visiting your site. As with any CRO program, there are many lessons to be learned from the data around how other areas of the homepage and the rest of the site can be improved, and a program of continuous iteration is the best way to continue making it better. Conversion rate optimization is never truly finished, and as long as you understand what a conversion looks like for your site, you’ll be able to optimize for it.
