Anti-pattern: Dead Zones


old_new_IFC

The Independent Film Channel's home page used to be one big "Dead Zone" before they redesigned it.

Ad placements are, by definition, dead zones.   These are specific, predictable sections of a website’s screen real-estate that are subconsciously tuned out by the user as unrelated to the page’s main content and functionality.  But designers unintentionally create dead zones of their own all the time.    A classic and well understood example of a dead zone is “right-rail” blindness.  Content and features below an ad – such as in the right-hand column of a typical two or three column layout – are tuned out as ads on the assumption that everything from an ad down is also an ad.   According to Nick Gould, CEO of the design and research firm Catalyst Group, the evidence of this phenomenon goes well beyond the anecdotal.   “There is no question that right-rail blindness is a phenomenon we’ve observed in both eye-tracking and usability testing.  This is of course mainly due to the ingrained expectation that ads live there.”   And it’s not just a matter of positioning elements in a layout.  The manner in which a page element itself  is designed can greatly amplify or lessen the dead zone effect, in the worse case scenario unintentionally deactivating important content areas and features from the user’s attention.   Often this comes from trying so hard to make an element “pop” visually, that the reverse effect occurs.   “The dead zone effect is obviously exacerbated if elements below ads are ad-like in their design,” Gould says.  ”Furthermore, promotional elements that have standard ad dimensions and contain images are frequently mistaken for ads.”

Eye-tracking data shows that the "right rail" has little visual salience with users.

Eye-tracking data shows that the "right rail" has little visual salience with users.

There is strong evidence now that users have specific expectations about where to find the most relevant information on a web page before having seen the page.  In a recently published eye-tracking study observing  usage of a broad range of web sites for both page recognition and information foraging tasks, the right-rail blindness phenomenon was dramatically confirmed.  (see Bushcer, Cutrell, & Morris 2009) “It is striking that the entire right side above the fold is neglected for both information foraging and page recognition tasks.”    The eye tracking data reveals that users are looking at the right rail, but the “fixation impact value” (a computation that correlates fixation length with the amount of visual information processed) approaches zero.  According to Gould, “This all relates to visual salience – which is more about an unconscious assessment of what’s relevant and what’s not that occurs pre-cognition.  A variety of design, placement, and relative size/shape issues can contribute to items on the page not being deemed salient.”

Netflix consistently avoides "Dead Zones" with careful use of white space and "Functional" looking design cues.

Netflix consistently avoids "Dead Zones" with careful use of white space and "Functional" looking design cues.

As a predominantly qualitative researcher, these eye-tracking findings do not surprise me.  I’ve frequently observed that small differences in visual design and placement can have a dramatic effect on a user’s perception of whether they should pay attention- not to mention interact- with a page element.  Most of us who work on commercial websites have to balance a colorful, branded look while simultaneously creating a usable interface.   I’ve observed a few tricks over the years.  For instance, promotional elements that have an interactive “call to action”, such as a blank zip-code field in a registration opt-in promo, will outperform a straight image & copy version of the same message.  Netflix.com are masters of working with a heavily branded design full of bold, contrasty elements, yet systematically avoiding the creation of dead zones with careful use of white space and  “functional looking” design cues.

Original Page Layout (with CramCast ad) on Cliffsnotes.com

Original page layout (with CramCast ad) on cliffsnotes.com

I find myself conflicted (not to mention confronted by other stakeholders) with a desire to make something “pop” and the counter-intuitive, opposite notion that an integrated look is the key to discoverability.   We recently ran a multi-variate test on www.cliffsnotes.com to test the hypothesis that elements with a more “integrated” versus “ad-like” design perform better in right rail placements.  It was my first dabbling with the free tool Google Website Optimizer (GWO) – which turned out to be one of those “Where have you been all my life?” moments.   In the Cliff’s Notes test, we took an existing internal promo on the site for a podcasting series called “CramCast,” which was designed as a standard 300 by 250 ad, and redesigned it in a style more consistent with the existing functional right-rail modules on the site.   We made no changes to the copy or the photo between variants.  The positioning on the page was exactly the same.  The only difference was the look and feel.  Then we ran both versions in a split-traffic test on the live site.

The Integrated Look Outperformed the Original "Ad-Like" Look by a Narrow Margin

The integrated look outperformed the original "Ad-Like" look by a narrow margin of 6%.

The integrated version did outperform the ad-like version, but not by a huge margin – only a 6% improvement.  (We got about 30 more clicks per 200,000 visitors with the Integrated look.)  It was not worth our time to redesign the creative material for that campaign, but certainly good counter-evidence the next time someone says something doesn’t pop enough.   What we couldn’t get at with GWO was whether the integrated look, since it replaced the traditional ad placement and cast less of a shadow on the user’s salient zone,  helped to activate the entire right rail.  This is the more interesting question.  After all, the worst dead zone problems are when multiple ad-like elements conspire to deactivate entire regions of a page – such as the old homepage design on IFC.com (pictured above.) In this design,  multiple ad-like features are interpreted sub-consciously by the user as one big ad area, and important content features (such as the programming schedule) are overlooked.  In our  next A/B test here, we’ll have to monitor the clicks outside our variants as well, perhaps with the advice of someone who is an expert with these tools – like Avinash Kaushik or Marko Hurst.    If anyone has done any research on this issue, or can point me towards soemthing else to share here – please comment on this post!

What are Anti-Patterns?

(Definition taken from Looks Good Works Well) Anti-patterns, also called pitfalls, are classes of commonly-reinvented bad solutions to problems. They are studied as a category so they can be avoided in the future, and so instances of them may be recognized when investigating non-working systems. The term originates in computer science, apparently inspired by the Gang of Four’s book Design Patterns, which displayed examples of high-quality programming methods.Wikipedia Anti-pattern

, ,

  1. No comments yet.
(will not be published)

  1. No trackbacks yet.