Blog

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.

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.

FREE UPDATES!

Subscribe to the Charfish Design Newsletter and get more design-related goodness than you can shake a stick at!

Charlie

Charlie Pabst is a guitar-weilding designer, a sharp-shooting writer, and a tell-it-like-it-is ever-kid. He is also not afraid of hyphens.

He is the founder of Charfish Design and Ignite Living.

You can read more about him here. And you should definitely follow him on Twitter.

16 Responses to “10 ways to make your website better, Part 1 – Effective eye trails”

  1. Anthony

    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?

    Reply
    • Charlie

      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.

      Reply
  2. 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.

    Reply
  3. Charlie

    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.

    Reply
  4. 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

    Reply
  5. Charlie

    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.

    Reply
  6. 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

    Reply
  7. Okay my comment is about 8 months late, but thank you!!! This is exactly exactly what I needed right now.

    I’m trying to improve the bounce rate on one of my site’s home pages and … I think I have a “Yahoo” site … (blush). But since I’m right in the middle of it, this was a great time to come across this post. You provide really useful information!

    Reply
  8. Okay, I came back. I want to say something about this.

    I was revamping one of my sites, and during the process of testing different layout changes, there were a few days when the home page had two prominent links both leading to the site’s store.

    I read this article on eye trail and I removed one of the “store” links.

    Result:

    1. I was finally able to look at my own website without feeling sensations of physical pain.
    2. The bounce rate of the home page improved
    3. The overal click-through rate to the store increased from 6.2% to 9.7%, after I removed one of the links to it. Ie, fewer links to the store, more clicks to the store.
    4. The income of the site improved

    I can add that using the Google Analytics Site Overlay tool in conjunction with what you wrote above is very useful -

    For example, right now I simply watch the overlay regularly and replace or remove the items and links that my visitors are obviously the least interested in. Where I have ads on the page, I keep track of their earnings separately, and just remove the ones that are not performing well.

    This helps me decide what to lose and what to keep. It makes the overall clean-up of the page much easier. I think pack-rat inclinations are sometimes caused by an inability to evaluate importances. :)

    It follows with what you said above:

    “Having a million things to focus on does not create more focus. It does the exact opposite and gives everything a monotone of importance.”

    Cleaning up the page obviously helps with site load times as well – another benefit. And I have reason to believe that improved page load time indirectly effects search engine rankings as well.

    I just wanted you to know that the article was very helpful and useful. Thank you!

    Reply
  9. Charlie

    Anna

    That is awesome! Thank you for the summation and case study. I’d have absolutely no problem with you sharing the link to the site in discussion.

    I’m so glad you found something useful from the post. Just from reading about the changes, I think you did the right thing. Very cool. Would love to see your work, by the way :)

    Reply
  10. Okay … disclaimer though. I could write a list from here to China of the fixes to be done on this site – the missing pieces, the incorrect colors, the wrong graphics, the cleanups, the fixes … so, if you see something wrong … I know. I know!

    The URL is http://www.findportablesolarpower.com

    As the name implies it was originally only for portable solar power, but it grew out of its domain name and … to late to turn back now! Now it’s just solar power in general and people will have to live with that. :) (Lesson: never start a site with a domain name it might grow out of). Its actually the first website I ever made, and now I am fixing it up, bit by bit.

    I want to continue to simplify the home page. I’m watching the overlay and stats to see what to trash next. I will probably get rid of that little slideshow when I am ready to put in my opt in for a free eBook (which is being written right now). And I’ve been planning to email you about that eBook too, when its done!

    Reply
  11. Hi There, thank you so much for all this information. I got so much out of this. I have a rather new website. I managed the back end myself and have created the whole website from scratch. Because of this I am always looking for ways to improve and that it how I came across your website. I would like to ask you to please have a look at my site. I look at at everyday and sometimes it is a blur and many things I have not noticed. Can you please give me some info on what you think I could change and areas that I have done okay. I would so appreciate the help.

    Thank you
    Christina

    Reply
  12. I’m really impressed by this post (mostly for the humour and usefulness, bravo!).
    So I wanted to sign up but there was something wrong with the subscription box. I can’t type my email in there. I’ll be wandering around to find where I can subscribe to your other posts. But you may want to know yea. Maybe a bug?

    Reply

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

FREE UPDATES!

Subscribe to the Charfish Design Newsletter and get more design-related goodness than you can shake a stick at!

POWERED BY: WordPressBluehostAweber