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

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.

Before 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.

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.

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.

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.

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:

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!.

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?

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.

• 10 ways to make your website look better
• How to Write Guy - Logo Design
• How proper line height will improve the look and stickiness of your site
• What is branding and why do you need it?
• Don’t Blame it on the Client, You’re the Professional

Man, that is fabulous post, thanks for clarifying this simple change.

There is one thing I don’t quite get, and that is why Yahoo’s page is as bad as you say. You show the headline of the content at #4 in the eye trail. Yet, your site also has the headline at #4. I can sort of instinctively feel that Yahoo’s page sucks and yours doesn’t, but is there a technical reason for that?

Anthony -

Wow, that was a fast comment! And it’s also very astute of you to notice what you did. I was wondering if anyone would pick up on that, and I’m glad you did as the explanation is pretty important.

What you said about the eye trails being somewhat instinctive is spot on, and there is in fact a reason why the eye trail on my site is stronger than Yahoo!’s, even though both headlines are ranked at #4.

First, just because something is ON the eye trail is no reason the eye will STOP there. On Yahoo! your eye may stop briefly on the headline, but it is very easily dragged away toward the sidebar and other bits of clutter that are battling for importance.

On Charfish, the headline is really the last element and there’s nowhere else to go. I’ve left you no choice but to read the content or get the hell out.

So, basic rule of thumb, having a eye trail is useless if the trail doesn’t stop somewhere.

And the second reason brings up a very important rule for all types of art, writing and even music. If there is too much happening overall and too much clutter, the ability to focus goes away, as does contrast. Having a million things to focus on does not create more focus. It does the exact opposite and gives everything a monotone of importance.

In music, a guitar player who plays super fast all the time actually reduces the impact of those fast passages. He’d have more impact by playing slow for a bit and then blasting out a ripping phrase.

In writing, trying to be funny or sad all the time gets tiresome and reduces focus. It’s more effective to change moods and then surprise the hell out of your audience.

And, incidentally, this is why hanging out with some comedians is the most aggravating thing ever. They’re just funny. All the time. It’s tiresome and too predictable to be interesting for very long.

I really appreciate the comment, Anthony. Good to see you here again, and if you’re always saying such intelligent stuff, you’re welcome any time.

Just to come screw with your head…

On your Charfish site, my eye path was banner, top navigation line, blue image in post. Skipped the RSS completely. But that’s just me.

On Google, my eye path was logo, search box. Pretty darned effective, that one. (Again, just me. Didn’t even notice their navigation.)

Grey boxes - Now this one’s tricky, because the top and vertical grey boxes ate up the grey headline, so I didn’t even see it. My eye path was banner, small notice of sidebar and head to the content lines.

Yahoo’s just a fucking disaster. My eye path was, “OH GOD!” CLICKAWAYFAST.

Yeah. You go, Yahoo.

Sir Chartrand -

Indeed. As I said to Anthony above, the end of the eye trail is the important bit. It’s cool that while you took a different path through the eye trails, you wound up at the proper end in each case.

This of course is just further proof that Yahoo! should come begging for me to redo their homepage. And they’ll pay me big bucks, which is good ’cause I’ll need it when Google sues me for copying them.

Charlie,

I know I’m really late to the party. Turkey hangover, forgive me.

“On your Charfish site, my eye path was banner, top navigation line, blue image in post. Skipped the RSS completely.” Yup. Me, too. Ditto James’ view of Google.

Because I use Yahoo exclusively, my eye path there was logo, search box, mail button. But believe me, I know that that’s Pavlovian, not their excellent design.

“In music, a guitar player who plays super fast all the time actually reduces the impact of those fast passages.” I was gonna say “Joe Satriani,” but then I read the second sentence. Okay, good ones do slow down, speed up, to give flow to the music. I agree. I wish Yahoo knew that.

Excellent look at one of my favorite subjects. I love eyetracking info, and you did the subject proud.

Regards,

Kelly

Kelly -

The girl with the shoes! Hello again!

Yup yup, Satriani knows what he’s doing for sure. I’m a closet butt-rocker and semi-serious guitar player and he’s one of the good ones. Yngwie Malmsteen…not so much.

But…back to the subject at hand. Eye trails are awesome, indeed. It’s sort of strange that since I wrote this and started picking them apart, I see them everywhere. Newspapers and magazine ads…it’s crazy. It’s some sort of graphic designer mental illness.

Charlie,

I had eye-trail disease for a while in college, I remember, and a little of each disease I picked up then stayed with me. That’s why I’m a per-fess-unal now, so I can put all those little tidbits together to do good for others.

Except thinking I have everything in the psych books. I’m over that now, and it wouldn’t do anyone else any good!

Until later,

Kelly