Tag Archives: web design

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.

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

Capturing User Attention with Color

Color permeates our actions and reactions to everything we do; it plays into our sense of identity, into our choices, into our relationship with the world around us.

To conversion optimizers, marketers, designers, and advertisers, choosing a branded color scheme that sells can easily become a lengthy and complicated problem. So many considerations are at stake: How do my color choices reflect my brand? Do my color choices reflect the brand’s ecosystem? Will these colors “convert”?

In this article, we’ll take a closer look at color from the perspectives of neuroscience, business, and psychology. In particular, we’ll talk about:

  • How humans see and perceive color.

  • What colors and combinations of color garner visual attention.

  • The real story behind the emotional language of color.

  • Best practices when choosing and using color in branding and design.

But Really, How Do We See color?

Let’s start at the beginning: color is a construction of our minds.

Isaac Newton was perhaps the first person to observe that color is not inherent to all objects; rather, an object either reflects or absorbs colored light, and what is reflected is in turn what our brains will process as a specific color.

The color spectrum is made up of three primary colors: red, yellow, and blue. By combining these three colors, secondary colors – green, violet, and orange – are produced. Mixing any primary or secondary color produces a tertiary color – blue-green, blue-violet, red-violet, orange-red, yellow-orange and yellow-green.

The Color Wheel

Goethe came up with the common representation of the symmetrical color wheel. His Theory of Color, published in 1810, experientially and conceptually explored the effects of color on humans.

The common color wheel represents the three primary colors, the three secondary colors, and the six tertiary colors so that the “complementary” colors are always diametrically opposed: red is opposite green, purple is opposite yellow, and blue is opposite orange, etc.

Complementary colors are the pairs that will allow for the most contrast, or, in Goethe’s words:

“for the colors diametrically opposed to each other… are those that reciprocally evoke each other in the eye.”

Color and Visual Attention

“Human visual attention is for an important part bottom-up driven by the saliency of image details. An image detail appears salient when one or more of its low-level features (e.g., size, shape, luminance, color, texture,binocular disparity, or motion) differs significantly from its variation in the background.”

This is a quote from a research paper by researchers from the University of Barcelona on the saliency (or visual pop-out effect) of color. Much of the visual attention we pay to specific regions of a scene depend on bottom-up (stimulus, rather than task-driven) attention. This describes why color choices affect the way a user will interact with a website when they first arrive.

Human visual attention, in other words, first responds to contrasts in color and light, then to the emotional and cultural value of a specific color.

Our perception of color has evolved over thousands of years in order to help us “discriminate edible fruits and young leaves from their natural background” (Koenig).

In his research into the nature of color contrast in the Ugandan rainforest – a so-called birthplace of civilization – Professor of Neurobiopsychology (and EyeQuant co-founder) Dr. Peter Koenig and his fellow researchers found that the axis of Red-Green color contrast plays the largest role in attracting our overt attention in natural scenes, while the effects of a Blue-Yellow color contrast are much less influential. While this research is specifically related to jungle scenes, it certainly offers interesting fodder for further research into how and why certain colors and color combinations stand out to us more than others.

Color saturation is another possible predictor of attention: the more saturated an element is in comparison to its surroundings, the more quickly it is likely to be noticed.

There is a crucial bit of knowledge to extract from this last paragraph: color saturation attracts attention in relation to its surroundings. As we will later see, even bright red can fail to catch a user’s eye if the right context isn’t in place.

Color and Semiotics

Green symbolizes trustworthiness, youth, energy…but wait, so does yellow…and orange… and blue. Breaking down the associations colors have to certain states of mind can be terribly confusing.

In semiotics – or the study of signs – the use of color as a substitute, or sign, for information is frequently broken down by Peirce’s Trichotomy of Signs:

  1. Iconicity measures the resemblance to something, such as a photograph or an icon. It can also refer diagrammatically or illustratively. For example, red and orange are perceived as “warm” colors, while dark colors are perceived as “heavy”.

  2. Indexicality is the measure of the way in which a sign is linked. For example, a green banana is understood as under-ripe, a yellow banana is understood as ripe to eat, and a brown banana is understood as over-ripe.

  3. Symbolicity is far more elusive as it lacks the logical connections to meaning that iconicity and indexicality have, yet it is what marketers commonly refer to when speaking about the language of color. Green means go and red means stop, but the symbolism of colors remains dependent on a specific context.

Color and Branding

You can only paint your living room walls once they have been built, sanded, and prepared, and the same principle goes for your website: a basic global framework of decisions must be made before aesthetic choices such as color can be made.

There are no secret formulas involved in choosing a color scheme, nor is there one color or color combination that is guaranteed to attract your users to your product like magpies to gold.

In order to make this crucial aesthetic decision, you must first understand who you are, what it is that you want to achieve, and most importantly, who you want to achieve it for.

In this way, color should act as a substitute for information: as opposed to telling a user to “look there” or “feel this way” about an area of a web page or information on a product, color should fill in blanks by virtue of its characteristics.

Color and Conversion (Or the Story of the Big Orange Button)

One such example of this method of substitution is the “notorious BOB” (excuse the bad joke).

The BOB (or Big Orange Button) has become a symbol of color’s role in conversion rate optimization. WiderFunnel and Unbounce love to speak about its power, and perhaps rightly so. But why is the BOB the saviour of conversion, the Queen of the CTA’s, the undisputed fan favourite of users?

While there are no clear reasons why a bright orange CTA purportedly converts so well, we’d like to offer some possible reasons:

“Safety orange”, or a bright orange (Pantone Number 152) is used to differentiate important information from its surroundings, especially in contexts that require quick decisions and immediate attention such as in traffic, in hunting, and in disaster relief. The allure of bright orange has to do both with its saliency against common natural backgrounds such as blue sky or dark green forest, but also with its semiotic connotations; because of its symbolic status as a “safety” color, we could hypothesise that bright orange encourages more urgent decision-making – which is good news for e-commerce buttons.

A Big Orange Button works best when it stands out like a hunter’s safety vest in the forest: it needs contrast – often in the form of complementary colors – in order to attract and direct attention.

Best Practices

Contrast and Balance

A popular design model for creating balance within a color scheme is to adopt the basic “60-30-10 rule”. Here, the rule dictates that your most dominant color should be used 60% of the time, your secondary color 30% of the time, and an accent color 10% of the time. Typically, the most dominant color should also remain the least saturated color, while your bold or highly saturated accent color should be saved for your most important content.

Behind this intuitive strategy lies an idea that is basically consistent with the science of visual attention. In the simplest of terms, what we are visually drawn to relies on intersecting sets of spatial and contrasting characteristics. A sparsely used “accent” color is likely to attract visual attention both because it is scarce and because it elicits a high value of visual contrast.

 

Whitespace

In the jungle, we’re neither provided the luxury of whitespace nor respite from the surrounding visual chaos.

Websites are different. Whitespace is crucial to drawing user attention to key areas and to balancing and directing the flow of information across a page.

This, of course, is no news to you: “minimal”, “flat”, “simple”, “uncluttered” design is fast becoming the strategy of choice for creating high converting, usable web pages. And yet, adding white space to a web page in order to draw more attention to a key element can be slightly trickier than you think.

A huge, invasive red ad, as seen below, might seem as if it would capture our attention immediately, but it is in fact largely ignored, as evidenced by both an eye-tracking and an EyeQuant analysis.

On the left, you’ll see an eye-tracking study conducted with 38 subjects (over twice the average number of participants for a study), and on the right, EyeQuant’s very close prediction. In each case, it’s clear that the massive red “FINAL SALE” sign in the middle of the page receives comparatively (and surprisingly) little user attention. In fact, the large red square is participating in the white space of the design more than it is standing out from it. The highly salient black sandal at the very bottom of the page, meanwhile, receives far more heat because of its point of contrast in relation to the rest of the page.

Know Your EcoSystem

An emotional framework of colors has been, in all likelihood, already established by your competitors and the brand ecosystem you work within. Do you hop on the bandwagon or do you swim against the current?

Well, it depends:

Some brand domains prefer consistency…

Fashion E-Commerce is a vast ecosystem that nevertheless tends to adhere to a color scheme. Chanel introduced the now ubiquitous monochromatic black and white scheme to fashion in the 1920’s, and sites such as Net-A-Porter, TopShop, American Apparel, and Sales Gossip follow suit themselves accordingly.

In this case, a predominantly monochromatic (with moments of color splashed in) are used in order for the user to immediately identify that they’ve come to a fashion-forward site. Just take a look at Net-A-Porter’s strategic use of red to draw attention to their sale items:

And some don’t…

Other product domains, however, aren’t so “black and white” (again, excuse our pun). Environmentally-savvy products might intuitively choose green as iconic of their relationship with Mother Earth, but they are often just as wont to choose green’s complimentary color – orange – in order to provide a welcome change. Choosing a color based on semiotics alone is common practice, yet limiting.

By the same token, working on a monochromatic gray scale like the fashion industry works well because it also converts easily (important information can be picked out using splashes of colour), yet relating a brand to a color for symbolic reasons alone may lead to a reduced bottom-up attention.

Once again, users will see what is salient on a page before they start processing the emotional and cultural importance of color.

Test, Test, Test

Neil Patel of CrazyEgg and KissMetrics once wrote that person responsible for A/B testing at Gmail ran tests on 50 shades of blue before deciding on the hue that worked the best for their users.

For the vast majority of us, this quantity of tests is far out of reach (Gmail does have 425 million test subjects, after all), but Neil does point to a now famous A/B test published by Performable at Hubspot. Here, Performable tested a green CTA button – which is consistent with their overall branded colour scheme – against a red CTA button.

The red CTA button outperformed green by a whopping 21%.

Like Hubspot, we’d be crazy to say that we know precisely why this is the case. We could point you to studies that suggest that red is indeed the most salient – and hence most attention-grabbing – color, but saliency is dependent on context, or how a certain color pops out in relation to its surroundings. That said, making sure that your most important elements are the most visible ones – and color is one of the main mechanisms to achieve that – will typically result in better conversions. The only way to find the best converting color for your own web page is to test, test, test.

To quote hubspot,

“Therefore, do not go out and blindly switch your green buttons to red without testing first. You should test colors on  your  page and with  your  audience to see what happens. You might find something interesting in your data that we don’t have in ours.”

Key Takeaways:

  • Our attention is first grabbed by what is salient (through a combination of color contrast, space, and size), then by the semiotic value attached to certain colors and color combinations.

  • Use saturated colors selectively: bright and bold colors are excellent at attracting attention to select regions of a page, but soon become overwhelming if overused.

  • The best way to draw attention to your most important elements is to create a balance between white space and contrast. An oversaturated web page will overwhelm your user’s ability to attend to your most important elements.

  • Understanding the way other brands in your ecosystem is crucial: Some areas, like fashion e-commerce, tend to adopt a consistent color scheme, while most others thrive on differentiating themselves from their competition.

  • A/B testing is the best way to see how your color choices affect your branding and design.

  • Predictive Eye-Tracking, meanwhile, will help you to better understand how color is affecting user attention, and will also give you ideas for what to A/B test.

For more resources on color and how to use it to attract attention online, start with:

Oh, and a little factoid:

The common goldfish is the only animal species to be able to see both infrared and ultraviolet light!

Why Design Needs Science

As part of a new series on the EyeQuant blog, we turn to our customers and friends to answer questions about web design, UX, and conversion optimization with their personal experiences and stories. First up: Tom Greenwood of Wholegrain Digital!

Image“Tom Greenwood is co-founder of the London based agency Wholegrain Digital, which specialises in the design and development of WordPress websites.  They work with clients around the the UK, Europe and US, ranging from small independent businesses to big brands like M&S, Sony and Reed Recruitment”

How does EyeQuant make design better?

Web design typically has more in common with art than it does with science, and what makes a good web design is highly subjective.

We all have own opinions and own own perspectives, mixing personal taste with professional experience and other biases. To some extent this could be considered a good thing, since it helps ensure that all factors are considered and opens the process to new ideas and possibilities. Everyone is entitled to their own opinion, and differences in opinion can help to stimulate the creative process.

Web design is not all about being creative and looking pretty, however.  Nearly all websites have a serious commercial or organisational goal underlying them, and achieving this goal is far more important than looks alone.

Beauty might be subjective, but the real goals of a website are nearly always more objective. It is far more valuable to measure data, such as generating leads, sales, and social shares than to assess whether people think it looks nice.

This is where the web design process can come a bit unstuck, especially when working in teams or committees where many people have a stake in the decision-making process.  Everyone wants to have their say and shape the design to fit their own vision, but decisions need to be rational and objective.

If you “design by committee” you are all too often forced to try and please everybody. This results in designs that everyone finds “acceptable” but that don’t fulfil their main objectives, and might not even be particularly beautiful to most people.

You end up with something mediocre.

What WholeGrain Digital loves about EyeQuant is that it finally brings science into the web design process. As designers, we are too close to our work – and our clients are too close to their own business – to make unbiased decisions. Design teams rarely include someone who is truly qualified to make objective decisions about whether the design is optimised to fulfil its functional requirements.

EyeQuant does this beautifully. It uses real scientific data to make rational, unbiased statements about your designs without any ego involved.  Quite simply, the design team no longer needs to worry about internal politics and asserting personal authority.

A website can be stunningly beautiful and functional, but you need to ensure that you give your main objectives top priority. In our experience, adding EyeQuant to the design process results in more focussed teams making more informed decisions and producing more effective websites.

That can surely only be a good thing.

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