Which is more likely to be read and processed: (related) text placed above or below an image/video?

Question

I'm thinking about layout on pages where the main asset is visual — for instance, a photo of an item from the collection on a museum website, or embedded video as on YouTube and many news sites. Sometimes a title or other brief, relevant info is given above the video (as on YouTube), and sometimes text that sets the context for the image is shown immediately below (as in picture captions on news sites). Ideally, you want people to read the text that introduces and/or summarises the photo or video; this is likely to be at most one or two lines of text. It might be a title or just an explanation of the object and its context.

The F-pattern for reading suggests (unsurprisingly) that English speakers start reading at the top of the page and then work their way down in horizontal stripes, so putting a title above the image makes sense from a "setting the context" point of view — it's probably not very contentious to say that content near the top of a page gets more eyeballs than the stuff further down. However, the brain is considerably faster at processing images than it is at processing text, which might mean that we finish process the image content before we're done processing the words, even if the words are shown first on the page. There's also a whole thing about page layout, whereby images and white space guide the eye — for instance, cogapp.com seems to do a really nice job guiding the eye down the page to the statement about what they do. So I don't know how easy it is to talk about this in the abstract, as to some extent it's also going to be dependent on visual design.

Anyway, my question: is there any hard evidence as to whether it's preferable to put related text above or below the image, from the point of view of getting people to read and process the words? (I'm not sure whether merely fixating on the words would count; I want to know they've actually processed the written content in a meaningful way :)

Answer 1

These are called "cut lines" and have been used in the newspaper industry for decades with the text BELOW the image. I'd stick with that.

Answer 2

I will say that the traditional print format has the image separated away from the main text (usually at the top or to the side) with a caption underneath the image.

This just seems natural, you see an image and then a description of what exactly is going on. From the headline or the copy leading into the article you probably have a good enough idea of what the image will be, meaning describing the image first usually isn't necessary.

However, digital media has often (but not as a strict convention) placed guiding copy above images when it fits the flow of an article.

For instance, I might lead into an image you totally werent' expecting, like this picture of Twitter's "Fail Whale":

In this case the narrative warrants descriptive text before the image. This is especially fitting in a writing style where it's like the author is directly showing the user something, it's like I hand you a picture "Here, take a look at this".

In many situations this may be inappropriate and unexpected; caption below the image is conventional and conventions exist to guide users. By simple virtue of following conventions you save your users a lot of confusion and time. Conventions are important, especially in "new" forms of media.

Answer 3

I don't have any hard evidence, just couple suggestions:

1. Stick to the standard, copy your peers, that is what your users are used to. You are talking about both video and images so I am not sure if your peer is cogapp.com or YouTube.com (with titles above the video).

2. You are stressing the importance of the text over the image. I believe the layout of the text has more importance than it's position here, the cogapp.com does a great job with white text on black background with enough padding.

3. Consider the position of the image/video + text on the website. If the text is more important you may want it to be visible without scrolling. Users don't scroll and have typically smaller monitor than you.

4. My rule of thumb is that title should be single line and should be above the image while description can be multi-line and should be below the image.

Hope it will help a bit.

Answer 4

Any content will be read and processed if it's placed and styled properly.

It is especially important in online publishing because content is disclosed progressively through scrolling, which is unlike print media where the concrete physical size allows readers to see the entire content at a glance. As a result, when consuming digital content, the user will likely need to scroll down to read the caption, then go back up to continue reading the main content, and then scroll down again to skip the image that breaks up the text. Moreover, in many online publications, captions are often not styled differently from the body text adding to the confusion.

Therefore, there I'll distill the following rule for captioning images and videos online:

If the image/video begins above the fold and the height including the caption is under 600px (i.e. above the fold on 768px-tall screens including browser chrome & header) and it's the only image/video on the page, then you can place the caption under it.

However, if the image/video goes below the fold or there are other images/videos on the page, then the caption should be placed above it to ensure consistency and prevent user confusion. In addition, captions must be styled differently from the body text in all cases.

Answer 5

Media content, especially an image grabs a users attention straight away, the natural flow is then to proceed downwards meaning that anything above (most usually a navigation bar) is left ignored until really needed. Captions for media content are better displayed below to fall into that natural flow, a user is more likely to WANT to read a description if it follows, not leads. Titles are best above any content however, i believe. Take Youtube into account as they have most probably had a research team of Ethnographers on the subject and come up with their layout as it stands now, which has also set a standard of sorts.