Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

enter image description here

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

share|improve this question
1  
Newspapers and thus news sites always leave the caption under the image. –  Ben Brocka Feb 6 '12 at 14:59
1  
Interesting article on SmashingMag website about image caption trends (from 2008 anyway) that should give you more food for thought. Style of the caption as well as the positioning could impact the comprehension of it. smashingmagazine.com/2008/11/04/… –  JonW Feb 6 '12 at 17:19
    
Thanks, Ben and Jon, for useful comments. Initially I was all "well, just because newspapers have been doing it for years …" about Ben's comment, but after reading Jon's link I actually concluded that there's a good reason why newspapers traditionally put the caption underneath. Having said which, titles and captions are not always the same thing … –  finiteattention Feb 7 '12 at 14:09
add comment

5 Answers

up vote 10 down vote accepted

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.

share|improve this answer
    
Thanks for this — I didn't know there was a name for it! As per the comments on my original post, I'm coming around to the idea of having a caption/explanatory text underneath, to the point where I'm wondering if anyone can demonstrate that in Title-Picture-Caption, Title is often overlooked in favour of the image and explanatory text. Thanks. –  finiteattention Feb 7 '12 at 14:11
add comment

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":
enter image description here

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.

share|improve this answer
1  
Hi Ben - sorry, I don't seem to have thanked you for this comment! I like your suggestion that this is context-specific. Cheers :) –  finiteattention Mar 18 '12 at 19:32
add comment

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.

share|improve this answer
    
Thanks Daniel. In fact since I work for an agency, "peers" is a very variable description :) All good points, especially (3.) –  finiteattention Feb 7 '12 at 14:16
    
in that case thanks for you +1 :p –  daniel.sedlacek Feb 7 '12 at 14:29
1  
Ahah, sorry, my bad! Meant to do, then got distracted by actually writing a comment. Fixed :) –  finiteattention Feb 7 '12 at 14:41
add comment

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.

share|improve this answer
    
Thanks, I think that's a really useful reminder about what shows/doesn't show above the fold, and the extent to which there are other images present. –  finiteattention Feb 7 '12 at 14:14
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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