Ergonomie web

Outils Web publié le 21 Fév 2024 mis à jour le 11 Mar 2024 Guillaume

Avez-vous déjà ressenti un sentiment d'humiliation face à une caisse automatique ou un distributeur de billets ? L'ergonomie analyse les besoins des utilisateurs et fait en sorte que les machines et les interfaces répondent au mieux à leurs besoins.

Définitions

Étymologie : du grec ergôn « travail » et nomos « loi »
À l'origine, le but est d'aménager le travail, améliorer les conditions de travail et à accroître la productivité.

Le mot ergonomie ne figure pas dans le Petit Larousse illustré de 1940. A cette époque, améliorer les conditions de travail n'était pas une priorité.

Le Larousse de poche édition 1990 indique : "Étude de l'adaptation du travail et des machines aux possibilités de l'homme."

Selon Alain Wisner, médecin français (1923/2004), considéré comme un des pères de l'ergonomie : "L'ergonomie est l'ensemble des connaissances scientifiques relatives à l'homme et nécessaires pour concevoir des outils, des machines et des dispositifs qui puissent être utilisés avec le maximum de confort, de sécurité et d'efficacité."

En ce qui concerne la sécurité, elle est plus ou moins importante selon les domaines. Par exemple, la sécurité est plus importante dans la conception d'une tronçonneuse que dans la conception d'un site web.

L’ergonomie améliore l'expérience utilisateur (qualité de l'interaction avec une machine ou une interface)

Au départ utilisée dans le cadre du travail, l'ergonomie concerne à présent beaucoup d'appareils et d'interfaces de notre quotidien. On peut donc évaluer l'ergonomie de toutes sortes d'objets, d'interfaces ou de machines. Ce n'est pas à l'homme de s'adapter à la machine, mais c'est à la machine de s'adapter à l'homme.

Les critères de l'ergonomie : utilité et utilisabilité

Utilité

Ce que votre site web permet de faire ou ce qu'une machine permet de faire. Par exemple, une machine à café sert à vous servir des cafés.

Utilisabilité

Facilité d'utilisation d'un service, facilité d'emploi d'un appareil et au final, satisfaction des utilisateurs.
Exemple : Comment la machine à café va vous servir des cafés ? Va-t-elle le faire de façon simple et intuitive, ou va-t-elle être compliquée à manier ? Serez-vous satisfait une fois le café servi ?

La norme ISO 9241 définit l'utilisabilité comme suit : "Degré selon lequel un produit peut être utilisé pour atteindre des buts définis avec efficacité, efficience et satisfaction."

Efficacité versus efficience
Tout se joue dans la rapidité et l'optimisation dans l'efficience (notion de rendement et de rentabilité), tandis que l'efficacité cherche à faire les bonnes tâches, peu importe le temps ou l'argent que cela prendra.

Les théories de la Gestalt

Gestalt est un terme allemand qui signifie forme. Notre cerveau analyse le monde comme un ensemble de formes.

Au premier abord, on perçoit un site web comme un ensemble de formes disposées les unes à côté des autres et plus ou moins regroupées.

Loi de proximité

Notre cerveau tend à regrouper les choses qui sont proches physiquement. La proximité visuelle évoque une proximité thématique.

On peut donc tirer avantage de cette loi sur un site web. Lors de l'achat d'un timbre sur le site de La Poste, l'option de suivi fait immédiatement suite au choix de Lettre verte :

La proximité de l'option facilite le choix éventuel

Mauvais exemples de proximité :

Les vrais articles de Libération sont mélangés aux articles sponsorisés, bien que différenciés par un arrière-plan gris, ils sont trop proches et on risque des les confondre.

Sur le blog OMG Ubuntu!, la zone de commentaires est trop éloignée des articles, on doit marquer un temps d'analyse pour comprendre qu'il s'agit des commentaires de l'article : https://www.omgubuntu.co.uk/

Loi de similarité

Notre cerveau a tendance à regrouper les choses qui se ressemblent. Ces ressemblances suggèrent une similitude thématique. A l'inverse, une différence de style graphique peut suggérer une thématique différente.

Beaucoup de sites de presse utilisent la loi de similarité pour générer des clics sur des articles sponsorisés :

Il ne faut pas forcer l'utilisateur à réfléchir. Lorsqu'une page respecte les théories de la Gestalt, le parcours visuel et mental se fait naturellement.

Le point focal

Lorsque nous découvrons un site, notre attention se porte de suite vers les éléments éclatants qui se détachent du reste. Ce mécanisme serait, aux origines de l'Homme, un réflexe inné pour nous protéger des prédateurs.

En raison de sa taille et de son positionnement, le bouton de l'application *Shazam* focalise toute votre attention. On ne peut pas le manquer pour identifier une belle mélodie !

Effet négatif : un site web qui utilise trop de points focaux les rend invisibles et la démarche devient contre-productive : abus d'animations, de caractères gras, etc.

Loi de clôture

Quand une forme est partiellement représentée, notre cerveau a tendance à compléter naturellement les espaces vides pour la représenter intégralement.

On peut exploiter cette loi pour jouer avec les alignements et les espaces vides d'un site. Il n'est plus nécessaire de tout encadrer pour définir les espaces d'un site comme on le faisait il y a 20 ans.

Sur le site SoundCloud, les espaces permettent de délimiter facilement les blocs. Il n'est pas nécessaire d'encadrer la pochette de l'album avec son titre et son échantillon sonore.

Comprenez la loi de clôture pour améliorer vos designs

Loi de Fitts

En 1954, Paul Fitts propose cette loi pour améliorer l'ergonomie des cockpits d'avion : le temps que l'on met pour atteindre une cible est proportionnel à la distance à laquelle elle se trouve, ainsi qu'à sa taille. En d'autres termes, plus une cible est proche et grande, plus vite on l'atteint.

Sur le web, on doit augmenter la taille des liens ou boutons cliquables et les rapprocher de l'endroit où se trouve le pointeur de l'utilisateur.

Augmenter la taille des éléments cliquables

Les éléments cliquables sont nombreux dans le web : liens, boutons, flèches sur les sliders, etc.

Augmenter la surface cliquable des éléments cliquables :

Sur *Twitch*, la surface des liens cliquables dépasse celle du texte et occupe toute la zone rectangulaire. C'est beaucoup plus confortable pour l'internaute.

Tenir compte des écrans :

Sur grands écrans, l'élasticité horizontale peut éloigner les boutons d'action.
Sur les mobiles, 75% des utilisateurs tiennent leurs smartphones verticalement en utilisant leur pouce. Considérer l'atteignabilité sur les mobiles. Il y a des zones plus ou moins faciles à atteindre selon la façon dont on tient le mobile.

Exploiter la proximité

Pour faire un simple cut sur une piste vidéo, les logiciels de montage sont plus ou moins ergonomiques. Certains vont exploiter la proximité, comme l'excellent Filmora :

Le cut de Filmora (ciseaux rouges) se situe juste sur l'indicateur d'instant présent, ce qui est très pratique.

En comparaison, il est plus difficile de faire un cut avec DaVinci Resolve :

Pour couper une piste, il faudra cliquer sur la lame de rasoir dans la barre d'outils, puis retourner à l'indicateur d'instant présent et cliquer à nouveau.

ou Kdenlive, pas vraiment ergonomique avec 2 icônes de ciseaux identiques sur la barre d'outils pour faire 2 choses différentes :

Pour couper la piste, il faudra cliquer sur les ciseaux qui ne sont pas à proximité de l'indicateur d'instant présent.

Problèmes :

Ergonomie Loi de proximité — Dans l'interface phpMyAdmin, le bouton *Oui* pour confirmer l'exécution d'une requête est trop éloigné du curseur, à l’extrême droite, ce n'est pas très ergonomique car on doit chercher ce bouton pendant quelques secondes avant de valider.

A l'inverse, une trop grande proximité peut être gênante : dans WordPress, la trop grande proximité des boutons de Gutenberg gêne l'accès au bloc supérieur. L'enfer est pavé de bonnes intentions :

Difficile de modifier le titre derrière cette barre d'outils, trop proche.

L'affordance

A la fin des années 70, James J Gibson invente la notion d'affordance comme étant les possibilités d'action perçues par un objet.

Par exemple, la forme d'une poignée de porte (signe implicite), un écriteau "Pousser" ou "Tirer" (signe explicite).

Ce bouton d'arrêt d'urgence vous semble-t-il assez clair dans son utilisation ?

Un objet d'interaction donne un ensemble d'indices pour comprendre comment arriver à vos fins et de quelle manière vous devez l'utiliser. Sur une page web, on doit différencier ce qui est actionnable et ce qui ne l'est pas. L'internaute doit savoir très vite si un objet est cliquable, s'il le mènera quelque part ou accomplira une action.

Les affordances optimisent l'utilisabilité.

L'affordance c'est le côté actionnable d'un élément. Cela va susciter l'action sur cet élément.

Les affordances doivent s'appliquer aux éléments primaires de navigation et non à tous les éléments de navigation, sous peine de surcharge. Par exemple, l'affordance d'un logo qui mène vers la page d'accueil n'est pas nécessaire.

Concernant les boutons, les liens, les éléments de formulaire, on peut atteindre l'affordance à la cliquabilité en jouant sur les couleurs, les formes, les libellés, l'emplacement de l'objet, etc.

L'affordance des boutons

Pour augmenter l'affordance d'un bouton, on peut jouer sur sa forme, sa bordure, sa couleur, et son libellé.

Par exemple, avec le bouton de publication d'un article dans WordPress. Le bouton Publier est ici plus affordant que le bouton de prévisualisation de l'article :

affordance bouton — Respecter la hiérarchie des affordances

Le bouton Achat immédiat dans eBay, plus affordant par son positionnement et sa couleur que le bouton Ajouter au panier :

L'affordance des liens

Les liens hypertextes traditionnels de Wikipedia. Ici la couleur conventionnelle bleue et le souligné au survol jouent un rôle primordial pour attirer le clic.

L'affordance des formulaires

Dans un formulaire de contact, chaque champ doit jouer clairement son rôle. Par exemple, les champs de texte peuvent être encadrés et libellés par des étiquettes externes (balises <label>) ou internes (attribut placeholder). Il faut que l'internaute comprenne directement qu'il s'agit d'un champ de texte et qu'il peut écrire à l'intérieur. Attention toutefois au minimalisme et à l'esthétique qui peut nuire à la compréhension d'un formulaire.

L'élément le plus affordant est le bouton d'envoi du message, ce qui est logique.

Le formulaire de connexion à l'espace client d'o2switch est un modèle de clarté. Le bouton *Se connecter* est le plus affordant et c'est bien le but recherché de cette page.

Une astuce permettant de renforcer l'affordance d'une zone de texte consiste à faire clignoter le curseur directement dans un champ de texte. Cela s'obtient avec le langage JavaScript :

Sur Gmail, lorsqu'on clique sur le bouton Connexion, le curseur clignote déjà dans le champ principal, ce qui permet de renforcer l'idée qu'il s'agit d'un champ de texte.

L'affordance erronée

L'affordance erronée est un élément sur lequel l'utilisateur croit pouvoir interagir.

Sur *FileHippo*, l'utilisateur est tenté de cliquer sur le bandeau vert pour télécharger le programme. C'est une information et non un bouton de téléchargement.

L'affordance est ici volontairement détournée : La croix pour se débarrasser de cette annonce est beaucoup plus discrète que le bouton rose *J'en profite* qui va le plus susciter l'action.

Quel bouton vous semble le plus actionnable ? Suite à une commande, ManoMano influence l'utilisateur en rendant un essai avec Deezer plus attirant que le bouton de sortie.

Les règles de l'ergonomie

L'architecture

Un site web doit être bien rangé. Les utilisateurs doivent facilement trouver ce qui les intéresse. Cela nécessite un travail de catégorisation (grouper des contenus) et de structuration (hiérarchisation des contenus).

Catégorisation

Regrouper les éléments avec un maximum de caractéristiques communes. Ce travail peut être trop subjectif, il est préférable de définir les catégories en groupe pour éviter les erreurs.

Structuration

Mettre en avant les fonctionnalités les plus recherchées et les plus importantes stratégiquement par les visiteurs.

Importance des menus

Les menus doivent comporter des intitulés clairs, sans ambiguïté, et doivent être exhaustifs.

Liens transversaux

Sans respecter l'arborescence du site, les liens transversaux sont positionnés à des endroits appropriés et permettent d'atteindre des contenus de même thématique.

Dans *OMG! Ubuntu*, les nuages de mots clés en fin d'articles permettent une navigation transversale.

Dans le célèbre et génial site *Les Docs*, les *catégories* et les *articles récents* offrent une navigation transversale durant la lecture d'un article.

L'organisation visuelle

Dans la vie réelle, nous nous repérons mieux dans un environnement simple, rangé et aéré.

Considérer la page au niveau macroscopique en définissant des zones. Le but est de limiter la charge mentale du visiteur lorsqu'il découvre votre site.

Hiérarchie visuelle

Organiser les informations de manière optimale en suivant les lois de la Gestalt. Utiliser les principes de proximité et de similarité pour organiser la page. Dégagez des zones différentiées. L'aspect général de la page web doit être bien rangé.

Distinguez des espaces : zone de navigation, contenu, informations complémentaires, pied de page.

Zoning, wireframe, mockup, prototype : https://blog-ux.com/quelle-est-la-difference-entre-le-zoning-wireframe-mockup-et-prototype/

Pour étudier les zones des autres sites, dézoomez sur votre navigateur avec les raccourcis clavier CTRL - ou cmd - :

En dézoomant, on distingue plus clairement les zones principales du site Le Monde.

La page web doit être compréhensible d'entrée de jeu. Certains éléments sont plus importants que d'autres et cela doit se voir au niveau de l'interface.

Homogénéité et hétérogénéité

Deux défauts opposés : soit une page est trop hétérogène, soit elle est trop homogène.

L'application *Mon Pont Chaban* est un peu trop homogène. Rien ne se détache.

L'hétérogénéité visuelle augmente la charge informationnelle : Plus on a d'objets, de couleurs et de typos différentes et plus on augmente la charge informationnelle.

Un peu trop hétérogène, le site *Premiere* ressemble à un arbre de Noël

Ce site n'a pas de hiérarchie visuelle, tout semble actionnable avec la même priorité.

Hiérarchiser sur le plan visuel, utiliser la verticalité. il n'est pas nécessaire de tout afficher d'un coup. De nos jours, les utilisateurs n'ont aucun problème pour faire défiler verticalement une page.

Laisser des espaces vierges, utiliser le blanc, aérer et étaler les contenus.

Arrière-plans

On peut habiller une page avec des arrière-plans "graphiques" à condition qu'ils soient légers afin de ne pas surcharger l'espace.

Arrière-plan léger pour habiller une page sans la surcharger

Les images de fond peuvent augmenter la charge informationnelle et nuire à la lisibilité :

Les sites des années 2000 avaient tendance à habiller l'espace avec des fonds surchargés rendant parfois les contenus moins lisibles.

Réduire le trop-plein d'informations. On peut faire apparaître certains éléments progressivement, ou lors de moments opportuns. Par exemple, le slider et le carrousel permettent cette facilité.

Attention à ne pas mettre d'information cruciale sur une facette du carrousel au risque que les internautes manquent cette information. Exemple avec EquipOccase qui indique le dépôt-vente sur le deuxième slide.

Le slider de *Steam* fait apparaitre des informations complémentaires au survol.

L'apparition au survol peut être particulièrement utilisée dans les menus et aussi dans les versions mobiles en cliquant sur le menu burger.

Scan visuel de l'internaute : en arrivant sur le site, il lit en diagonale pour repérer des mots clés. Une fois le scan effectué et le contenu final trouvé, le processus de lecture redevient normal. Réduire la quantité de mots sur les pages navigantes. Pour la rédaction web, on conseille de diviser par deux la quantité de mots. Évidemment, ne pas réduire le texte sur les pages finales, un article par exemple, au risque d'appauvrir le contenu.

Les animations

Ne pas abuser des animations qui augmentent la charge informationnelle. Pas plus de deux animations en simultané au risque de confusion.

Les zones publicitaires

Les formats publicitaires sont la plupart du temps standardisés dans leurs tailles. Il existe aussi des régies publicitaires comme TF1 Digital ou Figaro Médias qui propose de mettre des espaces publicitaires dans des sites tiers. Plus d'informations ici.

Pour limiter la charge informationnelle de la publicité sur votre site, on peut la positionner sur le pourtour comme le fait leboncoin. Les zones publicitaires ne doivent pas se mélanger au contenu pour éviter de tromper l'internaute. Une bonne pratique est d'indiquer Publicité ou Sponsorisé.

Publicité sur le pourtour — Le site *Sens Critique* positionne une grande publicité sur le pourtour, ce qui libère de la place pour l'article situé au centre et améliore le confort de lecture.

La cohérence

L'ensemble des pages qui compose votre site doit être cohérent. Quand les internautes ont mémorisé une façon de procéder, il est plus aisé pour eux de répéter les mêmes actions.

Navigation

La façon de naviguer doit être similaire d'une page à l'autre. Le menu doit être identique d'une page à l'autre. Ne pas modifier l'ordre des éléments ou les appellations.

Symboles cohérents

Les symboles pour des actions comme supprimer, effacer, renommer doivent être identiques. Par exemple, ne pas utiliser deux symboles différents pour ajouter un élément.

Astuce de développeur : La police de caractère Font Awesome permet d'utiliser simplement des pictogrammes cohérents et identifiables par tous.

Font Awesome propose gratuitement des symboles identifiables par tout le monde, ici les symboles pour effacer.

Styles d'interfaces cohérents

Les éléments comparables doivent se ressembler. Les éléments différents doivent avoir des styles différents.

Dans les paramétrages, Windows 11 propose encore 2 interfaces différentes, notamment pour gérer les imprimantes. Il faudrait uniformiser les paramétrages.

Interfaces dépareillées — Linux Manjaro propose parfois des interfaces dépareillées, ce qui, au-delà du problème esthétique, peut être perturbant pour l'utilisateur.

Les conventions

"L'homme n'aime pas connaître, il aime reconnaitre."
Jean Cocteau

Apprentissage externe : Un internaute a des habitudes d'utilisation sur d'autres sites web que le vôtre. Il faut en tenir compte pour ne pas déstabiliser le visiteur. Votre site web doit avoir une certaine cohérence avec les autres sites. Un site qui respecte certaines traditions web peut paraître simple et intuitif.

Extrait de Wikipédia. Les liens hypertextes colorés en bleu sont issus d'une très vieille tradition du web. Ils sont facilement identifiables et compréhensibles par le plus grand nombre.

Il vaut mieux créer un site conventionnel et facilement utilisable, qu'un site original qui va déstabiliser le visiteur. Ne pas perdre de vue l'essentiel : un site propose un contenu ou un service. Plus il a de visites, mieux c'est. Si on ne cherche pas à être vu, alors autant ne pas faire un site web. Les sites "originaux" ne sont pas les plus visités. Un créateur de site web n'est pas un artiste, c'est plutôt un artisan.

Certaines conventions ne sont pas toujours au maximum de l'ergonomie, et pourtant il vaut mieux opter pour le conventionnel afin que votre site soit le plus compréhensible possible.

Selon Jakob Nielsen, expert dans le domaine de l'ergonomie informatique, un site web est

standard s'il utilise plus de 80% des principes des autres sites,
conventionnel s'il utilise plus de 50% des principes des autres sites.

Convention de localisation

Il existe quelques traditions web qu'il convient de respecter : par exemple, le logo d'un site est très souvent en haut à gauche. Dans le menu, le lien contact est souvent à droite. Dans une boutique en ligne, le panier est en haut à droite. La connexion à l'espace client est en général située en haut à droite.

Le bandeau de Cdiscount est très conventionnel et par conséquent, vite compréhensible.

Vocabulaire conventionnel

Respecter les conventions de vocabulaire : Nom des pages : Accueil, Contact, Panier, Politique de confidentialité, etc.

Originalité & design VS convention

Un soupçon d'originalité peut être très avantageux pour marquer sa différence. Les sites originaux, truffés d'inventivités sont parfois éblouissants mais ils ne sont pas forcément ergonomiques et abordables par le plus grand nombre : https://patrickheng.com/

La création d'un site peut s'appuyer sur un thème banal, à l'aspect conventionnel. Le catalogue Theme Forest regorge de thèmes conventionnels, par exemple le thème Real Villa : https://themes.potenzaglobalsolutions.com/html/real-villa/index.html

Sans résoudre tous les problèmes d'ergonomie, ces modèles peuvent servir de base à certains de vos projets.

L'information

Votre site doit informer les internautes et au bon moment.

Informations textuelles

La base est tout simplement l'information textuelle. Par exemple, les textes sont primordiaux dans les blogs pour indiquer le sujet de l'article :

Sur le blog *OMG! Ubuntu*, le titre de l'article informe sur son sujet

Pour les sites basés sur la musique ou la vidéo, les textes accompagnant les médias sont primordiaux :

Sur *YouTube*, les textes sous les vignettes sont essentiels, y compris ceux ajoutés dans la vignette.

Dans un e-commerce, les étapes de l'achat sont en général bordées d'informations très importantes qui doivent accompagner le client :

eBay affiche les informations essentielles pour l'achat d'un produit : prix, frais de port, frais d'importation, évaluation du vendeur, conditions de retour.

Beaucoup de sites e-commerce annoncent les frais de port seulement à la fin du processus d'achat, ce qui est contre-productif et risque de faire annuler la commande.

Informations visuelles

Comme montré plus haut, les vignettes des vidéos YouTube ou les images en avant des articles donnent une information visuelle sur le contenu à venir.

Il n'est pas toujours nécessaire de charger votre page de textes. Parfois, de simples indications graphiques suffisent à informer :

Sur la plupart des moteurs de recherche, la couleur violette des liens visités suffit à indiquer qu'on est déjà passé par là. La coloration des liens visités s'obtient avec le langage CSS et la pseudo-classe *:visited* s'appuyant sur l'historique du navigateur.

Sur *leboncoin*, la légère transparence de l'annonce indique qu'on l'a déjà consultée.

Sur l'espace privé de l'*Urssaf,* ce simple point rouge m'indique l'existence de messages non lus. Ces points rouges sont similaires à ceux des notifications sur les icônes des applications mobiles. On s'appuie donc sur une convention de notification.

L'information au moment opportun

Trop d'informations tuent l'information. Pour alléger la charge, on peut afficher des informations au survol ou suite à des actions.

Wikipedia ajoute des informations lorsqu'on survole un lien.

Sur *Twitch*, des infos bulles apparaissent au moment du survol.

Répondre aux internautes : le feedback

Penser à répondre aux actions de l'internaute. Par exemple indiquer, le message a bien été envoyé, le virement a bien été effectué, etc.

Sur le site de la *Banque Populaire*, suite à un virement, on informe clairement l'internaute de la validation de ce virement. Ils ne sont pas populaires pour rien 😉

Ce formulaire de contact m'informe au préalable concernant les champs de saisie obligatoires, puis me répond en cas de succès ou d'échec.

Dans la liste des commandes d'eBay, on indique très clairement que la commande a été livrée.

La compréhension

Vos interfaces doivent être compréhensibles.

Le vocabulaire

Utiliser le vocabulaire le plus précis possible, le plus efficace, le plus compréhensible.

Le menu *Démarrer* de ce bon vieux *Windows Millenium*. Pour arrêter l'ordinateur, il fallait appuyer sur *Démarrer* puis *Arrêter*... Une absurdité inventée par des ingénieurs informaticiens qui vous expliquaient qu'on démarrait le processus d'arrêt de l'ordinateur... C'est logique mais pas facilement compréhensible !

Sur GitHub, le bouton le plus affordant est code, mais il ne permet pas de voir directement le code contrairement à son appellation trompeuse :

Le bouton *Code* est trompeur, il permet de télécharger un fichier zip contenant le code.

Pour voir le code directement, il faut cliquer sur le bouton plus discret *Go to file*. N'y aurait-il pas un problème d'appellation ?

Éviter les icônes sans textes, sauf s'ils sont très explicites, comme la corbeille. Un manque de texte peut rendre une interface difficile à comprendre. Ci-dessous, trouvez l'icône pour renommer un fichier sous Windows 11 :

Dans son menu contextuel (clic droit), Windows 11 propose des icônes sur les actions essentielles en lieu et place de textes explicites. J'ai observé que la plupart des utilisateurs ne comprennent pas immédiatement la signification de ces icônes. En voulant simplifier l'interface, le système d'exploitation à perdu en efficacité.

Préférer les icônes accompagnées de textes. Les icônes peuvent activer la mémoire visuelle et les textes ajoutent une bonne compréhension de l'interface.

Dans Office 2007, les Rubans fusionnaient les menus interminables et les barres d'outils empilées des versions précédentes. Ici les icônes sont accompagnées de textes explicites. Les Rubans sont actuellement utilisés dans les dernières versions du Pack Office.

La guidance

Dans un site web, l'internaute doit être accompagné durant son parcours. Lors d'un achat dans un site e-commerce, on marque les étapes de la commande afin que l'acheteur puisse clairement savoir où il en est, mais aussi pour qu'il puisse facilement revenir à une étape précédente et modifier sa commande. On peut diriger l'utilisateur grâce aux affordances.

Sur *leboncoin*, les filtres vous indiquent en permanence votre sélection courante et comment modifier les critères de votre recherche.

Sur AliExpress, on peut visualiser les étapes de la livraison.

Le fil d'Ariane ou breadcrumbs est un repère qui situe simplement l'internaute sur un site :

Lorsqu'un internaute va sur une page qui n'existe pas ou qui n'existe plus, on peut le rediriger grâce à une page 404 contenant des informations pour le réorienter. Beaucoup de thèmes WordPress proposent un modèle de page 404 pour réorienter les visiteurs égarés.

Depuis des décennies, le site perdu.com sait vous guider dans les méandres de son... unique page au design épuré ^^

La gestion des erreurs

L'erreur est humaine et par conséquent il faut anticiper le fait qu'un internaute va se tromper en utilisant un site web.

Dans les formulaires, utilisez par exemple la mention "obligatoire" pour qu'il n'oublie pas de saisir l'essentiel. Mettez des libellés clair et précis, indiquant la quantité de caractères à saisir le cas échéant.

Les langages HTML et JavaScript peuvent empêcher certaines erreurs en validant un champ uniquement s'il contient le nombre souhaité de caractères ou le type de caractères. On peut aussi aider l'internaute en facilitant la saisie en direct, par exemple, en générant un calendrier pour la saisie de dates.

La rapidité

Pour que votre site soit efficient, on peut appliquer la loi de Fitts pour gagner en vitesse :

Chez Amazon, le bouton *Acheter cet article* est d'une efficience redoutable, car il court-circuite les étapes traditionnelles d'achat.

Réduisez le nombre d'étapes quand cela est possible.

L'application *Geev* permet en très peu d'étapes de créer des annonces et de donner des objets avec son smartphone. Un modèle d'ergonomie.

En un coup d’œil, l'application *Pont Chaban Delmas* vous permet de savoir si le pont est ouvert à la circulation.

Avec ses serveurs proches des utilisateurs, le moteur de recherche Google est un exemple de rapidité. Avez-vous déjà connu un problème de lenteur chez Google ?

L’accessibilité

Voir l'article sur l'accessibilité.

La satisfaction

La satisfaction des visiteurs est la règle la plus importante et elle est difficile à mesurer. C'est la satisfaction des clients qui les feront revenir sur un site e-commerce pour consommer à nouveau. C'est la satisfaction d'un spectateur de YouTube qui le fera s'abonner à une chaine et revenir régulièrement.

La satisfaction dépend de l'utilité de votre site, de la qualité de service, de l'esthétique, et des qualités techniques.

Utilité

L'utilité est évidemment un critère essentiel pour la satisfaction des utilisateurs. Il faut que votre site web propose un vrai contenu et permette aux internautes de remplir leurs objectifs.

L'esthétique

En plus de l'utilité évidente, l'esthétique apporte une forte valeur ajoutée sur la satisfaction.

En plus de son utilité en tant que catalogue musical, le site SoundCloud propose une qualité esthétique bien supérieure à celle de YouTube. Lors de l'écoute, le parcours de l'échantillon sonore est une idée audacieuse et esthétique.

Le design émotionnel

Une interface peut émouvoir un utilisateur et si cette émotion est positive, elle pourra influencer l'utilisateur à, par exemple, acheter un produit.

Certaines marques provoquent un charme chez l'utilisateur et leurs sites web savent exploiter cette émotion. Avec ses belles photos, ses animations et vidéos léchées, le site d'Apple sait parfaitement séduire les utilisateurs.

Une marque de montres de luxe s'appuie sur la sortie du film Dune pour proposer des montres de prestige dans un site au design particulièrement élégant :

Un site web respirant avec des photos magnifiques pour une maison de vacances :

L'émotion suscitée peut vous motiver à prendre des vacances.

Qualités techniques

Un site rapide, sans liens cassés, sans erreurs, avec des débits élevés, est toujours plus satisfaisant. Par exemple, le moteur de recherche Google est très rapide et sans faille.

De même, le site Twitch, avec ses débits très élevés adaptés au streaming, a su séduire très vite de nombreux utilisateurs.