E-commerce, les bonnes pratiques UX (3/3)

Publié initialement le 04.10.2022, pour Refine Agency

Ep. 3 La Page Produit

Troisième et dernière épisode dans notre série d’articles dédiés aux sites e-commerce du point de vue de l’expérience utilisateur (client en devenir 😉). Le précédent article était consacré à la page produit.

Pour le troisième épisode, nous allons nous pencher sur une page engageante dans le parcours utilisateur: la page panier.

Vous cherchez à convertir? Vous souhaitez plus que tout convaincre vos utilisateurs d’acheter vos produits ou services? Le parcours utilisateur ne doit pas ressembler à un parcours du combattant, au risque de le voir fuir 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é (usability en anglais). 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.

3 principes heuristiques appliqués sur la page du panier

Les numéros utilisés reprennent les principes listés dans notre infographie.

Principe heuristique n°5 : Prévenir plutôt que guérir

“Le système prévient des erreurs”

L’erreur est humaine! Votre utilisateur peut accidentellement provoquer une erreur et c’est plutôt normal en cas de saisie pressée ou d’inattention. Mais les faux-pas liés à un manque adéquat d’instruction compréhensible sont une source d’irritant important pour un utilisateur.

Pas besoin de le blâmer mais accompagnez le !

Dans l’exemple du panier de Wopilo, l’utilisateur se verra rappeler par un message approprié qu’il a oublié de cocher la case des CGV en cliquant sur commander.

Principe heuristique n°6 : Moins de charge mentale

“Reconnaitre plutôt que de se souvenir”

L’utilisateur doit pouvoir trouver ou retrouver ses marques très rapidement. Les instructions pour utiliser le système doivent être explicites et facilement accessibles. La charge mentale est plus importante quand il s’agit de se souvenir plutôt que de se rappeler. La différence entre les deux? ce sont le nombre d’indices que vous allez laissez à votre utilisateur pour se souvenir. Plus ils sont nombreux moins votre utilisateur sera surchargé mentalement et donc naviguera plus aisément par la suite dans le tunnel jusqu’à confirmer son achat.

La panier de la FNAC propose sous le récapitulatif les articles précédemment “mis de coté”. Vous souveniez vous de ce livre sur lequel vous hésitiez? La FNAC vous le remémore et vous propose si vous le souhaitez de l’ajouter au panier.

Principe heuristique n°7 : S’adresser à tous les usages

“Flexibilité et efficacité d’usage

Les système permet à l’utilisateur d’utiliser des raccourcis. Tous les utilisateurs ne sont pas égaux en terme de maniabilité, expérience sur le web, mais une bonne interface doit s’adresser à tous. Les raccourcis permettent aux plus expérimentés d’accélérer dans les interactions et aux débutant de trouver leur marque sans se sentir parasités par des fonctionnalités.

Sur Amazon, dans le panier l’utilisateur averti peu gagner un peu de temps en swipant de gauche à droite sur un article du panier pour le supprimer. La même action s’accomplit plus classique par le bouton “supprimer” pour l’utilisateur moins expérimenté.

Conclusion et petit bonus 🎉

Nous venons de découvrir 3 nouvelles heuristiques de Nielsen en parcourant des pages panier. 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.

Pour terminer ce troisième épisode consacré à la page panier, voici une liste non-exhaustive d’éléments pertinents pour pour optimiser la page panier :

Gardez en tête que le panier permet à l’utilisateur de passer en revue sa commande, il n’y passera que quelques instants avant d’entamer le tunnel d’achat. S’il hésite à cette étape par trop d’information, d’incompréhension c’est un risque d’abandon important.

  • Faire un récapitulatif clair du/des produit(s) : Image, nom, caractéristique, quantité, taille, couleur (ces deux derniers critères sont souvent des facteurs de retour commande) et prix
  • Laisser la possibilité de modifier le contenu du panier et de poursuivre les achats : changer les quantité, retirer un article, le mettre de côté ou revenir dans le catalogue.
  • Les frais de livraison :

Le montant des frais de livraison est un élément majeur que prend en compte très tôt l’utilisateur dans sa décision d’achat. Que vous l’ayez mentionné comme un fil rouge tout au long de son parcours sur le site, c’est bien sur le panier que le montant (ou la gratuité d’ailleurs!) doit être ici clairement indiqué.

Il arrive parfois que les frais d’expédition dépendent du transporteur choisi. Dans ce cas, informez votre utilisateur en précisant que les frais sont calculés à l’étape suivante lors du choix du transporteur ou du mode de livraison. Soyez transparent!

Laura Croix, UX Designer