by anthony on 10/26/11 at 10:14 am
Do images dominate your page more than headlines? Eyetracking research on how users read news sites found that most view headlines before images. If you’re putting more attention on your images than headlines, users could have trouble reading your site.
Headlines attract users first because it gives them relevant context to an article. An image by itself has no specific context because users can interpret it in many ways. The headline tells users how to interpret the article image and text.
Headlines > Images
Users are searching for useful information when they’re on a news site. Headlines need to dominate more than images so that users can pick up more information quicker when they scan. An image that dominates the headline distracts them from their task.
There are a few ways to make headlines more dominant than images. Here are some ways to do it in a horizontal layout with teaser text.
You can make your headlines the first thing users see by placing them at the top and aligning them to the left. The image would go below it alongside the teaser text. This makes it easier for users fixate on the headline first.
You can also make the headline more dominant by making the image a smaller width. If your images are wider than your headlines, they’ll compete for attention and distract users. If they’re equal width, it still leaves some room for competition. Instead, let your headlines win with a lot more width.
To make headlines more dominant in a vertical layout, place them above the image. This works best for vertical images. When you apply it to horizontal thumbnails it messes up the text alignment because of how the headlines word wrap.
Users want the context of an article first before they invest time into reading it. Give this to them by making your headlines more dominant. Design is about emphasizing what’s most important on a page. And what’s most important is what draws user attention first.