web-dev-qa-db-fra.com

La description d'une image doit-elle être au-dessus ou en dessous?

Il y a de nombreux endroits où nous devons mettre une image l'une au-dessous de l'autre et écrire sa description sur une ligne ou deux. Où doit être le texte de description? au-dessus ou en dessous?

enter image description here

Je sais que la meilleure option est de le placer de côté, mais parfois ce n'est tout simplement pas possible. Lequel si vous deviez choisir entre ces deux?

12
kBisla
  1. Pour créer une connexion entre l'image et la description utiliser le principe de proximité de l'ensemble des principes de la Gestalt, en laissant moins d'espace pour connecter les éléments et plus d'espace entre des morceaux d'informations à séparer. Cela donne de bons résultats pour le placement de description au-dessus ou en dessous.
  2. Pour prendre en charge le flux de consommation d'informations , en exploitant la percussion humaine, je recommanderais d'utiliser la description sous l'image.

    Comme une image est un élément plus attrayant et reconnu plus rapidement qu'un texte, elle sert de point d'entrée. Ensuite, en suivant le modèle de lecture de haut en bas, la description est fournie.

    Placer la description au-dessus d'une image pourrait créer un "point de décision" et interrompre le flux, comme pour lire la description, l'utilisateur devrait monter, tandis que l'image suivante, qui est en dessous, attire l'attention de l'utilisateur.
    enter image description here

21
Alexey Kolchenko

Le principe de proximité doit être la première considération. Après cela, cela pourrait aussi dépendre du support d'utilisation.

Blogs, journaux et livres par exemple, ont presque toujours le titre sous l'image. Cela a probablement à voir avec le fait que les images sont destinées à fournir un support à l'ensemble du contenu de la pièce. Vous pouvez donc lire un paragraphe, voir le contenu de support (une image) et sa pertinence, puis continuer à lire plus.

Cracked.com often uses descriptions quite hilariously



Les sites qui ont une majorité de contenu d'image utilisent tout naturellement des en-têtes comme descriptions et les localisent en haut. Un exemple qui me vient immédiatement à l'esprit est le 9GAG. Cela a également à voir avec le fait qu'il donne une idée de ce qu'est l'image avant que l'utilisateur ne la traverse.

Using headers as descriptions

Un autre exemple serait cette réponse elle-même. Description avant l'image pour vous faire une idée de ce que l'image essaie de transmettre.

10
abhinavc

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

Personnellement, je préfère le texte ci-dessous, mais c'est une préférence personnelle et il n'y a pas vraiment de bonne ou de mauvaise réponse. Cela dépend de beaucoup de choses, y compris votre contenu, ce que vous préférez, de quoi l'image est, etc.

Essayez-le dans les deux sens sur votre projet spécifique et voyez celui qui vous convient. Tant qu'il est suffisamment proche de l'image pour y être associé dans l'esprit des utilisateurs, alors vous serez en clair. Je sais que de nombreux sites utilisent en fait une bordure ou un arrière-plan autour de la légende et de l'image afin qu'ils soient clairement visibles associés les uns aux autres.

mockup

télécharger la source bmml

Encore une fois, il n'y a pas de bonne ou de mauvaise réponse ici. Cela dépend de vos préférences, et vous devriez essayer les deux pour voir ce qui vous convient le mieux et convient le mieux à votre contenu. Assurez-vous simplement de garder les images et les légendes proches les unes des autres afin qu'elles soient associées ensemble (je continue de le répéter, mais c'est parce que c'est important).

3
Mike

Il n'y a pas de règle stricte à ce sujet. J'ai rencontré les deux façons de placer des descriptions.

Vous devez juste vous assurer qu'il y a suffisamment d'espacement entre les différentes images et que la description est plus proche de l'image qu'elle décrit:

[image1]
Description1    

...enough empty space or even some delimiter line here ------------------------------

[image2]
Description2

...

D'un autre côté, je trouve toujours plus évident lorsque la description vient en premier et se termine par deux points - de cette façon, l'utilisateur s'attend logiquement à ce que l'image soit juste après le texte. Comme ça:

Here you see image1:
[image1]

And this image shows the second one:
[image2]

...
3
keaukraine

Le facteur clé est la fonction de l'image et la relation correspondante avec le texte. Le texte qui sert de description d'une image doit toujours aller en dessous de l'image, car il s'agit d'une description de l'image, ce qui signifie que l'image est la source du contexte.

C'est la même raison pour laquelle les images sont placées sous les titres. Dans le cas d'un article de presse, le titre est le contexte et l'image fournit des détails supplémentaires via une description visuelle.

En d'autres termes, le contexte d'abord et la description ensuite. Cela s'applique à la fois au texte et aux images.

1
jlbnjmn