Had a chance to catch one day of Jakob Nielsen’s Usability Week in San Francisco. Yesterday, I sat in on the eyetracking session and saw the results of the Nielsen Norman’s just completed study (numbers are still being crunched as we speak).
It was heartening to see that many of their findings mirrored our own, including F shaped scanning patterns, quick scans of pages and aversion of ads and large graphic blocks. It was in this last category that the asinine comments part comes (that’s why you’re really reading this, isn’t it?).
Jakob was demonstrating interaction with the home page of jcpenney.com. (The picture that I’ll be talking about has changed, but the basic page structure is the same). The heat map image showed clearly that the big block graphic, in this case a picture of a bed with a colorful spread, with some promotional text inset in the upper left and the lower right, received virtually no scanning. All the scanning was in the top navigation bar. The large block graphic “fenced in” the scan area, cutting users off from other promotional information that lay below the graphic. We saw the same thing occur with the Bombay Company site in a eyetracking study we did for MarketingSherpa (see below).
Some hot shot designer in the room decided to take exception with the proof in from of him, and called out some of the examples that Jakob has shown of large graphics that had received no scanning. He used words like apex composition and other regurgitated terms from a graphic design university text book to show that all the sites adhered to basic design principles and that the theoretical composition of the JCPenney picture was in fact spot on, drawing the eye from one promotional headline to the next. Jakob patiently pointed out the obvious, that the theory breaks down, because as the heat map clearly showed, no eyes were even being attracted, let alone drawn to any headlines. We settled back in our chairs, silently cheering the adroit handling of the blow hard in the back. Much to our amazement, the guy wouldn’t give up, continually going back to the point that the theory is right and works, despite evidence on a screen roughly 40 by 30 feet to the contrary. The mic finally had to be taken away from him.
A couple points here. Theories are theories, not fact. Heat maps are facts, at least for the sample of people in the study. And while you may argue that a sample of a couple hundred (the n of the NN/g study) isn’t representative, I would disagree. We’ve done enough to know that consistent behavior in eyetracking starts to emerge at about 10 people, then defines itself very clearly at 20 to 30 people. So designers, you just may have to forget everything you learned, because the way people interact with information is changing faster than new theories can be created. You have to keep an open mind.
Second of all, this guy was approaching this from a print paradigm, not an online one. His spouting of picture composition and eye flow comes from centuries of guessing about how we look at images. I remember talking to a university arts professor once who was really excited about eye tracking because we could finally find out if all the “crap that’s been spouted about how we look at paintings is even true or not”. I’m not saying century old principles are wrong, but you have to consider them in the appropriate context. Take our J.C. Penney picture. Mr. Design Dictionary is correct. The flow of the bed spread and the contours of the bed should hypothetically draw the eye from one headline to the other, if the eye entered the picture in the first place. In the print advertising world, photos act as an attractor. They grab the person who is reading adjacent, usually non relevant content, and pull them over to the ad. They are the entry point. If they do their job efficiently, you have altered the intent of the prospect. They have switched from reading a story to looking at your ad. The job of the photo is to channel this new intent to the right place.
With a website, you have the full intent of the user. That’s why they came to your site. A large block graphic gets in the way of that intent, and will be thin sliced out of the way. Worse, it could block the user from seeing the content on the site that they’re there to see. All the composition theory in the world won’t prevent that. Jakob’s point wasn’t that the picture was composed incorrectly; it was that the picture was a waste of valuable home page real estate.
Probably the most valuable thing I took from yesterday was a comment Jakob made as an aside. Branding online comes from the experience, not the exposure. This was in response to another comment somebody made about large graphics being present for branding purposes, and the seeming contradiction between the need for branding and best practices for usability. Online, a successful brand engagement and a successful user experience are the same thing. If you deliver efficiently on a user’s intent and make their online experience a pleasure, you will build more brand equity than you could ever build with gratuitous flash files, streaming media and huge graphics. The two aren’t mutually exclusive, but all too often online, the designers win at the user’s expense.