There are many places where we've to put an image one below the other and write their description in a line or so. Where should the description text be? above it or below?
I know the best option is to place it on side but sometimes it's just not possible. Which one if you had to choose between these two?
To support information consumption flow, exploiting human's percertion, I'd recommend to use description below the image.
As an image is more attractive element and recognized more faster then text, it serves as an entry point. Then, following the top-to-bottom reading pattern, the description is provided.
Placing description above an image could create "decision point" and pause the flow, as to read the description user shoud go up, while next image, which is below, attracts user's focus.
Proximity principle should be the first consideration. After that, it could also depend on the medium of usage.
Blogs, newspapers and books for example almost always have the title below the image. This probably has to do with the fact that the images are meant to provide supporting material to the overall content of the piece. So you might read through a paragraph, see supporting content (an image) and it's relevance, then continue reading more.
Sites that have a majority of image content quite naturally use headings as descriptions, and locate them at the top. An example that immediately comes to mind is 9GAG. This also has to do with the fact that it gives an idea about what the image is before the user goes through it.
Another example would be this answer itself. Description before image so that you get an idea of what the image is trying to convey.
There is no strict rule on this. I've encountered both ways of placing descriptions.
You just have to ensure that there is enough spacing between different images and that description is closer to image it describes:
[image1]
Description1
...enough empty space or even some delimiter line here ------------------------------
[image2]
Description2
...
On the other hand, I always find it more obvious when description comes first and ends with colon - this way user logically expects image to be right after text. Like this:
Here you see image1:
[image1]
And this image shows the second one:
[image2]
...
download bmml source – Wireframes created with Balsamiq Mockups
Personally I prefer the text below, but that's a personal preference and there's no real right or wrong answer. It depends on a lot of things, including your content, what you prefer, what the image is of, etc.
Try it both ways on your specific project and see which one works for you. As long as it's close enough to the image to be associated with it in the users' mind, then you'll be in the clear. I know lots of sites actually use a border or background around both the caption and image so that they're clearly seen associated with each other.
Again, there's no right or wrong answer here. It's up to your preference, and you should try both to see which looks best to you and best suits your content. Just make sure to keep pictures and captions close together so they're associated together (I keep re-iterating that, but it's because it's important).
The key factor is the function of the image and corresponding relationship to the text. Text that serves as the description of an image should always go below the image, because it is a description of the image, meaning the image is the source of context.
This is the same reason that images are placed below headlines. In the case of a news article, the headline is the context and the image provides additional details via a visual description.
In other words, context first and description second. This applies to both text and images.
