Découvrez 23 fondamentaux qui ne doivent échapper à la vigilance d’un webmaster. En renforçant l’utilisabilité et l’ergonomie de votre site web, ces éléments assurent une expérience optimale pour vos utilisateurs.
Beaucoup de gens jugent la qualité d’une entreprise qu’ils ne connaissent pas sur l’aspect et la présentation de son site web. Ce n’est pas tout le temps juste, mais quelle importance ? Il incombe donc aux compagnies de veiller à ce que leurs pages diffusent et laissent une bonne impression, une impression qui permet d’établir la confiance, de partager du contenu et des valeurs, et enfin de placer et de vendre produits et services.
Nous avons donc confectionné pour vous la checkliste suivante, qui peut être utilisée pour vérifier rapidement les bases d’une bonne expérience utilisateur sur votre site.
L’accessibilité d’un site web signifie que ce dernier est pleinement exploitable, sans restriction et pour tout le monde. Peu importe le navigateur, l’accès Internet ou le périphérique que vous utilisez, mais aussi les restrictions physiques que vous pourriez avoir (déficience visuelle, problème pour voir les couleurs, etc.). Sur la toile, personne ne devrait être exclu des offres ou contenus.
Le premier chargement d’un site web doit être suffisamment rapide et sans effets flicker. Si le temps de chargement de la page est inférieur à 2 secondes, on peut alors parler d’expérience utilisateur positive.
Conseil : testez votre temps de chargement avec des outils tels que PageSpeed de Google ou RYTE Website Success.
Illustration 1 : Vérifier le temps de chargement avec Ryte
Immédiatement après le chargement de la page, l’utilisateur commence à s’orienter. Il est important que le contraste entre l’arrière-plan (images) et la police de caractères soit suffisamment appuyé. C’est la seule façon de transmettre les premiers messages importants et d’encourager l’utilisateur à continuer sa lecture.
Attention : surtout avec les bannières et les fenêtres glissantes, il arrive encore et toujours que les textes ne sont pas bien ou incomplètement illisibles à cause du contenu de l’image de fond. Cela arrive souvent sur les sites web responsive. Par conséquent, la lisibilité des textes sliders doit être soigneusement vérifiée, et ce pour tous les périphériques.
Illustration 2 : le texte est bien lisible.
Illustration 3 : l’utilisateur doit regarder plus près pour prendre connaissance des textes.
Outre le contraste, il est également important que les contenus affichés soient faciles à lire. Pour ce faire, la taille de la police et l’espacement des lettres doivent assurer une certaine harmonie du texte.
Conseil : idéalement, les titres H1 doivent être affichés selon la police de base 3em.
Certains développeurs sont toujours aussi enthousiastes pour les animations proposées par JavaScript et CSS. Comme c’était déjà le cas il y a plus de 15 ans, l’introduction du Flash Player doit être basée sur une exploitation équilibrée, notamment en ce qui concerne la mémoire requise.
Pour les utilisateurs d’ordinateurs et de smartphones plus modestes, les animations gourmandes en mémoire entraînent d’énormes ralentissements et des fautes partielles sur le site. Il faut donc garder à l’esprit que les animations doivent être intégrées raisonnablement, d’une manière qui favorise l’apprentissage et discrète techniquement parlant. Sur les tablettes, on a tendance à faire défiler encore plus rapidement et il arrive souvent que l’utilisateur soit confronté à des effets et contenus vides, car les animations des éléments « en vol » ne sont pas assez rapides.
Conseil : N’utilisez pas de parallax scrolling inutile et d’animations de fondu enchaîné via JavaScript et réduisez le nombre de bibliothèques JS à 2 ou 3, pas plus !
Illustration 4 : malheureusement, aucun texte n’est visible. L’utilisateur a fait défiler cette page trop vite pour les ressources disponibles.
Finalement, c’est bien l’aperçu, la vue d’ensemble d’une page qui fait le plus d’effet. Il est préférable que la page soit bien rangée, par exemple à l’aide de tableaux comme c’est le cas ci-dessous. Tous les titres et textes doivent se conformer à cette template. Cela crée une impression de propreté et les utilisateurs attestent de la compétence, de l’ordre et de la maîtrise du site. La confiance dans l’offre augmente automatiquement.
Des cadres et des templates standards facilitent le travail et, dans de nombreux cas, offrent des implémentations simples pour les usages mobiles. De nombreuses erreurs surviennent surtout lors de l’intégration de vidéos, d’images et de tableaux. Ici, vous devez faire attention à la représentation correcte en mode portrait sur les smartphones, car il s’agit de la variante d’utilisation mobile la plus répandue. Des outils comme Browserstack.com ou testobject.com ont été spécialement conçues pour tester ces aspects-là.
Illustration 5 : Capture d’écran d’un site web proposant des comparatifs de smartphones : ils sont présentés de manière propre et bien visible.
Illustration 6 : Page de connexion sur le LCL sur desktop
Illustration 7 : la même page mais sur mobile : aucun élément manquant, intégration agréable.
Bon à savoir : il existe des cas où le desktop et le mobile doivent être conçus indépendamment. Le web design responsive n’est pas toujours la technique la plus appropriée, surtout quand on présente des graphiques maniables et personnalisables par l’utilisateur.
Avec Coca Cola et Marlboro, Apple est l’une des marques les plus facilement reconnaissables au monde. Cela est dû à un projet clair et une gestion exemplaire de sa corporate identity. Si des sites web doivent être créés en tant que relais de la marque, les règles de gestion doivent être respectées. L’effet secondaire non négligeable est que les règles de gestion de la marque garantissent également une meilleure ergonomie et un meilleur accompagnement de l’utilisateur.
Illustration 8 : Même sans logo ou slogan, Apple réussit à communiquer clairement sur sa marque.
Lorsque les utilisateurs ouvrent une page, la vue se déplace en haut à gauche pendant quelques millisecondes. Simplement pour savoir qui propose ce site et s’ils ont atterri sur la bonne page.
Les logos plus petits ne sont donc pas avantageux, car ils ne peuvent pas être captés assez rapidement : la confiance initiale dans le site se réduit.
Un slogan résume le contenu du site sous une forme condensée et assiste l’utilisateur dans la classification mentale du contenu. Mieux l’utilisateur comprend le contexte, plus tôt il achètera ou approfondira ses recherches.
Exemple d’un slogan fictif très explicite : « Simsalabim.fr : le plus grand magasin de magie de France »
Illustration 9 : ici, le slogan est précis. Groupama se présente clairement en tant que assureurs.
Illustration 10 : que propose exactement ce site ? On ne sait pas vraiment…
Les tests d’utilisabilité montrent toujours le même comportement de l’utilisateur sur les pages d’accueil. Ils ouvrent la page, font défiler de 2 à 3 pages vers le bas, puis remontent.
La phase d’exploration commence alors sur la page d’accueil. Les éléments sont « appris » : les utilisateurs se souviennent du texte, des images et des liens, comment fonctionne la navigation et où est placé le contenu. Si les utilisateurs peuvent enregistrer cela en 5 secondes, c’est bon.
Conseil : une attention particulière et un sens du design sont nécessaires pour divers contenus tels que les diaporamas ou les formulaires. Ceux-ci doivent être reconnus comme des éléments interactifs dans les 5 secondes.
Les prestataires plus petits et moins connus sont souvent jugés sur la base de leur page de contact ou « à propos ». Cette page doit donc être rapidement trouvée. Idéalement, c’est un lien direct dans la navigation principale à droite ou en bas, dans le pied de page.
Quand on visite un site web, on ne le fait pas forcément parce qu’on cherche à acheter quelque chose : le but n’est pas toujours commercial. Les clients ou prospects ont besoin d’un contact avec une entreprise. Peut-on accéder rapidement aux numéros de téléphone, à l’adresse, aux emails ou autres coordonnées sur la page ?
Sur les sites web responsive, il arrive souvent qu’en mode smartphone, il faut faire défiler pendant longtemps pour obtenir les informations ou les liens dans le pied de page. L’affichage correct des numéros de téléphone est également important pour que les appels puissent être effectués directement à partir des smartphones. Il est donc judicieux de placer un bouton d’appel à côté du menu mobile.
Illustration 11 : ce cabinet médical propose une fonction d’appel évidente sur sa page mobile.
Plus les utilisateurs comprennent vite comment naviguer sur une page, plus ils peuvent consacrer du temps au contenu et comprendre de quoi il s’agit. Seuls ceux qui comprennent achèteront.
Des éléments significatifs et bien cliquables soutiennent le user journey à travers le site et favorisent ainsi les ventes.
Il est important que la navigation principale se distingue clairement des éléments environnants tels que les symboles de confiance, les numéros de téléphone ou les espaces publicitaires.
Conseil : un espace blanc suffisant autour de la navigation principale peut également faciliter la reconnaissance. Cacher la navigation principale derrière le bouton burger, surtout connu dans le cadre d’un usage mobile, est devenu très tendance sur les pages desktop, mais la vitesse de navigation s’est détériorée. Sur les appareils mobiles en revanche, le bouton burger est établi comme un modèle d’utilisabilité et doit être utilisé.
Un site web a 2 missions : répondre à la demande et la créer. Les visiteurs qui savent exactement ce qu’ils veulent utilisent la navigation principale ou la fonction de recherche pour surfer.
Conseil : il est donc important que les éléments du menu décrivent clairement où mène le lien. Par exemple, l’élément de menu « Images » d’une page d’hôtel vaut mieux que « Impressions ».
La mémoire humaine à court terme peut se souvenir de 5 choses sans trop d’efforts. S’il y a plus, le processus de réflexion ralentit.
Conseil : pour que les utilisateurs puissent trouver plus rapidement les offres d’un site web, il est important de ne pas utiliser plus de 5 à 7 entrées dans la navigation principale. Dans les menus déroulants, ce peut être un peu plus, car les utilisateurs se concentrent plus et lisent par conséquent plus lentement.
Les utilisateurs attendent souvent de pouvoir accéder à la page d’accueil en cliquant sur le logo d’un site web. Ce sont des modèles appris – ce que l’on appelle les attentes des utilisateurs ou user expectations.
Conseil : il existe en ce moment beaucoup de templates qui n’offrent plus cette fonctionnalité. Vérifiez donc cette fonction sur tous les appareils et tailles d’écran.
De nombreux sites web utilisent des liens sous forme de textes, de boutons et d’images. Il est important de toujours utiliser la même variante pour la même fonction afin de ne pas perturber l’utilisateur. Le meilleur effet est encore obtenu avec des liens de texte bleus soulignés : c’est en effet appris et intériorisé par toute la communauté des internautes, même si ce n’est pas le plus esthétique.
Illustration 12 : où peut-on cliquer ici ? Les liens et les éléments interactifs sont-ils reconnaissables ? Ce n’est pas ici pas très clair.
Dans de nombreux cas, le contenu est plus important que le design et la mise en page. Celui qui aborde directement les problèmes des clients obtient de l’attention et est entendu. Pour que les utilisateurs puissent percevoir les arguments, ils doivent être clairement détectables et compréhensibles.
Les titres guident les visiteurs. Plus un titre est attrayant et véhicule des émotions, plus il est susceptible d’attirer l’attention des visiteurs, qui resteront par conséquent sur la page plus longtemps. Cela vaut également pour les segments B2C et B2B. Il faut vérifier si les titres indiquent clairement ce que l’utilisateur doit lire ou s’il est appelé à acheter directement le produit.
L’homme s’habitue inconsciemment à un certain environnement. Les couleurs, les formes et les compositions jouent un rôle important dans ce processus. Aussi, coordonnez les couleurs que vous employez.
Ceci peut être facilement vérifié avec l’add ons de Mozilla Webdevelopper.
Illustration 13 : Sixt a décidé d’utiliser le orange pour souligner des éléments individuels, par ailleurs souvent cliquables.
Un site web doit donner une impression d’ordre. En plus de la trame principale, on y parvient en utilisant des polices de caractères bien équilibrées.
Conseil : assurez-vous que chaque rubrique (H1 à H6) est définie différemment et que la police de caractères est uniforme. Un maximum de 2 polices doit être utilisé sur une page et dans les images. Pour trouver les paires de police qui vont bien ensemble, vous pouvez utilisez l’outil Fontpair.
Les pop-ups ou les effets de fondu enchaîné sur tout l’écran dérangent la plupart des visiteurs et sont perçus comme gênants, surtout quand ces derniers consultent le site au moyen d’un périphérique mobile. Google a réagi en conséquence et dévalorise actuellement les pages mobiles avec pop-ups.
Conseil : si nécessaire, les pop-ups ne doivent donc être ajoutées que dans les sections nécessaires du site et là où le flux de la conversion ne peut pas être affecté. Il est essentiel d’éviter les pop-ups dans les processus de caisse et de paiement.
Les gens ne lisent pas tout sur un site web. Ils survolent plutôt et s’arrêtent là où cela semble intéressant. Il est donc important de décomposer le contenu en paragraphes individuels.
Conseil : une règle simple des journalistes est : « Un paragraphe par pensée ».
Pour permettre à l’utilisateur de saisir et d’évaluer le contenu d’un paragraphe au préalable, il est judicieux de donner à chaque paragraphe un titre ou un intitulé.
Conseil : le titre doit résumer brièvement le contenu et éveiller la curiosité. On peut ainsi s’adresser directement aux utilisateurs et placer astucieusement les arguments de vente.
Illustration 14 : l’utilisateur peut ici, juste au moyen des titres, déterminer si le paragraphe vaut la peine d’être lu ou pas.
Lorsque les utilisateurs arrivent à la fin d’une page, ils doivent être redirigés. Par conséquent, des appels à des actions clairs ou autres liens doivent être placés au bas de toutes les pages. C’est la seule façon de garder les utilisateurs sur sa page, en contribuant ainsi à l’augmentation des ventes (si c’est l’objectif).
Le but de tout site web devrait être d’amener les utilisateurs à agir et/ou interagir. C’est le fameux appel à l’action ou call-to-action. Une bonne utilisabilité et la mise en œuvre de ces astuces constituent la base pour augmenter le taux de conversion.
De nombreux tests, analyses et outils ne montrent leur véritable puissance qu’après la mise en place de règles d’utilisabilité importantes. Par conséquent, l’utilisabilité doit être améliorée avant la mise en place de tests A/B, afin d’obtenir des résultats concrets et exploitables pour une optimisation ultérieure.
Rien ne vaut la pratique – faites analyser votre site web avec Ryte FREE !
Et c’est gratuit !Écrit le 05.02.2018 par Pauline Mitifiot.
Après des études d’histoire et de gestion de projet qui lui permirent de découvrir la Turquie, l’Italie et l’Allemagne, Pauline posa ses valises à Munich car elle ne pouvait plus se passer de son bretzel quotidien. Curieuse et dynamique, elle contribue à la section française du blog et du Wiki de Ryte.
Suivi, analyse et optimisation de vos actifs numériques grâce à notre technologie unique
S’inscrire gratuitement