Tag Archives: attention

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?

Deconstructing a 56% Conversion Lift at Big Contacts

Image

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

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

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

Image

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

They would achieve this by:

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

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

Image

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

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

Let’s take a look why:

Image

Organization & Flow:

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

Image

Now, isn’t that a thing of beauty? 

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

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

Colour Consistency:

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

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

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

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

Grouping Important Information with Colour: 

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

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

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

Key Takeaways:

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

How Many Seconds Does Your Website Have to Capture User Attention?

“You only have a few seconds to capture someone’s attention.”

stopwatch1

Bet you’ve heard that one before. It rings true in landing page optimization as much as it does at a cocktail party.

Since the dawn of the Internet age, talk of dwindling web-user attention-spans has become common-place. Whether the actual number is one second or ten, the fact of the matter is that landing pages only have a moment to draw the user in.

In this EyeQuant blog post, we’ll take a look at:

  • Why these precious seconds count
  • Why users might be leaving your landing page before you’ve had the chance to tell them your story.
  • How to capture – and maintain – user attention with scientifically-informed hints!

Why the first moments are important:

This is Your Brain on Internet

If you’ve read the EyeQuant blog before, you’ve likely come in contact with themes like the “attention economy” and “cognitive load”, terms that describe the difficulty for the human mind to deal with the scope of information available to us at any given time. On a daily basis, the Internet presents its users with an unquantifiable measure of content for potential browsing behaviour.

The problem is, our attention spans to process all this information are finite, and our ability to multi-task isn’t as good as we’d like to think it is.

Seasoned internet users and internet addicts’ neural pathways have been shown to have altered as they experience heightened activity in their pre-frontal cortexes (the area of the brain that is mostly responsible for processing complex thoughts, personality expressions, decision making, and social behaviour), and as a result tend to improve on their hand-eye coordination and processing visual cues. However, this fundamental “re-wiring” of our brains as a result of heightened Internet use means that “we read faster and less thoroughly as soon as we go online”, according to Nicholas Carr in his seminal Wired article from 2010. Carr reported that it is not only the span and scope of information that is detrimental to our ability to focus, but the speed and simultaneity at which we are exposed to it. Hyperlinks, advertisements, share buttons, and cues to related content are just some of the distracting influences that drive users away from the seemingly simple act of reading and exploring, not to mention the constant pressure of open chat windows, email updates, and social media connectivity. The bottom line: Attention is a limited resource, so use it wisely and avoid superfluous visual pathways and exits.

The Weibull Distribution Theory

In 2011, the always insightful Nielsen/Norman Group posted an article explaining Weibull Distribution (a theory originally formulated in 1951 to calculate the likelihood of “system failure” in machines) in online marketing terms. Researchers at Microsoft used the Weibull Distribution theory as an analogy to talk about the likelihood that a user will abandon a page early. The research revealed intriguing data, suggesting that around 99% of websites are susceptible to “Negative Aging”.

What does that mean? Simply put, users typically “screen and glean” a website during the first moments of their visit in order to assess whether they have come to the right place. If a website passes this initial skimming test, the site is more likely to be explored longer and more thoroughly. Meanwhile, if a website is deemed by the user to be unhelpful, the user is likely to leave within the first moments of their visit, and not wait around to see if their minds can be changed.

Microsoft and N/N Group’s research is significant because they demonstrate a quantifiable reason why users leave a website, and what the benefits of capturing initial attention are. N/N Group concluded their article by suggesting that “bad” websites would be abandoned in the first 10 seconds, while “good” websites tend to be explored for 2 minutes or more. The shortcoming of their otherwise excellent research is clear: We need to understand what makes a good website good, and what makes a bad one bad to a user.

So, we’re inundated with information and distractions, and as web designers, marketers, and UX/UI professionals, we need to figure out a way to capture and maintain user attention by understanding what makes a user decide to stay longer. How do we do that?

  1. Make your most important information the most attention grabbing.


In Proctor & Gamble’s world, the “First Moment of Truth” is the most crucial time-frame to engage consumers; their research suggests that the moment a consumer encounters a product is approximately the moment they will make up their mind to buy it or not. As our frequent readers will know, EyeQuant scientific board members explained why this was the case in a study from 2012, effectively suggesting that a product must visually “pop out” for it to be noticed. If it pops out, it’s likely to be chosen. In web design, the name of the game isn’t to make your entire website bright and shiny, but to recognize and select only the most important elements (like your value proposition, or call-to-action), then make them stand out against everything else. How do you do that? Understanding and creating contrast is one thing, but here’s another:

  1. De-clutter unnecessary elements on your page.

De-cluttering draws attention to the important elements on your page by removing inessential information like pop-up ads and secondary value propositions/ call-to-actions. The more space you give to your important content, the more visible it becomes – just think flickr, twitter, airbnb, or even Facebook’s new design.

But wait, there’s another reason why you should give your page a Spring cleaning: The more information you hurl at your users, the more often they will have to shift their focus. De-cluttering your landing page provides a debris-free navigational path, and will direct them more quickly and more efficiently to what is important.

  1. Simplify: give users with one task, not dozens.

We humans aren’t really able to simultaneously juggle information and tasks, our brains must simply switch back and forth between differing information, which is a taxing endeavour, to say the least. Giving your user at calm environment in which they can explore your offer reduces stress and simplifies the task-at-hand. How do you know if you’re demanding too much of your users?

Ask yourself these 3 questions:

  • Do you have multiple call-to-action buttons and multiple offers scattered all over the page?

  • Is the important information on your page consistently organised in terms of color and size?

  • Does a user need to machete their way through a lot of other content to go from your value proposition to your call to action?

EyeQuant just released a case-study with fashion site SalesGossip that does a great job of illustrating this need for a singular and easy-to-follow flow. By simplifying and consistently organizing the content on their page, SalesGossip improved its navigational flow – and achieved an instant 30% boost in sign-ups along the way. Take a look at these EyeQuant perception maps showing the site before and after its design change. The success of the attention flow in Version B is clear:


But what about websites that require a lot of information available at any given time, like an e-commerce site? Part of Spring cleaning isn’t just throwing out the page elements that you don’t need anymore, it’s also about organising the remaining contents in a consistent, understandable manner. Despite its slow loading time, Spice Girl – cum – lauded fashion designer Victoria Beckham just launched a strikingly simple, consistently organised e-shop. Part of simplifying the path your user can take is, once again, to remove distraction-worthy elements. Too many hyperlinks, buttons to click, or alternate pathways provide too many options to leave the process you want your users to go through.


Don’t worry, we’re not all web zombies…yet.

In past blog posts, we’ve spoken a lot about attention-driven design. Designing a website with user attention in mind isn’t just about directing their focus to your most important content, it’s also about creating and promoting a calm place for users to concentrate.  Think of your users as Lawrence of Arabia, and you are an oasis amongst the chaos of shadowless, scorpion-ridden, sand storm-prone desert! Designing conscientiously with the overarching stresses of the web in mind won’t only help boost your own usability and conversions, but will play a part in helping the Internet become a calmer, easier place to exist in.

Here at EyeQuant, we’ve figure out that the easiest and most precise way to make sure that a user’s attention is being directed to the right places is through automated attention analysis. Our neuroscientific A.I. provides instant insight into the ways in which users see your website within the first moments of their visit. Give it a try – the first time is free, all you need is a URL!

Landing Page Blind Spots are Killing Your Conversion – 3 Secrets to Make Your CTA Pop

 BlindLeadingTheBlind_Bruegel2

The funny thing about working really, really, hard on something is that it tends to take someone completely outside of the task-at-hand to point out its most banal – and the most obvious – problems. When building and improving a landing page, collecting data on user attention isn’t just important for improving usability, it is also necessary to catch conversion killers that may have gone unnoticed – but have been staring you in the face the whole time.

This blog will explain why seeing isn’t always believing, how to find blind spots on your landing page’s design, and why the key to all this is understanding a little bit of neuroscience.

Change Blindness & Multitasking

We tend to like to think of ourselves as multi-tasking pro’s these days; we talk on the phone as we drive, we scan our Facebook account as we speak to someone, we check our email or text while walking…

Or at least, we think we can multi-task. In fact, not only are we often blind to our own mistakes, but we humans aren’t even as good at multi-tasking as we would like to think we are:

multi-task1

Photographer Philippe Halsman on Multitasking

Our brains tend to prioritise information, filtering out what doesn’t seem to be immediately necessary, but also switching between tasks in terms of priority. In a study from 2010, researchers at the University of Michigan conducted a study requiring a test-subject to switch between tasks during an FMRI scan. As the test was carried out, researchers found that there was always a little time lag during which the test-subject would switch from one task to another. The reason for this is quite simple: we humans can only direct so much attention to one thing at any given time, and so can only give a finite amount of energy to single task at a time.

Quick Takeaway: Make life simple for your users by giving them one clear, simple task when they arrive at your landing page.

Quick Takeaway: Users are busy people, and in order for them to instantly notice and understand what you do, why you do it, and where they can click your CTA, these elements need to stand out like a sore thumb in contrast to other, less important information.

  • While our brains are constantly scanning for information to consciously direct our attention to, spotting changes to our surroundings can be surprisingly difficult. This phenomenon is called Change Blindness. Researchers at Queen Mary University built an Artificial Intelligence that uses a computer algorithm to make changes to an image in order to test a subject’s visual perception of its changes. Just like EyeQuant, their AI uses objective data on the human visual attention system to produce a pre- and post-change images that are identically attention-grabbing, so that the researchers can study where someone will look in a scene to spot the difference, and what makes us notice the change. Most interestingly, the researchers found that we are more likely to spot the difference in a scene if an object has been removed than if the object has changed color.

Quick Takeaway: Identifying what to A/B test can be confusing because it is difficult to pick up on subtle visual problems that our brains automatically filters out. Small changes to color and size thus go unnoticed, which is why objective Artificial Intelligence is so insightful in letting us understand what our eyes (and brains) will direct attention to – and what they will ignore.

11morris_gorilla2

See the gorilla? Most don’t. Check out Daniel Simon’s video on Change Blindness by clicking on the image.

Blind Spots

Chances are, you’ve done a great job of trying to understand your users: who they are, what you can offer them, and the circumstances in which they’re most likely to convert. As the studies above illustrate, though, it’s surprising how oblivious we can be to our own work, not to mention to the users that we are working for. As a result, landing pages almost always have a few blind spots: information that should be getting user attention, but are simply ignored – even if it’s in a user’s best interest to find it.

In fact, the human visual attention system directs attention based on a few dozen basic visual features, and when a user arrives at your landing page, those features kick into motion to help the user decide what they should be looking for. There are many visual features that infinitely combine to direct visual attention, but here are the 3 most important ones:

  1. Contrast: Essentially, our attention tends to be drawn to areas of a website that have the brightest contrast. This is why, for example, a black-bordered, orange call-to-action button against a white background gets so much initial attention; this combination simply “pops out” at the viewer.
  2. Space: The more “white space” around an important element, the more it will stand out to a user. Like contrast, this may seem intuitive, but many landing pages don’t give the chance for the stars of their show to shine. The best way to make room for your important elements? Remove less urgent information, group them together, and move them aside.
  3. Placement: We tend to read landing pages like we would a book, starting at the top left corner and snaking our way down. For this reason, user attention is almost guaranteed to start in the top left and pause somewhere in the mid-centre-right of a landing page.

If your most important elements – What your page is about, Why the user should care, and Where they can go next – don’t take these features into account, chances are they will end up in a blind spot.

 

How to Find Blind Spots

So, how do you know if your call-to-action is hiding in the dark?

EyeQuant’s Perception Map takes the guesswork out of analysing your own work and understanding your users by precisely predicting user attention based on a complex list of features that direct user attention. Areas that are visible to a user within the first few seconds of visiting your page are highlighted, while any information which will be initially ignored remains in the shadows.

Take a look at two examples of car rental pages to see what we mean:


  • EyeQuant’s Perception Map of this Hertz Rental Car page shows that user attention immediately focuses on information at the top of the page, luckily including their logo, and a bit of copy about why their offer is great, but their CTA and search form are completely in the dark.


  • EyeQuant customer Sixt, meanwhile, have done an amazing job of making sure that none of their important information is hiding in a blind spot. Not only can the user immediately see what the company is about (“car rental since 1912), why Sixt is a great choice (“from $10.99/day” offer), and an attention grabbing green “Continue” CTA, but the unmessy search boxes stand out perfectly even against product images, conveniently hidden for further navigation below.

 

The Blind Leading the Blind

Building a landing page without a proper understanding of user attention can be a little bit like the blind leading the blind: You will be in the dark as to what your user sees and doesn’t see, and your user simply won’t be able to see what it is that you do, why they should care, and where they can go next if they like what they see. The result of this inability ends up looking a little like this painting by Bruegel:


So, what can you do? Use the technology available to you with EyeQuant to understand and accurately predict what a user will see – and what they will miss. We’re already performing this job for industry leaders like Google, Spotify, and Sixt, so why not take the chance to bring your landing page out of the dark – and start selling.

Image Credits:
Pieter Bruegel the Elder, The Blind Leading the Blind, 1568.
Philippe Halsman, Jean Cocteau, 1948.
Daniel Simons, Selective Attention Test, http://www.youtube.com/watch?v=vJG698U2Mvo, 2010. (www.theinvisiblegorilla.com)

How to Find a Common Language in Design Meetings

DATA


When we set out to build EyeQuant, our primary objective was to build the world’s best tool to instantly optimize user attention on websites. Along the way, though, we found that our customers often employ our software in an additional context, using their EyeQuant results as an objective voice during face to face conversations, bridging the gap between intuition and analytics. To this end, we weren’t surprised to find that others – namely a research team at MIT – share this finding.

Ruth Rosenholtz is a senior researcher in Brain and Cognitive Sciences, and focusses her research on human visual perception and the impact of visual clutter on task performance, using computational models and behavioral studies to research user interface (UI) and information visualization (infovis) solutions. One of her main goals is to study tools that provide “guidance on perceptual aspects of design”.

In a recent field study, Rosenholtz and her colleagues collaborated with designers and design teams to determine how effective these perceptual models are in guiding the design process.While her prototypes certainly achieve this aim, they also yielded another intriguing result:

“The most powerful potential use of perceptual tools”, says Rosenholtz, “is as a facilitator of conversations among multidisciplinary team members about design intuitions and design goals.”

How Come?

Because quantitative design models and tools help create what Rosenholtz calls a “common perceptual language”. In other words, with a simple and objective design visualizations of otherwise intuitive and often difficult to grasp processes, designers are able to cross disciplinary communications boundaries.

At EyeQuant, our A.I. was designed to be used online, but its impact is also felt when it is used offline in design and brand meetings. Everyone in a meeting possesses their own expertise, intuitions, and personal tastes, but few have objective, compelling data to back up their arguments.

We believe that artificial intelligence and neuroscience make the designers’ and marketers’ lives easier, not just because the software we build provides highly accurate, data-driven insight into online user attention, but also because the visualizations our customers receive as results create a common language for the whole office, from marketing and sales teams to designers and developers.

When someone tests their web page with us, four predictive visualizations of initial user attention – a perception map, a heat map, a click map, and an interactive ‘regions-of-interest’ map – are instantly produced, all of which can then be easily exported to .pdf format for use in presentations and pitches.

There is a not-so-quiet revolution occurring in meeting rooms all over the world: It is the evolution of data not just as a slide in a keynote presentation, but as a new, highly rational member of the team who is able to unite the complex, creative world of design with the analytics-rich galaxy of marketing and conversion rate optimization.

EyeQuant is excited about our leadership role in this new field, and are currently working on features that support this use case, particularly for agencies. Stay tuned!

Image credit: http://3.bp.blogspot.com/-gSxWCdXAsOo/T4coY8Y-_EI/AAAAAAAABHs/x6EiNUzb4VY/s1600/ST-TNG-10.jpg

Attention-Driven Design

03-Herbert-Bayer--Diagram-of-extended-vision-in-exhibition-presentation--1930

Information isn’t picky: Anyone, anything, or anybody can be a part of it anytime, anywhere, and by any means possible. Attention on the other hand, is finite; we only have so much of it, and in these information-overloaded days, we have to be careful how – and where – we deploy it. In online marketing, a web page only has between 3 and 5 seconds to successfully communicate its intentions – and capture attention – before a user will leave the page or explore further.

This is why EyeQuant is focussing on something we like to call attention-driven design. Simply put, we help designers to build web pages that focus on where and how users are directing their most valuable commodity: Attention.

Understanding User Attention

Designing for user attention can be broken down into a few key categories:

1) Making the 3W’s Visible – Within the first second of arriving on a landing page, does the user understand what the page is about, why they are there, and where they should go next?

The 3W’s form a basic structure of what information your landing page should hold:

  • What your offer is about.
  • Why your offer is great – and different from your competition.
  • Where a user can go next to learn more, otherwise known as you Call-to-Action.

When the 3W’s are effectively in place so that a user sees them immediately upon arrival, a user will feel as if they are being communicated to directly, honestly, and efficiently – leading to improved click-through and conversion rates.

2) Focus & Flow – Is the visual path that the user’s eyes take through the web page fluid and coherent? An essential part of designing for attention is to understand that a user will feel more at ease on a landing page or website when their eyes aren’t bouncing from one location to another.

3) Brand Recognition – Is your branding straightforward and recognizable, but not distracting from your offer? Brand awareness – conveyed through a unique use of color, typography, logos, and even mascots – makes a company recognizable and trustworthy, and it is important that this identity is holistically present on a web page. In online marketing and sales, a user’s gaze must be aware of branding from their first moments of arriving on a landing page. If the 3W’s are the door, the chair, and the table in a room, a company’s brand identity should be the paint and the pictures on the wall, defining the atmosphere but never distracting from the contents of the room.

Attention-driven design isn’t just about designing for the first few seconds of contact with a user. The real success of a landing page lies in its ability to maintain and guide a user’s attention in an engaging, even surprising manner from start to CTA. After all, designing for attention isn’t merely a matter of pushing out as much content as quickly as possible, it is about finding ways to stimulate user experience by offering interactive and understandable visual pathways.

You can test your landing page’s attention aptitude with EyeQuant by simply uploading a screenshot or URL here – the first test is always free!

Image credit: Herbert Bayer, Diagram of extended vision in exhibition presentation, 1930