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:

 

Lame Optimization Ideas Hold Up Design Meetings: Here’s How to Stop Them

There’s an age-old saying that goes, “The only thing that stands in the way of a business making more money is a design committee meeting.”

Too often, a vague sense of compromise seems to be the only thing that is accomplished during a website optimization or re-design meeting. In the end, everyone is left with the feeling that a melon-baller has been taken to their heads, drained by the knowledge that that nobody really knows what they’re talking about, nor precisely how to fix what needs to be fixed.

So, how can you turn a design meeting into a painless and (most importantly) fruitful experience?

In this article, we pick apart the 3 lame optimization ideas that tend to hold up design meetings, and provide strategies that will put everyone at ease.

Lame Idea #1). “We should make the call to action [insert trending color] because I read a blogpost that says that it will guarantee great conversions”

Underlying reason for lame idea: Insecurity that leads to blindly following the pack; esoteric conversion thinking cajoled by addiction to content marketing blogs.

It’s unsurprising that someone is using their knowledge of the online marketing blogosphere to corroborate their opinion. Following the advice of experts and the gurus is common practice (and can provide actionable ideas), but it’s essential to be aware of contextual as opposed to catch-all ideas:

Screen Shot 2013-08-15 at 11.01.08 AMCatch-All Idea: There is little measurable data out there to suggest that any single color converts better than another. Suggesting that a call-to-action button should be changed to orange, or green, or purple just because a blog says so falls into the catch-all idea category, where someone is looking for a quick win over an educated decision.

Screen Shot 2013-08-15 at 11.00.04 AMContextual Idea: Suggesting that the call-to-action button should be changed to orange because it will contrast well with a pale blue or green background qualifies as contextual idea. Extensive research, including this study from the California Institute of Technology (Caltech), show that user attention is initially attracted to the most salient areas (or areas that “visually pop out”) on a page, especially under time constraints or while attempting to multi-task. Saliency doesn’t necessarily occur from one, brightly colored element, but from the contrast and spacing that surrounds it. Place an orange CTA in front of a yellow background, and it will get lost. For that matter, not even a flashing yellow “BUY NOW” button will catch user attention when it’s set against a cluttered page.

There’s only one way to verify whether an idea garnered from a blog will work: test it.

  • Once you’ve implemented your changes, run an A/B test to see how well your ideas stand up to alternatives.

Lame Idea #2). “Look, we’ve spent a lot of money on advertising for this product, so the campaign video/branding need to be front and centre on the landing page”

Underlying reason for lame idea: Branding team worried about the hard work they’ve already put in to the project; lack of understanding as to what a landing page is actually supposed to do.

E-commerce companies in particular tend to place an inordinate amount of importance on branding and advertising on landing pages as opposed to showcasing the core benefits of the product on a landing page. The rationale behind this tends to be that an emphasis on branding will link the product’s online presence with its offline presence.

Unfortunately, landing pages just don’t work like this.

A landing page should clearly communicate what the product is, why it’s useful and innovative to a potential customer, and where the customer can go to learn more – all within a few seconds. Cluttering a page with expensive ad campaigns merely serves to distract from the core value of the product in question. Confuse your user, and they’re far more likely to bounce before they look for a button to click.

Visual examples of user behaviour often succeed in ending branding discussions when rhetoric and statistics fail. Predictive Heatmaps like EyeQuant’s show where a user will look when they first arrive, objectively (and accurately) illustrating why overbearing branding confuses users and drives them away from completing a task, while also providing great insight into what could be changed.

Bonus: They can be generated in a few seconds.

Here’s an example: The landing page for the 2013 Volkswagen Beetle tells us an awful lot about how the car is being marketed, but when a user first arrives at the page, they miss its core benefits, pricing, and where a prospective customer can go to learn more:

As a comparison, the landing page for the 2013 Ford Focus still showcases a slick photo shoot, but from the heatmap below, it’s easy to see that the product’s core value, it’s price and fuel efficiency, are immediately visible to users:

Lame Idea #3). “We can’t seem to decide what the most important product/value on offer is. Oh, I know, let’s use a scrolling banner/carousel, then everyone wins.”

Underlying reason for lame idea: Meek attempt to please everyone in the room via indecision; futile addiction to web design gimmicks.

Here’s the short response:

Nobody wins with scrolling banners/carousels.

Jared Smith sums up the reasons why you should never, ever resort to carousels or scrolling banners on your landing page incredibly well with his Should I use a carousel?.

Like this:

Screen Shot 2013-08-14 at 2.39.53 PM

Or like this:

Screen Shot 2013-08-14 at 2.39.53 PM Choosing a carousel is approximately tantamount to telling your customers, ”we can’t make up our minds about what we’re selling, so can you just do it for us?”. Carousels are confusing, they crash frequently, and in an attention-starved online world, they have the uncanny ability to make people back away and never come back.

Just ask Adam Fellowes, head of UX at Digirati:

Screen Shot 2013-08-14 at 3.05.37 PM

Fighting the good fight

Design meetings get out of hand when those present believe that their ideas are more important than anyone else’s. The result of this is narrow-thinking and an overarching fear of listening to what others have to say. When this is the case, adding a data-driven yet visually intuitive example tends to work very well to dispel tension.

After all, at the end of the day, success feels way, way better than compromise.

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

The Media Lab at M.I.T.

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

The Palazzo Pubblico, Siena

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:

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?

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 PMIn 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. “