Headline vs. Image: What are the best practices for designing article-based interfaces for maximum readability?

Question

In every interface, understanding the importance of each element in fulfilling the users need is a primary task.

In the case of article page designs, in order to maximise the optimal reading experience, what are the best practices in terms of the importance of the headline vs. the cover image?

There are two pre-dominant styles amongst online publishers today:

1. Headline on top, Image below (e.g. Mashable)
2. Image on top, Headline below (e.g. Medium)

What are some general guidelines as to when each is a better choice, specifically for maximising readability in article-based interfaces?

Answer 1

I've been doing a lot of my own research into this, and one idea that kept presenting itself was the following question:

"Is it better to be direct, or indirect? Visual or verbal?"

With regards to how you want to present articles, by showing text first one shows content that has a very obvious and deliberate scope (for the subsequent body of the article), while the other - images on top - infers content within the article itself. The latter is always going to be slightly less explicit than the former in identifying what the scope is about, however... this is where your users could come in. Are they predominantly visually oriented, or verbally?

Overall if I were do venture a guess, I might say the verbal-first pattern is more quickly parsable to users when thinking about the precise scope of the article, but that images might be faster for general scope.

Anyway, something else to consider too is that a very common pattern you'll see on news orgs today is that they will have

[image] [ headline > attribution > teaser ]

but for the actual article page will swap those two blocks so the text is on top, or in some cases on top of the image itself (within, like some of The Verge longform pieces).

Answer 2

Headline vs Image is based on the requirements. In case of article, Headline on top, Image below. In the article headlines are the king or primary attraction.

When we scan the article, headline subject will tempt to read the articles. Headlines are the trigger point to read the articles.

Answer 3

Just my hypothesis, but I'd go title first

1) Ability to scan. A strong title is something you can scan read to see if you want to continue on, while I reckon an image requires more interpretation and therefore would have a higher cognitive load.

2) Would the image force the user to expend effort by scrolling before they can reach the topic heading? If they expend that effort and then discover that the article is not interesting, it might not have a great impact for one article, but over time and multiple articles, it might get annoying.

Best advise - mock it up and test it with your users :)

Answer 4

"Picture is worth a thousand words", but sometimes its misleading or missing the context or may be only a partial of story told.

The best to use the Title above Image, or Add the Title on/over Image to save the Space.

For handheld devices If images are bigger than Viewable area then user have to scroll down for the context/header. (Which is a bad UX, unless its a Photography or Slideshow)

Note: Medium presents Mix content with Image First and Title First.