10 ways to make your website better, Part 1 – Effective eye trails

10 ways to make your website better, Part 1 – Effective eye trails

written by Charlie Pabst

The episode in which the Charfish explains the simplicity of effective websites, pays homage to Google and then rips the pants off of Yahoo! in front of everyone.

mazeBefore we get rolling on this post, let’s define what an eye trail is. No, it’s not where you take your eyes out for a nature walk. Nor is an eye trail what Hansel and Gretel left in the woods to find their way back home from the witch’s house.

An eye trail is the path your eye takes as it’s lead from visual element to visual element.

Note the passive sense of that: your eye is being lead. It’s not necessarily what your eye is looking for.

Let’s look at some eye trails

I’m going to show you some screenshots, and as you look at them note what your eye does and where it goes. It’ll all happen pretty much on auto-pilot so pay close attention. Here’s the first one.

cf_without

Hopefully that first screenshot looked really really familiar. If not, please take a moment to ensure that your eyes are, in fact, in the open position. When you looked at the Charfish screenshot, there’s a high probability that your eye traveled the following trail.

cf_with

Am I close? Did your eyes follow that trail? I certainly hope so, as I designed this site to do just that, and if it doesn’t I’m an abject failure. I wanted the eye to go immediately to the biggest/boldest element: the header. Why? That’s my brand. It’s who this site is and is the most readily recognizable and stable element. When people come back to this site they see the brand and think, “I’m at Charfish.” Or maybe they say, “Wait a second, how’d I end up here? I hate Charfish.” Either way, the brand is recognizable and I win.

Then the eye goes over to the sidebar and the RSS icon. That’s perfectly fine with me as I want people to know (1) how to navigate, and (2) that they can subscribe. Subscribers build community and ultimately make this a better and more useful site for all involved.

Then there’s the content itself, with the post’s image probably being the first way-stop for your eyes. And again, that’s fine. If you choose an effective image, it will interest the reader and they’ll want to find out what your post is all about. And it’s easy to find the post as the headline is a different color and bolder than the rest of the copy.

Now here’s a different sort of screenshot. Again, pay attention to where your eye is automatically lead.

boxes_without

Your visitor’s eyes will go to the biggest, darkest or most vibrant element first. Then the next one and the next one. I know, that’s not much of a screenshot. It’s just a bunch of grey boxes of different sizes, but I did this on purpose to make a point: this isn’t confusing stuff.

You don’t need to find color combos that are NASA-approved, or mathematically determine the proportions of every single font on your site, or calculate what the air pressure will be at 8:30 in the morning in Tonga to figure out where your visitor’s eyes are going to go. They’ll go to the biggest/darkest/most vibrant element first. Then the next one and the next one.

Now, here’s the third screenshot.

google_without

I’m sure you recognize that screenshot. If not, please check in immediately with your doctor as you may very well be dead. I choose Google’s homepage for a very good reason: it’s damn near blank and there’s really only one big element on it.

And, yup, there’s still an eye trail.

I’ll bet your eye traveled this well-planned path while looking at the Google site:

google_with
Actually, I just had a great idea. You’re about to get an extra bonus.

Let’s compare Google’s homepage with that of their rival Yahoo!.

yahoo_without

Um…yeah. Nice job, Yahoo!. Their eye trail would be perfect if my eyes were training for the Ironman triathlon. Did your eyes make a path like mine did?

yahoo_with

That’s why Google is reigning king of search engines, and why I personally never go to Yahoo! Unless I’m taking screenshots with which to make to fun of them. I look at Yahoo!’s home page and ask myself this question, which is a good question you should ask of your own websites:

What the hell am I supposed to be doing?

Yahoo!’s page is almost entirely navigation. There isn’t really any content. When I was making this experiment for the first time, the only element my eye was drawn to read was a headline explaining that Hugh Jackman is the sexiest man alive.

Now, while Hugh might very well be sexier than me, Yahoo! is making a pretty bold assumption that I give a shit. Moreover, their entire homepage, as evidenced by their tortuous eye trail, makes the assumption that I don’t have a clue what I’m looking for, so they might as well just show me everything.

Google on the other hand knows we’re smart and leaves it up to us to find what we want. Google figured out a long time ago that all we really need is a search box. And the eye trail is also their proof.

The practical application of eye trails

So what do we do with all this information? And why do we care if we’re not a search engine, or if we’re just trying to get some average traffic to our average site?

Well, it matters in a few different ways.

Page views per visitor

Whatever stat/analytics program you use (you are using one, right?) you should note what your total page views per visitor is currently. Is it low? Say below 2?

Low page views per visitor can really only mean a couple things:

  • Your content sucks
  • Your content is discursive and covers too many topics
  • Your content is great, but people are having trouble getting around in it

I mean, think about it. If your content is excellent and on topic, there’s no reason why someone wouldn’t play around in your site for longer and find even more great content. If you currently find yourself saying, “My content is great but people don’t really seem to stick around much,” you may have found the culprit: eye trails. Without an eye trail, your site is hard to read, hard to get around in.

Time spent on site

Again, we’re assuming here that your content is itself pretty solid. But if you’re seeing high bounce rates and low time-on-site stats, your content isn’t the issue. Ease of use is.

Marketers

Money-making alert! Lousy click rates, low sales and copy that doesn’t perform might very well be the result of poor eye trails. Sales copy is designed to be read and to acquire clicks. While strong copy will ensure this happens for the most part, without eye trails, those long-form sales letters don’t often get read. That’s why you see so many of them with images, bulleted lists, fat red fonts and fancy “click now” buttons. These elements all pull the eye through the page, while along the way the reader picks up content that gets him interested and ultimately leads to a sale.

So what do we do now

Well, for now, nothing. Before you go making any drastic changes to your site, let’s finish up this series. The upcoming posts, while they don’t deal directly with eye trails, do touch on elements and ingredients of those eye trails. It’s a pretty good bet that after you’ve read all ten parts, you’ll have a solid idea of what needs changing.

I hope you enjoyed this post and learned a few things. If not, well, I’ve got nine more opportunities to say something intelligent as this series continues. Subscribe now to catch the upcoming episodes.