Web design and usability is a field that encompasses a variety of disciplines, including but not limited to, art, psychology and computer science. This makes it difficult to nail down strict procedures or formulas for success, but we can test and draw out informed conclusions if we know what to look for.
Recently we've been analysing the PicNet website using our latest visual analytics tool, Mouse Eye Tracking. It's been a humbling lesson on what not to do when making design changes to a website and we hope that our experiments will be of some value to you - either in deepening your understanding of user behavior in general, or in understanding how to use Mouse Eye Tracking for your own analysis. Let's get stuck into it.
I'm going to run through two key examples. I've highlighted their focus with red in the screenshot below.
- Interpreting Mouse Eye Tracking's multiple output modes (heat, click and tracks) to make sense of user movement patterns.
- Our experience testing the effectiveness of design layout additions.
Heat, Click and Tracking Interpretation
At first glance, this heat map might be confusing to some. We're on the PicNet website "About Us" page, yet the heat map displays heavy activity around the "About Us" link. This would lead us to believe that users are clicking on the "About Us" link. Why would visitors already on the About Us page, want to click on it again?
Fig. 1 Heat Map (Movement + Clicks)
To clarify this, let's switch to the Click Only heat map (Fig 2). Now we see little activity over the About Us link. Thus we can conclude that the majority of the heat is due to movement, not clicks. This effect occurs when users click on About Us from another page, that is where their mouse begins as the session is recorded for the About Us page.
Fig. 2 Heat Map (Clicks Only)
We can prove this theory by using the "Tracking for All Users" setting. As I played back the recording, mouse tracks all emerged from the About Us link, generating the movement heat we saw in figure 1. Below I've circled and arrowed the flow outwards.
Fig. 3 Mouse Tracking (All Users)
So now that we know how people are entering the page, where are they exiting? Figure 2 indicates large amounts of clicks on "Home", "Products" and "Clients", but by far the most clicked link is "Contact Us". So the majority of people, after reading about our company, want to get in touch with us or find out where we are. This is great as it means people are flowing towards our most critical conversion goal.
But we wondered, is it possible to tweak the design to drive even more people to the Contact Us page?
Testing Design Layout Additions
If you look back at Figure 1, I've circled the main protagonist in this lesson - The "Contact Us Today" button. It was a new addition to the website - our attempt to drive more people to the contact us page. We felt this change would accomplish our goal based on two factors:
- It's a button. Naturally, it feels more clickable than text.
- It's big and obvious, the size and dark colour contrasts sharply with the white background making it stand out.
Yet after leaving the button up for weeks, no one has clicked on it and few have moused over it. People are still finding their way to the text link in our main navigation despite its small size and plain appearance. I assume that this is related to usability heuristics - people are used to the experience of looking to the main menu to navigate. Additionally, users have developed a fear of advertising buttons and graphics (aka banner blindness) - But that's another post in and of itself.
Either way, we know for certain it's not effective and will be removed on our next website update.
Ultimately, we built Mouse Eye Tracking to help us understand user behavior and improve our website based on factual evidence instead of theoretical guidelines. Every website is different, but hopefully this example provides some insight on how you can begin analysing your website using Mouse Eye Tracking.
Good luck!