CommonLounge Archive

The Fold, Images & Headlines

November 29, 2017

The Fold

One of the most popular old-school misconceptions is about “The Fold” which is the part of your design that is visible before the user scrolls.

Everything above The Fold will get maximum visibility. However, you can expect 60-80% of users to scroll if they expect to find something useful below the fold. Whatever is above The Fold should inform users about what is below The Fold. If user’s don’t know what is down there, they might not be interested enough to find out.

It is popular right now to use huge background images at the top of the page. If it looks like the site ends at The Fold, people might leave instead of scrolling. And if you need to add a graphic that says “scroll down” your design is probably weak.

Images

Many UX designers treat images as if they are not functional, but images can lead the user’s eyes, so you should think about them.

Images of people, specifically, draw more attention than anything else you can use in your layout.

As a general guideline, the more emotion an image adds, the more engaging it is.

For images of people, try to get the eyes of the person in the image to look in the direction you want the user to look. It’s shocking how much difference it makes.

Both heatmaps above show the same layout. One has the baby looking at the headline, the other has the baby looking at the reader.

The result for both images show that users focused on the baby’s face a lot, but only the second image got a lot of attention on the text content, product photo, and logo.

Headlines

Other than pictures of people, our eyes are most attracted to the largest, highest-contrast piece of text in a layout. So when you add a big headline to your design, you have just chosen where people will begin scanning.

An example from this article itself. The headline draws the most attention, and the most important content should be right below it.

Therefore, it is important that your headline is aligned with the most important content below it. If that content is not very important, you will draw too much attention to it (and away from other, more important content.) If it is not aligned, users will look for a new focus point after they read the headline.

Conclusion

  • Give people something to focus on before they scroll.
  • Make it obvious that they can scroll.
  • Choose images that add emotion and direct the user’s eyes.
  • Use headlines to direct users to what matters most.

© 2016-2022. All rights reserved.