How to direct users eyes on a website?

Question

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?

Answer 1

This is a great question and one that will take some practice and experimentation. What you're asking about is called Human Computer Interaction (HCI). I'll attach a link that explains more about it at the bottom.

While I'm not a photography expert by any means, I've built lots of websites and hierarchy has to do with size, contrast, and location. If you want the user to see the logo first you want it to be larger and contrast with the rest of the page. If you want that followed by a short description, make it short-short and use a larger font. Don't have any overly distracting images to compete with it because those will almost always win out. Then go for the article details.

My experience in HCI comes from practice in the industry and a trick I learned. If you want to know where the user will most likely look first close your eyes and open them. Notice the elements your eyes pick up first, second, third, and so on. This will also tell you if two or more elements are competing for your attention at the same time (which isn't what you want to have happening usually).

If you aren't sure you can rely on yourself, ask a friend to do it but it helps when trying to figure out if a site is too busy/doesn't lead the user the way you'd like them to be led.

https://en.wikipedia.org/wiki/Human%E2%80%93computer_interaction

Another way to get a feel for this is by looking at other modern website designs and templates that are popular. See how they apply styling to make a hierarchy that leads the user through the website.