11

It was already discussed here that for layout purposes, where images and video appear on a web page, ordinary captions are probably best placed below the graphic — largely due to convention.

I want to take these considerations into navigation. Consider that you land on a category webpage, whose sole purpose it is to direct you to the appropriate sub-category by informing you what's inside each.

Without images — it'd look something like this:

Without images

Then, consider that each sub-category would probably be clearer if it had a relevant photo to make navigation easier. But where should it be placed?

The first task to tackle is deciding whether it'll be the images or the text that will be used as a primary cue for a user to determine where to navigate to. That may depend on the website. But even when that is done, for both considerations, should the image or text be displayed first? What does either imply? Or are the more or less equivalent?

Examples below.



Text first:

enter image description here



Image first:

enter image description here


Which would best illustrate that each block (image & text combo) forms a navigation link to the corresponding sub-category?

Improve this question
2

2 Answers 2

Reset to default
8

Short answer: Captions below, titles above.

If you're explaining something to enhance understanding of an image, then you can think of it as a caption (even if it's just a word) and place it below.

If it's something that is needed for the image to make any sense, then think of it as a title and put it above.

The overall concept is that you should not introduce something which confuses users, so if an image is not clear without an explanation of some sort, make sure that you give it before the image.

Edit: If often makes sense to include both a title and a caption, so don't make it an either / or question.

Improve this answer
2
  • Good reasoning. In the case of "title above" — it'd leave space for any caption (if deemed necessary) below.
    – Baumr
    Dec 5, 2012 at 15:48
  • Absolutely. Nothing says that you can only have one. I'll add the clarification to the post.
    – JohnGB ♦
    Dec 5, 2012 at 16:01
10

As JohnGB says - titles above in this kind of scenario.

But I'd be tempted to trial having the title overlay the images in order to suggest that you can click on either the title or the image. Yes the cursor change should be a cue as well but you can use a slight darkening/lightening of the title background as you hover over the image to give a further hint - at least on mouse driven devices.

On small screen or mobile devices, you generally want the title first too, because there's a potential for the bottom of the image to be off screen (especially landscape orientation).

enter image description here

On mobile devices where opacity may not be supported you can just leave a margin around the title. For example as in this mockup below - the aim being to ensure that the content is the interface

enter image description here

Improve this answer
2
  • Good call! And you also ventured into the right direction: (I didn't specify) but mobile devices are actually an important consideration here, as is desktop. But shouldn't CSS transparency be avoided for mobile devices just like shadows and other effects? Progressively enhanced for desktop makes sense.
    – Baumr
    Dec 5, 2012 at 15:59
  • 1
    Yes you might want to progressively enhance for desktop regarding css3 opacity. All significant current versions of mobile browsers should support it, but obviously it's the older browsers you need to worry about still looking smart in. So long as you strive to promote the fact that the content is the interface. I'll update my answer with an option for mobile platforms without opacity.
    – Roger Attrill
    Dec 5, 2012 at 16:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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