Tag Archives: CRO

Designers & Growth Hackers: Show Your Process

Show me, don’t tell me: visually communicating your process eases tensions across departments, and will make your design meeting a hell of a lot easier.
jack-xij-oughton-article-earth-seen-from-space-001

At Media Evolution’s The Conference last week in Malmo, EyeQuant’s co-founder Fabian Stelzer spoke about the war between data and creativity that so many of us feel in the marketing world, and offered a few concrete tools to make peace between these two perennially opposing sides.

Most of the way through the talk, he made mention of a simple yet universal way of bridging the conversion optimization language gap:

Show your process.

As opposed to an analytics expert slamming a 42 page market report on the conference table, or as opposed to a designer shrugging their shoulders and saying, “just trust me, I’m a creative”, showing how you’ve worked through a problem is crucial to finding understanding between teams. In this way, a universal, visual language is formed.

In this post, we’ll take a look at 5 key ways to visually explain your process, find common ground between different departments, and work through your web optimization process more efficiently.

Here we go…

A macroscope for Big Data

Back in 1979, Joël de Rosnay began speaking about a crazy idea called the “macroscope”. If microscopes are for observing the infinitely small and telescopes are for observing the infinitely great, thought de Rosnay, then what kind of instrument could we use to observe the infinitely complex? For de Rosnay, this was the macroscope: a global, holistic view of the world around us – one that finds connections through infinite detail.

MACROSCFIG1-438x235 (1)

With a global view of a problem (like a bird’s eye view from space), wouldn’t we then be able to see the best paths to take to solve our problems?

This, of course, is the rhetoric that has played through the minds of everyone who’s ever uttered the words, “big data”: in a complex world, we need tools to help us cut through the brush and see the light at the end of the problem: not just numbers, but connections.

We often forget to take into account a macroscopic view of the various problems that arise when it comes to web optimization. As a result, we get caught up in details, start fidgeting with pixels, and forgetting that, by zooming out of the minutiae, there’s always a big picture.

Create a Mental Image of Your Strategy

Chris Spooner made this great list for Line25 about design agency websites that do a good job of visually describing their research and design process. His examples vary from venn diagrams to squiggles, but the end result is clear: visual descriptions of complex strategy provide a mental image of a problem and its solution, putting everyone at ease by graphically describing what a process entails, why a certain part of the process is important, and most importantly, and by giving a macroscopic view of what the designer will do to solve their client’s problems.

Bonus: a global mental picture of your research and design process can help to justify aspects of your budget that might otherwise get cut out.

Screen Shot 2013-08-30 at 2.46.05 PM

Visualize your data

When we first set out to create EyeQuant in 2009, we had a hunch that our potential customers – e-commerce companies and digital agencies – were feeling the tension between data-driven and creative design.

Designers already had the experience to know what might work, but increasingly we found that they would need to back up their findings with data – in a way that everyone (including themselves) would understand. After all, marketing and advertising play in a far bigger playground these days, and intuition alone doesn’t cut it.

Crucial to ending the war between data and creativity is learning how to blend the two together. What we needed are tools and strategies to visualize data, and vice versa: accurate, intuitive, yet complex enough tools to grip the big picture – and all the little ones that surround it.

In the world of data visualization, Moritz Stefaner, who works with everyone from FIFA to Skype, is one of the great minds. In this lecture, Moritz makes an astounding point about marrying information with design – and leaves clues to everyone from growth hackers to designers on how to work with and show data and process:

“good visualizations show you the data, great visualizations show you the patterns of the data . . . good visualizations answer questions, but great visualization generate new questions . . . good visualizations tell a story, but great visualizations tell a thousand stories”.

Share your prototypes

There is a persistent misconception outside the design world that creatives tend to pull ideas out of thin air a couple minutes before a presentation. The reality couldn’t be further from the truth, but if this isn’t shown, then nobody will be the wiser. From an initial sketch on a napkin to a full deconstruction and reconstruction of a competitor’s web page, showing visual examples of each iteration of your design process provides transparency, and proves that you’re thoroughly working through problems.

A fantastic resource for keeping track and sharing each step of your design is LayerVault. LayerVault is a beautifully designed software that saves and catalogues every single revision you make, and let’s you decide which iterations to show to colleagues. What makes this app really special is the ability to return to a step you’d written off a day ago that, the next day, turns out to be the solution (without pressing command_z a thousand times).

Show your mistakes (and the tools you used to solve them)

We know, we know, there is a certain level of ego that needs to be upheld during design meetings in order to maintain a modicum of authority. As the old saying goes, though, “the truest characters of ignorance are vanity and pride and arrogance.” Speaking about your mistakes (and better yet, showing them) promotes an environment of empathy, of teamwork, and of humility. We’re all human, we all make mistakes, so let’s ‘fess up to them and learn from them.

Of course, making informed iterations during the design process can be difficult; testing a re-design or a new web page pre-launch is next to impossible, and going on market or design research alone leads to many unknowns.

  • Usability Hub is a crowd-sourced app that allows you to test several aspects of your design – first impressions, click engagement, and navigability – through quick user surveys. Usability Hub provides easy-to-read reports, word clouds, and test answers that give invaluable pre-launch insight into what you’re doing, and why.

  • Then there’s us, EyeQuant (we know, we know, self promotion…but indulge our vanity for a few seconds, we’re just really excited about what we do). Our idea is simple: At any stage of the design process, a screenshot can be fed into EyeQuant’s online app, and within seconds three visualizations of user attention will appear. We’re the only predictive eye-tracking software on the market with a strong neuroscience background, which is why we can safely say that our technology is over 90% accurate in comparison to a traditional eye-tracking study.  Oh yeah, we have a patent too. Here’s how it what it looks like when we did an analysis of ING’s website.

Come together, right now

Showing your iterations, showing how you tested them, and then showing what went right and what went wrong is a sure-fire way to impress upon your boss, your team, and your clients that you know what you’re doing. Laying out a clear roadmap not only instills trust in the others at the meeting, it also lets designers work with far more daring ideas. Just look at Google.

Better yet, it works both ways:

  • As a designer, showing your process proves to clients and colleagues that you’re not afraid to test your intuition and to work with tools to make this happen.

  • As an analytics expert, learning to work with information visually (and creatively) shows everyone else that data is not a cold clump of steely percentages.

During his talk at The Conference, Fabian suggested that we need tools that provide “creative data” – tools that are fast, communicative, objective, and not all too final. This last point is crucial: both creative and growth hackers need to come to terms with the limits of their own domain, and this is where they can come together.

Ending the War Between Data and Creativity: Big Ideas from Media Evolution’s The Conference (Video)

Last week in Malmö, Sweden, innovators like Reddit co-founder Alex Ohanian, branding expert Cindy Gallop, and EyeQuant’s very own Fabian Stelzer convened to speak about the future of design, technology, and communications at Media Evolution’s The Conference.

During his presentation, Fabian walks us through a defining question for many at The Conference – an issue which has integral to any discussion about branding, advertising, and marketing. That is, how do we reconcile data with creativity? 

Reaching into philosophy, into art history, and into science, Fabian fleshes out a new way for web designers and online marketers to think about testing, analytics, and making decisions by using data creatively.

Clocking in at about 15 minutes, you can check out what Fabian has to say during your coffee break:

Meanwhile, if you’ve got some more procrastination time to spare today, we highly, highly recommend checking out our favourites from The Conference:

Cindy Gallop on redesigning business, sex, and opportunity:

Matthew Berman, on distribution hacking:

 

…and for something more unexpected, here’s James Bridle‘s talk on mental and conversational models of new technologies:

 

EyeQuant is now available on ExactTarget’s HubExchange

ET-Logo-On-Orange-Web

ExactTarget customers, we have news for you!

EyeQuant has partnered with ExactTarget to create an app for their new marketplace, HubExchange. The EyeQuant app is specially developed to show marketers precisely what readers notice first when they open an email – simply, and within seconds.

ExactTarget customers can download and install the EyeQuant app from directly within the Interactive Marketing Hub, HubExchange.

What does the EyeQuant’s ExactTarget app do?

51.1% of users spend less than 2 seconds on an email before deciding to read on or hit delete. In other words, if users don’t instantly see a reason to read on, you’ve likely lost them…

Enter EyeQuant for ExactTarget HubExchange.

Like EyeQuant’s existing software, the EyeQuant app provides ExactTarget marketers with three mapping tools to analyze user attention on any email campaign.

Simply upload any campaign from your ExactTarget account, and within seconds you will receive unique, highly accurate visualizations just like this:

Screen Shot 2013-07-15 at 1.50.56 PM

EyeQuant’s ExactTarget app is a new way to analyze and improve upon reader engagement and click-through rates. Fabian Stelzer, EyeQuant’s co-founder and CEO, explains:

“Research continually shows that if an email’s core message visually pops out to a reader, engagement and click-through rates significantly improve. In partnering with ExactTarget, the EyeQuant app provides marketers with the unique ability to test their email designs and receive objective, precise heatmaps of reader attention – within seconds.”

Screen Shot 2013-07-15 at 1.50.41 PM

Join us for a live demo of the new app on Friday July 18th at 1pm EDT. Register here:

https://attendee.gotowebinar.com/register/7348541235999504640

For more information on ExactTarget and HubExchange, visit:

http://www.hubexchangeweek.com

http://www.ExactTarget.com

http://www.HubExchange.com

Spy On Your Competitors For Better A/B Tests

 

There’s something about the idea of copying your competitor that dredges up unpleasant memories of the bleary-eyed bully you sat next to in primary school eyeing and scribbling down your test answers. Fervid observation of an opponent has never looked so desperate, hopeless – and lame.

On the other hand, your primary school copycat is a far cry from the oozingly cool, “international spy” style of observation you’ve come to embody in your marketing and analytic strategy, in which you nonchalantly sip a martini with a raised eyebrow, anticipating every subtle gesture of your nemeses.

As an online marketer, the latter is the position we all want to be in – prescient, achingly precise – and successful.

Based On a True Story: “I want what they have, but better”

Not so long ago, an EyeQuant agency customer contacted us asking for feedback. One of the agency’s clients wanted to re-design their landing page and hoped to use the visual structure of a well-known competitor as a design guideline. The agency knew that the client’s main competitor’s landing page was converting very well – much better than the client’s landing page – and so the agency began to explore reasons why this might be.

After a simple investigation, the agency learned that the competitor had a number of landing pages directing traffic from a series of sources (email, PPC, and organic search, etc.). The agency’s in-house strategy manager ran the landing pages through EyeQuant to find out what users were seeing on these distinct landing pages when they first arrived – and subsequently why these pages were selling so well: What were the competitor’s users seeing (and responding to) when they first arrived at the competitor’s pages that their client’s users were not?


With each landing page, the agency noticed through the attention heatmap results that, depending on the kind of landing page tested, the competitor’s user’s attention was being deployed to very distinct regions:

  • On Competitor B’s email-driven landing page, user attention focused on the call-to-action.

while,

  • On Competitor B’s organic search-driven landing page, user attention was directed to the value and benefits of the product.

Screen Shot 2013-07-09 at 4.03.08 PM

Screen Shot 2013-07-09 at 4.02.58 PM

Action vs. Benefits

For the client’s competitor, users arriving at the organice-search landing page were likely to require a more thorough backstory to the product, replete with clearly visible use cases and benefits. If users arrive from an email campaign, meanwhile, the core value proposition would likely already be clearly communicated to the user, meaning that immediate awareness of the call-to-action the opportunity to have a more in-depth understanding of the product would take priority.

With these competitor insights, the agency convinced the client that it wasn’t the competitor’s color scheme and copy they should consider replicating, but the actual visual attention structure of information according to where traffic was being directed from.

Using Google Analytics, click-tracking, and EyeQuant, the agency created a structure for their client that mapped what users were looking for, clicking, and seeing when they arrived from a specific traffic source, then compared this data with their knowledge of their competitors to design and test their client’s new landing pages.

Attentional Hierarchy

At the crux of this story is the question of formulating a successful “attentional hierarchy”.

The attentional hierarchy of a landing page refers to the order and intensity with which key elements on a page – whether it be the value proposition, pricing, the CTA, or a giant product photo – will receive user attention.

Every consumer interaction begins with the blink of an eye, and the regions of a page that visually pop-out first frame a user’s crucial first interaction with what the landing page is selling. In other words: put all the emphasis on the CTA, and the user will never understand why the product is valuable to them. Put all the emphasis on the product’s benefits and use cases, and the user will have a hard time figuring out where to actually buy the product.

Screen Shot 2013-07-10 at 2.44.45 PM

The 3W’s

A good way to begin conceiving of your attentional hierarchy is by breaking down your landing page’s priorities with the 3W’s. The 3W’s form the core information that should be immediately available to a user upon arriving on a landing page.

The 3W’s are:

  • What your page is about (your product description)

  • Why a user should care (your value proposition/core benefits)

  • Where the user can go next (your call to action)

Your 3W’s can come in a number of different forms depending on what proves to most effectively communicate them. A what could be product photo just as it could be a concise description, while a where next is the button or form you most want users to interact with.

Once a basic attentional hierarchy of your 3W’s has been formulated, you can begin optimizing and testing to find the right balance between these three crucial elements (predictive eye-tracking is a quick and cost-effective to test this). The order and structure of the hierarchy may take many forms, but this is precisely the point: each landing page and each product is different, and subject to individual needs. Only through processes of iteration and testing will you come to the formula that works best for any of your specific landing pages, and for your specific product.

Testing Your Competitor Insights

Building and optimizing your landing page with the 3W’s and the attentional hierarchy is dependent on the process of testing the contexts in which your users best understand your product.

Whether you’re just starting out, or whether you’re already an established brand looking to tweak or re-design your landing pages, studying your competition during your analytics and testing process is absolutely crucial. You may not be able to know their bounce rate or their precise conversion rate, but you will gain important insight into the design frameworks your competitors have put in place to draw in user attention at the right moments – and to the right content.

One of EyeQuant’s most recent (and beloved) clients, Stuart McMillan of Schuh, sent us a diagram of his design and testing process recently, which gives excellent insight into a well-honed optimization and testing strategy.

To add to this already stellar cycle, we included the moments in which competitor analysis and testing can and should come in:

You will never be your competitor – and this is a good thing. Embrace intelligence – your uncanny ability to acquire and apply knowledge – over copying.

In a recent blog post, Conversion XL’s venerable Peep Laja poignantly eschewed copying competitors over analytics simply because your competitors probably don’t know much more than you do. While this is very likely the case, observing and testing your competitors strategies (whether they are aware of them or not) can be as effective as seeing your own landing pages from a bird’s eye view: suddenly all their mistakes and all their successes become clear, which should provide you and your business with some pretty good testing fodder.

Be an International Marketer of Mystery, Not a Copycat.

Copying your competitor doesn’t work just because your competitors don’t know what they’re doing, it doesn’t work because successful conversion is contextual: it relies on careful analytics, continuous testing, and critical thinking. All the same, observing and testing what makes your competition successful will provide actionable insights into ways to structure your own attentional hierarchy and 3W’s pyramid, and ideas for what to A/B and multivariate test.

Copying_test

Don’t be a copycat.

  • Start by analyzing your landing page(s) and your competitor’s landing page(s) side by side with predictive eye-tracking – Where is user attention being driven to? Which website best directs user attention – and in what areas?

  • Have you built traffic-specific landing pages for PPC, email, and organic search? If not, this is your (surprisingly simple) window of opportunity. Unbounce makes multiple landing pages multiple cost-effective, quick, and fairly painless to try. Their templates test well on EyeQuant too!

  • Use the insights garnered from user attention heatmaps to form A/B and multivariate testing hypotheses for your landing pages and your competitor’s.

  • Decide upon your 3W’s (What, Why, Where next), then formulate a preliminary attentional hierarchy according to source traffic (email marketing, organic traffic, PPC, or others).

  • Perform A/B and multivariate tests your designs using Optimizely and other testing platforms.

  • Apply the results of your competitor’s and your own landing pages’ testing to your attentional hierarchy.

goldfinger-wetsuit2

That was easy, wasn’t it?

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!

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.