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?
Vue d’ensemble des cultures du Lycée Agricole de Chambourcy
Église de Briare
Église de Briare
Église de Briare
Golfe de Lava
Prise de vue aérienne par drone de l’aérodrome de Saint-Cyr
Prise de vue aérienne par drone de l’aérodrome de Saint-Cyr
Jonque Ile de Ré
Vue moyenne altitude d’une construction de lotissement
Vestige de la gare du Pecq de 1837
Vestige de la gare du Pecq de 1837
Prise de vue aérienne par drone de l’aérodrome de Saint-Cyr
Église de Briare
Château de Prunay à Louveciennes
Golfe de Lava
Lac d’Albertacce
Espace Chanorier de Croissy
Vestige de la gare du Pecq de 1837
Vieux Château Ile d’Yeu
Espace Chanorier de Croissy
Plateau du Bugey
Église de Briare
Seine à Port-Marly
Pont canal de Briare
Espace Chanorier de Croissy
Corrèze
Église de Briare
Le Tavignanu / Corse
Inspection d’avancement de chantier de construction
Vue d’Annecy vers le plateau d’Hauteville
Ponte Altu à Albertacce
Vestige de la gare du Pecq de 1837
Phare des baleines Ile de Ré
Eglise de Briare
Inspection d’avancement de chantier de construction
Vue moyenne altitude d’une construction de lotissement
Ponte Altu à Albertacce
Prise de vue aérienne par drone de l’aérodrome de Saint-Cyr
Vue drone panorama d’une construction de lotissement
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…
Église de Briare
Bijou du joaillier L’Échoppe d’Or
Vestige de la gare du Pecq de 1837
Église de Briare
Église de Briare
Prise de vue de l’Ile de Sainte Marie à Madagascar
Eglise de Briare
Église de Briare
Vue d’ensemble des cultures du Lycée Agricole de Chambourcy
Église de Briare
Coucher du soleil à Annecy
Église de Briare
Pont canal de Briare
Bijou du joaillier L’Échoppe d’Or
Bijou du joaillier L’Échoppe d’Or
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.
Cookies de site - Vous pouvez définir vos