Tag Archives: predictive eye-tracking

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?