Tag Archives: #weboptimization

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

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

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

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

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

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

Cindy Gallop on redesigning business, sex, and opportunity:

Matthew Berman, on distribution hacking:

 

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Bonus: They can be generated in a few seconds.

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

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

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

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

Here’s the short response:

Nobody wins with scrolling banners/carousels.

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

Like this:

Screen Shot 2013-08-14 at 2.39.53 PM

Or like this:

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

Just ask Adam Fellowes, head of UX at Digirati:

Screen Shot 2013-08-14 at 3.05.37 PM

Fighting the good fight

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

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

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