Ergonomie

Usability par J. Nielsen

On ne présente plus l'expert mondial dans le domaine; M. Jakob Nielsen considéré par la presse américaine comme le « gourou » de l'ergonomie (usability en anglais). Son livre « Conception de sites web » paru dans les années 2000 a eu un succès retentissant. À l'heure du design web et de la mise en page en tableau, M. Nielsen proposait de se concentrer sur le contenu et de se concentrer sur les demandes de l'utilisateur. Tout ce qui n'est pas utilisé est inutile même si c'est la plus grande des inventions.

Sept ans plus tard, l'expert publie un nouvel ouvrage: « Site web: priorité à la simplicité » co-écrit avec Hoa Lorganger. Ils tirent les conclusions de plus de 5 000 pages de recherche toutes fondées sur des tests utilisateurs. Un document que tout webmaster attentionné se doit de posséder même si ses observations sont parfois conservatrices et le site du principal intéressé austère.

Sur le web, les maîtres mots sont simplicité et facilité d'accès. Si un client ne parvient pas à trouver un produit, il ne l'achetera pas. L'adage "Le client est roi" n'est nulle part aussi vrai que sur le web: celui ou celle qui manie la souris a tout pouvroir de décision. Il est si facile d'aller voir ailleurs: tous les concurrents ne sont qu'à un clic de souris.

Jakob Nielsen

Temps de réponse

La rapidité d'affichage d'une page web dépend de nombreux facteurs:

• type de connexion (haut ou bas débit)
• fournisseur d'accès
• qualité du serveur
• encombrement du réseau
• taille fichier de la page HTML et ses images

L'idéal serait d'avoir un temps de connexion inférieur à une seconde pour afficher une page complète. La généralisation du haut débit et l'arrivée du très haut débit sont des solutions idéales pour réduire le temps d'attente. Dix secondes est le délai maximal permettant à l'utilisateur d'être concentré sur ce qu'il fait. Au-delà il risque bien de perdre patience et de chercher ailleurs.

Prenez l'habitude de renseigner l'utilisateur si le chargement risque d'être long, surtout s'il s'agit de la page d'accueil. C'est surtout vrai pour les sites faits entièrement en flash. Une barre de chargement ou « loading » indique l'évolution du téléchargement. Plus cette barre est longue, plus le défilement sera rapide et plus l'impression de vitesse sera grande.

Feuilles de style

L'utilisation des feuilles de style (CSS) permet une mise en page bien plus précise que les balises HTML. Elles ont également l'imense avantage de faire la séparation entre le contenu et la présentation. Grâce à quelques manipulations, il est donc possible de modifier l'apparence de ses pages au lieu de les modifier manuellement. Il en résulte un gain de temps considérable en cas de changement de mise en forme, un code source allégé et donc un chargement plus rapide.

• Préférez les CSS externes pour faciliter la maintenance de vos pages et accélérer leur affichage puisque le fichier externe est chargé une fois pour toute.
• Le contenu de votre site doit rester accessible sans les CSS puisque les anciens navigateurs ne les prend pas en compte tandis que certaines personnes utilisent une feuille de style personnelle. Testez vos pages en désactivant les CSS.
• Utilisez au maximum 3 polices de caractère différentes et pensez à indiquer une polices de remplacement. Leur taille doit être exprimée par une valeur relative (% ou em) qui dépend de la taille de base définie par l'utilisateur.
• Évitez d'utiliser l'attribut "!important" qui rend prioritaire une spécification par rapport à toutes les autres. L'utilisateur est roi, il serait dommage de le priver de sa propre feuille de style.

Cadres

Lors de l'apparition des cadres (frame en anglais) en mars 1996 par Netscape, les webmasters se sont rués sur cette nouvelle possibilité de mise en pages. En fin de compte, ils possèdent plus d'inconvients que d'avantages. Évitez-les pour de bon. Et si son utilité est impérative, employez les feuilles de style qui offre un résultat identique sans ses inconvénients.

Pourquoi les cadres c'est mal ?

Tous les navigateurs ne gèrent pas les cadres de la même façon. Certaines difficultés d'affichage peuvent aparaître ainsi que des petites surprises à l'impression selon le focus du pointeur.

Gros problème pour le référencement, les moteurs de recherche ne savent pas quel cadre inclure dans leur index. Il peut arriver que les moteurs affichent un lien qui pointe vers une page exclue de son frameset (jeu de cadre). Elle se trouve isolée de son système de navigation et le visiteur ne pourra consulter le restant du site ou consulter l'index.

Avec le système, l'adresse du site reste identique quelque soit l'endroit de navigation. De cette manière, les liens profonds sont impossibles. Inutile par exemple d'envoyer un lien d'une page en particulier à un ami ou de l'insérer dans vos favoris.

Accessibilité

L'accessibilité est un sujet vaste et passionnant. Derrière ce mot se cache un principe assez simple: permettre à tout un chacun de profiter pleinement du contenu d'une page web en dépit de sa configuration matérielle (PC, Mac, Linux) et ses capacités physiques ou mentales (mal ou non voyant, daltonien, niveau intellectuel...). Tim Berners Lee, l'inventeur du web, résume très bien les choses dans cette citation.

Mettre le Web et ses services à la disposition de tous les individus, quel que soit leur matériel ou logiciel, leur infrastructure réseau, leur langue maternelle, leur culture, leur localisation géographique, ou leurs aptitudes physiques ou mentales.

Berners-Lee

Texte alternatif sur image

Les normes du W3C insistent sur la présence de l'attribut alt des images. C'est d'ailleurs une cause d'exclusion à la validation des pages en (X)HTML stric. Ce texte n'est pas visible directement sur l'image mais il apparaît lorsque celle-ci ne peut être affichée. (l'utilisateur désactive les images, le navigateur ne les prends pas en compte). Il sert également aux non voyants qui écoutent les sites via des applications vocales.

Si l'image n'apporte rien au contenu (bordure de tableau, puce, ...) l'attribut alt doit rester vide (alt=""). C'est le cas par exemple des images qui composent la charte graphique. Pour plus d'infos, consultez Openweb.

Acronymes & abréviations

Les abréviations et les acronymes sont largement utilisés et trop rarement expliqués. Un latino qui connaît le français ne comprendra pas forcément ce que SNCF veut dire . Spécifiez la signification à l'aide des balises <acronym> (pour les acronymes) et <abbr> (pour les abréviations) qui s'affichera au survol de la souris.

De plus, les synthétiseurs vocaux utilisés par les non-voyants pourront lire le contenu de cette balise et adapter leur prononciation grâce à l'attribut de langue (lang="en" pour l'anglais, lang="fr" pour le français).

1. <abbr title="Cascading Style Sheet" lang="en">
2. CSS</abbr>

Dans le cas où le sigle se répète, il est inutile de reproduire à chaque fois le travail. Ajoutez la description dans la première occurence de manière à transmettre l'information dès la première apparition du sigle. Les lecteurs qui prennent le texte en chemin reviendront certainement sur le début pour mieux comprendre la signification.

Taille des fontes

N'utilisez pas des valeurs absolues qui figent la taille.

Permettre l'impression

Il arrive souvent que les utilisateurs désirent imprimer le contenu d'un document web. La lecture sur un support papier est plus agréable et on ne risque pas de perdre l'inforamtion à cause d'un lien brisé ou la suppression de la page.Malheureusement, les navigateurs ont encore des lacunes à ce niveau puisque la plupart utilisent les mêmes polices pour l'affichage à l'écran et l'impression, alors que ces deux supports nécessitent l'utilisation de polices différentes.

Que faire ? La première possibilité c'est de créer deux versions de documents. Le premier servant à l'affichage (html), le second à l'impression (html, doc, pdf). Pour y arriver, vous devez mettre à disposition du visiteur le document imprimable accessible par un lien. Mais cela représente un travail conséquent surtout si les articles sont nombreux.

La seconde proposition, plus pratique, consiste à créer une feuille de style spécifique à l'impression. En gros, on va indiquer au navigateur ce qu'il doit imprimer, la mise en page, la couleur du fond, les fontes à utiliser (différentes de celles pour l'affichage écran), etc. On peut même aller jusqu'à demander d'imprimer les URL complètes et les e-mails completes si nécessaire.

Contenu

En quelques secondes, le visiteur se fait une idée générale de ce qu'il visite. Bien évidemment le graphisme est la première chose qui va lui permettre de se faire un avis sur la qualité. Mais bien vite, après quelque clics, le contenu prend le dessus. Si celui-ci n'est pas à la hauteur de ses espérances, aucune chance pour qu'il revienne.

Le texte

Des études ont montré que l'oeil est plus attentif au texte, surtout les titres, que les images. Le style doit être concis et direct. Il va sans dire que le contenu sera irréprochable au niveau grammaticale et orthographique. Un site avec plus de deux fautes et votre crédibilité en prend un sacré coup. Le style doit s'adapter au public visé.

Mise à jour

La fraîcheur des informations et les mises à jour sont importantes surtout si vous souhaitez voir revenir votre visiteur. Un site qui affiche la dernière « news » à plus de trois mois et plusieurs liens morts... c'est la fuite assurée. Si vous offrez du contenu, annoncez les changements sur la page d'accueil. Les moteurs de recherche apprécient également les pages mises à jour régulières.

Il existe une multitude de façon pour faire vivre son site: une rubrique « news », une lettre d'information hebdomadire, des interviews, des dossiers thématiques, un forum animé, etc.

Interactivité

Contrairement à la presse écrite le web dispose d'un avantage majeur: l'interactivité. N'hésitez pas à proposer d'écrire aux responsables, de poser des questions sur le forum, de s'inscrire à la mailing liste ou encore de participer à un sondage ou un concours.

Les internautes qui prennent la peine et le temps de vous écrire sont rares. Bien souvent il s'agit d'un problème technique sur le site ou d'une critique, plus rarement d'un compliment. Offrez une réponse personnalisée dans un délai raisonnable. Une réponse dans les 48h est l'idéal et donne un sacré coup de fouet à l'image de l'entreprise.

Internationalisation - traduction

La traduction se limite à effectuer la conversion d'un texte d'une langue dans une autre sans aucune adaptation par rapport au public cible. Une traduction mot à mot. C'est bien évidemment insuffisant pour un résultat de qualité. Il faut adapter le contenu à la culture et à la langue locale.

L'internationalisation se charge d'adapter le contenu textuel: expression, dialecte, adresse postale, dates, heures, chiffre... Mieux, elle prend en charge tous les autres éléments fonctionnels présents sur le site: sens de lecture, couleurs, images, icônes, symboles...

Pour mener à bien cette étape, l'équipe sera composée d'une personne dont la langue maternelle est celle de la langue à traduire. À défaut, on peut toujours soumettre son site aux autochtones. Cette précaution vous évitera bien des erreurs ou des quiprocos qui pourraient être facheux pour l'image votre entreprise.

Des formulaires en bonne et due forme

• indiquez clairement les champs obligatoires ou optionnels (souvent par la mise en forme ou l'ajout d'une astérisque)
• contrôler les champs obligatoires et spécifiques (e-mail, adresse web, mot de passe)
• rédigez des libélés concis en rejetant les articles (le, un, votre)
• accompagnez les libelés obscurs ou comportant une syntaxe particulière par un exemple concret
• présentez les champs de manière logique
• pensez à l'internalisation: les visiteurs ne viennent pas tous de France, un code postal peut contenir 3, 4, 5 chiffres et des lettres dans certains pays
• groupez les champs de saisie de leur libelés
• alignez les champs et les libelés de manière à rendre l'aperçu du formulaire efficace
• informez l'utilisateur de la longueur de saisie attendue (mot de passe de 7 caractères min.)
• affichez clairement les erreurs en conservant les données déjà saisies
• après vérification et validation, renseignez l'utilisateur de la bonne exécution du formulaire
• envoyer un e-mail de confirmation avec le récapitulatif des informations
• côté webmaster, codez efficacement en respectant les règles d'accessibilité

Pour en savoir plus, lisez les bonnes pratiques sur Opquast (lien). Pour savoir comment créer des formulaires conformes et accessibles, reportez-vous à l'article de Fred Cavazza (lien).

Ergonomie et blog

Dans un de ses articles, Nielsen épingle 10 erreurs fréquentes des blogs:

1. aucune biographie de l’auteur: dommage car ça augmente la confiance du lecteur à votre égard, surtout si c'est un blog professionel
2. pas de photo de l’auteur: donne une impression de proximité.
3. pas de titre descriptif: l'internaute doit savoir de quoi parle l'article simplement en lisant le titre. Cela ne laisse guère de place à l'originalité mais c'est d'autant plus vrai pour les personnes qui utilisent un logiciel d'abonnement pour suivre l'actualité.
4. des liens évocateurs: les lecteurs aiment bien anticiper et savoir ce que va provoquer leur clic.
5. des archives inaccessibles: au lieu de voir disparaître ses billets trop vieux, il est toujours bon de permettre à l'internaute de remuer dans les archives.
6. le calendrier, seul moyen de navigation: sans commentaire.
7. fréquence de publication irrégulière: la régularité est une qualité appréciée dans la mesure où le contenu reste intéressant. .
8. mélanger les sujets d’intérêt: il vaut mieux se spécialiser dans un domaine plutôt que d'essayer de traiter plusieurs thèmes en même temps.
9. oubliez que vous écrivez pour votre futur patron: les écrits restent, les paroles s'envolent. Tout ce qui est publié est conservé d'une manière où d'une autre.
10. ne pas avoir de nom de domaine: une adresse qui se termine par blogspot.com ou typepad.com c'est tout de suite moins élégant, moins professionnel et moins pratique à retenir. À l'heure actuelle, avoir son propre nom de domaine est à la portée de tous.

Réalisé le 9 août 2003. Mis à jour le 9 avril 2007.