6

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?

  • 1
    What do your users say? UX isn't an academic exercise. It's an approach to design where one investigates (as best as possible) what the users want, need and feel comfortable with. – Mayo Oct 16 '15 at 13:26
  • The question as it stands is primarily opinion based, but at its heart is a decent question. I'm going to put it on hold to give you a chance to reword it so that you're asking a more objective question. Once you've done that, ask for it to be re-opened. – JohnGB Oct 16 '15 at 14:34
  • 1
    @JohnGB Thanks for your feedback, i've made an edit. Would you please consider if it is suitable? – clodal Oct 17 '15 at 5:40
  • @JoelKoh, While the edit makes it less primarily opinion-based, it's now borderline overly broad. I'll try to edit the question to make it somewhat narrower and re-open it. If my edit changes the intent of your question, please let me know. – JohnGB Oct 18 '15 at 16:04
  • There are no easily summarized best practices that apply to this, it depends on content and execution. But I can say a big image can slow down the loading (depending on image size and bandwidth, etc. - this is more critical on mobile connections) and when using an image like Medium does you need to make sure that image complements the text content and not distract from it (which is sometimes does on Medium). If you're not confident in the area of visuals leave the image out. – obelia Oct 18 '15 at 17:27
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).

1

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.

0

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 :)

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.