One of the biggest benefits of Mouse Eye Tracking that we communicate to people is that it can help you ‘design with confidence’, taking some of the guesswork out of more subjective tasks such layout changes and re-designs. In my previous post I showed you how Mouse Eye Tracking can test the effectiveness of design changes or new additions to your layouts, now I want to take you through how Mouse Eye Tracking has helped me re-design one of the most popular pages on our website.

The PicNet Table Filter is a popular open source library that we built for a number of commercial projects. Since it’s release it’s brought in consistent, sizeable traffic, perfect for Mouse Eye Tracking’s heat maps that create a visual representation of aggregate data.

Before Re-design | Mouse Click – Heat Map (click image for hi-res)

Here we can see that the most popular links are:

1. Demo/View Demo
2. Download
3. Source Code

Before Re-design | Mouse movement plus mouse click – Heat Map (click image for hi-res)

Some basic analysis and conclusions

1. Mouse movement is generally horizontal across the screen and quite spread out.
2. The navigation bar on the right is very popular, people are obviously using it.
3. The demo can be accessed either on the page, or by clicking on the Demo link to pop it out into a new window. It seems visitors are opting to go for the pop out version – no one is using the in-page Demo making it redundant and a waste of screen real estate.

How can I apply this insight?

After gaining this information, I know that in my redesign I want to:

1. Keep the three most popular links visible and prominent.
2. Get rid of the redundant in-page demo and free up space for important content.
3. Make the navigation bar more user friendly as it is a popular feature.

After Re-design – Mouse Click – Heat Map (click image for hi-res)

Viola! Here is the new design. Here’s how I’ve addressed the three issues above.

1. The three most popular links are consolidated into a central button bar above the fold. This compact design reduces the need for visitors to muddle around the layout looking for what they want.
2. The in-page demo has been removed and thus the vital “Getting Started” instructions are higher on the page, reducing scrolling and improving usability.
3. The navigation sidebar has been moved to the left hand side, where users can access it more easily. Additionally, the sidebar is now a fixed div, meaning it will follow as the user scrolls down the page, reducing the need for the user to scroll back to the top each time he/she wants to navigate. See it in action, go here and scroll down.

After Re-Design – Mouse movement plus mouse click – Heat Map (click image for hi-res)

And for good measure you can see here that all mouse activity is consolidated in the one central area, focusing on the three most important links. We hope this gives you a better idea how we use and apply Mouse Eye Tracking to our workflow. Got a different view? We’d love to hear how you’re using Mouse Eye Tracking, just leave a comment or contact us.