L'ergonomie web désigne l'ensemble des techniques visant à optimiser l'expérience utilisateur sur un site web ou une application. Le but est de rendre la navigation intuitive, efficace et agréable, en tenant compte des besoins et des capacités des utilisateurs.
Définition de l'ergonomie
Étymologie : du grec ergôn « travail » et nomos « loi »
À l'origine, le but est d'aménager le travail, d'en améliorer les conditions, et d'accroître la productivité.
Le mot ergonomie ne figure pas dans le Petit Larousse illustré de 1940. À 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.
Au départ utilisée dans le cadre du travail, l'ergonomie concerne à présent beaucoup d'appareils et d'applications de notre quotidien. On peut donc évaluer l'ergonomie de toutes sortes d'objets, d'interfaces ou de machines.
Avez-vous déjà ressenti un sentiment d'humiliation face à une caisse automatique ou un distributeur de billets ? 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 qu'une machine, un site web ou une application 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é VS 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 :
Sur FranceTV Info, les vrais articles sont mélangés aux articles sponsorisés. Ils sont visuellement trop similaires et trop proches.
Au fil des années, Le moteur de recherche Google joue sur la loi de similarité pour que les annonces ressemblent aux sites indexés naturellement. Un utilisateur préfère en général les liens non sponsorisés :
L'arrière plan permet de différencier la zone d'annonces.
Beaucoup de similarités entre les annonces et les sites naturellement référencé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 ou une application, 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. Difficile de le manquer.
Page d'accueil d'Apple en janvier 2025, devinez où est le point focal.
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.
A l'inverse, ce site d'électronique n'exploite pas la loi de clôture et encadre les zones et les produits afin de les séparer. Est-ce vraiment nécessaire ? Est-ce que cela n'alourdit pas le design ?
Comprenez la loi de clôture pour améliorer vos designs :
Comprenez la loi de clôture pour améliorer vos designs
Loi de Fitts
En 1954, le psychologue américain Paul Fitts énonce une 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 :
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.
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é
Les logiciels de montage sont plus ou moins ergonomiques. Pour couper une piste vidéo, Filmora positionne des ciseaux rouges juste sur l'indicateur d'instant présent:
Le logiciel de montage Filmora est un modèle d'ergonomie
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, puis cliquer à nouveau.
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, le psychologue américain 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 est le caractère actionnable d'un élément. Ce qui va susciter l'action sur cet élément pour attirer l'utilisateur.
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 :
Lors de la publication d'un article, WordPress hiérarchise les affordances.
Le bouton Achat immédiat dans eBay, plus affordant par son positionnement et sa couleur que le bouton Ajouter au panier :
L'achat immédiat est très prisé par les sites e-commerce car il raccourci le temps le réflexion de l'utilisateur qui pourrait mener à un abandon d'achat.
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 ) 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 ou détourné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'encadrement de l'information, similaire à un bouton, suggère un clic. C'est une erreur de design.
Chez Clubic, pour télécharger une application, les utilisateurs se trompent régulièrement et installent l'antivirus Avast. Devinez où il faut cliquer pour télécharger ChatGPT ? Le détournement du clic est ici volontaire pour satisfaire les partenaires.
L'affordance est ici volontairement détournée : La croix pour fermer l'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.
Lors de la mise à jour de CCleaner, quel bouton vous semble le plus actionnable ?
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 : grouper des contenus
Regrouper les éléments avec un maximum de caractéristiques communes. Ce travail est parfois subjectif, il est donc préférable de définir les catégories en groupe pour éviter des modifications ultérieures.
Hiérarchisation des contenus
Mettre en avant les fonctionnalités les plus importantes et les plus recherchées par les visiteurs. En général, la hiérarchisation des contenus apparait dans le menu.
Les menus dirigent prioritairement les internautes. Les menus doivent comporter des intitulés clairs, sans ambiguïté, et doivent être exhaustifs.
Le menu de Zalando hiérarchise clairement les produits.
Liens transversaux
Sans respecter l'arborescence du site, les liens transversaux sont positionnés à des endroits appropriés et permettent d'atteindre d'autres contenus.
Dans OMG! Ubuntu, les nuages de mots clés en fin d'articles permettent une navigation transversale.
Dans le 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 apparaitre certains éléments progressivement, ou lors de moments opportuns. Par exemple, le slider et le carrousel permettent cette facilité.
Le slider de Steam fait apparaitre des informations complémentaires au survol.
Toutefois, attention à ne pas mettre d'information cruciale sur un slide défilant car les internautes risquent de manquer cette information. Exemple avec EquipOccase qui indique le dépôt-vente sur le deuxième slide.
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.
Parcours visuel de l'internaute : en arrivant sur le site, il lit en diagonale pour repérer quelques mots clés. Une fois l'aperçu 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é.
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.
Le site Les News du Net est envahi de publicité, ce qui rend le contenu difficile à lire.
Sur les mobiles, l'espace publicitaire doit être limité.
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 similaires graphiquement et facilement identifiables par la plupart des utilisateurs.
Des symboles gratuits proposés par Font Awesome pour effacer quelque chose.
Styles d'interfaces cohérents
Les éléments comparables doivent se ressembler. Les éléments différents doivent avoir des styles différents.
Windows 11 propose encore deux interfaces différentes dans le paramétrage des imprimantes. Il faudrait uniformiser cela.
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 et les traditions
"L'homme n'aime pas connaître, il aime reconnaitre."
Jean Cocteau
Apprentissage externe, veille technologique : Il faut en tenir compte des habitudes d'utilisation de l'internaute sur les autres sites 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 paraitre plus simple et intuitif.
Extrait de Wikipédia. Les liens hypertextes colorés en bleu sont issus d'une ancienne pratique 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 de 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
Convention de localisation
Il existe quelques traditions web qu'il convient de respecter :
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.
Interface clavier traditionnelle
Les interfaces de clavier s’inscrivent dans une tradition, savez-vous laquelle ?
Originalité & design VS convention
Un soupçon d'originalité peut être très avantageux pour marquer sa différence. Cependant, les sites originaux, truffés d'inventivités peuvent impressionner les utilisateurs mais ils ne sont pas forcément ergonomiques et abordables par le plus grand nombre : https://patrickheng.com/
Le site CPC Power est une précieuse base de données rétro-computing, néanmoins son interface originale peut rebuter certains utilisateurs.
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 dont la structure conviendra à beaucoup d'entreprises : 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.
Le bouton de déconnexion du Webmail de Free se situe en bas à gauche alors que la convention préfère un positionnement en haut à droite. Ce choix pourrait perturber certains utilisateurs.
L'information
Votre site doit informer les internautes et au bon moment.
Informations textuelles
La base reste 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, comme un tableau de bord : 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. Dans ce résultat de recherche, savez-vous quels sites ont déjà été visités ?
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 via la pseudo-classe :visited qui s'appuie 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'information tue 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.
Suite à un virement, le site de la Banque Populaire, informe clairement la validation de l'opération.
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.
Dans le menu Démarrer de 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 pas le bruit grand nombre.
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. La majorité des utilisateurs ne comprennent pas immédiatement la signification de ces icônes. En voulant simplifier l'interface, le système d'exploitation a perdu en efficacité.
Il est préférable d'accompagner les icônes de textes. Les icônes activent la mémoire visuelle et les textes ajoutent une bonne compréhension de l'interface.
Depuis Office 2007, les Rubans fusionnent 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.
Gmail propose des icônes sans texte pour gagner de la place. L'astuce est de faire apparaitre les étiquettes de texte au survol.
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 site de CCleaner guide les utilisateurs sur 3 étapes pour l'installation de son outil de nettoyage.
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.
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.
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 localisés près 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é
L'accessibilité propose un ensemble de règles pour rendre les contenus web plus accessibles aux personnes handicapées. 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
"Le beau est aussi utile que l’utile.... Plus peut-être. " (Victor Hugo, Les misérables, 1862)
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 agréable avec des photos magnifiques pour une maison de vacances :
L'émotion suscitée peut vous motiver à prendre des vacances.
Google au printemps.
L'humour peut aussi séduire les utilisateurs et les motiver à utiliser certaines interfaces :
Dans les années 2000, IncrediMail a séduit des millions d'utilisateurs grâce à son interface "cartoon" truffée d'humour. Le logiciel n'en demeurait pas moins un excellent client mail.
Les symboles enfantins de Waze contribuent au succès de l'application.
JCVD pourrait vous motiver à acheter des jeans.
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 de jeux vidéo, a très vite convaincu de nombreux utilisateurs.
Twitch, une plateforme de streaming à la pointe de la technologie, fut immédiatement adoptée par les joueurs.
Exercice
Parmi ces trois applications pour connaitre les ouvertures du Pont Chaban-Delmas à Bordeaux, laquelle vous semble la plus ergonomique ? Pourquoi ?
