Il a déjà été discuté ici qu'à des fins de mise en page, où les images et les vidéos apparaissent sur une page Web, ordinaire les légendes sont probablement mieux placées sous le graphique - en grande partie en raison de la convention.
Je veux prendre ces considérations en navigation. Considérez que vous atterrissez sur une page Web de catégorie, dont le seul but est de vous diriger vers la sous-catégorie appropriée en vous informant de son contenu.
Sans images - cela ressemblerait à ceci:
Ensuite, considérez que chaque sous-catégorie serait probablement plus claire si elle avait une photo pertinente pour faciliter la navigation. Mais où le placer?
La première tâche à accomplir consiste à décider si ce seront les images ou le texte qui seront utilisés comme repère principal pour qu'un utilisateur détermine où naviguer. Cela peut dépendre du site Web. Mais même lorsque cela est fait, pour les deux considérations, l'image ou le texte doit-il être affiché en premier? Qu'est-ce que cela implique? Ou sont-ils plus ou moins équivalents?
Exemples ci-dessous.
Texte d'abord:
Image d'abord:
Lequel illustrerait le mieux que chaque bloc (combo image et texte) forme un lien de navigation vers la sous-catégorie correspondante?
Réponse courte: légendes ci-dessous, titres ci-dessus.
Si vous expliquez quelque chose pour améliorer la compréhension d'une image, vous pouvez la considérer comme une légende (même si ce n'est qu'un mot) et la placer ci-dessous.
Si c'est quelque chose qui est nécessaire pour que l'image ait un sens, alors considérez-la comme un titre et mettez-la au-dessus.
Le concept général est que vous ne devez pas introduire quelque chose qui déroute les utilisateurs, donc si une image n'est pas claire sans explication, assurez-vous de la donner avant l'image.
Modifier: s'il est souvent judicieux d'inclure à la fois un titre et une légende, alors n'en faites pas une question ni l'un ni l'autre.
Comme le dit JohnGB - titres ci-dessus dans ce genre de scénario.
Mais je serais tenté d'essayer d'avoir le titre en superposition les images afin de suggérer que vous pouvez cliquer sur le titre ou l'image. Oui, le changement de curseur devrait également être un signal, mais vous pouvez utiliser un léger assombrissement/éclaircissement de l'arrière-plan du titre lorsque vous survolez l'image pour donner un indice supplémentaire - au moins sur les appareils pilotés par la souris.
Sur les petits écrans ou les appareils mobiles, vous souhaitez généralement le titre en premier aussi, car il est possible que le bas de l'image soit hors écran (en particulier l'orientation paysage).
Sur les appareils mobiles où l'opacité peut ne pas être prise en charge, vous pouvez simplement laisser une marge autour du titre. Par exemple, comme dans cette maquette ci-dessous - le but étant de s'assurer que le contenu est l'interface