Top 10 des erreurs UX les plus fréquentes

Règle numéro #1 : Utiliser des verbes d’action. 

Les textes de vos boutons doivent inciter vos utilisateurs et clients à agir grâce à des verbes d’action. Lorsque les internautes lisent un verbe d’action, ils comprennent directement le rôle du bouton.

Les textes des boutons génériques « Oui/Non » sont fréquemment utilisés pour les écrans de confirmation. Les internautes sont obligés de lire le contenu de la boîte de dialogue avant de pouvoir agir. S’ils sautent le texte de la boîte de dialogue, ils peuvent choisir le mauvais bouton. 

​

Règle numéro #2 : Utiliser des termes précis

Chaque verbe d’action utilisé a un sens spécifique et contextuel. Si le terme employé n’est pas précis, votre audience peut mal interpréter le rôle du bouton.

Prenons l’exemple des mots « Retirer » et « Supprimer », ils ont une signification similaire, mais une connotation différente. Dans une liste de lecture ou un outil de gestion de contenu, « Supprimer » laisse penser aux utilisateurs qu’ils vont perdre leur chanson ou leur contenu. Le mot « Retirer » est plus précis, car l’action retire la chanson de la liste de lecture, mais ne la supprime pas complètement en tant que contenu disponible.

L’utilisation de ces mots dans un mauvais contexte peut inquiéter les utilisateurs et faire émerger des doutes sur la conséquence de leur action.

Règle numéro #3 : Utiliser la forme impérative active

Un trop grand nombre de mots sur un bouton obligeraient vos clients et utilisateurs à lire davantage. Lorsque vous utilisez la forme impérative à la voix active, vous réduisez le nombre de mots inutiles. Facilitez la compréhension du texte du bouton et transformez les phrases en commande.

Il vous suffit d’inclure un verbe avec un adverbe ou un objet direct pour que votre bouton soit parfaitement compréhensible.

Lorsque vous utilisez la forme impérative et le mode actif, évitez les termes explicatifs visant à expliquer aux utilisateurs comment utiliser leur appareil. Un exemple très commun est le célèbre « cliquez ici » placé sur un bouton. Ce terme complexifie non seulement la compréhension du bouton, mais il est également redondant pour l’utilisateur. Utilisez plutôt des verbes appropriés et décrivez l’action afin d’inciter les utilisateurs à « cliquer » : “Oui je me connecte” - “Non, je poursuis en tant qu’invité”.

Règle numéro #1 : Avoir conscience de l’éventuelle surcharge de sa page d’accueil 

Les marques sont souvent surprises de découvrir que 20 ou 30 % de leur audience trouve leur page d’accueil “surchargée” ou “fouillis”. Même s’il est toujours tentant d’afficher toutes les promos sur la page d’accueil, cette tentation commerciale est à mettre au regard du risque d’avoir des utilisateurs déboussolés dès la première page du site. La mémoire de travail est très vite saturée et l’utilisateur risque de s'arrêter à mi-chemin : il ou elle ne PEUT PAS cognitivement parlant intégrer et comprendre autant d'informations d'un coup.

Règle numéro #2 : Limiter la taille du menu et rendre les catégories étanches

La création d’un menu trop profond (avec plus de 10 catégories) peut rallonger la navigation de l’internaute et augmenter sa charge cognitive. Le fait que les catégories ne soient pas “étanches” (un produit pourrait se trouver dans 2 catégories) facilite également les erreurs ou retours en arrière, et augmente donc la frustration. 

Conseils : 

• Limiter à 9 rubriques principales le premier accès du menu déroulant
• Afficher les éléments par pertinence (un tri de carte peut être utile)
• Limiter les visuels dans le menu pour éviter une surcharge informationnelle, surtout sur un menu vertical.
• Privilégier une catégorisation étanche, par exemple par type de pièce (déco)

Règle numéro #3 : Limiter les popups

Les utilisateurs sont (très) souvent agacés par les fenêtres de popups qui apparaissent dès la page d’accueil et les distraient dans leur navigation. L’usage des popups, comme la géolocalisation, peut être intéressant pour l’utilisateur lorsqu’il est engagé dans le parcours. Sur la page d’accueil, c’est généralement mal perçu. 

Conseil : Limitez votre site à une seule fenêtre de pop-up, en évitant la page d’accueil. Mettre en évidence la croix pour fermer la fenêtre. 

Règle numéro #4 : Attention à l’utilisation des publicités vidéo

Il vous est déjà arrivé de consulter un site et d’entendre une publicité se lancer toute seule ? Vous prenez quelques secondes à comprendre d’où vient le bruit... C’est évidemment agaçant. La règle est de laisser le contrôle à l’utilisateur, afin qu’il reste concentré sur les informations essentielles.
Conseil : Pour les publicités vidéo, nous déconseillons d’activer la lecture automatique, afin d’éviter une “désorientation attentionnelle”. C’est très désagréable et peut constituer un irritant majeur pour vos clients et utilisateurs.

Règle numéro #1 : Utiliser des visuels de qualité. 

Une image vaut mille mots, cette expression sied parfaitement à cette règle. En effet, l’utilisation de vidéos et de visuels qualitatifs est primordiale pour proposer une UX optimisée. 

Les vidéos et photos permettent à vos utilisateurs et clients de se faire une idée précise de ce que vous proposez. Mais surtout, ils permettent de faire passer des messages plus rapidement et plus efficacement que ce que vous pourriez faire avec un simple texte.

Bien entendu, nous ne vous conseillons pas de supprimer tout votre contenu texte par des visuels mais une alternance des deux est généralement l’option qui est privilégiée.

Règle numéro #2 : Proposer du contenu de qualité mais simple.

Un contenu plein de fautes, sans aucun fond, ou issu d’une mauvaise traduction créera une mauvaise expérience utilisateur et desservira votre organisation. Au-delà des fautes d’orthographe, il est aussi nécessaire de proposer un contenu rédigé avec un langage simple et compris de tous. 

Pour cela, la première chose à faire est de se mettre à la place de vos utilisateurs et de vous poser la question “Est-ce que je comprendrais ce texte à leur place ?” De manière plus pratique, nous vous conseillons de privilégier la voix active à la voix passive tout en utilisant au minimum le langage expert. Par exemple préférez “Julien a refusé le contrat hier” à “L’accord a été dénoncé hier par Julien”. C’est plus simple, plus directe et de ce fait plus facile à comprendre.

Règle numéro #3 : Faire attention à la vitesse de chargement du contenu.

La vitesse de chargement de votre contenu influence directement l’expérience de vos utilisateurs. En effet, plus le temps de chargement de votre interface sera long, plus ces derniers seront gênés, plus ils quitteront votre interface. 

En chiffre, Google a publié une étude montrant qu’une page se chargeant en 3 secondes avait un taux de rebond 32 % plus élevé qu’une page identique mais se chargeant en une seconde.

Pour résoudre ce problème, la première chose à faire est d’opter pour des formats d’image nouvelle génération type Web P. il est aussi conseillé de limiter le nombre de plugins externes sur votre interface, ces derniers rallongent votre temps de chargement. Enfin, autre conseil efficace, décalez le chargement de vos contenus. Pour cela, utilisez une fonction de “lazyloading”. Cette fonction permet de charger un contenu que lorsque l’utilisateur l’atteint en faisant défiler votre page. 

“Passer de 1 seconde de temps de chargement à 3 secondes augmente le taux de rebond de 32 %”

Règle numéro #1 : Utiliser des noms de filtres évocateurs

Nous voyons régulièrement des sites qui utilisent des termes vagues dans leur filtre : “Univers”, “Concept”, “Fonction” voire plus inquiétant “Qualité”. Ces filtres sont rarement évocateurs et laissent donc souvent perplexe les utilisateurs. Nous recommandons d’utiliser des termes simples et compréhensibles par chacun comme “type de peau” “type de vêtement” ou “couleur”.

Règle numéro #2 : Ajouter des sous-catégories après une recherche par filtre

Pour que les recherches de vos clients et utilisateurs soient plus précises, il est intéressant de présenter plusieurs sous-catégories afin d’affiner la recherche et de gagner du temps.

Dans la mode par exemple : “Couleur Bleu → Bleu marine / Bleu clair”

Règle numéro #1 : Utiliser l’icône de loupe

Toujours accompagner la barre de recherche avec l’icône loupe. Les icônes sont, par définition, une représentation visuelle d’un objet, d’une action ou d’une idée. Il existe quelques icônes qui sont universellement reconnues. L’icône de loupe en fait partie, tout comme le menu burger.

Règle numéro #2 : Afficher le champ de recherche en évidence

Si la recherche est une fonctionnalité stratégique pour votre interface, vous devez l’afficher en évidence en haut de la page. Il est par ailleurs important d’afficher ce champ de saisie en entier. En effet, la recherche cachée derrière l’icône rend cette fonctionnalité moins visible et augmente le coût d'interaction (c'est-à-dire, la totalité des efforts consacrés par les utilisateurs pour atteindre l’objectif).

Règle numéro #3 : Proposer un bouton de validation pour la barre de recherche

Proposez un bouton indiquant à votre audience qu’il y a une étape supplémentaire pour déclencher l’action de recherche - même s’ils décident de le faire en appuyant sur la touche “entrée”. Sans ce bouton, vos clients et utilisateurs peuvent de ne pas comprendre l’absence de résultat associée à leurs recherches.

Règle numéro #4 :  Donner des exemples de ce que les utilisateurs peuvent rechercher

C’est une bonne idée d’inclure un exemple de requête simple dans le champ, afin d’orienter les utilisateurs dans leurs recherches. Si les utilisateurs peuvent effectuer la recherche pour de multiples critères, utilisez des indices de saisie pour le montrer.

Par exemple, si vous vendez des places de concerts, mettez des noms de groupes de musique ou bien de lieux de spectacle dans votre barre de recherche.

Règle numéro #5 : Adapter la taille du champ 

Une barre de recherche courte qui n’affiche pas la totalité de la requête crée obligatoirement des erreurs. Si le champ de saisie adapte sa dimension au nombre de caractères, l’utilisateur pourra se relire et sa recherche sera optimisée. Dans le cas contraire il devra faire défiler le champ de recherche pour pouvoir se relire.

Conseil : Présenter un champ de recherche pouvant contenir au moins une trentaine de caractères (cela s’adapte à +90 % des requêtes).

Règle numéro #6 : Mettre la barre de recherche sur toutes les pages

Il est fortement conseillé de fournir l’accès à la barre de recherche sur toutes les pages. En effet, si votre audience ne peut pas trouver le contenu souhaité, elle essaiera de le trouver en le recherchant via la barre de recherche.

Règle numéro #7 : Utiliser l’autosuggestion

Le mécanisme de l’autosuggestion propose des offres avant même que l’utilisateur termine sa requête, en devinant et en anticipant sa demande grâce aux premières lettres. Ce mécanisme est un bon outil car il minimise le risque d’erreur. Les erreurs orthographiques, notamment, peuvent aboutir à une recherche nulle alors que le produit est disponible.

Conseils :

• Proposer une autosuggestion le plus tôt possible, dès le 3ème caractère saisi, afin de fournir la valeur immédiate et réduire l’effort des utilisateurs pour entrer les données.
• Afficher les éléments autosuggérés. Limiter à 10 produits (sans la barre de défilement) pour que l’information ne devienne pas écrasante.
• Souligner la différence entre les informations saisies et informations suggérées (ex : les textes saisis en gras et les termes suggérés en police standard).

Règle numéro #1 : Ajouter un message d’erreur explicite lors d’une erreur de saisie

Il peut encore arriver que certains sites affichent un message d’erreur générique lors d’une mauvaise saisie. Il est essentiel de guider l’utilisateur lors d’une erreur de saisie pour régler le plus rapidement possible la situation avant que cela ne devienne un irritant. 

Pour qu’un message d’erreur soit pertinent, il doit informer l’utilisateur sur la nature de l'erreur et indiquer l'action à effectuer pour la résoudre.

Par exemple, plutôt que d’écrire “champ invalide” pour un email provenant d’un fournisseur gratuit de boite mail préférez “Veuillez saisir une adresse e-mail professionnelle”.

Règle numéro #2 : Dimensionner la taille des champs 

Créer différentes tailles de champ en fonction du contenu de la saisie permet à vos clients et utilisateurs de se sentir guidés et de comprendre plus rapidement ce qui leur est demandé. Cela est particulièrement utile pour les dates ou les codes postaux, où la longueur du champ influe sur sa compréhension.

Règle numéro #3 : Faciliter l’identification du champ contenant une erreur 

Le message d’erreur doit être visible rapidement : en dessous ou à côté de la case, pour que l’utilisateur comprenne directement quel champ contient une erreur, avant même la validation du questionnaire.

De plus, il est fortement recommandé d’ajouter un ancrage, ramenant l’utilisateur au point d’erreur. S’il doit défiler ou chercher lui-même le message d’erreur, il risque d’abandonner sa recherche. 

Règle numéro #4 : Accompagner l’utilisateur dans la complétion du champ 

Pour guider l’utilisateur et éviter les erreurs, les instructions de saisie peuvent se situer en dessous du champ. Au fur et à mesure de la saisie, les instructions peuvent s’afficher en vert pour indiquer que la condition est bien remplie et faire comprendre à l’utilisateur qu’il a bien exécuté l’instruction.

Également, les cases peuvent être remplies au préalable avec un exemple pour montrer ce qui est attendu de l’utilisateur.

Lorsque la saisie d’un champ est correcte, l’ajout d’un pictogramme “validé” en vert dans la case permet de faire comprendre à l’utilisateur qu’il a bien rempli la case. 

Globalement, voici quelques conseils pour améliorer l’UX de vos formulaires et limiter les blocages sur les champs qui génèrent le plus souvent des messages d’erreurs :

• Adresse : préciser l’ordre de saisie des différents éléments 
• Date : permettre aux utilisateurs de remplir une date au format JJ/MM/AAAA avec passage automatique d'un champ à l'autre. Nous observons globalement plus d’erreurs (et donc de frustration) lorsqu’un calendrier ou menu déroulant est proposé pour saisir une date.
• Carte de crédit : adapter les champs pour faire comprendre à l'utilisateur s’il faut un espace ou non. Le mieux étant d’aligner plusieurs champs avec un passage automatique de l'un à l'autre.
• Numéro de téléphone : préciser à minima quel est le format attendu, en évitant de demander à l'utilisateur d’écrire lui-même l’indicatif du pays. Il est recommandé de choisir le pays associé au numéro, puis de laisser un champ autorisant les numéros commençant par 06 ou 07.
• Mot de passe : guider l’utilisateur au fur et à mesure du remplissage, afin qu’il adapte son mot de passe sans attendre un message d’erreur.

Règle numéro #1 : Proposer une option “invité”

L’agacement provoqué par l’obligation de créer un compte est une donnée que l’on retrouve dans la plupart de nos tests utilisateurs. Pour rappel, c’est près de 30 % des abandons de panier qui s’expliquent par l’obligation de création de compte.

Pour limiter ce frein à la conversion, nous recommandons donc la mise en place d’une option “invité”, quitte à proposer la création d’un compte plus tard. C’est la solution choisie par beaucoup d’organisations aujourd’hui.

Règle numéro #2 : Expliquer aux utilisateurs pourquoi ils devraient avoir un compte

Afin de rendre la création de compte plus attractive, vous pouvez tout simplement indiquer à vos utilisateurs la valeur ajoutée : retrouver sa commande, modifier ses informations de livraison, recevoir des réductions, inviter à des évènements, retrouver la garantie d’un produit, etc… 

Règle numéro #3 : Limiter la demande d’informations personnelles et proposer des champs optionnels

Lorsqu’une personne consulte votre site pour la première fois ; l’obligation d’une création de compte sera vu comme une contrainte. 

Beaucoup d’utilisateurs sont réticents à donner leurs données personnelles. Le fait de demander un numéro de téléphone au moment de la création de compte influera fortement le taux de rebond. Le fait de rendre optionnel le numéro de téléphone peut faire baisser le taux d’abandon de 35 points.

Afin de limiter les abandons de panier, nous conseillons donc de rendre certaines cases de votre formulaire optionnelles, et d’expliquer pourquoi vous en auriez besoin. Pour ce faire, ajoutez un élément distinctif tel qu’un astérisque à votre champ, pour que les utilisateurs comprennent que celui-ci est obligatoire.

Pour illustrer nos propos, nous vous proposons quelques exemples de retours utilisateurs que nous avons vu passer au cours du temps.

“Je ne suis pas encline à fournir mes coordonnées téléphoniques. Le fait de transmettre mes coordonnées va faire que je vais être enregistrée dans une base de données et je risque d'être harcelée par cette société, ou bien encore, je serai contactée mais à un moment qui ne me convient pas.” Sandrine, 42 ans. 

“Concernant le site en lui-même, je pense que l'obligation de remplir toutes ces infos pour connaitre le tarif pourrait en démotiver beaucoup, une grille tarifaire en fonction de l'âge pourrait être plus visible.” Julien, 31 ans 

Règle numéro #4 : Préciser que les données resteront confidentielles

Il est essentiel de mettre en avant les critères de la loi RGPD afin de rassurer ses clients et utilisateurs : ces derniers doivent donner leur consentement pour les cookies et pour que les données le concernant soient récoltées. Ces données doivent être sécurisées et des durées de conservation doivent être définies.

Règle numéro #5 : Créer un formulaire le plus court possible 

Il y a un tri à opérer entre les informations que vous souhaitez récolter et celles nécessaires à la finalisation de la commande. Si les demandes d’informations n’ont pas de lien avec son achat, il est fort probable que votre client abandonne ou qu’il indique de fausses informations.

Sur mobile, le défi d’un bon formulaire est plus grand. L’utilisateur peut être facilement distrait par un appel, une notification, un message. En moyenne, nous observons que 40 % des utilisateurs sont interrompus dans leur expérience mobile par un média tel que Messenger, WhatsApp, SMS ou encore un appel.

“40 % des utilisateurs sont interrompus dans leur expérience mobile par un média. D’où l’importance d’un check-out rapide.”

Règle numéro #1 : Ajouter un texte en dessous des icônes 

Il est pertinent d’ajouter un titre à une icône, pour s’assurer de la bonne compréhension de celle-ci. Et ce, même si l’icône est censée être universellement reconnue. C’est d’autant plus judicieux sur Mobile, où aucune infobulle ne s’affiche au passage de la souris. 

Par exemple, sous une icône de cadis pour symboliser une liste d’achat, ajoutez-y le titre “Mon panier”

Règle numéro #2 : Utiliser uniquement des symboles connus et explicites 

Certains symboles sont ancrés dans les cultures. Par exemple, le terme réglage est apparenté au symbole engrenage. Soyez sûr d’utiliser des symboles que tous les utilisateurs comprendront du premier coup.

Règle numéro #3 : Favoriser les images vectorielles

Les images matricielles peuvent apparaître étirées ou pixélisées sur certains écrans en haute résolution. Pour la création d’icônes ou logos, priorisez des images vectorielles qui apparaîtront nettes pour chaque qualité d’écrans.

Règle numéro #1 : Donner le prix aux utilisateurs, simplement

Lorsque les utilisateurs recherchent le prix d’un produit ou d’un service, il est vivement conseillé de leur donner accès à cette information, sans ambiguïté ni subtilité.

Les demandes de devis qui requièrent de très nombreuses informations avant de donner un prix sont souvent mal perçues et génèrent des taux d’abandon importants. Idem, les notes de bas de page ou les “fausses promos” qui ne s’appliquent que dans des cas précis constituent des points d’irritations majeurs. Il est plus judicieux de préciser directement le prix, pour être clair dès le départ avec vos clients.

“Nous n'avons aucune information sur le détail de l'offre Santé. Je préfèrerais que l'on me fournisse la description de l'offre avant de me demander mes coordonnées, date de naissance, etc. Je ressens comme une manipulation pour avoir des infos plutôt que de me renseigner,” Eric, 55 ans 

Règle numéro #2 : Être clair sur les frais de livraison et les paniers minimum

Il est recommandé d’afficher explicitement les frais de livraison associés à une commande. La mention “Frais de livraison inclus” peut porter à confusion : est-ce que le prix de la livraison est intégré dans le prix initial ? ou y a-t-il une majoration ?

Les paniers minimums sont possibles et généralement acceptés par les utilisateurs s’ils en ont connaissance tôt dans leur parcours. Lorsqu’ils le découvrent au moment de valider leur commande, c’est un irritant majeur.

Règle numéro #3 : Donner le prix sans attendre la page produit 

Les utilisateurs regrettent souvent de ne pas voir les prix sur la page “liste” ou “résultats”. Cela les oblige à des aller-retours entre la page produit avec le prix et la page “résultats”, ce qui génère une perte de temps désagréable. Même sur les sites de réservation ou de voyage, le prix reste un élément attendu très tôt par les utilisateurs. 

Règle numéro #4 : Préciser le prix unitaire 

Sur les sites d’achat de billet ou de réservation, il n’est pas rare de réserver pour plus d’une personne. Il est donc essentiel que l’utilisateur puisse comprendre, quel que soit l’endroit où il se situe sur la page, si le prix indiqué est par personne ou s’il s’agit du montant global.

Règle numéro #5 : Sur une marketplace, expliquer aux utilisateurs les différences de prix

Les informations dont disposent les utilisateurs ne leur permettent pas toujours de comprendre qu’ils sont sur une marketplace. Selon les retours collectés via notre plateforme :

• 35 % à 60 % des utilisateurs n'avaient pas compris que certains produits étaient vendus par des vendeurs tiers.
• 20 % à 30 % des utilisateurs mobile n'avaient pas vu la différence entre les produits du site et les produits des vendeurs tiers
   

Pour un même produit, la différence de prix entre la marque principale et ses partenaires marketplaces laisse donc un sentiment confus parmi les utilisateurs. Certains pensent même qu’il s’agit d’un bug.

Nous recommandons d’appliquer une police et un code couleur spécifiques sur les produits de vendeurs tiers, tout en explicitant les différences lorsqu’il y en a (par exemple produit reconditionné ou d’occasion).

“Non, je n'avais pas compris, je pensais que les produits étaient exclusivement vendus par le site, et non par un tiers, je pense qu'il y a réflexion à faire sur la bonne méthode explicative afin que le plus grand nombre comprenne les offres.” Cécile, 39 ans

Règle numéro #1 : Faciliter le retour en arrière 

Le doute est un sentiment assez fréquent au moment où vos clients arrivent sur la page paiement. Nous observons souvent des retours en arrière pour vérifier les informations fournies comme par exemple l’adresse de livraison, la quantité etc… C’est particulièrement vrai dans les parcours de souscription de contrat en ligne, où vos clients peuvent chercher à moduler le prix de leur contrat en changeant une variable. Si la seule option possible est de valider le contrat, sans option de “retour” possible, c’est un motif d’abandon assez évident.

Pour limiter ce retour en arrière, il est vivement recommandé d’afficher sur la page paiement toutes les options et informations essentielles saisies par l’utilisateur lors de son parcours. C’est un point de réassurance indéniable mais qui fait souvent défaut.

Règle numéro #2 : Proposer de parler à un conseiller pour les achats “complexes”

Pour des achats “complexes”, type assurance ou voyage avec des paniers importants et nécessitant l’envoi de documents personnels, vos clients et utilisateurs s’attendent généralement à pouvoir échanger avec un conseiller. La présence d’une fonctionnalité de chat ou d’appel est un moyen de réassurance efficace. 

Sur des offres de crédits à la consommation et d’assurance auto, en moyenne, 60 % des utilisateurs considèrent comme “utile” ou “très utile” la possibilité de contacter un conseiller.

Règle numéro #3 : Proposer plusieurs moyens de paiement 

La CB n’est pas le seul moyen de paiement attendu par les utilisateurs. Lorsque PayPal n’est pas proposé, 30 % d’utilisateurs se plaignent de ne pas pouvoir utiliser ce moyen de paiement.

"De devoir rentrer mon RIB + la carte bancaire d'un coup peut effrayer. Il faudrait proposer avant tout la possibilité de contacter un conseiller par téléphone ou chat si la personne a des questions avant de payer " Julie, 39 ans.

“Paiement par carte uniquement, je pense qu'on attend d'une enseigne de cette taille de pouvoir au moins payer par PayPal.” Bastien, 28 ans.