Your Website Isn't a Block of Concrete

“If houses were built the way software is built, the first woodpecker would bring down civilization.” (Anon.)

A building and a website aren't so different, really. Someone had to design it, and many more people have to use it. In this post, we'll look at 4 ways to work with UX experts, rein in design ego, and build a website that's made for change.

Screen Shot 2013-08-13 at 12.21.14 PM

In the late 1990’s, author (and founder of that pre-internet wonder, the Whole Earth Catalogue) Stewart Brand wrote and starred in a documentary series for the BBC called How Buildings Learn. In the series, Brand looks at some of the most iconic examples of western architecture, and comes to a few simple conclusions:

  1. A building must be able to adapt to the people who use it.
  1. Architects must take responsibility for their buildings, and the problems they will inevitably encounter.
  1. Evolutionary - as opposed to visionary - design guarantees longevity.

Sound familiar? How Buildings Learn comes as highly recommended watching for online marketers, web designers, developers, UX, and usability pros. If you close your eyes, you can almost imagine that the BBC has created a series entirely dedicated to website optimization.

Testing, reviewing, questioning

Humans are fallible beings. Inevitably, everything we do will have its share of bugs. The key is to anticipate them, and to be prepared to fix them when they arrive (preferably before your users are left stranded).

In How Buildings Learn, Brand points his attention early on to MIT’s Media Lab, built by acclaimed architect I.M. Pei. As soon as its doors opened to researchers in 1985, the building began to encounter formidable problems: an elevator caught fire, the revolving door repeatedly jammed, and, from Brand’s own experience, “an unfaceable stench of something horribly dead filled the public lecture hall for months.”

Solemnly, Brand notes that, “. . . this is normal”.

Buildings often hire surveyors (optimization translation: UX/Usability experts) to find out what the people use the building think about its conditions. Just like in web optimization, though, this often happens too little, too late. A surveyor interviewed for How Buildings Learn provides this unsettling statistic:  “Only 1 in 10 buildings have been revisited by the architect after they’ve been in occupation. It begs the question: how can we know how people react to detailed design features if we don’t revisit the scene of the crime?”

mitmedialab

Before a building is opened to the public, vast inspections and use tests are ran. Pre-testing a website before launching is an excellent way to get a sense of needed technical and design modifications before you find out the hard way. There are a number of ways to test design flaws, but a combination of subjective (Usability/UX consultation) and objective (predictive eye-tracking analysis to measure whether your users’ visual attention will flow to the right places) will serve to alleviate the often unanticipated costs and time of post-launch tweaks.

Key takeaways:

  • Pre-test your website before it’s live using a combination of predictive attention analytics and a good dose of subjective usability testing.
  • Having a hard time convincing a client or a boss to spend the money on optimization? Ask them what would happen if they never performed any repairs to their home.

Build with change in mind

While pre-testing a website’s design before it launches can save valuable time and money, iteratively improving your site once it’s live is another story. Many site owners avoid testing solely for fear of the time and effort it will take to implement the results.

palazzo

Building a website with a view to eventual changes from the beginning is the key to alleviating future headaches. In How Buildings Learn, Brand speaks of the Palazzo Pubblico in Siena as an enduring example of successful architecture; revised and adapted to contemporary use over 700 years, this building remains relevant - and beautiful - because it has been built to accommodate constant modifications.

We often speak about how to find what to change about a website’s design, but rarely talk about building a website that is built for change.  You may have done predictive attention analyses, click-tracking, UX consulting, and user surveys; you may have taken this information and formulated some brilliant A/B testing hypotheses then performed the tests and got the results; but excuses and problems often arrive when the reality of implementation sets in.

To solve this problem, a practical, adaptable, and powerful CMS is needed - one in which content and design modifications can be implemented frequently. Here are few content management systems we would like to give shout-outs to for doing a great job of this:

  • Cloud Cannon: Cloud Cannon is an unusual CMS that syncs with Dropbox to easily modify to content and regions on a page. Designers and clients can update Dropbox folders, and then view automatic updates online.
  • Optimizely: We all know Optimizely as a cloud-based software that allows us to run A/B tests and receive data reports, but it also offers tools directed to developers to smoothly deploy changes. We’ve also heard that their technical support is excellent!
  • Contentful: EyeQuant’s software engineers had nice things to say about this cloud-based content platform. The beauty of Contentful lies in its adaptability throughout the office: it’s equally friendly to designers as it is to developers.

Key Takeaways:

  • A great website needs a great infrastructure. If you’re planning on redesigning your site, do your research to find a CMS that facilitates collaborative, quick changes.
  • The content management systems above help facilitate both collaboration and constant improvement with their intuitive UX.
  • You can do all the testing and data analysis you want, but if you don't have a reliable CMS, you'll never implement changes.

Design for your users, Not for your team

Despite the massive influence of UX over web design in recent years, it never ceases to amaze us how few landing pages actually take their users into account. Rather, other befuddling aspects tend to creep in; boardroom compromise overtakes actionable goals.

There’s a strange looping effect that exists between more opaque, design-driven websites, and more aggressive, conversion-driven sites, the two poles of web design: at a certain point, they both seem to forget that users are just people trying to complete a task. While subjectivity in any optimization process is inevitable (and lends to brilliant ideas), the end-result often neglects the user in favour of the idea. Designing solely with data, meanwhile, can stifle the design process, and create endless contradictions. The best solution, it seems, is to promote creative decisions, but test them to see what works with users best.

An ongoing theme in How Buildings Learn is a wariness of the architect’s ego. Brand notes, “the renowned French architect Le Corbusier once argued that people should adapt their lives to suit his modernist buildings”. Most of us spend the majority of our lives in a handful of buildings, yet on any given day, we move through possibly dozens of websites. At each moment, our knowledge of how to navigate them, how to interact with them, and how to get what we need from them must adapt to the forms given by the sites’ designers and developers.

Key Takeaways:

  • It’s easy for your design and optimization team to let their own ideas get in the way of the user’s best interest.
  • Find a balance between creative, subjective design and data-driven, objective design with A/B testing.
  • Just because your optimization process isn’t intuitive, doesn’t mean your user experience shouldn’t be.

Building a Garden Shed (or a PPC Landing Page)

As Stewart Brand says, when a building doesn’t work, owners have three choices: “Put up with it, try to change it, or...”

Kaboom - blow up the whole thing and start from scratch.

Luckily, web optimizers don’t have to cough through dust clouds when we want to start from scratch.

An overlooked way to try out new design formats is to build dedicated and PPC landing pages. Think of them like garden sheds and garages - places to hold useful yet pointed content. The undisputed champion of PPC landing page building is (but of course) Unbounce, where their easy-to-use templates and drag-and-drop editors allow you to build and optimize a landing page in less than a day - with no need for I.T. support.

Here’s an example of an EyeQuant PPC landing page, developed using Unbounce:

Key Takeaways:

  • Building PPC landing pages is dead simple and an excellent way to direct traffic more pointedly, try out designs, and experiment with content.

So,

When a building is commissioned, organizations often choose an architect for their creative flare as opposed to their reputation in creating user-friendly, adaptable spaces. Unfortunately, the same occurs in web design; designers and data analysts are often pitted against each other, and as a result, their positions are polarized - as opposed to harmonized. Ultimately, the loser of this battle of strategies is the user. Whether it’s a building, a toaster, or a web page, design is universal.

While there’s always room for trailblazers and pioneers, innovation comes most steadfastly from iteration as opposed to ego.

By Bitsy Knox

How Do You Find Out What To A/B Test?

This is a guest post by Francis Teo, Lead Conversion Strategist at Conversions Guaranteed

A/B testing is fast gaining popularity as a scientific method to increase conversions of your website.

But how do you decide what to test?

At Conversions Guaranteed, we use a customer-centric strategy when we do conversion rate optimization for our clients. Before we even start creating a hypothesis, or coming up with a test to verify that hypothesis, we first try to find out everything we can about the customers, and the core reason why they are purchasing your product or service.

By understanding your customers more, serving their needs better, addressing their fears, uncertainties, and doubts (commonly known as FUDs), you can create a treatment that will improve conversions on your website.

This blog post will take a look at all the steps leading up to A/B and multivariate testing.

3 Ways to Discover Find the Right Hypothesis for Your A/B Test

There are several ways that you can get more customer insight, even before running an A/B split-test. Here are a few of the methods we usually use when trying to improve conversions for clients.

1. Ask Your Customers

Icon-round-Question_mark

You can simply ask your existing customers why they love to purchase from you by crafting an appropriate survey and sending it to your customer list. There are many free and paid tools to do this online. We currently use PopSurvey because it’s easy to create surveys that are easy for your customers to respond to.

To get the most useful responses, though, it’s important to write very clear and specific questions. You should also be aware that what people state on a survey and their actual purchase behavior may differ, due in part to response bias.

Because of this, you should consider the responses to a customer survey as a means to generate ideas to test, rather than taking them at face value.

2. Looking at Your Web Analytics Data

Reading your analytics data in the right way can reveal important insights into customer behavior, especially if you have your analytics platform linked to your eCommerce or backend conversion tracking system. Analysis needs context, though, which is why asking the right questions is crucial to correctly framing your data.

Here is an example of one simple yet important question to ask, and how to go about answering it:

Q: What are the motivations of my visitors?

A: One way to get some indication of the motivation of the visitors is to do a Channel Analysis.

To do this, take a look at your analytics reports and analyze each traffic source separately to try to learn more about the motivations of each group of visitors to your website. This is something that can't be discussed simply in one blog post, but let's just use the example of organic search traffic to keep things simple:

Let's say your brand is ACME and your main product is "widgets". You pull up your web analytics report for organic search traffic, showing each keyword that each visitor was using to reach your website.

From each keyword, we can then try to get a sense of the mindset of each visitor when they reach your website.

Some examples of the types of keywords that a visitor might use:

  • Brand-type Keyword: A brand-type keyword like "ACME" probably means that the visitors already knows about your brand from somewhere else perhaps from a media buy campaign, some form of advertising, or perhaps they are even a repeat customer.
  • Information Query Keyword: An information keyword like "benefits of widgets" probably means that they are at a very early stage of the buying cycle and are not ready to buy just yet.
  • Purchase Keyword: A purchase-type keyword like "buy blue widgets" is very specific and the visitor is likely to be highly motivated.

By now you're already starting to build a model of what the customer wants, and what they are thinking.

3. Looking at User Experience

This is where you put yourself in the shoes of your visitors and try to feel what they feel, and see what they see. Unfortunately, it's sometimes hard to experience the website from the viewpoint of the customer, and get true customer insight from just sitting and imagining what it would be like to have a bit of distance from your own creation.

We usually use usability testing services to accomplish this. For a small fee, you can pay somebody with a fresh pair of eyes to spend time on your website and tell you what they are feeling and experiencing.

An attention analysis tool like EyeQuant is also very useful when it comes to analyzing user experience on your site. EyeQuant’s predictive eye-tracking technology is able to tell you very quickly and with about 90% accuracy (in comparison to actual eye-tracking studies), what a visitor is likely to see in the first 3 seconds when they land on a website.

Control:

Treatment:

Above you can see the EyeQuant analysis for a landing page optimization project we did one of our clients. On the control, there is no indication of any value proposition in the first 3 seconds. On the treatment, you can see a clear headline and marketing copy that convey value in the first 3 seconds.

Achieving clarity in the first few seconds can mean the difference between a visitor bouncing from your site (because it doesn't seem that the site can give them what they want), or continuing to read and experience your site and your offer.

Case studies have shown that changing the first few seconds of a user’s experience can have a significant impact on your conversions.

Test Your Findings

Once you've found out as much information about the customer and their behavior as you possibly can, it doesn't end there. This is the moment in which you take your findings and develop a hypothesis about how to turn those visitors into customers.

It's important to test that hypothesis using a validated A/B split-test or multivariate test. The only way to verify and validate (or debunk) your customer theory is to test it scientifically.

About the Author of this post:

Francis Teo is the CEO and Lead Conversion Strategist at Conversions Guaranteed, a Conversion Rate Optimization (CRO) agency with a strong focus on conversions for eCommerce websites. He also hosts The Conversions Podcast, a podcast focused on CRO strategies.

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:

www.hubexchangeweek.com

www.ExactTarget.com

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
  • 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

108 Million Web Users Are Color Blind: How Do They See Your Website?

Screen Shot 2013-06-26 at 5.19.27 PM

You may have read the title of this article and asked, “Why is EyeQuant writing about color blindness when there are far more pressing matters - like the possessive pronoun in my call to action - at hand?”.

In this article, we’ll speak about color blindness and why it matters to your website optimization strategy - and your users.

Why Color Blindness?

Rumor has it that one of the reasons Mark Zuckerberg decided on blue as the dominant color in Facebook’s design was because of his red-green color blindness. Please, don’t guffaw yet, Zuckerberg’s design gesture was neither a personal twist nor mere eccentricity. He was simply designing for the widest possible audience.

1 in 12 men, and about 1 in 200 women - or about 4.5% of the world’s population - experience color blindness in some form.  In rather rough mathematical terms, this means that of the approximately 2,400,000,000 internet users worldwide, around 108,000,000 users see things a little differently than you (and your designer) may have originally intended.

What is Color Blindness?

Our retinas contain two main types* of photoreceptors that help us along our daily journey to see and perceive the world around us: Rods and Cones. While we have about 120 million rods that help us to process things like dark and light (or “scoptic” vision), we only have about 6 to 7 million cones, and these are the hard-working little cells responsible for our perception of color.

Most of world’s population are “trichromats”, possessing three kinds of cones in their retina to perceive color. These cones are made up of a ratio of approximately 64% "red" cones to 32% "green" cones, to 2% "blue" cones. Those of us with color blindness most often have “dichromatic” - or two-coned - vision, meaning that they are unable to immediately perceive differences in red and green (leading to deuteranopia - in which the “M” or medium wavelength cone is missing - and protanopia, in which the “L” or long wavelength cone is missing), or blue and yellow (the much rarer tritanopia, caused by missing the “S” or short wavelength cone).

While we don’t know precisely why it occurs, it is commonly understood that most color blindness is a genetic mutation deriving from the X chromosome, which also presents one possible reason why more men are color blind than women. Only tritanopia seems to derive from Chromosome 7, which is equally shared between men and women.

Web Design for Color Blindness

Screen Shot 2013-06-26 at 5.09.49 PM

In a recent presentation given at Google I/O 2013, Google designer Alex Faaborg gave a brilliant talk about cognitive science and design (which is absolutely worth a watch in its entirety despite it’s 40 minute timecode).

At about the 14 minute point, Alex starts to speak about color deficiency, and soon brings up the common misconception that designers should not use red - green differentiations in interface design, as they will not be perceived at all.

Alex suggests that, although enough contrast is usually present to differentiate between what would otherwise be perceived as red - green differences, it’s nevertheless prudent to run your designs through a filter to find out what 4.5% of the global population will initially see when they look at your interface.

There are online applications to simulate this, but as Alex points out, this filter is actually already present in photoshop (we were surprised too!).

Screen Shot 2013-06-26 at 5.07.57 PM

E-Commerce for Color Blindness

In researching this topic, we came across a lovingly written blog article by Jason Sherrill inetsolution. In it, the author professes his color blindness then takes us on a journey through his experiences with buying products online.

As almost any comment board on an online clothing shop indicates, the accuracy of color choices can be variable and at their worst, deceptive. For Jason Sherrill, color charts are often about as effective as herding cats:

“On FranklinCovey.com, I had to choose a color for the storage the case I was ordering. They presented two choices, both of which looked black to me. Since I didn't think they'd make me choose between black & black, I concluded that one of the swatches must be dark red or dark brown.”

Luckily, this problem is not insurmountable. Many companies like Amazon allow for a scroll over “alt text” that would help him to differentiate between what he otherwise saw as a choice between black, and black.

 Jason’s story is a question of responsible design as opposed to catering to a niche. With a simple tweak, Jason was reassured of his choices and more comfortable with clicking the “buy button”:

“When color charts with text labels do appear on a site, I actually find it easier to buy clothing online than in a store since usually in the store, the color is not printed anywhere on the product.”

Adapting to Color Blindness

In his analysis of visual attention in chaotic jungle scenes, EyeQuant Science Director/Co-Founder and Professor of Neurobiopsychology Dr. Peter Koenig tested deuteranopes (or those with an insensitivity to green light) for their ability to identify red-green differences. Surprisingly, the deuteranope test subjects were able to compensate for their inability to differentiate between red and green with only a slight delay in time, about 300-400 milliseconds. This suggests that people with color blindness have developed compensatory mechanisms that allow them to distinguish contrasts in scenes at almost the same speed as those without color blindness.

In general, the results of this study point to the incredible adaptability of the human brain. People with color blindness must adapt constantly to the dominant trichromatic color spectrum of the rest of the world, but there are still ways to meet deuteranopes, protanopes, and tritanopes halfway.

Two Ways to Accommodate 4.5% of Web Users (That Your Competition May Have Forgotten About):

There are two simple ways to optimize for color blindness:

  1. Contrast: Test your interface and your design for contrast. People with color blindness cannot perceive certain colors, but they can perceive contrasts.
  2. Description: Choosing the right color out of a list on an e-commerce site can be treacherous territory for someone with color-blindness. Make sure to properly label color choices with either an “alt text” scroll over option or with copy on the page.

Oh, by the way:

EyeQuant is currently exploring how color blindness affects user attention on your websites. We're looking forward to incorporating research on this fascinating subject into our upcoming attention models. Stay tuned!

Further Tools

  • This website simulates what color blindness on most websites (although it can be a little bit slow).
  • Staying on the topic of designing for every possible audience: If designing for the visually impaired is relevant to your business, check out this blogpost with helpful tools and ideas.

* While we are well aware of these two main photoreceptors, there is in fact a third kind, and it helps to control our biological clocks: "These light sensors are a small number of nerve cells in the retina that contain melanopsin molecules. Unlike conventional light-sensing cells in the retina—rods and cones—melanopsin-containing cells are not used for seeing images; instead, they monitor light levels to adjust the body's clock and control constriction of the pupils in the eye, among other functions. "

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

felix

EyeQuant 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: