Capturing User Attention with Color

Color permeates our actions and reactions to everything we do; it plays into our sense of identity, into our choices, into our relationship with the world around us.

To conversion optimizers, marketers, designers, and advertisers, choosing a branded color scheme that sells can easily become a lengthy and complicated problem. So many considerations are at stake: How do my color choices reflect my brand? Do my color choices reflect the brand’s ecosystem? Will these colors “convert”?

In this article, we’ll take a closer look at color from the perspectives of neuroscience, business, and psychology. In particular, we’ll talk about:

  • How humans see and perceive color.

  • What colors and combinations of color garner visual attention.

  • The real story behind the emotional language of color.

  • Best practices when choosing and using color in branding and design.

But Really, How Do We See color?

Let’s start at the beginning: color is a construction of our minds.

Isaac Newton was perhaps the first person to observe that color is not inherent to all objects; rather, an object either reflects or absorbs colored light, and what is reflected is in turn what our brains will process as a specific color.

The color spectrum is made up of three primary colors: red, yellow, and blue. By combining these three colors, secondary colors – green, violet, and orange – are produced. Mixing any primary or secondary color produces a tertiary color – blue-green, blue-violet, red-violet, orange-red, yellow-orange and yellow-green.

The Color Wheel

Goethe came up with the common representation of the symmetrical color wheel. His Theory of Color, published in 1810, experientially and conceptually explored the effects of color on humans.

The common color wheel represents the three primary colors, the three secondary colors, and the six tertiary colors so that the “complementary” colors are always diametrically opposed: red is opposite green, purple is opposite yellow, and blue is opposite orange, etc.

Complementary colors are the pairs that will allow for the most contrast, or, in Goethe’s words:

“for the colors diametrically opposed to each other… are those that reciprocally evoke each other in the eye.”

Color and Visual Attention

“Human visual attention is for an important part bottom-up driven by the saliency of image details. An image detail appears salient when one or more of its low-level features (e.g., size, shape, luminance, color, texture,binocular disparity, or motion) differs significantly from its variation in the background.”

This is a quote from a research paper by researchers from the University of Barcelona on the saliency (or visual pop-out effect) of color. Much of the visual attention we pay to specific regions of a scene depend on bottom-up (stimulus, rather than task-driven) attention. This describes why color choices affect the way a user will interact with a website when they first arrive.

Human visual attention, in other words, first responds to contrasts in color and light, then to the emotional and cultural value of a specific color.

Our perception of color has evolved over thousands of years in order to help us “discriminate edible fruits and young leaves from their natural background” (Koenig).

In his research into the nature of color contrast in the Ugandan rainforest – a so-called birthplace of civilization – Professor of Neurobiopsychology (and EyeQuant co-founder) Dr. Peter Koenig and his fellow researchers found that the axis of Red-Green color contrast plays the largest role in attracting our overt attention in natural scenes, while the effects of a Blue-Yellow color contrast are much less influential. While this research is specifically related to jungle scenes, it certainly offers interesting fodder for further research into how and why certain colors and color combinations stand out to us more than others.

Color saturation is another possible predictor of attention: the more saturated an element is in comparison to its surroundings, the more quickly it is likely to be noticed.

There is a crucial bit of knowledge to extract from this last paragraph: color saturation attracts attention in relation to its surroundings. As we will later see, even bright red can fail to catch a user’s eye if the right context isn’t in place.

Color and Semiotics

Green symbolizes trustworthiness, youth, energy…but wait, so does yellow…and orange… and blue. Breaking down the associations colors have to certain states of mind can be terribly confusing.

In semiotics – or the study of signs – the use of color as a substitute, or sign, for information is frequently broken down by Peirce’s Trichotomy of Signs:

  1. Iconicity measures the resemblance to something, such as a photograph or an icon. It can also refer diagrammatically or illustratively. For example, red and orange are perceived as “warm” colors, while dark colors are perceived as “heavy”.

  2. Indexicality is the measure of the way in which a sign is linked. For example, a green banana is understood as under-ripe, a yellow banana is understood as ripe to eat, and a brown banana is understood as over-ripe.

  3. Symbolicity is far more elusive as it lacks the logical connections to meaning that iconicity and indexicality have, yet it is what marketers commonly refer to when speaking about the language of color. Green means go and red means stop, but the symbolism of colors remains dependent on a specific context.

Color and Branding

You can only paint your living room walls once they have been built, sanded, and prepared, and the same principle goes for your website: a basic global framework of decisions must be made before aesthetic choices such as color can be made.

There are no secret formulas involved in choosing a color scheme, nor is there one color or color combination that is guaranteed to attract your users to your product like magpies to gold.

In order to make this crucial aesthetic decision, you must first understand who you are, what it is that you want to achieve, and most importantly, who you want to achieve it for.

In this way, color should act as a substitute for information: as opposed to telling a user to “look there” or “feel this way” about an area of a web page or information on a product, color should fill in blanks by virtue of its characteristics.

Color and Conversion (Or the Story of the Big Orange Button)

One such example of this method of substitution is the “notorious BOB” (excuse the bad joke).

The BOB (or Big Orange Button) has become a symbol of color’s role in conversion rate optimization. WiderFunnel and Unbounce love to speak about its power, and perhaps rightly so. But why is the BOB the saviour of conversion, the Queen of the CTA’s, the undisputed fan favourite of users?

While there are no clear reasons why a bright orange CTA purportedly converts so well, we’d like to offer some possible reasons:

“Safety orange”, or a bright orange (Pantone Number 152) is used to differentiate important information from its surroundings, especially in contexts that require quick decisions and immediate attention such as in traffic, in hunting, and in disaster relief. The allure of bright orange has to do both with its saliency against common natural backgrounds such as blue sky or dark green forest, but also with its semiotic connotations; because of its symbolic status as a “safety” color, we could hypothesise that bright orange encourages more urgent decision-making – which is good news for e-commerce buttons.

A Big Orange Button works best when it stands out like a hunter’s safety vest in the forest: it needs contrast – often in the form of complementary colors – in order to attract and direct attention.

Best Practices

Contrast and Balance

A popular design model for creating balance within a color scheme is to adopt the basic “60-30-10 rule”. Here, the rule dictates that your most dominant color should be used 60% of the time, your secondary color 30% of the time, and an accent color 10% of the time. Typically, the most dominant color should also remain the least saturated color, while your bold or highly saturated accent color should be saved for your most important content.

Behind this intuitive strategy lies an idea that is basically consistent with the science of visual attention. In the simplest of terms, what we are visually drawn to relies on intersecting sets of spatial and contrasting characteristics. A sparsely used “accent” color is likely to attract visual attention both because it is scarce and because it elicits a high value of visual contrast.

 

Whitespace

In the jungle, we’re neither provided the luxury of whitespace nor respite from the surrounding visual chaos.

Websites are different. Whitespace is crucial to drawing user attention to key areas and to balancing and directing the flow of information across a page.

This, of course, is no news to you: “minimal”, “flat”, “simple”, “uncluttered” design is fast becoming the strategy of choice for creating high converting, usable web pages. And yet, adding white space to a web page in order to draw more attention to a key element can be slightly trickier than you think.

A huge, invasive red ad, as seen below, might seem as if it would capture our attention immediately, but it is in fact largely ignored, as evidenced by both an eye-tracking and an EyeQuant analysis.

On the left, you’ll see an eye-tracking study conducted with 38 subjects (over twice the average number of participants for a study), and on the right, EyeQuant’s very close prediction. In each case, it’s clear that the massive red “FINAL SALE” sign in the middle of the page receives comparatively (and surprisingly) little user attention. In fact, the large red square is participating in the white space of the design more than it is standing out from it. The highly salient black sandal at the very bottom of the page, meanwhile, receives far more heat because of its point of contrast in relation to the rest of the page.

Know Your EcoSystem

An emotional framework of colors has been, in all likelihood, already established by your competitors and the brand ecosystem you work within. Do you hop on the bandwagon or do you swim against the current?

Well, it depends:

Some brand domains prefer consistency…

Fashion E-Commerce is a vast ecosystem that nevertheless tends to adhere to a color scheme. Chanel introduced the now ubiquitous monochromatic black and white scheme to fashion in the 1920’s, and sites such as Net-A-Porter, TopShop, American Apparel, and Sales Gossip follow suit themselves accordingly.

In this case, a predominantly monochromatic (with moments of color splashed in) are used in order for the user to immediately identify that they’ve come to a fashion-forward site. Just take a look at Net-A-Porter’s strategic use of red to draw attention to their sale items:

And some don’t…

Other product domains, however, aren’t so “black and white” (again, excuse our pun). Environmentally-savvy products might intuitively choose green as iconic of their relationship with Mother Earth, but they are often just as wont to choose green’s complimentary color – orange – in order to provide a welcome change. Choosing a color based on semiotics alone is common practice, yet limiting.

By the same token, working on a monochromatic gray scale like the fashion industry works well because it also converts easily (important information can be picked out using splashes of colour), yet relating a brand to a color for symbolic reasons alone may lead to a reduced bottom-up attention.

Once again, users will see what is salient on a page before they start processing the emotional and cultural importance of color.

Test, Test, Test

Neil Patel of CrazyEgg and KissMetrics once wrote that person responsible for A/B testing at Gmail ran tests on 50 shades of blue before deciding on the hue that worked the best for their users.

For the vast majority of us, this quantity of tests is far out of reach (Gmail does have 425 million test subjects, after all), but Neil does point to a now famous A/B test published by Performable at Hubspot. Here, Performable tested a green CTA button – which is consistent with their overall branded colour scheme – against a red CTA button.

The red CTA button outperformed green by a whopping 21%.

Like Hubspot, we’d be crazy to say that we know precisely why this is the case. We could point you to studies that suggest that red is indeed the most salient – and hence most attention-grabbing – color, but saliency is dependent on context, or how a certain color pops out in relation to its surroundings. That said, making sure that your most important elements are the most visible ones – and color is one of the main mechanisms to achieve that – will typically result in better conversions. The only way to find the best converting color for your own web page is to test, test, test.

To quote hubspot,

“Therefore, do not go out and blindly switch your green buttons to red without testing first. You should test colors on  your  page and with  your  audience to see what happens. You might find something interesting in your data that we don’t have in ours.”

Key Takeaways:

  • Our attention is first grabbed by what is salient (through a combination of color contrast, space, and size), then by the semiotic value attached to certain colors and color combinations.

  • Use saturated colors selectively: bright and bold colors are excellent at attracting attention to select regions of a page, but soon become overwhelming if overused.

  • The best way to draw attention to your most important elements is to create a balance between white space and contrast. An oversaturated web page will overwhelm your user’s ability to attend to your most important elements.

  • Understanding the way other brands in your ecosystem is crucial: Some areas, like fashion e-commerce, tend to adopt a consistent color scheme, while most others thrive on differentiating themselves from their competition.

  • A/B testing is the best way to see how your color choices affect your branding and design.

  • Predictive Eye-Tracking, meanwhile, will help you to better understand how color is affecting user attention, and will also give you ideas for what to A/B test.

For more resources on color and how to use it to attract attention online, start with:

Oh, and a little factoid:

The common goldfish is the only animal species to be able to see both infrared and ultraviolet light!

Introducing the EyeQuant Team, Part VI: CEO and Co-Founder Fabian Stelzer

fabian

EyeQuant’s CEO and Co-Founder Fabian Stelzer is a busy guy, which is exactly why the EyeQuant Blog is so excited to finally have the chance to ask him five familiar questions:

1). Where did you grow up, and what did you want to be when you grew up? 

I grew up in Schwaebisch Hall, a small town in southern Germany. It used to be a medieval “Silicon Valley of Salt” type of place, to which its impressive gothic architecture is still testament. I always wanted to be an investment banker. Just kidding. It was the 90s and who didn’t want to be a front-man in a grunge band? Curiously, I did run a small map-making business at elementary school selling meticulously drawn maps of Europe for 1 DM each. So I guess I did have an early interest in the epistemic power and commercial viability of maps in the more general sense!

2). Tell us a love story: How did you find EyeQuant, or how did EyeQuant find you?

My academic background is in Cognitive Science, which I studied in Osnabrueck and Zurich from 2003. There was no known “industry” hiring cognitive scientists and the university advised us to call ourselves “Cognitologists” to improve employability.

I interrupted my studies to help Stan James‘ start Outfoxed (which eventually became Lijit.com) during the Great Web 2.0 Era in the mid 00s. It was fascinating to learn that startups are a thing. Upon my return to Germany I met my co-founder Prof. Dr. Peter Koenig, whose team had just developed an early prototype of a technology that accurately predicts attention on websites. Suddenly, my separate backgrounds in CogSci and startup BizDev made a LOT of sense. We connected the dots and founded the company behind EyeQuant in 2009.

3). What do you do at EyeQuant? What is the most important part of your role here?

As EyeQuant’s co-founder and CEO, I’m making sure that we make the right decisions at the right time. We know we’re on the right track when our customers, our team and our investors are as happy and excited as possible to be part of this story.

4). You are wearing a wizard’s hat and gazing into a crystal ball. So, what will we all be speaking about next year, or five years from now?

In the consumer space, Mobile is no longer the next big thing – it’s THE big thing. As for the actual N. B. T. I’m betting on brain-to-computer and alternative input interfaces. Google Glass is a start, and we’ll see some truly interesting augmented reality applications around it. However, our visual sense’s capacity is limited and I’m bullish for more direct routes both to consume and produce information – tactile is interesting, but we’ll inevitably see methods that operate much closer to our nervous system. This will be as much of a neuroengineering challenge than a neurophenomenological one.

5). Zombies or Vampires, and why?

Vampires, but only if they’re as neuro-scientifically plausible as in Peter Watt‘s hard-sci-fi work, including the “crucifix glitch” in their primary visual cortex.

Introducing the EyeQuant Team, Part V: Niko Felger, VP Product & Technology

Image

With lots of new hires joining the EyeQuant team recently, we felt it was important to give them a chance to introduce themselves and talk a little about their interests – and what they do at EyeQuant. Meet Niko Felger, VP Product & Technology!

1). Where did you grow up, and what did you want to be when you grew up?

I grew up in picturesque and sheltered Schwäbisch Hall in southern Germany, just like our co-founder & CEO Fabian. As a kid I had all the usual ambitions–being a train driver, astronaut, fighter pilot, musician, actor, ideally all at once! I clung to naïve ambitions well into my early twenties–now wanting to become a journalist, music producer, sound engineer, radio DJ and photographer–until I stumbled upon a university class in Phonetics, which studies the sound and perception of human language. I was immediately hooked. Everything about language fascinated me and had for some time, so I decided to combine this with my interest in computer science and ended up studying Computational Linguistics.

2). Tell us a love story: How did you find EyeQuant, or how did EyeQuant find you?

Easy: I went to primary school with Fabian! We’ve always been close friends and had actually worked on some cool school projects together, back in the day. So when I made the decision to move to Berlin, it was a no-brainer for me to try to find a way to work with him again. We’d kept closely in touch, so I already knew the product and had met the team before and had been duly impressed.

3). What do you do at EyeQuant? What is the most important part of your role here?

As VP Product & Technology, my job is twofold: On the product side, my main job is to figure out what our customers want and need, and make sure we prioritize building what is most important for them. On the technology side, I support the development team in building and maintaining the EyeQuant product and services, and try to make sure everyone has what they need to be productive. But besides all this, I try to find as much time as possible to write code. 🙂

4). You are wearing a wizard’s hat and gazing into a crystal ball. So, what will we all be speaking about next year, or five years from now?

We’ve seen some tremendous developments happening in parallel in the last few years, and so I think we’ll keep talking about some of the things we’re already talking about, as they enter the mainstream: the continued rise of mobile, wide-spread distribution of new types sensors in mobile devices, wearable computing, and commercial and personal use of drones… The list goes on. In addition to that, I’m convinced that the topic of how organisations can successfully use data–both “big” and small–to make better decisions will remain hot for the remainder of the decade.

5). Zombies or Vampires, and why? 

Zombies. Vampires got the style, Zombies got the brains. While I *wish* I had the style, I … need … moar… braaaaaainznzzzzzZZZZ!11

Introducing the EyeQuant Team, Part IV: Felix Molitor, Software Engineer

felixEyeQuant is thrilled to announce two new hires this week. In order to properly introduce themselves, we asked them a few questions. First up: Felix Molitor, software engineer!

1). Where did you grow up, and what did you want to be when you grew up?

I grew up in the countryside, in the mellow Weserbergland of Lower-Saxony without an exact idea of what to become. I had a good interest in art, literature and languages in school. Later I studied Cognitive Science in Osnabrück and Sofia, where I developed my interest in informatics.

2). Tell us a love story: How did you find EyeQuant, or how did EyeQuant find you?

Fabian and I know each other from Osnabrück. He asked me whether I would like to join EyeQuant. I was very glad to do so.

 3). What do you do at EyeQuant? What is the most important part of your role here?

I’m a software engineer.

4). You are wearing a wizard’s hat and gazing into a crystal ball. So, what will we all be speaking about next year, or five years from now?

I see boards hovering a few centimeters above the pavement..

5). Zombies or Vampires, and why? 

Tiny vampires, they might make interesting pets.

How Change Blindness Affects User Perception of Websites

We tend to like to think that we are aware of everything going on around us; after all, we are conscious human beings, and we notice changes to our surroundings, right?

Well, not exactly.

In this post, we’ll look at a phenomenon of human consciousness that is subtly affecting the way we actually see the world – and the way in which users look at your website.

Let’s start by taking part in a quick experiment in the video below (and make sure to watch it in full screen!):

Experiments like the one above work like magic tricks, cleverly masking the changes that occur during the switch between what are in fact two quite different images.

Chances are, once you noticed the alterations to the webpage, they became almost impossible to stop staring at. What you just experienced is a phenomenon called change blindness: in order to notice the (not so) subtle alterations to our environment, our attention has to be consciously drawn to them.

What is Change Blindness?

Change blindness occurs when a change in visual stimuli goes unnoticed, especially if our visual attention is not focused directly on the change.

To give you a better idea of what we mean, take a look at this video by NOVA :

Change blindness pops up all over the place. In Luis Bunuel’s seminal 1977 film Cet Obscur Objet du Désir, two actresses were cast in the place of one, symbolically showing that the male protagonist could not understand “the true nature of his lover”. When the film first screened, many viewers (including this article’s author, truth be told) simply didn’t initially notice that the role of the intriguing Spanish vixen was played by two entirely different people.

Why Does Change Blindness Occur?

So far, scientists don’t know precisely why change blindness occurs, but they do have preliminary explanations and know that it carries certain implications:

Change blindness occurs when a change in our visual field is not consciously “attended” to; our eyes are not expecting the change, so they don’t process it.

Visual perception occurs on a two-fold level: First, the optic nerve transfers information about a physical (rather than emotional) change to the visual cortex at the back of the brain. Very soon after this information reaches the visual cortex (for lack of a better theory) subjectivity emerges. Your brain must decide, for example, if it’s seen a change in what it’s looking at, or if it is mistaken. In other words, the real mystery of the way we see things is to build a bridge between the information that the visual system gives to the brain, and how the brain transforms this information into experience.

Kevin O’Regan, visionary neuroscience philosopher at the Centre National de Recherche Scientifique in Paris, explains the phenomenon this way:

“Perhaps the most natural view to take is to suppose that what we have the subjective impression of seeing is not the very sparse, more semantically coded, content of visual memory, but the content of a shorter-lived but higher quality, image-like replica or “icon” of the visual scene. The impression of richness that we have from the world would derive from this high-quality icon. On the other hand, only a small portion of the icon’s contents, namely the parts that have been attended to, would at any moment be transferred into memory and be available for doing tasks like change detection — the rest would be forgotten. This view of visual processing has been called “inattentional amnesia” (Wolfe [1999]): the idea is that we see everything, but forget most of it immediately.”

How Change Blindness Affects Landing Page Optimization

Just as in everyday situations, change blindness plays a role in the way we look at and understand websites. We may think that we are aware of all available information when we arrive on a web page, but the simple fact of the matter is that our brains can only take in so much at once.

In general, there are 3 key lessons to be learnt from how change blindness influences the way users look at your website:

1. Content and design elements you think are important may go unnoticed by users

Back in 2010, UX magazine posted a brief article alerting UX professionals to the role of change blindness in UX; “What are we failing to capture when observing people using the products we design?”, queried the author.

When optimizing a website, everyone involved makes hypotheses about what needs to change on a page; perhaps it’s the copy, a button colour, or a background pattern. Coming up with testing ideas is often based on intuition and experience, but even an experienced designer or optimization expert is likely to miss key problems. In fact, a study from the University of Copenhagen showed that experienced web designers could only predict how a user would view a website with just 46% accuracy.

Predictive eye-tracking does an excellent job of solving this problem by removing subjectivity from the testing equation. Heatmaps and other visualizations show what users will initially see based on finely tuned algorithms and years of research – not subjective opinion.

2. Changing One Design Element Affects Everything Around It

Remember the Amazon landing page experiment you conducted beginning of this post? Here are two EyeQuant Perception Maps (before and after the changes) of the Amazon.com homepage featured in the video, predicting what users will see within the first few seconds of arriving on the page:


While three main areas of visual attention remain the same, the illuminated region to the far right changes dramatically with a simple change to the “best sellers” content on the bottom right, from mens’ sandals to beanies and hoodies. Suddenly, attention is pulled away from the grey box entitled “Watch Your Favourite Movies in HD Instantly”, and drawn downward. This is not because users are reacting more emotionally to beanies and hoodies than sandals, but simply because the former produces a larger block of dark colour, thus more easily drawing our eyes toward it.


Herein lies the crux of this lesson: When testing design and content changes on a website, we tend to focus on a single element at a time, such as the colour of a CTA button or the size of a headline; however, the circumstances of change blindness (and the results of an EyeQuant test) show us that small changes to one element also change the way a user looks at anything around that element as well.

When tweaking design elements, it’s crucial to consider not just the attributes of a single element, but how it will alter a user’s gaze on the entire page. Will enlarging the headline draw user attention away from the product image on its left? Will moving the CTA from centre-right to dead-centre draw attention away from the core benefits? The best way to find out is to test, tweak, and re-test until you find the winning combination.

3. We humans aren’t very good at noticing details. If you want an element on your web page to be paid attention to, it needs to stick out right away.

We’ve said it once, and we’ll say it again: If you want potential customers to click something, read something, or buy something…

 

…You have to draw their attention toward it.

Users won’t perceive existing elements or even substantial webpage changes – even if they are right in front of their eyes. So, how do you draw their attention to the regions of a web page you want them to focus on? Try these steps:

  • Test your website with EyeQuant to see what users see when they first arrive, and what they miss. If the most important content on your site is not visible in the perception map or attention (heat) map, then you have some work to do.

  • Instead of just focusing on single elements – like the placement, size, or colour of your CTA – consider tweaking the areas that surround it. Dull or alter the background colour, adjust the size of surrounding copy, or make some room around your most important elements.

  • Plug your changes into Eyequant, test, rinse, repeat, and optimize.

For a little inspiration, take a look at EyeQuant customer and conversion experts WHOLEGRAINdigital’s optimization process:

To learn more on this fascinating facet of human consciousness and how scientists are studying it, take a look at this this seminal paper by Simons and Rensink, or this talk by pioneer of the science of consciousness (and EyeQuant Scientific Advisory board member) Christof Koch, speaking about the brain, consciousness, and even change blindness:

cta

Deconstructing a 56% Conversion Lift at Big Contacts

Image

Big Contacts – a web-based CRM targeting small and mid-range businesses – are smiling, and no, it’s not just because Spring has finally arrived.

Digital agency Surge Labs published a case study last November showing how they achieved a 56% conversion boost in sign-ups on Big Contacts’ landing page. Especially in a competitive field like CRM, this uplift represents a significant achievement. Here at EyeQuant, we always love a good success story, so we thought we would analyze this one through our own lens.

Here is Version A of Big Contacts’ website. For all intents and purposes, it’s probably not the worst web page you’ve ever seen, which is precisely why it becomes much more fun to analyze.

Image

Surge Labs hypothesized that, in order to better capture potential customers’ attention in such a competitive field, Big Contacts would need to eliminate clutter and focus on one key design strategy: Clarity.

They would achieve this by:

  • Creating white space
  • Focussing on only one call-to-action
  • Improving the user’s navigational path with better organization

Now take a look at the perception maps of the EyeQuant analysis of Version A below:

Image

The value proposition is clearly the element on the page that needs the most work; we can see what the software looks like, but we aren’t immediately aware of the core benefits it offers us. More importantly, perhaps Big Contacts’ greatest benefit – its affordable plans starting at $15 per month –  isn’t even on the page.

Version B of Big Contacts’ landing page corrects these problems beautifully.

Let’s take a look why:

Image

Organization & Flow:

Big Contacts’ value propositions are now clearly lined up in vertical bullet-point form, ending with a big orange CTA button. The improvements to the user’s navigational path are clear, and can once again be immediately gauged using EyeQuant’s perception map:

Image

Now, isn’t that a thing of beauty? 

Not only are the four bullet points immediately visible as the user’s gaze makes its way from the headline to the CTA, but the navigational path also calmly makes stops at an image of the software and an attractive price tag.

The best part? The logo, the headline, the core benefits, the price, and the CTA, are now visible within the first few seconds of a user’s visit to this landing page. Even visual information about the company’s social media presence and its syncing abilities are visible. Impressive.

Colour Consistency:

Surge Labs made an excellent use of colour in Version B of this landing page by choosing consistent three colours to draw attention to urgent information:

  • white for text
  • warm, bright orange for the CTA
  • warm, bright green to highlight the core benefits.
  • Cool blue as a background block colour.

These three colours are set off brilliantly by a cool blue background in which all the most important “above the fold” information is situated.

Most importantly, the use of colour choices is consistent and logical. While in Version A the user had to decipher between two text colours (blue and white), Version B’s text is all white, removing the need for the user to process any unnecessary aesthetic changes. The same could be said for the flashes of green next to the core benefits: by establishing bright green as a color associated with core benefits, the user is able to make instant connections between the price all the way on the far left, and the bulleted core benefits in the mid right.

Grouping Important Information with Colour: 

While too much variation in colour can be distracting to a user’s initial attention, here it has been well implemented. In Version A, a user had to leave the comfortable blue box and choose between one of two CTA’s, creating a visual barrier between the description of the product and its call-to-action.

In Version B, the user’s focus can remain almost entirely in the blue box – it immediately indicates that the user is in a zone that contains important information. 

In previous EyeQuant blogs, we’ve discussed the importance of clarity in creating a visually calm, easy-to-navigate landing page. Digital Surge’s work with Big Contacts is an excellent testament to this strategy. Bravo!

Key Takeaways:

  • Flow: When re-thinking a website, considering how the user’s gaze will flow across the page when they first arrive is crucial. Does the page create hurdles or obstacles around the user connecting important information? If so, there’s room for improvement.
  • Colour Consistency: It’s not enough just to know that an orange button will pop out, colour can be used to produce consistent visual cues, linking different kinds of information.
  • Grouping with Colour: Big Contact’s winning version draws a big blue box around its most crucial information, putting the viewer at ease by re-assuring them that everything they need to find will be in this one, confined area.

Why Design Needs Science

As part of a new series on the EyeQuant blog, we turn to our customers and friends to answer questions about web design, UX, and conversion optimization with their personal experiences and stories. First up: Tom Greenwood of Wholegrain Digital!

Image“Tom Greenwood is co-founder of the London based agency Wholegrain Digital, which specialises in the design and development of WordPress websites.  They work with clients around the the UK, Europe and US, ranging from small independent businesses to big brands like M&S, Sony and Reed Recruitment”

How does EyeQuant make design better?

Web design typically has more in common with art than it does with science, and what makes a good web design is highly subjective.

We all have own opinions and own own perspectives, mixing personal taste with professional experience and other biases. To some extent this could be considered a good thing, since it helps ensure that all factors are considered and opens the process to new ideas and possibilities. Everyone is entitled to their own opinion, and differences in opinion can help to stimulate the creative process.

Web design is not all about being creative and looking pretty, however.  Nearly all websites have a serious commercial or organisational goal underlying them, and achieving this goal is far more important than looks alone.

Beauty might be subjective, but the real goals of a website are nearly always more objective. It is far more valuable to measure data, such as generating leads, sales, and social shares than to assess whether people think it looks nice.

This is where the web design process can come a bit unstuck, especially when working in teams or committees where many people have a stake in the decision-making process.  Everyone wants to have their say and shape the design to fit their own vision, but decisions need to be rational and objective.

If you “design by committee” you are all too often forced to try and please everybody. This results in designs that everyone finds “acceptable” but that don’t fulfil their main objectives, and might not even be particularly beautiful to most people.

You end up with something mediocre.

What WholeGrain Digital loves about EyeQuant is that it finally brings science into the web design process. As designers, we are too close to our work – and our clients are too close to their own business – to make unbiased decisions. Design teams rarely include someone who is truly qualified to make objective decisions about whether the design is optimised to fulfil its functional requirements.

EyeQuant does this beautifully. It uses real scientific data to make rational, unbiased statements about your designs without any ego involved.  Quite simply, the design team no longer needs to worry about internal politics and asserting personal authority.

A website can be stunningly beautiful and functional, but you need to ensure that you give your main objectives top priority. In our experience, adding EyeQuant to the design process results in more focussed teams making more informed decisions and producing more effective websites.

That can surely only be a good thing.