Blogless: Blog of Design Less Better.

Posts tagged .

3 web design lessons from eye-tracking studies

Eye-tracking studies may speak volumes to advertisers, but when it comes to usable web-design day-to-day, they only tell us 3 things.

Last month, the Software Usability Research Laboratory (SURL) at Wichita State University put out a new eye-tracking study, focused on differences in eye-movement patterns between single- and two-column web pages.

For some reason, I always read these, and inevitably end up frustrated. Not just because of the standard objections to eye-tracking as a useful methodology, but because out of the 20 of them I've read, it feels like numbers 2-20 haven't added anything substantive – or, more importantly, generalizable – to the information I got in the first one, which taught me about the "F"-shaped eye pattern (later popularized as the "golden triangle").

So this time, I was determined to review some of the secondary literature on these studies (in the form of scanning the first page of Google's search results [note to self: touché]), and see if I could generalize the lessons of eye-tracking studies for myself and people like me.

And when I say generalize, I don't mean come up with a Smashing magazine list of "The Top 276 Things Designers Can Learn from Eye-Tracking Studies" that basically recapitulates the bullet points of all the harvested literature verbatim. I'm talking about getting this down to a set of rules of thumb you can write on the back of a business card.

Now, if the post title didn't scare you away, here's your explicit warning: I am a web designer. I make sites that don't tend to be advertising-supported. My problems are very different than the problems of people who have to figure out how to increase click-through at Google, or who sell their expertise at ad-placement. I am honestly concerned with usability here, not revenue. If you want that, here are about 89,400 references for you.

Mutatis mutandis, and without further ado:

1. Use the top left corner.

Heat map of Google.com from eye-tracking study by the Nielsen Group

As indicated back in April of 2006 by the Nielsen group, readers focus hard at the top left corner, and progressively less to the right and down the page. This means that you've got a relatively small piece of your total real-estate to both get your readers hooked on your content and to teach them how to use your site.

This gets exploded into a lot of facts, but the rule here is simple: Don't get creative about where you put your site hooks. If they're not in the top left corner, users are going to leave before they ever find them.

This is, of course, only true for countries and alphabets that read from top left to bottom right, and particularly in languages that allow people to effectively create useful semantic maps by scanning (as opposed to more ideographic alphabets).

Additionally, all of the standard corollaries about short paragraphs, big headlines, preference for single-column layouts, etc. are established by this rule. Assume that your reader is already not paying attention. "This seems consistent with 'Information Foraging Theory' where users are said to hunt for information by 'scent' or navigation and content of the highest value to them." (Spillers, 12-2004)

2. Type size & attention have an inverse relationship.

The data seems to indicate that people read smaller type more carefully.

That said, you're going to need to strike a balance, as left to run amok, this can operate contra to all that good advice about not fatiguing our readers eyes, and about bigger text being "friendlier", etc.

In fact, bigger text is presumably thought friendlier precisely because it invites you (the reader) to scan it easily, and doesn't force you to pay particularly close attention. So, understanding that screen type-design is a negotiation between being better liked (using bigger fonts) and being better read (with smaller fonts), it's clear that you can't just make all your text minute with the hope that it will force your readers into a trance-like focus on your every word.

You can't, that is, unless you have a 250px-wide readable column.

3. Pretty bird!

Finally, there is apparently some evidence that people will look more carefully at images if they are (a) big, and if (b) they contain a person's face.

Robert De Niro in 'Taxi Driver'
You talkin' to me? Pretty bird!

We're calling this "Pretty bird!", because I am pretty sure this is an Amygdala-level reaction that operates similarly to a parakeet staring at itself in the mirror. We like to look at big, clear pictures of people. We can sympathize.

Mission Accomplished!

DLB Business card with everything eye-tracking studies can teach you written on it.
These icons link to social bookmarking sites where readers can share and discover new web pages.
PaulJun 23, 2008
 

Branding lessons from Super Smash Bros. Brawl

Super Smash Brothers Brawl is Nintendo’s branding coup de grâce, if not the defining moment in the history of game-as-branding-strategy.

I was over at a friend's house last night, doing design research (read: drinking bourbon and playing video games), and found myself momentarily distracted from my pleasant Kentucky-style buzz by the jaw-dropping visual assault Super Smash Bros. Brawl for the Nintendo Wii.

Screen capture from SSBB
Nintendo draws on its deep stable of characters to create a tightly branded interactive experience.

O! Insidious Nostalgia

Super Smash Bros. Brawl is a branding tour de force. Level designers Kazuhire Irie, Takeshi Suzuki, and Kou Arai have situated the game as a living history of the Nintendo product line, adopting a wide range of design styles to recreate elements of Nintendo's extensive mythology in a way that allows the player to simultaneously:

  1. indulge in the thrill of recognition
  2. have an enormous amount of fun game-playing
  3. be spoon-fed nostalgia for the commercial products of yesteryear, or else feel an immense need to play catch-up ("Why would they have a level from Earthbound? I never played that.") as part of a not-so-subtle upsell. All the original games are available for $4-5 directly from your Wii.
Screen capture from SSBB
Visually meshing the old with the new, you can see the living history of 30 years of Nintendo.

These three things in combination provide an almost narcotic Gestalt effect that all branding and identity designers could learn something from. It's branded fun.

These icons link to social bookmarking sites where readers can share and discover new web pages.
PaulMay 5, 2008
 
Close this
E-mail It