26

There is a common principle in photography that a photo should lead the viewer's eyes. This is frequently accomplished with a line that runs across the photo. Recognizing how the observer will scan across your photo is often helpful in composing a shot and the way the viewer's eyes scan the photo can sometimes even change the meaning of the photo.

What can be done in web design to lead the user's eyes across the site in the direction you want without the user having to hunt for the right parts of the page?

For example, you might want the user to see the logo and then a short description of the site and then an article. Besides putting these items in a vertical column with one below the next and removing all other elements from the page, how would you lead the user's eyes from one to the next?

Improve this question
3
  • 7
    You might be interested in "Eyetracking Web Usability" (2009) by Nielsen & Pernice: useit.com/eyetracking
    – Jari Keinänen
    Commented Jan 7, 2011 at 22:35
  • 2
    @koiyu i went and found the "F" article and was about to post it when I realized you already had. I can't emphasize enough how important this reading habit is. Great designs align themselves with this flow, and poor designs go against it.
    – zzzzBov
    Commented Jan 8, 2011 at 19:51
  • 1
    I am a bit against eye tracking. Not because it isn't useful, but because already in any project that I wanted to do a simple usability testing, boss and company philosophy were to do everything cheapest is possible and the quicker is possible. I really don't believe that in the majority of the situation you will be able to convince to buy an eye-tracking system, and be able to anylise the data correctly without proper instruction of human behaviour/psychology.
    – Littlemad
    Commented Jan 9, 2011 at 16:17

4 Answers 4

Reset to default
9

It is all matter of balance between size, color and alignment. With experience you will know what and when use those tricks to attract attention. Luckily on the website we can track this attention and there are a lot of scientific studies on this matter, for example there are good data in Jakob Nielsen website.

About the Eye tracking I want to say that for a matter of budget, and reality no one is gonna pay for an Eye tracking device, or even use it. (It is already difficult to convince your boss in the office to make few hours of usability testing at any stage of the project...) I personally prefer do usability testing with real people to judge my web design composition. Even if this means take a friend of a person of my family and put them on front of the screen asking question or looking their behaviour.

Eye tracking doesn't tell you if what user are looking they understand what is it or not. If they are frustrated hesitating or just admiring the graphic composition.

A great book that can help you in this is Rocket Surgery Made Easy of Steve Krug

Improve this answer
6

As koiyu mentioned in the comment, eye tracking is what you should be after. You can create designs with the intent of leading users along a path, but the only way to really know if you're accomplishing your goals is to do an eye tracking study.

That said, you might find my answer useful for the question, How to draw attention to a specific area of a design? It's not the exact same question, but it's close.

More eye tracking resources:

Eye tracking services:

Improve this answer
4

Here´s a quick tip: Include an image of a person looking at or pointing to your target object (eg a product, a subscribe button). Here´s an example from an ad, but I´ve seen the same tactic on webpages: Sunsilk example

(Source: http://www.grokdotcom.com/2007/10/04/how-a-pretty-face-can-push-visitors-away/)

Improve this answer
0
0

I can think of two simple ways to direct users' eyes on a website:

  1. Use an obvious numbering on your page elements. You can see this in quite a number of site homepage, or you may refer to this PDF file from a financial website (although I think it's not really a great example).
  2. Use arrows to direct your user's attention. This can be something like a flowchart. I can't think of any online example right now though.
Improve this answer
2
  • The web isn't a static medium. Arrows don't guide people. You need to guide them with different sizes and colors in a weighted system.
    – dkuntz2
    Commented Jan 12, 2011 at 6:26
  • I don't understand. Could you elaborate more on "arrows don't guide people" and "guide them with different sizes and colors in a weighted system"?
    – Gan
    Commented Jan 12, 2011 at 8:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.