Les éléments visuels d’un site web – photos, schémas, icônes, illustration et graphiques – sont essentiels dans l’expérience de navigation de l’utilisateur. Leur qualité permet d’assurer le sérieux, en appui du design du site. Leur pertinence et leur intérêt sont au service de la bonne perception de l’univers de l’activité et des propositions.
Alors comment proposer une visualisation et une manipulation optimale pour l’utilisateur ?
Le swipe, balayage du doigt à l’écran, est désormais adopté par tous les utilisateurs sur les applications mobiles. Comment mettre en place cette fonctionnalité de swipe sur les sites web?
Exemple de galerie swipable. Glissez à gauche et à droite (à la souris ou au doigt sur mobile) pour découvrir toutes les images
Le swipe ? Qu’est ce que c’est ?
Swiper sur les applis mobile
Les applications mobile ont amélioré l’ergonomie et l’interaction utilisateur, notamment avec l’utilisation des ‘gestures’, ces combinaisons faites avec les doigts sur les écrans pour manipuler les images.
On peut citer :
- le zoom : en posant deux doigts sur l’écran, puis en les écartant. Ultra intuitif !
- le défilement : le défilement vertical est la manipulation de base, notament pour défiler les pages des applications. La vitesse de défilement est éventuellement ajustable, avec la vitesse de ‘lancement’ et de relâchement du doigt.
- le swipe, défilement horizontal : Le défilement à gauche ou à droite, le swipe, est également devenu un standard, permettant de faire défiler des blocs ‘bandeaux’ à l’intérieur des pages. Et ainsi de présenter des débuts d’information, dont la suite n’est plus vers le bas, mais vers la droite, et qui n’apparait que si on le demande.
Et pour les sites web ?
A l’origine, ces fonctionnalités de swipe étaient utilisables sur les applications mobiles. Aujourd’hui, des librairies sont disponibles aussi pour le web et les rendent utilisables sur les sites.
Pour les images des pages web, cela permet :
- le défilement de galeries de photos : Le principe : Un bandeau de hauteur fixe. La page affiche un bandeau de vignettes d’images. Sa hauteur est fixe, et pour voir les autres vignettes, il suffit de swiper vers la droite pour voir les suivantes. (Voir le bandeau des vignettes d’exemple ci-dessus)
le défilement des photos elles-mêmes : Une fois une vignette de photo ‘cliquée’, elle apparait en plein écran. Pour passer à la suivante dans la galerie, il suffit de la ‘swiper’…
le zoom dans les photos : Une fois affichée, et si l’image est plus grande que l’écran, il est possible de l’agrandir (deux doigts en écartement), et de se déplacer à gauche et à droite avec le doigt pour voir en des portions et des détails dans la définition d’origine de l’image. Sur poste fixe, le zoom en définition d’origine s’obtient par un simple clic sur l’image, à l’endroit voulu du zoom, permettant d’explorer facilement les parties de l’image. La molette permet de gérer le niveau de zoom, de la taille adaptée à l’écran jusqu’à la résolution d’origine, encore une fois le zoom étant effectué à la position de la souris dans l’image.
Avantage d’ergonomie des galeries swipables : La compacité ! En affichage mobile responsive standard, l’intégralité des vignettes serait affiché, et empilé les unes sous les autres (mode ‘stack’), ‘poussant’ le reste du contenu en dessous… Avec le swipe, la hauteur du bandeau des vignettes photo reste fixe, et le reste des vignettes est ‘poussé’ vers la droite, laissant les contenus suivants apparaître immédiatement sans les pénaliser…
Exemple de galerie swipable
En conclusion
L’ensemble de ces ‘gestures’ va permettre aux utilisateurs de manipuler les sites web sur leur mobile comme s’il s’agissait d’une véritable application mobile, et sans difficultés, puisqu’ils ont déjà l’habitude de ces fonctionnalités.
Le swipe propose une solution élégante et efficace, au service d’une fluidité de navigation, et renforçant de manière significative l’expérience utilisateur pour la visualisation des images.
En savoir plus sur les fonctionnalités déployables sur les sites web
Fonctionnalités
Les fonctionnalités disponibles pour améliorer l’expérience utilisateur (UX) : galeries, cartes, carrousels, liens téléphone, partages réseaux sociaux, mosaïques, swipe, etc.
Crédits : Le comportement de swipe est implémentable de différentes façons. Nous recommandons l’excellente librairie PhotoSwipe, réalisée par Dmytro Semenov.