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.

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

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

Rounded Corners Are Cognitively Cheaper, Yet Facebook Drops Them Anyways: Image Source: UI & US

Yesterday Facebook announced that it decided to drop all rounded corners in their latest UI refresh, sacrificing those cheerful corner radii on most of its interface modules for the more severe but coder-friendly squared off look. It’ s almost like they’re declaring the end of web 2.0, once and for all. Keith Lang’s UI & Us has consolidated a terrific history of where this rounded rectangle thing started in the first place… with the original Macintosh apparently. Folklore has it that Steve Jobs pointed out to Bill Gates that the real world is full of rectangles and squarish shapes that have rounded corners -stop signs, coffee tables, beverage coasters – so why not user interfaces? Right angled shapes are computationally efficient to draw, but let’s face it – you can put an eye out with one of those things if you’re not careful. And that’s exactly the kind of human-centric thinking that has Apple rounding the corners on everything from your iPhone to those error message pop-ups that you’re getting in iTunes. Interestingly, Lang makes a cognitive processing argument for the benefits of the roundedness, quoting author Jurg Nanni. “A rectangle with sharp edges takes indeed a little bit more cognitive visible effort than for example an ellipse of the same size. Our fovea is even faster in recording a circle. Edges involve additional neuronal image tools. The process is therefore slowed down.”

Linking aesthetics to cognition is not a stretch. We often express a qualitative preference for the look of something that is driven by something more elemental in our biology and our evolutionary need to survive. For instance, we see and process information better when it’s portrayed in color combinations that are found together in nature. I quote a good piece from 2003 by Luke Wroblewski. “[colors] found in nature are often less saturated and more pleasing to the eye than their artificial counterparts. As a result, they allow users to focus on interactions, and not be distracted by overly bright hues.” In fact there is a whole book about this called Evolutionary Aesthetics, which makes the case that our aesthetic preferences are not only driven by evolution, but that there are huge differences in what we visually respond to based on whether we’re male or female and in a precopulatory or postcopulatory state. I’m sensing a whole interesting new category of design research on the horizon here.

Trendy No More - Say Goodbye to Your Rounded Corners in Facebook

So CSS3 is including a property for rounded corners and I’m sure browsers will support this soon. This will relieve the technical “expense” of how they are rendered in browsers now (via the use of image files.) But do we want them? Are they really there to provide a more “organic context” (as argued in this piece four years ago on basement.org), or are they just trendy? I’m sure bell-bottom trousers were more efficient for us in terms of neuronal image processing but that didn’t keep them around any longer, did it? Personally I think there’s something else going on here. We have clearly established a design idiom over the years that elements with rounded corners are things you are supposed to interact with… e.g. rounded corners are a functional cue. Functional cues help us put some space between the kind of design choices we make for an interface versus those we make for print. Think about the kinds of things that consistently don’ t have rounded corners on the web – ads and photographs. Now think about the kinds of things that do – buttons, modules containing links and form elements, navigation menus, and tabs. We don’t want our users tuning out areas of the screen just because it doesn’t look like something that is interactive. For designers, rounded corners have played a tiny role in managing that issue. Plus, they just look so damn cool in that Web 2.0 way, don’t you think?

Everybody Loves Puppies, but The Instructional Potential of This Image is Zero

Careless use of imagery – particularly photographs – is often the difference between a dull “brochure-ware” site and a persuasive information experience.   When we redesigned www.dummies.com, we initially populated our design mock-ups with the type of stock photography that professional designers mostly use… only to find that the otherwise attractive imagery added a level of generic-ness that felt downright off-brand.  Then we created a style guideline only to use imagery that had true instructional value, whenever possible framed and centered on the action that was being discussed in the content.  This applied not only to imagery embedded in the how-to articles, but also the landing page teaser thumbnail photos for the articles and videos.  This is a policy the mega-successful book line has had for years, but it wasn’t immediately obvious to us on the web design side.  Once we made this change the site felt instantly better.  The difference?  We thought like an instructional designer.

Interaction designers, graphic designers, and anybody else involved in the ongoing production of commercial websites should pay a lot more attention to instructional principles – even if the site is not overtly instructional.   What makes material good for learning also makes it good for other conversion goals – such as explaining products, services, and brand building.

Dummies.com Uses Explanatory Imagery Even in Thumbnails

In fact, why not audit your site’s imagery right now for instructional potential?  If you find that most or all of your visuals are falling into the “decorative” category – unless of course it’s fluffy puppies or blondes on the hoods of sports cars (two time-tested exceptions) – then it’s time to make a change.   Fortunately, the educational psychologist Richard Mayer has conveniently classified types of imagery in terms of their instructional benefit and effectiveness for learning.  The good folks behind the Wiley Visualizing series, which is a textbook line that is highly committed to applying cognitive theories of learning to the design of their products, put together the following summary table, which I’ve adapted with examples that might apply to a typical web designer’s challenge…

Types of Visuals Commonly Used in Instruction

Category of Visual	Instructional Potential	Examples
Decorative - visuals used for aesthetic appeal, entertainment, or to stimulate interest.	None	Caption: America's 5 Dog Friendliest Cities
Representational - visuals that portray a single object or piece of information in isolation from related objects or pieces of information.	Minimal to None	Caption: San Francisco: A Dog-Friendly City
Organizational - visuals that display relations, structures or organization among multiple objects or pieces of information.	High	Caption: America's 5 Dog Friendliest Cities
Explanative - visuals that explain how systems, processes, or cause/effect sequences work.	High	Caption: What Makes A City Dog Friendly?