Why Headlines Attract More User Attention Than Images

by on 10/26/11 at 10:14 am

When websites show content, they’ll usually use a headline and image. Headline and image quality is important in getting the user’s attention. However, the headline will always get the most attention no matter what. Here’s why.

Look at this image. How relevant is it to you? What is the context behind the image? One could make guesses all day, but the fact is that nobody knows for sure.

Now look at this headline. How relevant is it to you? What is the context behind the headline? You know what the context is immediately after reading it.

You can easily visualize the image with the headline alone. But you can’t make out the headline with the image alone. Users won’t understand the image without the headline. But users will still understand the headline without the image.

With the headline and image put together, users get the full picture. They get both the story context and the emotion.

When users see both together, they will naturally pay more attention to the headline because it has the context and details of a story that they can relate to. Users are looking for information, and a headline gives them more information than an image. However, the image can appeal to users’ emotions more. And that can reinforce the headline and give users the extra boost to click-through. Both are important, but the headline is most important.

Placement & Visual Weight

How can you apply this newfound insight to the way you design content? Since headlines attract more attention than images, you’ll want to place your headline before your image. This way users can immediately get to the headline without having to go through the image.

Putting the image first wastes an extra visual fixation that doesn’t give users any useful information.

The image is more meaningful to users after they understand the context from the headline first.

Another thing is to make sure that your image doesn’t have more visual weight than your headline. When an image is too large, users can easily get distracted. This slows them down from their task of getting information. To avoid this, balance the weight between your headlines and images, and let your headline do most of the talking.

When your image is louder than your headline, users waste their time staring at the image.

Replicated Research

If you’re still not convinced of the claim through objective reasoning, take a look at Jakob Nielson and the Poynter Institute’s research. Their studies “used different methodologies, tested different users and different sites, had different goals, and were conducted at very different stages of the growth of the Web” and they all concluded the same results. In Jakob’s own words:

When different people keep finding the same results year by year, it is time to take the findings seriously and to base Web design on the data and not on wishful thinking.

The results are in and the time to treat headlines with more respect is now. You may love looking at your image, but the user is looking at your headline.

Light Resume Light Freelancer Wireframe Papers Wireframe Patterns

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

10 Responses to “Why Headlines Attract More User Attention Than Images”

  1. noformnocontent

    Oct 26th, 2011

    I can’t see a fucking thing on this image! Why is it so small, trying to spare by saving up on pixel-ink?

    Of course the headline is more appealing — i can see what it said!

    Just compare a 500 px² clear image there you can tell what it is w/out picking around on a related text.

  2. Kris

    Oct 27th, 2011

    Anthony good research! I think this will work when people are looking for information. Eg blog posts. As you said content. However if its on a fashion website which lists skirts the headline isn’t going to be the primary thing people are looking for.

    So IMO the question would be, what is the primary thing people are looking for? What will give them that answer?

    If its information, then the headline should be given the primary weight. If its an image then the image should be given the primary weight.

    Again I think that we can’t assume that the image is more meaningful after they have seen the headline, because what if someone clicks into a category page that lists all the products for that page? They don’t need the headline because they already know what these products are about.

  3. upordown

    Nov 3rd, 2011

    I have to agree with the first response. This is not really a fair comparison as the image you are using as an example is too small. The headline, on the other hand, is quite large and does get more attention. I would say that mages can be more powerful than words given in the correct context. Think of the image of a human figure standing in front of row of tanks and you will immediately think Tiananmen Square. Look at a picture of people on standing on a crumbling wall as they wave german flags and you will think the fall of communism and Berlin Wall. There are times when a headline might be needed, but this is usually as a result of an image or picture that fails to capture the essence or meaning of the story. However, I do agree that having both an image and a headline is a winning combination.

    • anthony

      Nov 3rd, 2011

      You’re looking at this all wrong. Even if the image were huge, you still wouldn’t get an accurate context of the story. I mean, a little girl with a baby in the background doesn’t really tell you much about what’s going on. At most, it’ll tell you that it is has something to do with people or children. Therefore, making the image dominant over the headline doesn’t do much for me. So I’m going to skip over the image and go to the headline first. Once I read the headline first, I can then tie the image and headline together for a stronger effect.

      Images of Tianamen Square and the fall of the Berlin Wall are indeed compelling. There’s no doubt that images have a much more emotional impact than headlines. But that’s not what I’m arguing. What I’m arguing is that no matter how big or emotional your images are, they aren’t relevant until the user reads the headline first. Images can have multiple meanings, require interpretation and don’t give users the context of a story. The headline does. Once users get the headline, the image will make much more sense.

      • Eric Scheid

        Nov 10th, 2011

        Images can establish an emotional context in which to read the headline, and are also easier to scan over. They work well to ease the user into reading more detail (ie. the headline).

  4. Dave

    Nov 10th, 2011

    There are so many factors at play here. I think the previous commenters are right to point out that this may not be as universal of a rule as suggested in the post.

    – The Poynter studies (according to Nielsen, see below) exclusively looked at newspaper websites. Nielsen mentions this, acknowledging the potential for the results to not apply as strongly to other websites, but there’s no such acknowledgement here.
    – The Nielsen article (and the Poynter study) are from 2000, and Internet use has changed a great deal since then. Faster download speeds (resulting in changed use of graphics), users with more experience, changes in design conventions, etc all have the potential to affect this idea.
    – Your examples look at individual news items in isolation, which I think leads to the error of assigning the first fixation/saccade to the thumbnail in the first example. In a series, consistent width initial graphics could function more like bullet points, allowing the eye to more easily target the first part of the headline. Are the fixations you show on this page from testing?
    – Your suggested version also increases the difficult of the saccade to read the snippet, because the snippet no longer begins at the same horizontal placement as the previous line of text.

    More frustratingly, you call upon the Poynter institute’s findings to back up this post, but Nielsen’s link to the study has gone dead and you don’t provide an alternate source. Where did you read the May 2000 Poynter study, when writing this post?

    • anthony

      Nov 13th, 2011

      From Nielson’s article (at the bottom) which you should go back and read:
      “The new eyetracking study is mostly applicable to all types of websites. Most of the Poynter findings confirm earlier findings from studies of many other types of sites, so they relate to basic characteristics of reading on the Web and are not limited to newspapers.”

  5. Carrie

    Nov 10th, 2011

    I agree with kris and upordown – as well as the original post. Context is everything. There are many times a photo can do a better job of telling the story than text. However, given the context used here, anthony is spot on. I am forever having to deal with clients who want images everywhere – for visual appeal, they say. But if they don’t mean anything without explanation, they are likely just extra things that get in the way of what people want to find out.

    So for a list of news stories, this is all very accurate. For an ecommerce site selling shoes? Maybe not so much. But I have to say that I’ve seen pictures of people on retail sites, and without the text and the photo (which I don’t see in my HTML emails), I am usually lost about what is being sold. Is it shoes? Jackets? Hats? Hiking gear?

    When you think first about what the message is and what people are trying to do on your site, you’ll have your answer about whether the image or text is more important.

  6. Sully

    Jan 25th, 2012

    I keep coming back to this post because of how terrific the explanation is and how often I share it with others. Thank you.

  7. Lindsey

    Sep 13th, 2012

    Great article. I am a huge fan of eye-tracking studies and what we can learn from them (here is a good article on the subject: http://apog.co/49A). Studies support that headers are very important, and people will read text before they will look at images.

    I think the best point is that an image is subjective to interpretation, while text can tell the user exactly what to think.

Leave a Comment