Dernière mise à jour : 18 novembre 2024
La visionneuse permet de présenter à l’utilisateur des images en une séquence horizontale dans laquelle il peut naviguer.
- Guide d’utilisation
- Design
Utilisation
Principales règles d'utilisation
- On utilise la visionneuse pour présenter un regroupement d'images qui sont accompagnées ou non de légendes ou de textes descriptifs.
- La visionneuse doit toujours être introduite par un titre, qui est suivi ou non par un texte d'introduction.
- La visionneuse permet de diffuser exclusivement des images. Elle ne peut donc pas être utilisée, par exemple pour des blocs texte, des tuiles ou des vidéos.
- Des flèches permettent de naviguer vers la droite ou vers la gauche, d'une image ou d'un groupe d'images à l'autre.
- Le défilement horizontal n’est jamais automatique. Le changement de panneau est possible seulement grâce à l’intervention de l’utilisateur.
Il existe deux types de visionneuses :
Visionneuse en vedette
Cette visionneuse permet de mettre l’emphase sur une image à la fois et d'inclure un texte descriptif dont la limite de caractères est établie à 480, espaces inclus.
- Dans ce type de visionneuse, les images sont larges et limitées au nombre de sept.
- Afin de mettre le focus sur l'image en vedette, l'opacité des éléments situés à gauche et à droite de celle-ci incluant, s’il y a lieu, le texte descriptif, a été réduite. Cette opacité atténuée est une sorte de filtre gris appliqué sur ces images pour les rendre plus floues.
- Un indicateur numérique permet de communiquer la position de l'image en vedette par rapport au nombre total d'images présentées dans la visionneuse.
Quand l’utiliser
Lorsque la nature des images présentées mérite qu'on les mette en valeur (exemples : œuvres d’art ou photos inspirationnelles).
Lorsque les images doivent être accompagnées d’un texte descriptif plus long.
Visionneuse standard
Cette visionneuse affiche toutes les images au même niveau. Sur les formats de grilles pour les tablettes et les desktops, ces images sont diffusées simultanément par groupe de deux ou de trois. Les images de la visionneuse standard peuvent être accompagnées d'une courte phrase descriptive ou d'une légende qui ne dépasse pas 116 caractères, espaces inclus.
- Dans ce type de visionneuse, les images mises de l'avant sont plus petites et sont limitées à douze.
- Une barre horizontale de progression situe la position du panneau d'images visibles par rapport au nombre total d'éléments à découvrir.
Quand l’utiliser
Lorsque les images à présenter sont nombreuses et qu'il n'est pas nécessaire de mettre l'emphase sur une image à la fois.
Lorsque les images ne sont pas accompagnées de légendes ou de textes descriptifs ou si ces textes sont très courts.
Quand envisager autre chose
- Si des images doivent être comparées entre elles, il est recommandé de les insérer au même niveau dans la page, en mode galerie.
- Pour des images qui accompagnent le contenu principal de la page ou pour présenter une seule image ou des images de haute importance, il vaut mieux opter pour un bloc texte‑image.
Rédaction UX
- La visionneuse doit inclure un titre qui présente clairement son contenu.
- Le texte d'introduction est optionnel.
- La légende ou le texte descriptif sous chaque image est également optionnel. Par contre, si on les utilise, il est fortement recommandé d'accompagner chacune des images par une légende ou un texte descriptif de longueur similaire, et ce, par souci de cohérence visuelle.
Nombre de caractères maximal
Légende et texte descriptif
- Pour la visionneuse en vedette : Maximum de 480 caractères, espaces incluses
- Pour la visionneuse standard : Maximum de 116 caractères, espaces incluses
Anatomie
Couleurs et styles
Les deux types de visionneuses peuvent s'afficher sur une variété de couleurs de fond. Par contre, les couleurs qui sont le plus souvent utilisées sont blanc, bleu-80 et bleu-90.
Taille
Visionneuse en vedette
Grille – Petite (mobile)
Une image de la visionneuse en vedette et son contenu relié occupent trois colonnes.
Grille – Medium (tablette) et grille – Large ou X-large (ordinateur)
Une image de la visionneuse en vedette et son contenu relié occupent huit colonnes.
Visionneuse standard
Grille – Petite (mobile)
Une image de la visionneuse standard et son contenu relié occupent trois colonnes.
Grille – Medium (tablette) et grille – Large ou X-large (ordinateur)
Une image de la visionneuse standard et son contenu relié occupent quatre colonnes.
Ratio d’image
Visionneuse en vedette
Pour la visionneuse en vedette, le seul ratio possible est 3:2. Les images doivent être redimensionnées ou découpées pour suivre ce ratio.
Visionneuse standard
Pour la visionneuse standard, il est possible d'utiliser les quatre ratios suivants : 16:9, 3:2, 1:1, 3:4
Utilisation des ratios
- Dans la majorité des cas, un seul ratio est utilisé pour toutes les images de la visionneuse. On recommande d'opter pour le ratio 3:2.
- Par contre, il est possible d'utiliser deux ratios différents par visionneuse, à condition que ceux‑ci soient des ratios voisins, selon l'ordre établi au point précédent.
- Lorsque la visionneuse standard présente deux ratios d'image différents, les images doivent toujours être alignées par le bas.
États interactifs
Voici les états interactifs prévus pour les flèches de navigation de la visionneuse :
Défaut
Survol
Clic
Désactivé
Focus
