web-dev-qa-db-fra.com

Indicateurs de vignettes de la galerie Lightbox

J'ai un site Web basé sur CMS avec la possibilité d'ajouter des galeries lightbox aux articles de blog. Les galeries peuvent avoir une ou plusieurs images et seront représentées dans le corps du message par une vignette de la première image. Cliquez sur la vignette, voyez-la exploser, style lightbox avec des flèches et un bouton de fermeture et tout ça.

Existe-t-il des pratiques UX préférées pour indiquer les éléments suivants:

  1. Ceci est une vignette qui, lorsqu'elle sera cliquée, présentera une version plus grande de cette photo
  2. Cette photo unique représente en fait plusieurs photos, dont vous pouvez voir des versions plus grandes si vous cliquez sur. OR 2A. Cette seule photo représente en fait une seule photo, dont vous pouvez voir une version plus grande si vous cliquez.
1
Brian Whitton

Conception selon le principe de la moindre surprise de l'utilisateur. Une seule image dans et de lui-même ne fournit aucune possibilité (indice) à l'utilisateur qu'il y ait plusieurs images dans une cuisine derrière elle.

Il existe différentes façons d'indiquer qu'une galerie d'images existe. La "meilleure" façon dépend de ce qui est pratique, étant donné l'interface utilisateur à partir de laquelle vous lancez la galerie.

Le moyen le plus utile est d'afficher une mini-galerie, un carrousel ou une interface de flux de couverture, car cela signifie que l'utilisateur peut rapidement parcourir et cliquer sur l'image d'intérêt .

Mais si l'interface utilisateur de lancement est restreinte, d'autres possibilités pourraient être le libellé "12 images", un badge "12" ou une pile multi-images. J'ai esquissé le badge et la pile de plusieurs images ensemble.

mockup

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

Dans tous les cas

  • démarrez la galerie montrant l'image de la vignette sur laquelle vous avez cliqué.
  • permettre à l'utilisateur de se déplacer dans la galerie, ne pas les retourner à la vignette pour sélectionner un autre agrandissement
1
Jason A.

Si vous agrandissez simplement une photo dans la lightbox, j'utiliserais une miniature comme aperçu avec une icône de loupe. Pour une galerie, c'est différent: du point de vue de l'accessibilité, j'indiquerais une galerie non seulement visuellement mais par des mots, comme "Voir la galerie (x images)". La vue de la galerie doit alors toujours commencer par la première image de l'ensemble afin que les utilisateurs puissent parcourir la galerie de manière unidirectionnelle. Pour les galeries, j'utiliserais une icône générique de galerie et un lien texte.

1
pseudonym