Ep. 1 La Page Catalogue
Entamons ensemble une nouvelle série d’articles dédiés aux sites e-commerce du point de vue de l’expérience utilisateur (client en devenir 😉).
Ce premier épisode est consacré à une des pages parfois un peu oubliée mais non moins importante dans le parcours utilisateur: la page catalogue (ou page liste).
Vous cherchez à convertir ? Vous souhaitez plus que tout convaincre vos utilisateurs d’acheter vos produits ou services ? L'expérience utilisateur ne doit pas ressembler à un parcours du combattant, au risque de voir l'utilisateur fuir de votre site.
Il ne sera pas question ici de marketing, de chiffres, de performances commerciales mais de répondre aux attentes (en partie du moins) de vos utilisateurs en appliquant des principes d’utilisabilité.
Les principes d’utilisabilité
Un point de repère dans l’histoire: c’est Jakob Nielsen qui dans les années 90 établit une liste de 10 principes d’utilisabilité. Nous sommes plutôt loin du web à ce moment là, mais l’utilisabilité définie les interactions homme-machine: la capacité de l’objet à être facilement utilisé par une personne donnée pour réaliser la tâche pour laquelle il a été conçu.
Transposé à l’UX design aujourd’hui, ces 10 principes - appelés heuristiques de Nielsen - sont toujours un point de départ indispensable à garder en tête lors de la conception d’une interface, d’une expérience utilisateur !
Listés intégralement dans notre précédente infographie, nous allons illustrer certains de ces principes par des exemples concrets sur une page catalogue d’un site e-commerce.
Petit disclaimer! ces principes d’utilisabilité, ne se substituent en aucun cas aux autres principes d’ergonomie, d’accessibilité ou les autres phases du design, tel que la phase de recherche utilisateurs.
4 principes de l'utilisabilité appliqués sur une page catalogue
Les numéros utilisés reprennent les principes listés dans notre infographie.
Heuristique n°1: Visibilité
“Le statut du système doit être visible”
L’interface doit renseigner à tout moment l’utilisateur sur l’état des actions qu’il réalise. Mais également l’utilisateur doit savoir à tout moment où il se trouve et où il doit aller.
Dans le cas de notre page catalogue ci-après, ce principe se matérialise par la présence d’un titre qui identifie clairement la catégorie et la présence d’un fil d’Ariane (ou breadcrumbs).
Heuristique n°4: Cohérence et Normes
“Le système correspond au modèle mental de l’utilisateur”
L’utilisateur naviguant sur de nombreux sites mobile ou desktop est habitué à un certain nombre de standards qu’il s’attend à trouver sur votre site. Dès lors, si votre site ou application prend en compte les normes actuelles les plus répandues, l’utilisateur n’aura pas à apprendre à s’en servir.
Dans notre exemple, l’exemple de l’icone menu burger pour ouvrir l’ensemble du menu n’a plus de secret pour l’utilisateur. De même pour les icones représentant le compte utilisateur ou le panier.
Descendons un peu dans la page pour observer 2 autres heuristiques de Nielsen :
Heuristique n°3: Contrôle et Libertés
“L’utilisateur doit pouvoir contrôler le système”
Cette heuristique intègre le principe de droit à l’erreur. Ainsi une interface doit permettre à l’utilisateur d’annuler une action ou de revenir en arrière (comme par exemple, vider un panier). Mais c’est aussi dans le cas de notre exemple la possibilité pour l’utilisateur de personnaliser sa navigation.
Dans le cas des boutons Filtrer et Trier par, l’utilisateur affinera s’il le souhaite les éléments chargés sur la page catalogue. Filtres, qui eux aussi doivent dans la meilleure des pratiques offrir la possibilité d’être contrôlés (ajouter, supprimer, réinitialiser)
Heuristique n°8: Esthétique et Minimalisme
Pour répondre à ce principe, la bonne question à se poser pour le concepteur est : Chaque information affichée sur l’interface est-elle indispensable et utile ?
Alliant aussi les notions de cohérence visuelle et esthétique, il ne faut pas perdre de vue ce que l’utilisateur veut trouver sur la page catalogue de votre site. L’utilisateur parcourt votre site en peu de temps sans vraiment le lire. Plus le contenu est chargé inutilement, plus l’expérience sera laborieuse et source d’erreurs (voir d’abandon!)
Il s’agit ici de fournir à l’utilisateur les informations de base attendues à cette étape de l’expérience: un visuel, un titre, un prix !
Conclusion et petit bonus 😉
Nous venons de découvrir 4 des 10 heuristiques de Nielsen. Apparentés souvent à du bon sens, ces principes d’utilisabilité sont encore régulièrement négligés. Un petit tour sur le web nous le confirme en quelques clics !
Les heuristiques de Nielsen sont une première piste solide pour cibler les problèmes et les corriger. Cette solution d’évaluation certes pertinente ne doit pas rester la solution ultime.
Chez Refine Agency, nous accompagnons de nombreuses entreprises du e-commerce dans la création et la refonte de leurs interfaces. Cette première phase d’évaluation est pleinement intégrée lors de la phase d’audit pour engager avec nos clients la bonne prise en compte de leurs besoins et la connaissance de leurs utilisateurs.
Pour terminer ce premier épisode consacré à la page catalogue d’un site e-commerce, voici une liste non-exhaustive d’éléments pertinents à l’expérience utilisateurs :
- Consacrez le bas de vos pages catalogue à la navigation alternative : permettez ainsi l’utilisateur de passer à une catégorie annexe de façon fluide et rendez plus longue sa visite sur votre site. 😍
- Rappelez régulièrement et de façon pertinente les éléments de réassurance : des frais de livraison offerts, un service de click and collect, un paiement en plusieurs fois etc.
- Intégrez un bouton d’ajout au panier rapide dès la page catalogue. Si votre produit le permet ! (s’il n’y a pas d’option de couleur ou de taille par exemple) 🛒
- Permettez à l’utilisateur de marquer en favoris les articles même sans être connecté à son compte (l’action pourra se faire après) ❤️
Cette première approche des principes d’utilisabilité vous interroge sur l’approche UX de votre site? N’hésitez pas à contacter l’équipe d’experts Refine pour toute demande d’information.
Le prochain épisode sera consacré à la page produit.
Laura Croix, UX Designer.
