What is it?

Crazy Egg is an online tool that monitors individual pages from your website, giving you a breakdown of where different visitors have clicked and on which part of the screen. There is also some more basic analytics data available on which pages have been viewed most frequently, and where your visitors have come from using different visual displays.

All you have to do is insert a small bit of code into the html of the page you want it to monitor, and sit back and relax. The site does it all for you from then on providing live results as it tracks the progress and every click that visitors make on the chosen pages.
 

What are its advantages?

Simple steps to set it up. Probably the best advantage of Crazy Egg is that it’s easy to setup on any website providing you have access to the site’s code. In just three steps you can set up Crazy Egg to monitor as many pages of your site as you wish (With a free account you can monitor up to 4 pages. To monitor more you have to upgrade to a paid account but prices start at as low as $9 for 10 pages which is peanuts really).

Five different and interactive ways of viewing the results. Crazy Egg provides you with an array of different ways of viewing the results; each has their own uses and will cater to different peoples’ preferences of viewing information.

The four different visual views the Crazy Egg provides; (from left to right) heatmap,
scrollmap, confetti, overlay

 
Now all the different views certainly look eye catching and interesting, but the one that we think is the most informative and useful is the confetti visual which displays all the clicks in a colour coded fashion giving you the option to filter which clicks from which external sources you want to see displayed on the page. The other views certainly have their uses too and collectively provide back up evidence to support theories drawn from the overall information gathered. For example, the scroll map in conjunction with the heat or confetti map can give you a good gauge as to where the most focused part of the page is and whether users are clicking on your call to action buttons within those areas.

The list view is the last of the different states and displays a table of the items
clicked on within the page

 
Exportable reports of your results. Crazy Egg allows you to export a report of your results which is good for sharing and bringing them to meetings. The different views also allow for an interesting display of information (not the normal pie or bar charts). A slight limitation of this however, is the fact that it merely exports a ‘screenshot’ of your snapshot in the visual that you viewing it in when you click export report.

Crazy Egg data can aid design decisions. The information that Crazy Egg provides about your website pages can prove helpful when discovering what elements of your website need to change – to be moved or altered aesthetically to enhance their use. As I mentioned earlier, the accuracy and specificity of Crazy Egg is really where its advantage over other analytic tools such as Google Analytics lies. In allowing you to see exactly where your users are trying to click, or more importantly where they aren’t trying to click, it allows you to make informed conclusions of where potential areas of improvement are within the site. Finding out what improvements, however, requires more research than Crazy Egg can provide.
 

What are its limitations?

Despite many claims it is not a usability tool. Don’t let the reviews fool you. It can be helpful in allowing you to spot a problem such as a button that does not get used, but it doesn’t give you any other information as to why people aren’t clicking on that button. You can make assumptions from the data that Crazy Egg gives you but each assumption you make could create yet another problem. Still, once the problem is spotted, these questions can easily be resolved by investing in a proper usability test of the site.

The confetti visitor box doesn’t move off the snapshot. When viewing the confetti results there is a little black box that lists the different visitor information for you in one area. However, the box is within the captured shot or ‘screenshot’ of your page, and so at no point can you see the whole page on its own. I realise you can minimise the box but even then I found it distracting. This might just be a pernickety personal irritation but I found it quite frustrating when trying to see the spread of clicks across the page.

The information on each type of visitor is displayed in the box above which cannot leave the screen

 
You can only compare two ‘snapshots’ via the heatmap view. Crazy Egg allows you to compare two or more page results within the site; though you can only compare them within the heatmap view. This can become tiresome especially if you wanted to see the comparison of specific clicks between pages.
 

The comparison feature on Crazy Egg only allows for a comparison of the heatmap view

When we recommend using it

We would recommend using it if you want to gain an insight into what your users are doing, in a very basic form, when they come onto your site – i.e. what links are being used and which seem to be ignored. This can help in making design decisions to improve your users’ interactions with your site. However each of these decisions still includes a large element of guess work which is why user testing is always a thorough technique to be used in conjunction with site analytics to ensure that you know exactly what needs to be changed, why, and what it needs to be changed to.

I was talking to someone the other day about the new BBC homepage which employs a way to navigate through content from left to right. I thought it was well implemented, and knowing the BBC they would have user tested it thoroughly before making the call.

Anyway, the conversation swiftly moved on to horizontal scrolling and how as a ‘usability dude’ I must hate anything with a horizontal scroll bar. I tried to  explain that most of us ‘usability’ people are not against unconventional design, but we just like to see it implemented for the right reasons (because it fits with the user goal) and not for the wrong reasons (because the designer likes it and wants back slaps from peers).

Vertical scrolling, Yes. Horizontal scrolling, No.

In a talk, Jakob Nielsen once demonstrated his thoughts on horizontal scrolling by nodding his head up and down saying, "vertical scrolling, yes", then, shaking his head left and right saying, "horizontal scrolling, no".  A clever way to make a point, but digital design is never as simple as just following a rule or guideline from a so called ‘guru’. There are of course situations where a design works perfectly well going against conventions (which are typically outdated anyway). So we ask: When should you use horizontal scrolling?

Of course there’s no easy answer to that question. But when understanding the context of use and the goals users have when using the site it can become easier to decide whether to use horizontal scrolling or not.

When using horizontal scrolling can be beneficial to users

Although it’s not something we would always recommend, these examples may suit horizontal scrolling if you are keen on using it:

• Displaying a variety of visual images i.e. a photography site or design portfolio
• Displaying information in a large visual area that is not easy to see at a glance – i.e. think of a map or Google’s street map which employs horizontal scrolling to good effect
• Displaying discreet sections or slides of information – Tablets and smartphone apps employ the notion of swiping and when this is used to move from one screen from left to right it can work really well and feel completely natural. Similarly applications such as Slideshare work well in the horizontal plane (although it is arguable that this constitutes scrolling)
• Displaying a large catalogue of products or items where scrolling horizontally could display different product categories

Why you should be careful in using it

• Most mice have a vertical scrolling wheel, few have an easy way to scroll horizontally. This means most users have to manually operate the scroll mechanism. This is slowly changing with smart mice like the Apple Magic Mouse but may still take some time before they’re mainstream. In fact if you consider physical ergonomics, it’s much easier to move a finger up and down, than it is left to right. Thumbs and hands on the other hand are much more adept at a horizontal scrolling motion, so this type of navigation is likely to depend on innovations in gesture interfaces
• The experience of scrolling horizontally on some sites makes the screen judder and can have that headache inducing feel to the experience
• Controlling the speed of the scroll can be problematic, with some content whizzing past and others taking forever. Giving users the right amount of control can be difficult to get right
• We’re so used to reading left to right within the confines of a page where we make our way slowly downwards, introducing a horizontal scroll could break a fairly rigid western convention so should be used with care when reading is a core part of the user journey

Examples around the web

Interestingly Abercrombie, Hollister, and Superdry have made the decision to move away from horizontal scrolling to vertical. Shopstyle on the other hand have employed horizontal scrolling well on their site.

Like all new functionality, it should be thought through carefully and of course tested with users before taking the plunge.

Here’s some examples from around the web that we’ve found using horizontal scrolling in some way:

• http://www.bbc.co.uk/
• http://www.kiapicanto.co.za/
• http://www.cooper.com
• http://www.marianaonate.com/
• http://www.mareenfischinger.com/
• http://www.dennys.com/
• http://www.shopstyle.co.uk/

What do you think? Do you have any good examples to share?

Recently I read the excellent Don’t Make Me Think by Steve Krug. One of the key points Krug makes is that a good website should be invisible. A user has a goal to reach and that is their focus. The website is a pathway to their goal alone. This reminded me of an article I read whilst undertaking my Visual Communication degree – The Crystal Goblet also known as Printing Should Be Invisible by Beatrice Warde.

Warde uses the analogy that a true connoisseur of wine would chose a clear, crystal, wine glass from which to drink their wine because this vessel has been specifically designed to hold the wine in such a way that it displays, and enhances all the wines qualities; the colour, the smell, and the taste. Its own beauty does not hide that of the wine which is the thing that we wish to consume. In the same way a website should be designed specifically to display and show the information that the user requires from it. It should not hide the information with needless flashy graphics and images.

Krug states that a good, clear website design is one that does not make the user think, it guides them clearly and quickly to the information they seek without hindering them in any way. The designer, who keeps their users’ needs at the forefront of their mind, is the designer who will produce a website that will function so perfectly that the user will not notice they have taken a journey at all.

Too cool to be called for

‘Without this essential humility of mind, I have seen ardent designers go more hopelessly wrong, make more ludicrous mistakes out of an excessive enthusiasm, than I could have thought possible… It is not a waste of time to go to the simple fundamentals and reason from them’.

Warde, B

Sometimes, in the quest for innovative design, the true purpose of our project can become obscured and forgotten; this purpose being the need of the end users. We often spend more of our time worrying about the ‘wow’ factor and how to make a website really stand out, than focusing on how we can achieve what the consumer needs in the most efficient, and effective way. Many users will not appreciate the skill of a great designer, as the design works so well it is invisible, but that doesn’t mean it should be taken for granted. The majority of the time we only seem to notice when things are wrong.

Look for the invisible

If we spent our time looking for the things that make a website good, and appreciate them more regularly, we would be able to learn from them and use similar principles in future designs. The next time you use a website for the first time, and get straight to the information you need, try and actively remember; note down what made it easy for you to use and how this was achieved, and consider it the next time you work on a design.

For Beatrice Warde’s full talk on the importance of good typography and invisible print click here;

http://www.designhistory.org/CrystalGoblet.html

Our primary function as a business is to bring our clients closer to the users of their website. It’s difficult to remain objective and see things from your users perspective when it’s your website. When you have conceived ideas, directed the look and feel and even written the copy. You know your website and your organisation inside out and you know what you want to achieve with your site.

Users don’t care about your business

When we put users in front of your site, they don’t care about what you want them to do, they don’t care about your business, they just need to get things done. It can be really difficult for us to break this news to our clients sometimes, but more often than not users don’t care about you, they are too focused on all the things they need to get done. Finding out more about how great your company is hasn’t made it to their to do list.

You need to make a decision about your website

If you run a website, you need to make a decision. You can either continue to push the objectives of your company and go on the hard sell, or you can accept that you are not that important in the users eyes, and focus on helping them instead. We encourage our clients to think of their site in terms of a sales person just inside the door of a showroom. As the customer walks through the door, what type of sales person do you want to be? The pushy sales guy, or the genuine sales assistant?

The pushy sales guy website

The pushy sales guy website acts something like this when a customer walks in the door/enters the website:

Unfortunately, this type of website is quite common. The homepage is all about the organisation and all the navigation and calls to action are designed to push the business goals without any real thought for what users goals might be.

The helpful sales guy website

The helpful, genuine sales guy on the other hand might go something like this:

Focus on user goals and you’ll satisfy your business goals

Ok, so this is all a little oversimplified perhaps, but in principle we find the websites that really frustrate users are those which are too inwardly focused and over prioritise their business goals over their users’ goals. In contrast, the websites we find users naturally want to use again and again are those which balance the needs of their business with the needs of their users. By ensuring their users can find what they are looking for quickly and easily, they generate more repeat business and more sales as a result. A genuine focus on user priorities generates a big difference to their business goals.

Does your website act like a pushy sales guy?

 
A long time ago, I could go into a sports shop, look along the line of trainers, pick one I liked that was the right size, colour and price, pay for it and go. Recently, inspired by a growing waistline and a bundle of thirty-mumble-mumble-mumble-th birthday vouchers, I tried the same thing on Amazon – only to run into a wall of purchasing doubt.

The same brands, colours and sizes were all present. Tick boxes and drop-down menus made it easy to choose exactly what I wanted thanks to Amazon’s intuitive design. Yet, every time my cursor neared the Add to Basket button, doubt and hesitation struck. What if that one negative review means I will have wasted my money? Was that really the best price? Is there another product like this one but just a little better for the same price that has all positive reviews? Before I know it I’m trawling through more product pages with doubt growing even stronger and the chance of a quick and easy purchase has vanished.

Some purchase decisions rely more on reviews than others

Not all purchases online are harder, it just depends on what you’re buying. I can buy books, DVDs and games online without a thought, knowing that the price is cheap, delivery will be fast and it takes a lot of the donkey work out of buying presents.

But, go beyond these modern staples of life, and things suddenly get a lot trickier. Reviews mean more when people actually use something, be it a bike, tent, shoe or cleaning product. Reviews also come into play more when you’re unsure about what to buy, do I need one of these to fix my specific problem or should I get one of those? At that point four stars suddenly look less than perfect, three stars positively average and don’t even think about something with a two-star rating. You might not even look behind the rating to find there are only two jokey or caustic reviews from users who, possibly, brought the wrong product for them anyway.

Negative reviews can counteract positive ones causing doubt in a purchase decision

Does online shopping force us to focus on the detail?

Comparisons between products can also get in the way of a buying decision. Anything complex such as a laptop can see endless variations between "similar" models, that confuse and confound someone who just wants to "do Facebook and email." Does offering users all this extra information with reviews, product descriptions, videos and price comparisons really make shopping easier? Or is it making us focus more on the detail too much? What should be a happy moment when you buy that new gadget is now one which is anxiety filled and doubt ridden, even after it arrives at your door.

A lot of ecommerce sites have copied each other assuming that adding product reviews and more information is the way to get more sales. But, if anything, it is possible that the more data available at the time of purchase, the more likely people are to compare data, focus on the detail and start their quest for the perfect product elsewhere on the web.

Perhaps online stores should encourage users to reduce their focus on data (but continue to provide this information) and instead attempt to influence a more emotional purchase decision.

What do you think? Are users being over informed?