Jakob Nielsen & le reste du monde

Jakob Nielsen, le Directeur de Nielsen Norman Group mais surtout le fameux ergonome revient sur le devant de la blogoscène (n'importe quoi ce mot...), petits rappels...

Je ne vais pas faire la présentation de Jakob Nielsen (tout simplement parce que je n'ai pas envie :P), mais je vais passer directement à l'actu.

J'ai lu récemment sur des blogs que Nielsen avait sorti un article intitulé Weblog Usability: The Top Ten Design Mistakes.
Je ne vais pas vous dire si mon blog est conforme aux exigences de Nielsen, mais je vais vous rappeler quelque (bon ou moins bon) principe d'ergonomie "lancés" par Nielsen :

Tout d'abord, l'ergonomie d'un site ne concerne pas seulement les aspects graphiques, mais elle concerne à la fois :

• L'utilité (la capacité de répondre aux besoins d'un utilisateur)
• L'utilisabilité (la facilité d'utilisation)

Passons ensuite aux 8 catégories qui qualifient un site ergonomique :

Un site utile

Les internautes viendront en priorité sur votre site parce que celui-ci fournit du contenu et des services présentant ces qualités :

• Du contenu à jour, qui ce renouvelle régulièrement (mais pas trop non plus).
• Des pages réservant un maximum de surface au contenu utile (réduire l'espace alloué aux éléments de navigation, éviter l'abus de publicité).
• Du contenu dans chaque page (éviter les splash-screens, ou autre page inutiles).
• Fiabilité.
• Sécurité.
• Respect des droits et libertés des internautes.

Un site rapide

Habituellement, le temps de réponse d'une application doit être en dessous de la seconde. Sur le Web, les internautes ont appris la patience, mais au delà de 10 secondes, généralement ils zappent. N'oubliez pas les internautes qui n'ont pas la chance d'avoir du haut débit, testez vos pages avec un outil de mesure.

• Pour un téléchargement, l'accès à une grande image, prévenez l'utilisateur en donnant la taille, ou mieux une estimation du temps de transfert en fonction de son type de connexion.
• Temps de réponse du serveur (un serveur américain a un temps de réponse plus important qu'un serveur européen, prévoyez en fonction du public visé).
• Prévoyez un serveur assez puissant et qui supporte une monté en charge.
• Vitesse de mise en page (interprétation du code par le navigateur).
  • Donnez pour chaque image les attributs width et height.
  • Evitez les mises en page en tableau.
  • Pensez au GIF entrelacé ou au JPEG progressif (les images s'affichent avant d'être complètement chargées).

Un site simple

Une tentation courante dont la majorité des sites sont victimes : faire des sites magnifiques utilisant les dernières technologies et riches en graphisme et en multimédia. Les internautes viennent en premier pour le contenu, évitez ce qui peut nuire à la rapidité du site et ce qui le rend moins accessible ou lisible.

• Evitez les animations (GIF animés, Animations Flash, balise BLINK ou MARQUEE [en plus elles ne sont plus supporté par le W3C :P])
• Evitez ce qui demande un plug-in (Impose un probable téléchargement, problème potentiel de configuration).
• Evitez la "high-tech" pour le plaisir (Applet JAVA, vidéo, son, 3D).
• Evitez de faire trop riche (trop d'images, images trop grandes, trop de couleurs, pages surchargées).
• Attention à l'utilisation du JavaScript, vérifiez que s'il est désactivé votre site reste consultable.
• Votre site doit être lisible par un navigateur ne supportant pas le CSS (ainsi que par les lecteurs d'écrans)

Un site familier

Comme tout le monde, l'internaute à ses habitudes. Si vous ne les prenez pas en compte, vous lui compliquez la tâche...

• Respect de l'apparence standard des liens.
  • Liens non-visités en bleus et liens visités en rouge.
  • Réservez ces couleurs aux liens.
  • Liens toujours soulignés. Réservez le soulignement aux liens.
  • Pas de liens qui se révèlent en tant que tels que si le curseur de la souris passe dessus.

(J'émettrai un bémol à ces conseils, de nos jours les internautes sont habitués aux liens de différentes couleurs, ainsi que les liens non-soulignés, et soulignés lors du passage du curseur, il n'en reste que les liens doivent avoir leur propre couleur, et évitez de souligner du texte, utiliser plutôt abbr ou acronym pour souligner en pointillé)

• Respect du mode de navigation du web.
  • Evitez les pop-ups.
  • Ne changez pas le comportement du bouton "précédent", on doit toujours revenir à la page d'avant.
• Identification du site (logo) en haut à gauche.
• Eléments de navigation en haut à gauche.

Un site lisible

L'écran rend la lecture difficile et la lisibilité du contenu est très importante.

• Utilisez un style direct, simple et concis
  • Pas de style ampoulé, de phrase longue.
  • Pas de blabla marketing.
  • Utilisez les listes à points.
• Mettez en évidence les points importants.
  • Mots importants en gras ou italique.
  • Acronymes, abréviations en utilisant les balises acronym et abbr.
  • Titres immédiatement compréhensible en dehors du contexte.
  • Démarrez un article par un résumé avec les conclusions (style pyramidal).
  • Les informations importantes doivent être en haut de la page.
• Police et couleurs.
  • Choisissez une police de caractère adaptée au Web (Verdana, Tahoma...).
  • Préférez les polices sans empattement.
  • Choisissez des couleurs de texte et de fond donnant un bon contraste (idéalement noir sur fond blanc).
  • Si la couleur de fond est plus sombre que la couleur de texte, mettez les caractères en gras.
  • Proscrivez les fonds avec des motifs graphiques qui gênent la lecture.
  • Pas de texte en majuscules, c'est moins lisible.
• Défilement.
  • Limitez le défilement vertical.
  • Proscrivez le défilement horizontal (prévoyez votre site pour une résolution de 800x600 ou 1024x768).

Un site ouvert

Votre site est un site parmi d'autres sur le web. Sachez vous inscrire dans ce paysage avec harmonie.

• D'autres sites créent des liens sur vos pages :
  • Evitez de changer les URL de vos documents.
  • Chaque page doit identifier clairement votre site (présence systématique du logo avec la "tagline" (logo) du site).
  • Les URL de vos documents doivent si possible être explicites, sans caractères spéciaux, pour faciliter la mémorisation et éviter les erreurs.
• Les internautes accèdent à votre site par les moteurs de recherche :
  • Mettez des mots-clés sur vos pages (keywords).
  • Donnez des descriptions à vos pages (description).
  • Référencez votre site dans les moteurs.
• Votre site mène vers d'autres sites :
  • Vérifiez périodiquement que les liens restent valides.
  • Des outils permettent de détecter automatiquement ces "liens morts".
  • Précisez la langue du site cible.

Un site navigable

Le principe de base du web est la navigation. Sachez exploiter ce principe au mieux

• Sur chaque page, indiquez à l'internaute ou il est.
  • Où il est dans le web : indentification claire du site et de sa fonction.
  • Où il est dans le site : indiquez la position de la page par rapport à l'arborescence principale.
• Sur chaque page, indiquez à l'internaute où il peut aller.
  • Eléments de navigation par rapport à l'arborescence principale : sous-rubriques, rubrique mère, rubriques sœurs.
  • Documents associés.
  • Utilisez les liens titrés.
  • indiquez clairement les liens induisant un téléchargement.
  • Signalez éventuellement les liens menant à un autre site.
• Sur chaque page, indiquez à l'internaute où il a déjà été.
• Donnez à l'internaute un moteur de recherche et un plan du site (obligatoire à partir de 100 pages).

Un site testé

Votre site ne doit pas plaire à votre directeur (ou à vos investisseurs...), il doit être utile, utilisable, fiable pour des millions d'internautes.

• Tests techniques :
  • Testez chaque fonction au travers de scénarios de test prédéfinis.
  • Testez les temps de réponse en simulant des montées en charge.
  • Testez avec plusieurs navigateurs, plusieurs OS, plusieurs machines, plusieurs écrans...
• Tests d'ergonomie :
  • Sélectionnez des utilisateurs-tests représentatifs.
  • Observez-les utiliser le site en résistant à la tentation de les aider.
  • Prenez en compte leurs remarques.

Si vous suivez une bonne partie de ces conseils, votre site aura une bonne ergonomie, il ne vous restera plus qu'à le remplir avec un contenu bien adapté. Veillez bien à la propreté de votre code également, c'est mieux pour vous, et pour ceux qui doivent vous lire.