In a news article should the full-width image come before the H1, or after?

Question

For a public-sector site (local government site, that sort of thing) there will be a section for latest news. This could be blog articles, it could be informational posts etc.

These posts will have a large header image associated with them and this image is more-or-less relevant to the article (so if the article is about parking on Kings Street the image will be a car parked on that particular street, that sort of thing). Not exactly purely decorative in a stock-imagery style, but not exactly required for the article to still make sense either.

My dilemma is; where should the H1 be on such a page?

^{download bmml source – Wireframes created with Balsamiq Mockups}

• Having the header above the image has benefits such as accessibility (jumping to the first H on the page and reading from there will then include the image alt-text getting read out - although this may not really be a priority for such pseudo-decorative images) plus it would be consistent with the rest of the site as the header is likely to be there on other pages.

• Having the header below the image seems to make more cognitive sense to me. I would expect people to buzz over the image and ignore it (banner-blindness etc) and therefore would likely miss the H1 title so would just be presented with the text and then have to consciously look up the page to get the title of the article, and then back down to the article text to read the post - making the whole reading and comprehension and flow a bit disjointed overall (plus on page-load you might not even see the H1, depending on your screen resolution).

Is one of these options better than the other? Or indeed is there a better alternative I should consider?

Answer 1

This is all based on preference, I do not believe there is a best way to go about it. However I must say that if you have great pictures and it isn't something that is completely different from the subject, then post the picture first. This is something I am doing on my blog and I have had great feedback from it.

As for an alternative. It is also possible that you place the title overlaying the picture. To ensure that the text is legible, make sure you place a semi-transparent to transparent gradient. This effect often looks quite nice and cut down on the overall height of the page.

Answer 2

From a Semantic and Accessibility perspective, the title should go first as it would assist in orienting and providing context for the user.

Users won’t understand the image without the headline. But users will still understand the headline without the image.

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.

Source: http://uxmovement.com/content/why-headlines-attract-more-user-attention-than-images/

Of users' first three eye-fixations on a page, only 22% were on graphics; 78% were on text . In general, users were first drawn to headlines, article summaries, and captions. They often did not look at the images at all until the second or third visit to a page.

Source: http://www.nngroup.com/articles/eyetracking-study-of-web-readers/

There's probably more points in the articles sourced above but those are the main reasonings.