Keep Your Graphic Designer on a Short Leash in this month’s Website Magazine suggests that elements such as wild background colors, garish text, visual embellishments (eye candy) and animation/video distract website visitors from important content. In a case study of a redesign of the CREDO website they found an 84% improvement with a simplified design. The case study used a new service called AttentionWizard.com which uses computer algorithms to approximate eye tracking studies of a web site. The idea is these will reveal what point on the page the visitor’s eye should land on. If it is what you want them to see — like a buy now button — bingo, you are doing well. If their eyes don’t land anywhere, or on the wrong things it is time to make some adjustments. I thought it would be fun to compare the Yale and Harvard main websites using the service.
First up Yale. According to the article Yale’s website does earn extra points for its simple, white background, plain text and simple graphics. But don’t start celebrating so fast. The eye tracking study also doesn’t find anything that does grab attention. There is some focus on the graphic, but the links on the left side don’t register too high, except for the about Yale:
Yale's landing page
Yale Attention Heat Map
Now for Harvard – strong black background, white text — low marks. On the attention scale they do a little worse — again the image gets the most attention, but otherwise the eye wanders around the screen not really landing on any other focal point.
Harvard landing page
Harvard Attention HeatMap
It is not clear to me on either site what the key objective is. And in fairness these sites have multiple objectives, mostly trying to give people a lot of options. It might have been fairer to compare sites with clearer objectives, like a sales-orientated site. But then I wouldn’t have been able to tweak the classic Yale/Harvard rivalry. And I may be biased, but while neither site did great, I do think Yale finished with a slight lead. Go Bulldogs!
Two notes on the article: 1) it is written by the CEO of SiteTuners.com, creators of AttentionWizard. 2) in my experience it is the client who wants the flashy, distracting eye candy. Most graphic designers I’ve worked with have better taste than that (good article, bad title). You can use AttentionWizard in a trial version — 1 upload/analysis per day. Give it a spin on your favorite site!
The eye gazing path is represented by the numbered path shown on the AttentionWizard heatmap. The eye gazing path starts with the number 1 and follows in chronological order. The eye gazing path depicts the path that your users eyes will take when they first get to your page. Depending on the image submitted (full page or above-the-fold) the eye gazing path can differ significantly.
Keep Your Graphic Designer on a Short Leash – Website Magazine – Website Magazine
You were led down this path by your internal creative team or outside interactive agency. Because of the limitations of their unique perspective you have been forced to sacrifice conversions in the name of “coolness.” So, you have actually come to think that your baby is quite beautiful and have, in fact, grown very fond of it.
Comments / 4 COMMENTS
claudia snell added these pithy words on Jan 28 10 at 7:52 amAnother good one, Randy! I have to agree strongly with your point though – it has been my experience that it’s the client that wants the flashy, eye-candy. As a web designer, I’ve had to talk many clients out of using ridiculous overblown Flash intros and other stuff that would just hurt the site. I’ve had clients decide to go with another designer who is willing to build the overblown multimedia extravaganza without regard for users and their needs.
A site should deliver the information the visitor needs, not an extravaganza of whiz-bang. The layout needs to help the user access that information easily.
Randy added these pithy words on Jan 28 10 at 8:36 amYes, it seems like fancy icing always outsells a quality cake. Maybe tools like AttentionGrabber can help make the case for a more objective-orientated use of the graphical toolset.
Tony added these pithy words on Jan 28 10 at 1:29 pmUnfortunately this article doesn’t show a change in behavior for either Yale nor Harvard with a redesign that actually measures positive change.
As such, the article is nothing more than fear-mongering of purported failure of these sites and promotion of the heat mapping tool.
Without a corresponding redesign showing before and after results, we have no measurable evidence to show that the heat map tool is actually anything more than a way to scare clients.
Randy added these pithy words on Jan 28 10 at 8:05 pmTony, valid points. I was playing with the technology to see how it works, not actually reviewing its effectiveness. The points on graphic simplicity are widely recommended, and a tool that reinforces those principles seems well founded — but a healthy skepticism is wise pending further proof. If you want to see a before and after case study please refer to the article referenced here.
ADD YOUR COMMENT
Comments are moderated.
Randall Rode's online home for thoughts, notes, and experiments with a wide range of technology topics. Visit the about page for info on my recent projects and professional background. I welcome your comments!
New articles are normally posted on Mondays and Wednesdays. Subscribe to the RSS feed or the email update to keep current on the latest posts.
Past listings from 2004 to the present
Need a home (or better home) for your website? I highly recommend HostRocket -- they are the best!
