We're pleased to announce that Mouse Eye Tracking has recently been awarded a win at the 2010 NSW AIIA iAwards in the Tools and Infrastructure category. On behalf of the AIIA and the NSW Government, The Hon. (Frank) Francesco TERENZINI MP handed over the award to Guido Tapia (PicNet Software Development Manager and Mouse Eye Tracking Architect).

From here it's onwards to the National competition to be held in Melbourne in August.

The iAwards is Australia’s premier technology innovation awards program, hosted by the AIIA the leading national body representing the information and communications technology (ICT) industry in Australia.

Mouse Eye Tracking Version 3 - Coming Soon

We've been busy working on Mouse Eye Tracking version 3, making several performance tweaks and building some nifty new features including:

Link Spotlight: Test the effectiveness of navigation bars, button designs and links - the Link Spotlight reveals data such as link clicks, hovers and the click-to-hover conversion.

Browser Resolution Heatmaps: Discover the most common resolutions used to view your site - Essential for identifying what visitors see immediately and what they have to scroll to find.  

Pathfinder: Visualise the most popular pathway users take to a specific page as a common sense, dynamic diagram.    

We’re always trying to find ways to improve Mouse Eye Tracking, if you have an idea, complaint or feedback in general, just leave a comment. We would love to hear your thoughts.

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.

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.

1. Interpreting Mouse Eye Tracking's multiple output modes (heat, click and tracks) to make sense of user movement patterns.  
2. 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!

This is the first in a series of posts documenting my personal use of Mouse Eye Tracking to understand user behavior on the PicNet website.

Website analytics and visualisation is growing day by day and if you've been keeping up with the trends, you'll undoubtedly know about Google's eye tracking tests and their ad positioning guidelines. The hotter the colour, the more mouse activity: 

The key point here is that these are guidelines only. Google even admits that saying:

While this heat map is useful as a positioning guideline, we strongly recommend putting your users first when deciding on ad location. Think about their behavior on different pages, and what will be most useful and visible to them. You'll find that the most optimal ad position isn't always what you expect on certain pages. (Source)

For those that don't know, we've recently developed Mouse Eye Tracking - a visual analytics web app designed to solve the above issue of finding optimal ad positioning and understanding user behavior. Basically, it tracks visitor behavior and outputs this data as heat maps and click maps.  

I have to admit, when the concept of Mouse Eye Tracking was first proposed to me, I was unsure whether it would be useful or popular, until I read Google's statement above, the last part in particular struck me - User behavior isn't "always what you expect." 

If you check out the Mouse Eye Tracking homepage, we have a demo running with live data from the PicNet website. The screenshots below are from our products page which has recorded 131 sessions, a decent sample size to draw conclusions from. 

Heat Map (Mouse Movement and Mouse Click)

Heat Map (Mouse Click Only)

When I designed this page, I tried to make it as easy as possible for users to get to the individual products by placing a large, clickable banner.

It's in prime 'real estate' and if we're to believe general usability heuristics, this area is where the most click activity should occur. Additionally, I made the banner huge so that users would be able to click on it easily. In fact, I'd say that users have to put in effort to avoid clicking it. 

Funnily enough, that's exactly what users are doing. The first heat map shows mouse activity over the banner, but when I compare that to the click map, it appears no one is clicking on the banner, passing it up to click on the product links below in the description - despite the fact that both the banner and the product links go to the same place. 

So there you have it. Sometimes user behavior isn't what you think. I'm not going to change the design because users are still finding their way to the content and I still feel that the banner images provide powerful imagery that communicate the essence of what the products are about - So from a marketing and branding perspective, they're important. But this is just another example of how Mouse Eye Tracking can help you understand user behavior which is the first step towards (in the words of Google) - "putting your users first."

How many times have you seen company advertisements claiming to be fast, powerful, proven or proactive? These are just some of the many brand values companies use to describe their products and services. Eventually they all blend into one another and with that, so does the brand - lost in a sea of cheesy slogans trying to shout over the top of each other. Bad marketing is everywhere, so it's no surprise that many feel marketing is a whole lot of bull with little substance.

So is marketing and more specifically, developing brand values, a useless exercise?

Of course not. Brand values are essential in defining what your brand is or aspires to be. The problem lies in how companies communicate these values. 

Think about it. The coolest kid in school never went around yelling "I'm the coolest!". Had he done that, he'd be destined for the life of a social outcast. His brand was 'cool' and he built it through the way he conducted himself, the clothes he wore, his friendships etc. 

Similarly, companies that have the strongest brands first craft their marketing message and brand values, then use (or develop) their unique attributes to communicate them. In this context, 'conduct' is equivalent to corporate citizenship, 'clothes' equivalent to product designs and 'friendships' equivalent to business partnerships, associations and sponsors.

So before you decide to stick long winded buzzwords all over your website, shopfront or products, consider the cool kid analogy. And remember, actions speak louder than words.