Why Users View Headlines Before Images

by 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.

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.

headlines-top-left

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.

headlines-wider

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.

headlines-above-images

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.


PRODUCTS

Light Resume Light Freelancer Wireframe Sheets Wireframe Patterns Flow Patterns

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

Leave a Comment