EyeQuant launch visual clarity scores

Written by Tom Greenwood - April 29, 2014

One of our favourite tools here at Wholegrain Digital is the attention analysis tool EyeQuant for which we are an agency partner.  If you are not familiar with EyeQuant, it can assess any web page (or design mockup of a web page) and accurately determine which elements of the page will grab the users attention.  This is incredibly valuable when designing a website with clearly defined goals and conversion funnels that need to be optimised, since we can quickly compare design concepts and iterate the design until you successfully focus the users attention on the most important messages on the page.

But this week EyeQuant released an exciting new feature – the visual clarity score.

What is the visual clarity score?

The EyeQuant visual clarity score assesses visual clutter on a page.  The mind can only process a limited amount of information at any one time, meaning that when you add more to a page, you are not really adding more but simply diluting the prominence of what was there.  Have you ever heard the saying “I can’t see the wood for the trees”?

By trying to show the user everything at once, they end up showing them nothing.  The result is a higher bounce rate and lower conversion rates.

If you want to communicate a powerful message, you need to keep your page design clean, simple and free from clutter.  The visual clarity score gives you a really quick, scientific way of assessing how clean or cluttered your web page designs really are.

Let’s look at a few example:

1. Cluttered Design – Lings Cars

The infamous Lingscars.com gets a visual clarity score of 0%.  The EyeQuant team say that this is the lowest scoring site they have tested, and for good reason.  Take a look at the scan result below.

Lings Cars visual clarity

2. Clean Design – Wholegrain Digital

Our own homepage was designed with visual clarity in mind, with a simple background and a single bold message, resulting in a visual clarity score of 86%.  It could be better, but this puts it at the upper end of the spectrum for visual clarity and is a good example of an effective homepage (if we do say so ourselves).

Wholegrain Digital visual clarity

3. Magazine Design – BBC News & Mashable

Magazine and blog websites are inherently hard to optimise for a variety of reasons.  They often don’t have clear conversion goals and the design are in some ways inherently cluttered, since there is a need to show people lots of content at the same time so that they can scan through it quickly.

BBC News is respected as one of the world’s top sites but yet it scores only 13%, demonstrating just how hard it is.  You need to be realistic about the type of site that you are designing, but there is perhaps even more need with this type of site to focus on reducing any unnecessary clutter as far as possible since there is less margin for error.

BBC News visual clarity

Very few magazine and news sites have managed to achieve a clean design, but a great example of one that has is Mashable.com.  It scores an impressive 78% on the visual clarity test, which is no doubt one of the reasons why it is so often referenced as a great example of online magazine design.

Mashable visual clarity

4. E-commerce – Very & iTadka

E-commerce, like magazine sites, can be challenging when it comes to focussing the users attention.  In this case, you have a clear goal to encourage the user to add products to their cart and purchase them, but you have loads of different products, which can bamboozle the user and confuse them to the point that they don’t know where to look or what to buy.  Visual clarity is therefore both extremely important and extremely difficult to achieve.

Very.co.uk is one of the top ladies fashion stores online in the UK and t does a decent job of keeping things clean and simple, scoring a respectable 66%.

Very visual clarity

On the other hand, independent Indian grocer iTadka.com has a much more cluttered and confusing design, scoring only 35%.  This is a shame because it is a great store and a simpler design could no doubt help them increase sales.

iTadka visual clarity

Is it all clear and simple?

The fundamental principles here are really very simple.  Keep the design of your important web pages clean and simple.  Focus on only displaying the most important information above the fold, use simple background images (if at all) and keep some space between each element on the page.  As my friend and digital guru Simon Phillips often says – “We need more negative space people!!”

Not everyone has lots of money to spend on design or has access to a tool like EyeQuant, but just taking the principle of visual clarity on board can help you improve suer experience, reduce bounce rates and increase conversions on your website.