Bonne UX ou Mauvaise UX : coup d’oeil sur le cas ASICS.COM

Je voulais juste commander une paire de baskets…

Confiné comme beaucoup d’autres, j’ai décidé de me remettre au sport. Attiré par une promotion alléchante et un code promo en cours de 10%, mon choix s’est porté sur la marque Asics. Je me rends donc sur le site à la recherche de mon produit que je trouve (non sans me poser des questions sur le guide des tailles et des pointures). Sans hésitation, j’ajoute le produit au panier.

Après avoir ajouté mon code promo, voilà ce qui se présente à moi :

Mes constats :

• Confusion sur la perception du prix (dois-je payer 55 euros ou 45 euros?)
• Une couleur rouge évoquant une erreur / un danger / une alerte (ai-je mal agi?)
• Des prix avec la même taille de police, parfaitement alignés : l’impression que je dois cumuler 45 ET 55 euros
• Pourquoi ai-je l’impression que je perds de l’argent, au lieu d’en gagner ?
• Erreur d’interprétation HTML (inspire le manque de suivi et d’attention de la part de la marque)
• Conclusion de l’information globale par une information qu’il ne faut pas garder en tête (il faut finir par 45 euros, et non pas par 55 euros)

Même si pour vous cela vous paraît un détail ou anodin, sachez que j’ai failli abandonner ma commande et quitter le site. Je pensais avoir bien ajouté mon code promo et que j’allais payer 45 euros. Or, ce que j’ai compris sur l’écran, c’est que j’allais payer au final 55 euros.

Une expérience utilisateur avec un ressenti émotionnel très négatif au premier abord, même si j’ai néanmoins insisté pour en comprendre davantage.

Mauvaise UX : et si nous améliorions tout cela SIMPLEMENT par l’UI ?

La réponse à une expérience utilisateur négative, c’est presque souvent sur la forme que ça se joue, à savoir l’interface visuelle.

Enoncer un problème ou une critique ne suffit pas, j’aime aussi proposer des solutions. Je me suis donc fixé le challenge d’imaginer quelle pourrait être une solution qui améliorerait grandement ma “user experience” (UX) en retravaillant la “user interface” (UI).

Voici donc ce que j’ai simplement optimisé sur la partie UI/UX design, et que je suggère à Asics d’appliquer vivement, pour un maximum d’efficacité sur la perception de l’utilisateur :

On pourrait toujours imaginer un autre design ou une meilleure idée, mais voilà déjà ce qui me procure meilleur ressenti, meilleure compréhension et meilleure lisibilité.

Une bonne expérience utilisateur passe par des choses simples et basiques

Pour Asics comme pour votre propre projet, quelques “tips” et rappels pour une expérience utilisateur, une clarté et une lisibilité réussies :

• Toujours se mettre à la place de votre utilisateur (et donc votre client)
• Faites tester toujours vos interfaces par plusieurs personnes avant de la publier
• En UX, la théorie des espacements (Gestalt) est un principe psychologique des plus connus en design d’interfaces
• Optez toujours pour un choix de couleurs cohérent (rouge = danger/perte, vert = positif / gain)
• Choississez la taille de police d’un texte selon l’importance du message et sa hiérarchie qu’il représente (“Total final à payer” est plus important que “Réduction accordée”)
• Message : soyez plus clair et “friendly” dans le choix de vos phrases (“Total remises” au lieu de “Réduction totale”)
• Lisibilité : choisissez le meilleur ordre de lecture pour votre utilisateur, qui connaît depuis son plus jeune âge les régles d’une addition ou d’une soustraction (A – B = RESULTAT)
• Egalement un principe en psychologie cognitive très connu : lorsqu’une succession d’informations (ou beaucoup) sont communiquées à un esprit humain, celui-ci retient plus facilement la première et la dernière.