Wednesday, September 5, 2018

website design - Caption below or above image for navigation purposes?


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?




Answer



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.


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...