Quelles sont les meilleures pratiques de l'interface utilisateur de la visionneuse / fenêtre modale pour afficher des images en taille réelle dans une galerie?
Je suis artiste et web designer amateur.
Sur mon site de portfolio, j'ai regroupé mon travail en projets. La plupart de mes projets contiennent peu (20 ou moins) d'images, je les affiche donc en taille réelle et laisse le visiteur défiler ( exemple ) car c'est ainsi que je préfère parcourir les travaux d'autres artistes.
Pour les projets contenant plus d'images, j'utilise des miniatures qui renvoient aux images en taille réelle, car, encore une fois, lorsque je parcours les portefeuilles d'autres artistes, s'il y a beaucoup d'images sur une page, c'est un peu lourd à charger.
Récemment, j'ai écrit du jQuery pour implémenter un effet lightbox (superposition de fenêtre modale) donc lorsque vous cliquez sur une vignette, l'image pleine grandeur apparaît ( exemple ).
Mes principales raisons de mettre en œuvre cela:
- c'est beaucoup plus présentable que d'avoir un lien direct vers l'image, c'est ce que je faisais
- si le visiteur partage l'image sur quelque chose comme tumblr ou Pinterest, le lien retour sera vers la page du projet au lieu d'un lien direct vers l'image
- si le visiteur souhaite cliquer avec le bouton droit sur les vignettes pour charger plusieurs images dans plusieurs nouveaux onglets/fenêtres de navigateur, il peut toujours le faire (la lightbox se déclenche lors d'un clic gauche)
Je n'ai pas inclus de bouton de fermeture car cela semble plus de travail pour le visiteur d'avoir à chercher un bouton de fermeture, que de simplement cliquer n'importe où pour fermer la lightbox (ce que j'ai fait).
Que pensez-vous de l'interface de la lightbox pour cette utilisation particulière? L'objectif serait la meilleure façon de présenter les travaux d'art visuel/de conception, et le public cible être, eh bien, toute personne qui veut voir le travail. La méthode d'affichage, dans ce cas une interface lightbox, doit être efficace, utilisable et présentable (elle doit mettre en évidence et non nuire au travail).
Mon approche serait de l'avoir en plein écran (par exemple, une fenêtre de navigateur complète) sur un fond unicolore (probablement noir ou gris foncé) et de masquer toute la navigation (fermer, suivante, précédente) tant que la souris ne bouge pas.
De cette façon, vous ne distrayez en aucune façon l'utilisateur sans compromettre la convivialité en supprimant les fonctions essentielles de l'interface utilisateur.
Un point important est l'accessibilité au clavier: laissez l'utilisateur naviguer avec le ← et → boutons, et faire esc fonctionne comme bouton de fermeture. Vous pouvez offrir plus de détails lorsque l'utilisateur appuie sur ↑… mais cela nécessite probablement quelques conseils.
Les utilisateurs de souris ont besoin de boutons cliquables pour parcourir les images et fermer l'image active. Ces boutons peuvent être masqués lorsque le curseur n'est pas sur l'image, mais ils doivent être disponibles.
Le rouleau d'images modales est très agréable et est utilisé sur les plus grands sites de médias sociaux, tels que Facebook et Google+. Alors respectez-le, mais veuillez ne pas omettre le bouton de fermeture. Cela rend les utilisateurs confus et nous ne le voudrions pas. Une idée à utiliser est l'implémentation de Facebook, où vous avez le [X] pleinement fonctionnel, mais en survolant l'utilisateur obtenez un indice: utilisez Esc fermer! Je pense que c'est un design magnifique qui dit aux utilisateurs qu'il existe d'autres moyens et que vous n'avez pas besoin de saisir votre souris pour fermer l'image:
