How to direct users eyes on a website

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?


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

Source : Link , Question Author : Computerish , Answer Author : Littlemad

Leave a Comment