Les règles d’UX Design en 2023 ne sont pas bien différentes des règles de 2022, pas du tout même. Mais, pour commencer, qu’est-ce que l’UX Design ?

Littéralement, il s’agit de la conception (Design) de l’expérience utilisateur (User Experience). Ce n’est pas plus clair ?
En bref, lorsque l’on créée une application, un site ou une simple page web, nous avons recours à une conception d’interfaces. Dans le cas de l’UX, l’objectif est de rendre l’expérience utilisateur la plus agréable et intuitive possible. Nous parlons souvent d’ergonomie.

⚠️ À ne pas confondre avec l’UI Design qui concerne la conception graphique et visuelle de l’interface ⚠️

Au-delà des règles qu’il faut respecter en UX Design, je dirais que c’est une question de bon sens, d’une façon de penser qu’il faut adopter pour cocher naturellement toutes les cases, ou presque : l’empathie. Se mettre à la place du visiteur ou placer le visiteur au centre de sa stratégie.

En sachant cela, avec l’avènement des plateformes et outils no-code, la création d’un site web est à la portée de n’importe qui.

Quoi ? Je vais bientôt perdre mon taff ?

Pas vraiment (ouf). En fait, il ne suffit pas de publier un site à partir d’un modèle sur Wix … Ça fonctionne, certes, mais nous sommes loin d’un site optimal qui sera bien référencé et générera des leads / ventes 👎

J’expose ici les 6 règles d’ergonomie qui sont, à mon sens, essentielles au webdesign en 2023. Bien entendu, cette liste est non exhaustive et je serais ravi d’échanger avec vous à ce sujet :

Votre site web est une vraie pépite et donne une claque visuelle ? C’est super ! Mais l’avez-vous déjà essayé sur mobile ? Ou sur tablette ? (j’espère que oui 🤞).

C’est essentiel que toutes les pages s’adaptent parfaitement aux différents formats d’écrans utilisés par vos visiteurs. Aujourd’hui 92% des internautes naviguent sur mobile, ce n’est pas pour rien que l’on dit “mobile first !”.

C’est justement tout l’enjeu ici, d’abord penser aux visiteurs sur mobile qui ne disposent que d’un petit écran pour consulter votre contenu. Pas de fioritures, pas d’animations trop complexes ou trop lourdes, nous visons le minimalisme et l’efficacité.

Ensuite, il est possible d’adapter ce contenu à des formats plus larges. Ce n’est qu’à ce moment-là que l’on se lâche sur l’UI Design (l’esthétique).
Libre à vous d’ajouter davantage de photos, d’illustrations ou des animations qui ne seront visibles uniquement sur format PC / Mac.

Pour savoir si votre site est responsive, faites un clic droit sur la page de votre choix et rendez-vous dans “inspecter”. Comme sur l’image ci-dessous, il est possible de sélectionner différents formats d’affichage.

Combien de temps êtes-vous prêts à attendre qu’une page web se charge avant de la quitter ? (Hors besoin spécifique, le site impots.gouv ne compte pas 😉). La moyenne des internautes est de 3 secondes, au-delà, vous perdez 53% de ces derniers 📉

Vous êtes le meilleur acteur de votre marché, des informations claires avec une réelle valeur ajoutée pour le client, mais seulement 47% des internautes qui vous découvrent atteindront votre page d’accueil. Quel gâchis !

Pourtant, une page web qui se charge rapidement ne relève pas de la magie noire. Voici deux astuces pour gagner en performances :

Optimiser vos fichiers photos
La première chose à faire est de choisir la bonne taille pour vos images. Pourquoi importer une image de 4000 pixels de large alors qu’elle sera affichée au maximum à 1000 pixels de large sur votre site ? Excepté pour les bannières, je préconise une taille de 900 pixels de large maximum.

Ensuite, le format est extrêmement important. Un nouveau format “.webp” est maintenant considéré par Google comme le format par défaut (recommandé). Il permet de réduire au maximum le poids de vos images. Malheureusement, des outils comme Photoshop ou Canva ne permettent pas encore d’exporter nativement à ce format. Pour WordPress, l’excellent plugin Imagify le fait pour vous.

Enfin, par défaut, toutes les images de votre page se chargent lorsque l’utilisateur charge cette dernière, et cela même si elles ne seront visibles qu’en bas de page. Il est vivement conseillé d’utiliser le lazy loading : charger les images, de manière différée, juste avant que le visiteur arrive à son emplacement.

À savoir : ces manipulations peuvent impacter la qualité de vos images, mais il faut trouver un juste-milieu entre poids et définition. Il n’est pas utile d’avoir une qualité en 4k lorsque vos images seront lues sur des écrans de définition 1080p ou affichées en tout petit.

Mettre ses ressources en cache
Que ce soit pour minifier (compresser) les ressources JavaScript et CSS ou encore pré charger des ressources dans le navigateur, la mise en cache est un excellent moyen de gagner en performances. Sur WordPress, le plugin WP Rocket est bien souvent recommandé (ce plugin permet également le lazy loading des images).

⚠️ Attention : certaines manipulations peuvent “casser” votre site internet, faites une sauvegarde avant de vous lancer dans le paramétrage du plugin. ⚠️

Vos visiteurs sont souvent à la recherche d’une information, plus ou moins précise. Aidez-les, guidez-les et ils vous le rendront ! Faciliter la navigation de ses visiteurs, c’est leur permettre de trouver l’information qu’ils cherchent, chez vous. De quoi les rendre satisfaits et augmenter vos chances de les convertir en clients.

Soignez vos titres de pages qui doivent être aussi clairs que possible, mais surtout, organisez-les.

Ici, l’objectif est le même que précédemment : rendre l’information accessible facilement et rapidement. Mais cette fois, on s’intéresse aux pages et leurs contenus.

Vos pages doivent être construites de manière à orienter rapidement le visiteur vers ce qu’il cherche. La hiérarchie de vos titres doit être limpide pour vos visiteurs, mais aussi pour les robots de Google qui se chargent de vous référencer sur le moteur de recherche (titre principal, sous-titres…). Pour cela, vous devrez utiliser les balises “Hn” :

L’accessibilité d’un site web est sa capacité à être lisible et compréhensible de tous. Je ne parle pas ici de contenu sémantique, mais bien de lisibilité.

Contraste des couleurs
Vous devez impérativement bannir certaines associations de couleurs. Dans l’extrême, n’écrivez pas en gris clair sur un fond blanc… cela paraît évident mais, par exemple, écrire en blanc sur un fond noir ou gris foncé n’est pas excellent pour l’accessibilité. C’est d’ailleurs ce qui créée le débat à propos de la surutilisation des modes sombres sur nos appareils.

Privilégiez des couleurs qui se marient bien, mais qui permettent de contraster pour qu’une personne âgée ou malvoyante puisse lire votre contenu le plus facilement possible. Testez le contraste des couleurs de votre site via ce lien : www.experte.com/fr/accessibilite/contraste

Taille des textes
Toujours pour être accessible aux personnes malvoyantes, évitez les textes trop petits. Sur le web, la taille de police minimum est de 14 pixels. Ne descendez pas en dessous. Si cela n’impacte pas votre design, vous pouvez augmenter la taille minimum à 16 pixels, ce qui devient très lisible.

Poids de vos pages
Encore une fois, la performance de votre site internet est essentielle. Vous devez permettre aux personnes possédant un faible débit internet de consulter votre contenu, pour cela, il faut réduire au maximum le poids de vos fichiers multimédias (photos, vidéos ou musiques).

Quoi qu’il arrive, ces actions vous seront bénéfiques. Vous pouvez tester la vitesse de chargement de vos pages web via ce lien : https://pagespeed.web.dev/

Taille des CTA (appels à l’action)
Un CTA (call to action) est bien souvent un bouton ou un lien cliquable incitant le visiteur d’une interface web à cliquer pour continuer sa navigation, acheter un produit, télécharger une documentation ou encore s’abonner.

Dans un premier temps, un CTA visible, mis en valeur et attrayant donnera davantage envi de cliquer et donc remplira son rôle à la perfection.
Ensuite, une personne malvoyante ou encore une personne avec des difficultés motrices aura moins de mal à y accéder.

Utiliser le texte alternatif / les balises “alt”
Une balise « alt » est un texte alternatif à votre image. Dans cette balise, vous devez insérer une description textuelle de votre image qui la remplacera en cas de mauvaise connexion d’un appareil paramétré pour les non-voyants.

Bien qu’elles soient connues pour être un critère essentiel du SEO, la majorité des personnes ont tendance à oublier leur utilité première : permettre aux non-voyants de comprendre vos images (ce qu’elles contiennent, à quoi elles servent). C’est avant tout rendre votre site internet accessible à ces derniers qui sont équipés d’outils lisant les pages web à voix haute.

C’est la base de toute démarche s’inscrivant dans le cadre du management de la qualité : l’amélioration continue. Partez du principe que votre site ne sera jamais parfait, vous ne pourrez pas plaire à tout le monde, mais vous pouvez essayer de plaire au plus grand nombre.

Pour cela, testez ! Osez essayer des nouveaux designs ou des nouvelles structures pour votre site web, mais surtout, mesurez les conséquences. Obtenez-vous plus de trafic ? Moins ? Perdez-vous en trafic, mais augmentez-vous vos ventes ou autres conversions ?

Bien entendu, une fois que l’on a recueilli ces données, il faut en analyser les causes et les conséquences pour mener des actions correctives et donc améliorer l’expérience utilisateur. Si vous avez bien suivi, c’est là que vous comprenez qu’il faudra encore mesurer les résultats de ce nouveau changement… l’amélioration continue ! ✨

Mais concrètement, comment réaliser des tests ?
Vous avez sûrement déjà entendu parler de l’A/B testing, une pratique qui consiste à diffuser deux versions différentes de son produit à deux panels de visiteurs semblables. Google vous permet de le faire très facilement.

L’avantage de cette pratique est de pouvoir comparer en temps réel l’efficacité de deux interfaces ou parcours utilisateurs pour choisir le plus efficace.

Je recommande d’utiliser Google Optimize qui se connecte très simplement avec Google Analytics.

Pour résumer, soyez empathique(s). Comme pour toute action entrant dans le cadre de votre stratégie digitale, apprenez à connaître votre cible. Mieux vous la connaitrez, plus il vous sera facile de vous mettre dans la peau de vos visiteurs. Il vous sera alors aisé de faire preuve de bon sens et de réaliser des designs ergonomiques et adaptés.

• Adaptez-vous à l’ensemble des formats d’écrans disponibles.

• Améliorez les performances de votre site web.

• Organisez vos pages et vos contenus de manière intuitive.

• Investissez dans des outils d’optimisation de votre plateforme.

Et enfin, pensez à l’amélioration continue. Ne restez pas sur vos acquis et testez sans cesse de nouvelles choses. N’ayez pas peur de rater, votre expérience n’en sera que plus grande pour gagner en efficacité.