Wikio

Checklist pour l'ergonomie des sites web

  • Téléchargez ici la version de cette page au format opendocument : checklist-ergonomie-web.odt
  • Vous pouvez imprimer au format pdf cette page pour récupérer ce document avec vos cases cochées.

1. Organisation de la page


Les contenus sont vraiment utiles.
Les images, animations et autres objets assurent un compromis entre la bande passante et la qualité.
Les messages sont correctement hiérarchisés.
La page a un "air de famille" avec les autres pages du site.
La page est adaptée aux espaces de navigations des utilisateurs : résolution(x,y) ; largeur utile (x-40) ; seuil de scroll (y-200).
Pas d'ascenseur horizontal.
Les contenus critiques sont au-dessus du fold (seuil de scroll).
La page ne donne pas l'impression qu'elle se termine alors qu'elle ne l'est pas.
Peu ou aucune colonnes ne s'adaptent en taille.
Bon équilibre des espaces vides pour aérer la lecture.
Les blocs (navigation, contenus, infos) sont bien distincts.

2. Les textes

Présentation


Le texte n'est pas une image.
Pas d'images de fond sous le texte.

Typographie et couleurs


La taille de police est suffisante (10pts arial min).
Bons contrastes (500) et bonne luminosité (125) des contenus.
Caractères foncés sur fond clair.
Nombre de couleurs limités.
Casses variables.
Si certains mots sont en majuscules, c'est pour attirer l'attention, car ils freinent la lecture (<5mots).
Peu d'italique.
La possibilité de cliquer ou non sur un texte est évidente.
S'il y en a, les soulignés indiquent des liens.

Blocs et lignes de texte


Les paragraphes utilisent des polices sans empattement.
Les blocs de textes sont alignés à gauche ou justifiés.
La longueur des lignes est > 60 et < 100 caractères.

La lecture rapide


La lecture courante en diagonale est possible.
Le vocabulaire est connu de l'internaute.
Les phrases sont courtes.
Plutôt une idée par paragraphe.
(Pas trop) de mot-clés sont en gras.
Au besoin, les idées listées à l'aide de puces.
La voix active est privilégiée.
Les longs textes sont téléchargeables ou imprimables sans inclure les autres contenus.

3. Titres et libellés


Un même mot pour un même concept.
Les titres sont hiérarchisés par leur taille (un trop gros titre sera moins lu).
La longueur des titres est limitée.
Les mot-clés sont au début des titres.

4. Liens hypertextes

Visibilité des liens


Les liens sont pour la navigation, les boutons pour les actions.
Si les liens sont des actions, c'est pour moins charger l'interface : les boutons indiquent les actions principales ou importantes.
Les liens ont un format réservé, distinct, et qui les fait ressortir.
Peu de formats différents.
La visibilité des liens est en corrélation avec leur importance.
La lisibilité des liens est accentuée au survol sans déformation .
Les liens déjà visités ont un format plus discret.
Des liens sont intégrés dans les contenus, et non pas seulement dans la barre de navigation.
La taille des liens est judicieuse.
Tous les éléments concernés sont cliquable (libellé + icône par exemple).
Les liens tiennent sur une seule ligne.

Types de liens


Les liens internes et externes sont clairement distingués, au moins au survol.
Le téléchargement ou l'ouverture d'un document autre qu'en html est indiqué, avec au besoin son poids.
Les liens qui interviennent seulement sur la page (intra-page) sont clairs et distincts (plus discrets, avec un verbe d'action ou un signe simple), bien que proches des liens inter-pages.
Les liens-ancres sont clairs (style sommaire) et distincts (scroll progressif, libellé judicieux...).

Liens explicites


On comprend le lien à sa seule lecture (pas de 'cliquez ici'), à moins que l'on charge inutilement l'interface.
Les balises html 'alt' et 'title' sont renseignées.
Les conventions du web et du domaine sont respectées pour le choix des libellés.
Les libellés sont homogènes et cohérents (pas deux libellés différents vers une même page).

5. Les formulaires

Éléments des formulaires


Les éléments correspondent au type de donnée attendu.
Pas de bouton radio unique.
La taille des champs correspond aux nombre de caractères attendus.

La prise en main


Visibilité des zones de saisie est relative à leur importance.
Les champs les plus mis en valeur sont blanc sur fond de couleur, et non les champs pré-remplis.
Les champs obligatoires sont indiqués clairement au début à l'aide d'un élément graphique ou typographique (ex. : un astérisque gras coloré).
Pas de ":" inutile en fin de libellé.
Au besoin, on trouve des groupes thématiques séparés par des titres ou des séparateurs.
Les libellés sont alignés à gauche, sauf si la différence entre le + court et le - court est > à 7 caractères.
La distance entre le libellé et le champ est faible.
Un indicateur graphique (flèche) pointe le libellé correspondant au champ édité.

Le renseignement


N'est demandé que le minimum vital.
La récupération d'informations personnelles engageantes est réduite au maximum.
La touche TAB permet de passer d'un champ à l'autre.
Si possible, l'internaute visualise d'un coup d'oeil l'ensemble des données saisies.
Les champs sont ordonnés selon la logique de l'internaute.
Les champs non éditables ne sont pas présentés ou sont clairement inactifs.
On trouve aides et légendes. (sur le côté, en dessous, en permanence, au clic, au survol…)
Au besoin, les unités de mesures utilisées sont explicites.
Si le nombre de caractère est limité, l'internaute est informé du décompte, mieux : en temps réel.
Les libellés sont cliquables avec les cases.
Les boutons de validation sont clairement visibles.
Les fonctions d'annulation sont évitées si possible, ou au besoin suivies d'une demande de confirmation.
Les actions principales sont mis en évidence, et éloignées des actions secondaires.
Au début, le curseur est dans le premier champ.

L'internaute corrige ses erreurs


Le format attendu est explicite à l'extérieur du champ (ex. : aaaa/mm/jj).
Des conseils de complétion sont donnés à partir des données déjà entrées.
Le pré-remplissage ne concerne que des données peu critiques (elles s'effacent).
Certaines données sont validées/contrôlées à la volée (au moment de changement de champ), sans avoir besoin de valider.
Toutes les erreurs sont traitées en une fois lors de l'envoi.
Les informations erronées ne sont pas effacées.
Les entrées valides ne sont pas effacées.

Les messages d'erreur


Un message d'erreur général se place au-dessus du formulaire et attire l'attention (et non dans une boite de dialogue d'alerte).
Un message d'erreur spécifique apparaît devant chaque champ mal renseigné.
Les champs mal renseignés sont mis en évidence (bordure, fond, icône...).
Les messages sont explicites et proposent une piste de solution.

6. La navigation


La fonction de retour en arrière du navigateur est possible.

Architecture


L'organisation correspond à ces approches : par théme, tâche, utilisateur, par ordre alphabétique, chronologique, popularité, pertinence....
La largeur du plan de navigation (sitemap) est plus importante que sa profondeur.
L'internaute peut aller facilement au contenu qui l'intéresse où qu'il soit.
Les items de même niveau sont signifiants, complémentaires et exclusifs.
Au-delà de 12 items de même niveau, le classement suit l'ordre alphabétique.
Avec un faible nombre d'items, le classement correspond au comportement attendu ou souhaité.
En particulier à la verticale, les items du milieu sont moins favorisés.
Les répétitions d'un même libellé (par exemple d'une même classe) sont évitées.
On dispose d'un retour explicite à la page d'accueil (et non seulement en cliquant sur le logo).

Présentation du menu


Le menu de navigation est mis en évidence.
Le menu de navigation est sur les bords, de préférence en haut ou à gauche.
Le menu est fixe d'une page à l'autre.
L'internaute sait en permanence où il se trouve.
Les items de navigation changent au survol.
Les liens du menu ne sont pas nécessairement soulignés pour éviter une surcharge.

Fonctionnement du menu


Les menus déroulants sont des gains de temps pour l'internaute.
Les menus en cascade sont évités.
Pas de manipulation délicate de la souris (ex. horizontal puis vertical) pour atteindre un item.
L'ordre des rubriques d'un menu ne varie pas en fonction de la page visitée.
Pas de lien externe au milieu des liens internes d'un menu.
Les accès dans le menu sont doublés par des liens transversaux et contextuels dans les pages de contenus.

7. Boutons et actions


Les boutons sont homogènes d'une page à l'autre.
Les boutons d'action sont distincts et apparaissent avant le fold (limite du scroll).
Les boutons réagissent au survol.
Le bouton invite au clic par sa forme et son libellé.
Les boutons sont suffisamment gros.
Les boutons sont suffisamment éloignés les uns des autres.
Choix des libellés : des verbes, courts, homogènes.
L'icône est généralement accompagnée d'un libellé, qui apparaît au moins sans délai au survol (l'apprentissage interne est moins important sur le web qu'avec un logiciel).

8. Listes et tableaux


Les données ressortent plus que les types de données.
Les colonnes affichées ont des informations nécessaires.
Les détails apparaissent sur une autre page après sélection.
De légers filets séparateurs entre chaque ligne facilitent la lecture.
Les éléments d'action sont à proximité des éléments sur lesquels ils agissent.
Au survol, la couleur de fond peut se modifier.
Il est possible de voir tous les éléments sur une même page (<100).
Sur une liste de pages, on indique clairement la page consultée.
Le critère de classement par défaut est explicite.
Il est possible de changer les critères de classement au vu des objectifs des utilisateurs.
Les données textuelles sont alignées à gauche.

9. Pubs


Les animations sont limitées à 15 secondes max.
Pas d'animation simultanée.
Le son d'une bannière ne se déclenche qu'au survol ou par un clic.
Si la pub prend toute la place, un moyen est fourni pour aller directement au site.
Pas de promotion interne qui ressemble à de la publicité externe.

10. Messages d'information


Un feedback accompagne toute action de l'internaute.
Les messages les plus importants sont aussi les plus visibles.
Les messages utilisent des couleurs originales, des icônes, des tailles significatives, des animations, des boites de dialogues qui opacifient le fond, etc..
Pas de popup.
Pas de boites d'alertes simples.
Toutes action destructrice s'accompagne d'une demande de confirmation.
L'information présentée au survol ne gêne pas.
Le rouge n'est utilisé que pour prévenir les erreurs, non pour informer.
L'aide générale est disséminée en messages d'aide contextualisés.
Des indications de progression de chargement / calcul apparaissent au besoin.

Ressources


Cf le site de snook sur le contraste et la luminosité.
Source d'inspiration : Ergonomie web : mémento, cf. ergolab, le site d'Amélie Boucher.

fr/enseignement/2009-2010/ergonomie/checklist_web.txt · Dernière modification: 2012-02-23 14:24:34 (modification externe)
[unknown link type]Haut de page
GNU Free Documentation License 1.3
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0