Category Archives: EyeQuant

Why The New Google Search Ads Design Is a Subtle Work of Genius

It’s official – Google has rolled out a major redesign of their search results and search ads. The company line, as outlined by Jon Wiley – Google’s lead designer for search – is that the new design improves “readability and creates an overall cleaner look“, while the redesign of the ads is “making the multi-device experience more consistent.

Google’s desktop ads now do match the design of their mobile versions and achieving multi-device consistency certainly is a great reason. We’d like to take a data-informed guess on what other good reasons Google might have had for this major revamp of their most important interface. 

Readers of this blog will know that our mission is to teach computers to see designs like humans do – using neuroscience and machine learning. In this article we’ll make use of our EyeQuant technology to better understand how Google’s new ad design affects viewers, and thereby, clicks.

First things first, some of our assumptions for the analysis:

1. It’s unlikely for Google to roll out a relatively major design change without having tested its effect on AdWords CTR (i. e. Google’s main source of revenue) first. It’s pretty safe to assume that the new design performs at least as well (and most likely better) in terms of CTR than the old one.

2. Google is still commited to its ‘Don’t Be Evil’ motto, which in particular affects any conflicts of interest in serving their two most important stakeholders: search users and advertising customers.

Now, as the headline gives it away, we do believe that the redesign is a subtle work of design genius. Here’s why.

Google’s new Ads now very much ‘blend in’ with the organic results, all while attracting MORE attention, and all without being clearly evil. 

Yep, Google somehow squared the circle here. When designing ads, one is usually torn between:

  • aligning the ad’s design to the content in order to battle banner blindness and drive, ahem, involuntary clicks
  • making the ads stick out visually to attract involuntary eye-movements (the most extreme measure being the use of motion).

The first strategy usually implies a sacrifice of direct ad visibility and its ‘pop out’ effect, and worse, moral principles.

Yet, Google’s new ad design manages to achieve the following (besides its officially announced goals):

1. It does clearly label the ads as such – one could even argue that the labeling is clearer than before, as now every ad is explicitly labeled. Not evil. 

2. At the same time it makes the ads blend in much more with the organic results. Ethically, this is a bit of a tricky move, in particular since they had banned a similar type of design explicitly from being used by AdSense publishers. But hey – every ad is labelled as such. 

google search ads redesign

3. The best part? The new layout attracts MORE design-driven attention to the ads than the old one did. 

We ran EyeQuant tests on both the old (~Q1 2013) and new SERP layout to see in which version the upper ad unit would generate more attention – solely based on its design and common viewing behaviours and patterns. EyeQuant results are 90% equivalent of what an empirical study with >25 subjects would provide. The following heatmaps of both the old and new ad units design show the respective probability of an area to be fixated in the first few seconds of exposure – the top 3 ads are marked up in pink:

eyequant eye-tracking google redesign

As it stands, the results show that the new design generates significantly more attention for the top 3 ads than before – especially for the desirable (and expensive) #1 ad. The attentional pull from the organic search results remains unchanged.

It probably goes without saying WHY all of this is good for Google.

But HOW did they do it? There are several factors involved, and we can reverse-engineer them with a bit of knowledge on how human visual attention works:

  • They increased the font size, which typically drives more attention (but not always and only to a certain extent!)
  • The luminance contrast between text and white background is now higher (blue on white) than it used to be in the old version (blue on AdWords skin tone) – luminance contrast is one of the most basic and most powerful drivers of visual attention.
  • The yellow “Ad” logo provides additional color contrast without being overtly aggressive (low luminance contrast between yellow and white), and it does so in every single ad! 

In conclusion, this is a supremely clever, subtle redesign and there’s lots of reasons to believe that it will effectively drive eye-balls, clicks and ad revenue. 

Full disclosure: While several Google teams are using EyeQuant as customers, EyeQuant was not involved in any part of the redesign process.

And here is our own ad: you can try EyeQuant for free on your own designs – all it takes is an email, a URL and 7 seconds of your time. Test it out now!

If you’d like to get a more detailed look into how you can use design to influence visual attention in a systematic and predictable way, check out our quick 8 minute introduction right here:

Designers & Growth Hackers: Show Your Process

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

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

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

Show your process.

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

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

Here we go…

A macroscope for Big Data

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

MACROSCFIG1-438x235 (1)

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

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

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

Create a Mental Image of Your Strategy

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

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

Screen Shot 2013-08-30 at 2.46.05 PM

Visualize your data

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

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

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

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

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

Share your prototypes

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

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

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

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

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

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

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

Come together, right now

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

Better yet, it works both ways:

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

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

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

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

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

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

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

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

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

Cindy Gallop on redesigning business, sex, and opportunity:

Matthew Berman, on distribution hacking:

 

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

 

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

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