UX design : comment l'expérience utilisateur fait progresser vos conversions

Un site peut être beau et pourtant ne rien produire. Le visiteur ne trouve pas le tarif, hésite devant deux boutons, abandonne un formulaire au sixième champ. L'UX design (pour User Experience, l'expérience utilisateur) s'occupe exactement de cela : faire en sorte que la personne qui arrive avec un besoin trouve sa réponse et passe à l'action sans effort. Ce guide présente les principes qui comptent pour un site d'entreprise, et une méthode pour vérifier le vôtre.

UX, UI, CRO : qui fait quoi ?

• L'UX (expérience utilisateur) porte sur le parcours : ce que le visiteur cherche, l'ordre des informations, le nombre d'étapes, la facilité d'usage. C'est une question de structure avant d'être une question d'apparence.
• L'UI (interface utilisateur) porte sur ce que l'on voit et touche : typographie, couleurs, boutons, champs, icônes, états au survol ou au clic.
• Le CRO (optimisation du taux de conversion) mesure le résultat et teste des améliorations, par exemple avec des tests A/B.

Les trois se tiennent. Une belle interface sur un parcours confus convertit mal ; un parcours clair mal dessiné inspire peu confiance. Le Nielsen Norman Group, référence du domaine, définit l'utilisabilité par cinq qualités : facilité d'apprentissage, efficacité, facilité de mémorisation, peu d'erreurs, satisfaction. C'est une bonne grille pour juger une page.

Six principes qui pèsent sur la conversion

1. Une hiérarchie visuelle qui guide le regard

Sur chaque page, une information doit ressortir avant les autres : ce que vous proposez. Viennent ensuite la preuve, puis l'action. La taille, le contraste, l'espace autour et la position servent à installer cet ordre. Si tout est mis en avant, rien ne l'est.

2. Moins de choix, moins d'effort

Chaque option supplémentaire demande une décision. Parmi les dix heuristiques de Jakob Nielsen figurent un design épuré, qui ne garde que l'information utile, et le fait de montrer les options plutôt que d'obliger à s'en souvenir. Concrètement : un bouton principal par écran, un menu court, des libellés qui disent où ils mènent.

3. Des conventions respectées

Les visiteurs passent l'essentiel de leur temps sur d'autres sites. Ils s'attendent à trouver le logo en haut à gauche, qui ramène à l'accueil, le contact en haut à droite, des liens qui ressemblent à des liens. La cohérence et le respect des standards font partie des heuristiques de Nielsen : l'originalité se met dans le contenu et l'image de marque, pas dans la navigation.

4. Un retour à chaque action

Le visiteur doit toujours savoir ce qui se passe : bouton qui change d'état au clic, indicateur pendant l'envoi, message de confirmation qui dit la suite (« Nous vous répondons sous 24 heures »), erreur de formulaire expliquée à côté du champ concerné. C'est la première heuristique de Nielsen : la visibilité de l'état du système.

5. Des formulaires courts et faciles à remplir

Demandez seulement ce qui sert à répondre. Les recommandations de web.dev pour les formulaires vont dans le même sens : un libellé visible pour chaque champ, le bon type de champ pour faire apparaître le bon clavier sur téléphone (e-mail, numéro), et les attributs de saisie automatique qui permettent au navigateur de remplir le nom, l'e-mail ou le téléphone à la place du visiteur.

6. Un site lisible et utilisable par tous

Un texte gris clair sur fond blanc fatigue tout le monde, et exclut une partie des visiteurs. Les règles d'accessibilité WCAG fixent un rapport de contraste minimal de 4,5:1 pour le texte courant. Web.dev recommande des zones tactiles d'environ 48 pixels, soit près de 9 millimètres, pour qu'un bouton se touche sans erreur au doigt. Ce qui aide les personnes en situation de handicap aide aussi celles qui lisent en plein soleil ou d'une main.

Les frictions fréquentes et leur correction

Pour la liste complète des erreurs qui font partir les visiteurs, et la correction de chacune, lisez notre article sur les dix erreurs qui font fuir les visiteurs.

Un audit UX en dix points, à faire vous-même

Prenez votre téléphone, ouvrez votre site en navigation privée, et répondez par oui ou par non.

1. 1 En cinq secondes sur l'accueil, comprend-on ce que vous faites, pour qui, et où ?
2. 2 Le bouton principal est-il visible sans défiler, avec un libellé qui dit ce qui se passe ?
3. 3 Le menu tient-il en quelques entrées claires, sans jargon interne ?
4. 4 Trouve-t-on un prix, une fourchette ou un point de départ en moins de trois clics ?
5. 5 Les preuves (réalisations, avis, coordonnées complètes) sont-elles près des boutons d'action ?
6. 6 Le formulaire de contact ne demande-t-il que l'indispensable, et dit-il quand vous répondez ?
7. 7 Le texte se lit-il sans zoomer, avec un contraste suffisant ?
8. 8 Les boutons et les liens se touchent-ils facilement au doigt, sans erreur ?
9. 9 La page s'affiche-t-elle vite, sans que le contenu saute pendant le chargement ?
10. 10 Aucune fenêtre ne masque-t-elle le contenu à l'arrivée ?

Chaque « non » est une piste. Commencez par ceux qui concernent vos pages de service et votre formulaire : ce sont les plus proches de la demande de devis.

Tester avec de vrais utilisateurs, même sans budget

Vous connaissez trop bien votre site pour le voir comme un inconnu. Le test le plus utile ne coûte presque rien : demandez à une personne qui ressemble à vos clients d'accomplir une tâche précise (« Trouvez le prix d'une rénovation de salle de bain et demandez un devis »), en pensant à voix haute. Observez sans aider, notez où elle hésite.

Jakob Nielsen recommande de tester avec cinq utilisateurs au plus, et de multiplier les petits tests plutôt que d'en organiser un grand : les mêmes difficultés reviennent vite. Corrigez, puis testez à nouveau.

Mesurer l'effet sur les conversions

• Dans Google Analytics 4, marquez comme événements clés les actions qui comptent (formulaire envoyé, clic sur le téléphone, rendez-vous pris), puis utilisez l'exploration de l'entonnoir pour voir à quelle étape les visiteurs abandonnent.
• Microsoft Clarity, gratuit, propose des cartes de chaleur et des enregistrements de sessions qui montrent où les visiteurs cliquent, défilent et bloquent. Comme Analytics, il passe par votre bandeau de consentement.
• Quand le trafic le permet, validez une modification importante par un test A/B. La méthode et le nombre de visiteurs nécessaires sont dans notre guide de l'A/B testing.

Changez une chose à la fois, notez la date, et jugez sur les demandes reçues plutôt que sur une impression.

Un exemple : un formulaire de devis repensé

Voici un cas type, décrit sans chiffre de résultat, tel qu'il se présente souvent sur un site d'artisan ou de prestataire.

• Avant : un formulaire de dix champs, tous obligatoires (dont l'adresse postale complète et « Comment nous avez-vous connus ? »), un bouton « Envoyer » en bas de page, aucun message après l'envoi, et des erreurs signalées en rouge en haut du formulaire, sans dire lequel des champs pose problème.
• Après : quatre champs (nom, e-mail ou téléphone, type de projet, message), la saisie automatique activée, un bouton « Recevoir mon devis » visible dès l'arrivée sur la page, un message sous le bouton qui précise le délai de réponse, des erreurs affichées à côté du champ concerné, et une page de confirmation qui dit la suite.

Les informations retirées ne sont pas perdues : elles se demandent au premier échange, quand le client est déjà engagé. Pour mesurer l'effet, comparez les envois du formulaire sur des périodes comparables, ou lancez un test A/B si le trafic le permet.

UX et référencement : ce que Google regarde

Google ne note pas votre design, mais plusieurs aspects de l'expérience comptent pour lui. Il recommande vivement de bons Core Web Vitals, qui mesurent la vitesse, la réactivité et la stabilité de vos pages. Il rappelle aussi que les interstitiels et boîtes de dialogue intrusifs, qui masquent le contenu, peuvent l'empêcher de bien comprendre la page et nuire à vos performances dans la recherche. Le détail des mesures est dans notre guide des Core Web Vitals.

Le reste agit de façon indirecte : un visiteur qui trouve vite sa réponse revient, recommande, et cite plus volontiers votre site.

Sur nos projets : le site Footpass

Footpass est une plateforme du football professionnel. Le site que nous avons conçu pour elle est construit autour d'une seule action : faire installer l'application. Plutôt que de décrire le produit en paragraphes, il le montre en mouvement, tel qu'on l'utilise. Même la page d'erreur 404 propose un mini-jeu de tirs au but, pour garder le visiteur au lieu de le perdre. Le détail est dans l'étude de cas Footpass.

Par où commencer

Faites l'audit en dix points sur votre téléphone, puis le test des cinq secondes avec une personne extérieure. Corrigez d'abord le haut de vos pages de service et votre formulaire. Si votre site doit capter des demandes à partir d'une campagne, nos landing pages sont conçues autour d'une seule action ; pour un site complet, voyez nos sites vitrines. Et pour en parler, prenez rendez-vous : nous regardons votre parcours avec vous.