Website Success Tips: The Eyes Have It

Fifteen to twenty years ago, when you stepped off the edge of the abyss and ventured outside your office intranet, or dialed out to AOL for a foray into the wild jungles of the world wide web, you’d never know what might happen.

Would you quickly hear that funky phone connection tone when you arrived safely at AOL? Or would you end up marooned on an internet island site, having to yank your phone connection out of the wall to get back home?

While the internet may remain a bit of a zoo, at least you know now where to find the hippos or which exhibit has the penguins waddling around in. The lay of the ether land now appears to have a set of rules for everyone to abide by.

How well you adapt to those rules and use them now dictates heavily how many visitors will stop by your site or how long they will stay. If your site has an elaborate Flash intro with a soundtrack, you can count on your audience moving on to the next show immediately.

We’ve learned from countless eye tracking studies where visitors look first…second…third…and goodbye! We’ve learned pretty red text over a blue background may be the kiss of death. And we’ve learned those deep, dark backgrounds may look really cool—like a movie theater—but even YouTube doesn’t go for the dark background to its videos because viewers don’t like it.

Just ‘cuz it’s pretty doesn’t mean it translates into visitors—or sales!

Here are some things we’ve learned about websites and what the eyes see:

The eye lands in the top left. For most of us (excepting those with Hebrew or Chinese as a first language), we’ve learned to start in the top left. So with most eyes up there, you’d better get in your logo and/or business name, slogan and whatnot.
Headlines are king! Is a picture worth a thousand words? Actually not on the internet. Research shows that although many folks (like me) are far more visually-oriented than others, we actually look at headlines first and make our decisions whether or not to click on them or read below them based upon the words over the graphics.
This just in…! Turns out on the internet, or in a newsletter, we actually scan through the first two or three words of a stack of headlines to determine if we’ll read the full headline. The first few words of any headline must be chosen with great care.
One second. That’s all you get. Our time on the internet is so valuable, and our attention spans (or patience) are so short, we make decisions to continue or abandon a story or website in that short amount of time. The first line of your story must be incredibly compelling to grab the greatest number of viewers.
Don’t distract me from what I’m looking for! Mood music, fancy Flash animations are out. Your visitors want to find what they’re looking for as quickly as possible. Don’t make it hard for them to concentrate on your content. (Video should only run when clicked upon.)
White space is queen! (Yes, I was looking for a corollary headline. So shoot me!) Ever noticed how much white space is on Google’s landing page? A lot. As much as we scan the first few words of headlines, looking at a heavily filled area, we also need the rest of blank white space. And I don’t mean black empty space is equally okay. No, no, no! Black and white are not equal to the eye. Black is a void, a place where things disappear, where the unknown leads to danger. White is familiar, completely open, friendly, crisp white sheets smacking in the wind. It’s good. White isn’t the only option. Light pastels in a design are also acceptable if not too saturated. But a deep navy or dark brown are as unacceptable as black.
Small type draws interest. In contrast to headlines that merely get scanned, small point type has a tendency to draw in the reader. Curiosity gets the best of them. Why is the type small? What is hiding in those smaller characters? Of course too small and you piss off readers. If your website’s primary audience is seniors, you’d be wise to be using larger type. And also now that monitor screens have gotten considerably larger in the past few years, there is a movement towards larger fonts. Those big screens come with a lot of pixels and older websites have a greater tendency to proportionately look much smaller now than they did on smaller monitor screens.
Top navigation reigns supreme. While many sites continue to have either or both top or left side navigation buttons, the pattern towards top-across navigation menus appears to be winning the day. There are a number of reasons. One is that you are limited in the number of buttons you can fit across the top. This forces companies to think harder and produce better site organization in fewer navigation choices. (I’ll be moving my own site to this model in the near future!)
Keep paragraphs short! Again, lots of white space is desired. Be succinct with your ideas.
Above the fold. The phrase originated with the broadsheet newspaper. You wanted to have your ad or feature ‘above the fold’ where the greatest number of readers would see it. Many screens are now much wider than taller, so aspect ratio has changed dramatically in the last 10 to 15 years. Viewers are far more likely than they used to be to scroll down ‘below the fold.’ The pitfall is that some websites look like there’s no scrolling required, only to find out later that key sub-sections are right ‘below the fold.’ Work with your designer to ensure key elements don’t ‘seem’ to be missing. Make it obvious if scrolling is expected to view a page’s remaining content.
Put people in your photos. Obviously this rule doesn’t apply to a wildlife website or a photographer’s site on outdoor forest studies. The general rule of thumb, however, is to always include people in product photos and mood shots. We recognize our own species much better when we see them! We understand products and places better when placed in relation to ourselves.