grille d'évaluation heuristique des sites web et web appli -...

Grille d'évaluation heuristique des sites Web et web appli - LudoTIC Web Analysis Grid V 6.1 MàJ mai-12

Non

applic

abl

eN

on

Oui

Score

Gravité

(1-3)

Score

Fréquence

(1-4) Severity

Commentaires et point de

l'interface concerné

Type

Intervention

Module

concerné

1 Feedback du Système - FBCK

1.1 La page d'accueil indique clairement la dernière mise à jour, soit générale, soit pour les éléments sensibles à la réactualisation 0

1.2 Les fenêtres/pop-ups/boîtes de dialogue s'ouvrent près de l'aire cliquée 0

1.3 3.33 9.14 Un titre visible est assigné à chaque page/fenêtre/dialog-box/zone de visualisation 0

1.4 3.34 9.15 Le titre indique correctement le contenu de la page/fenêtre/dialog-box 0

1.5 3.35 Si plusieurs options sont disponibles, celle(s) active(s) est/sont clairement différenciée(s) (surbrillance, tick, …) 0

1.6 3.36 Si plusieurs options sont disponibles, celle active n'est pas sélectionnable 0

1.7 3.37 9.16 Dans les procédures (ex. transactions), les steps sont clairement indiqués, ainsi que la progression de l'utilisateur (ex. "2 sur 4") 0

1.8 Un TITLE est assigné à chaque page 0

1.9 Au survol, tous les éléments cliquables/déplaçables présentent un effet 'on mouse over' (changement pointeur, changement couleur…) 0

1.10 Si le drag&drop est possible, pendant l'action un feedback visuel spécifique sur l'élément concerné est présent (ex. transparence) 0

1.11 Si une page dynamique qui nécessite + d'1 seconde est en train de se charger, l'utilisateur est prévenu 0

1.12 Lorsque l'utilisateur essaie de "uploader" un fichier, un feedback est fourni sur la progression de l'action 0

1.13 3.23 Si les pages sont très longues, un équivalent textuel du menu du haut est proposé en pied de page 0

1.14 La page d'accueil ne présente pas de scrolling qui cache des informations essentielles 0

1.15 Une indication est fournie concernant le poids des fichiers qui dépassent 1 Mo 0

1.16 Une indication est fournie sur le temps de téléchargement pour les fichiers qui dépassent 1 Mo 0

1.17 3.38 Aucun lien n'est ouvert dans une nouvelle fenêtre en plein écran (ou onglet du Browser) sans prévenir 0

1.18 3.39 Les liens qui pointent vers un autre site sont clairement indiqués (par un symbôle à coté, par ex.) 0

1.19 Si l'utilisateur est "loggué", cette information apparaît clairement à l'écran (ex. "Bonjour xxx") 0

1.20 3.40 Si l'utilisateur est "loggué", une fonction clairement visible lui permet de se déconnecter 0

1.21 3.41 Les couleurs/icônes/images aident à distinguer les différentes sections du site 0

1.22 4.16 Les éléments "classiques" des IHM (menus déroulants, champs de saisie…) ont un aspect visuel standard et facilement reconaissable 0

1.23 3.42 Le codage visuel des éléments cliquables (boutons, icônes, liens…) est différent de celui des éléments non cliquables 0

1.24 10.15 Les éléments cliquables (boutons, liens…) sont visuellement saillants et bien visibles 0

1.25 Suite à application de filtres ou tri, les tableaux présentent un feedback visuel clair quant à leur activation 0

1.26 9.17 Les représentations graphiques des données sont le plus possible adaptées au contenu représenté (camemberts pour %, courbes pour données qui évoluent dans le temps…) 0

1.27 9.18 Les représentations graphiques des données sont suffisamment proches de ces dernières pour voir le changement en fonction du changement des données source 0

1.28 3.1 9.20 Les titres de différentes pages/fenêtres/dialog-boxes ne prêtent pas à confusion entre eux 0

1.29 Les icônes sont visuellement séparées en groupes dotés de sens (via un séparateur ou de l'espace vide) 0

1.30 9.19 Si dans les tableaux de données il y a du scrolling, les en-têtes restent toujours visibles 0

1.31 Les boutons de validation d'une fenêtre/dialog-box/zone de visualisation ne sont jamais cachés en dessous du scrolling de l'écran 0

1.32 Dans les zones de visualisation/fenêtres/dialog-boxes les différentes sub-zones de contenu sont groupées visuellement (ex. via une bordure) 0

1.33 Le curseur de la souris se modifie pour indiquer les éléments cliquables, les champs de saisie, etc 0

1.34 3.8 L'URL de chaque page aide à en comprendre le contenu et la position dans l'arborescence 0

1.35 3.32 9.13 Les liens déjà visités sont clairement identifiés 0

1.36 3.43 Les barres de scrolling n'apparaissent que lorsque nécessaire 0

1.37 12.12 Si un nombre important de couleurs ou de codages visuels de l'information est présent, une légende est fournie près des données 0

1.38 3.44 L'utilisateur est informé du niveau de Droits relatif à son profil 0

1.39 13.6 L'utilisateur est informé de l'état actuel de ses données/documents dans le workflow 0

1.40 13.7 Le système fournit un feedback lorsqu'un document/élément est en cours d'édition de la part d'un autre utilisateur 0

1.41 13.8 Le système fournit une indication concernant la date et l'auteur des dernières modifications de chaque document/élément 0

1.42 8.26 Les messages d'alerte ou erreur doivent rester affichés de façon permanente jusqu'à disparition du problème ou nécessiter une action utilisateur afin de disparaître (ex.click sur OK dans un dialog-box) ou chargement d'une autre page 0

1.43 3.6 Lorsqu'aucun élément d'un sous-menu/sous-onglet n'est disponible, le Label du menu/onglet est lui-même grisé et non cliquable ou il n'apparaît pas 0

1.44 5.12 Les indications relatives à une erreur ou un problème sont mises en valeur et faciles à voir 0

1.45 8.10 L'état de boutons, icônes et autres objets est codé de façon "lisible" pour les Screen Readers 0

1.46 8.11 Le feedback des actions utilisateurs (case cochée, objet crée…) est "lisible" pour les Screen Readers 0

1.47 11.2 Les pop-ups ou dialog-boxes des messages d'erreur/warning apparaîssent près de l'aire cliquée ou en tout cas dans l'endroit de l'écran avec le plus de chances d'être fixé 0

1.48 La possibilité de Drag & drop doit être clairement indiquée (texte explicatif, info-bulles…) 0

1.49 Pendant du drag&drop, toute zone survolée candidate au dépôt de l'objet doit être hightlightée 0

1.50 L'effet du drag & drop doit être visible (ex : panier où le nombre d'articles déplacés s'actualise au fur et à mesure) 0

1.51 13.9 Le système indique clairement si les autres utilisateurs peuvent être contactés (disponibles, occupés, absents…) 0

1.52 13.10 Les moyens de communication avec les autres utilisateurs sont clairs (texte, audio, vidéo) 0

1.53 critère supplémentaire éventuel 0


52 Nombre Questions

0 Nombre N/A POURCENT. N/A 0,00%

0 Nb de NON POURCENT. Non 0,00%

0 Nb de OUI POURCENT. Réussite 0,00%

52 Nb de NC POURCENT. Non Complété 100,00% 100,00%

Non

applic

abl

eN

on

Oui

Score

Gravité

(1-3)

Score

Fréquence

(1-4) Severity



Type

Intervention

Module

concerné

2 Match avec les profils des utilisateurs - PROF

2.1 Les mots employés sont pertinents par rapport au publique visé 0

2.2 Si des couleurs véhiculent un sens, elles sont pertinentes par rapport au public 0

2.3 L'organisation de l'arborescence/des menus/des onglets reflète un ordre clair et logique pour le public 0

2.4 12.13 Si on s'adresse au grand public, les mots techniques sont expliqués (glossaire, tooltips…) 0

2.5 10.16 Les symboles des icônes sont les plus familiers possibles pour l'utilisateur 0

2.6 10.17 Si les icônes sont fondées sur une métaphore, elle est bien choisie par rapport au public cible 0

2.7 Si le site existe en plusieurs langues, les mots employés sont corrects et orthographiés de manière exacte 0

2.8 Les images et symboles du site sont compatibles avec les conventions culturelles des utilisateurs 0

2.9 3.2 6.20 L'information importante est placée aux niveaux plus hauts de l'arborescence 0

2.10 4.2 Pour le téléchargement de fichiers, l'icône adéquate est utilisée (word, pdf...) 0

2.11 5.8 11.15 Le langage des messages d'erreurs est à la portée de l'utilisateur et évite le "jargon informatique" 0

2.12 7.11 Les fonctions de base (par ex. dans le moteur de recherche ) sont mises plus en valeur que les options avancées/spécifiques (visant moins d'utilisateurs) 0

2.13 Le site respecte les conventions et les habitudes courantes dans le monde auquel il fait référence (caddie dans le e-commerce, notion de classe dans le e-learning…) 0



13 Nombre Questions





Non

applic

abl

eN

on

Oui

Score

Gravité

(1-3)

Score

Fréquence

(1-4) Severity



Type

Intervention

Module

concerné

3 Sensation de contrôle - CTRL

3.1 1.28 9.20 Les titres de différentes pages/fenêtres/dialog-boxes ne prêtent pas à confusion entre eux 0 0 0

3.2 2.9 6.20 L'information importante est placée aux niveaux plus hauts de l'arborescence/des menus/des onglets 0 0 0

3.3 Les acronymes et les termes de fantaisie sont évités 0

3.4 Les Labels de chaque menu/sous-menu/bouton/onglet indiquent correctement la page d'arrivée 0

3.5 Les Labels de chaque menu/sous-menu/bouton/onglet sont clairement distincts entre eux (mutuellement exclusifs) si la cible est différente (éviter par ex. "Nos solutions" et "Nos produits") 0

3.6 1.43 Lorsqu'aucun élément d'un sous-menu/sous-onglet n'est disponible, le Label du menu/onglet est lui-même grisé et non cliquable 0 0 0

3.7 9.21 5.24 Lorsque possible et pertinent, le système permet à l'utilisateur d'anticiper les résultats de ses actions (ex. fonction "Preview" avant d'imprimer une document) 0

3.8 1.34 L'URL de chaque page aide à en comprendre le contenu et la position dans l'arborescence 0 0 0

3.9 Sur chaque page apparaissent des "breadcrumbs" pour connaître sa position et le chemin parcouru dans l'arborescence 0

3.10 Tous les noms de pages citées dans le breadcrumb sont cliquables sauf celui relatif à la page actuelle 0

3.11 Les actions de sélection et désélection sont claires et intuitives 0

3.12 Un lien est toujours disponible vers la page d'accueil 0

3.13 12.8 Si le site dépasse les 3 niveaux de profondeur, un plan complet est disponible 0

3.14 8.28 12.14 Les icônes sont accompagnées d'un équivalent textuel (dans la page ou en pop-up) 0

3.15 Les fonctions de filtrage (dans les tableaux de données, résultats de recherche…) sont faciles à identifier et utiliser 0

3.16 Les fonctions de tri (dans les tableaux de données, resultats de recherche…) sont faciles à identifier et utiliser 0

3.17 La manipulation d'objets 3D est simple et intuitive 0

3.18 6.24 A chaque instant/étape d'une procédure, toutes les options/fonctions utiles à l'utilisateur lui sont fournies 0

3.19 6.25 A chaque instant/étape d'une procédure, uniquement les options/fonctions utiles à l'utilisateur lui sont fournies 0

3.20 Les liens transversaux ne téléportent pas l'utilisateur dans des endroits de l'arborescence éloignés et imprévus 0

3.21 Il est possible de revenir facilement à la page précédente (via le browser ou via un lien dans la page actuelle) 0

3.22 6.32 Si possible et pertinent, une fonction "Historique des dernières pages visitées" est présente 0

3.23 1.13 Si les pages sont très longues, un équivalent textuel du menu du haut est proposé en pied de page 0 0 0

3.24 9.26 Le site privilégie des menus larges plutôt que profonds 0

3.25 Les liens "ancre" à l'intérieur d'une même page sont évités (sauf dans le cas des sommaires) 0

3.26 11.7 Les actions qui ont des conséquences importantes et/ou non réversibles (ex. destruction du profil de l'utilisateur) nécessitent une confirmation de l'utilisateur 0

3.27 Chaque élément de sous-menu n'appartient qu'à un et un seul menu supérieur 0

3.28 Si les pages sont très longues, un lien "revenir en haut de la page" est présent 0

3.29 Le sens de chacune des fonctionnalités du site est facile à comprendre 0

3.30 Si le site dépasse les 100 pages, un moteur de recherche est présent 0

3.31 Lorsque 2 menus de navigation sont présents (ex. en haut et à gauche) la différence est claire et les contenus bien différenciés 0

3.32 1.35 9.13 Les liens déjà visités sont clairement identifiés 0 0 0

3.33 1.3 9.14 Un titre visible est assigné à chaque page/fenêtre/dialog-box/zone de visualisation 0 0 0

3.34 1.4 9.15 Le titre indique correctement le contenu de la page/fenêtre/dialog-box 0 0 0

3.35 1.5 Si plusieurs options sont disponibles, celle(s) active(s) est/sont clairement différenciée(s) (surbrillance, tick, …) 0 0 0

3.36 1.6 Si plusieurs options sont disponibles, celle active n'est pas sélectionnable 0 0 0

3.37 1.7 9.16 Dans les procédures (ex. transactions), les steps sont clairement indiqués, ainsi que la progression de l'utilisateur (ex. "2 sur 4") 0 0 0

3.38 1.17 Aucun lien n'est ouvert dans une nouvelle fenêtre en plein écran (ou onglet du Browser) sans prévenir 0 0 0

3.39 1.18 Les liens qui pointent vers un autre site sont clairement indiqués (par un symbôle à coté, par ex.) 0 0 0

3.40 1.20 Si l'utilisateur est "loggué", une fonction clairement visible lui permet de se déconnecter 0 0 0

3.41 1.21 Les couleurs/icônes/images aident à distinguer les différentes sections du site 0 0 0

3.42 1.23 Le codage visuel des éléments cliquables (boutons, icônes, liens…) est différent de celui des éléments non cliquables 0 0 0

3.43 1.36 Les barres de scrolling n'apparaissent que lorsque nécessaire 0 0 0

3.44 1.38 L'utilisateur est informé du niveau de Droits relatif à son profil 0 0 0

3.45 4.5 Si plusieurs liens/boutons ouvrent un même objet (fenêtre, boite de dialogue…), ils sont cohérents entre eux 0

3.46 4.9 Les mots utilisés pour indiquer chaque fonctionnalité sont cohérents et univoques (ex. éviter "caddie" à un endroit et "panier" à un autre) 0

3.47 5.11 11.13 Les messages d'erreur fournissent des explications quant à l'origine du problème et à sa solution 0

3.48 5.13 Lorsque l'utilisateur pointe avec la souris une indication de problème, un message s'affiche en donnant plus de détails, les causes et les actions à entreprendre 0

3.49 7.8 Les informations groupées par leur sens, sont visuellement clairement regroupées et distinctes 0

3.50 7.9 L'espace vide est utilisé pour véhiculer l'organisation conceptuelle du contenu 0

3.51 6.3 7.22 Les informations/données les plus fréquemment cherchées sont mises en valeur et faciles à rejoindre 0

3.52 Si le site comporte un moteur de recherche, celui-ci est accessible à partir de toutes les pages 0

3.53 13.5 Le système informe l'utilisateur des conséquences de ses actions sur les documents/éléments par rapport au travail d'autres utilisateurs 0

3.54 La possibilité de Drag & drop doit être clairement indiquée (texte explicatif, info-bulles…) 0

3.55 Pendant du drag&drop, toute zone survolée candidate au dépôt de l'objet doit être hightlightée 0

3.56 5.35 Les éléments des menus et des tabs sont entièrement cliquables (non seulement le texte mais aussi le fond) 0

3.57 Toutes les pages sont retrouvables et atteignables via les menus de navigation 0

3.58 10.28 Si l'utilisateur peut créer un compte/profil, il peut également le supprimer 0



58 Nombre Questions





Non

applic

abl

eN

on

Oui

Score

Gravité

(1-3)

Score

Fréquence

(1-4) Severity



Type

Intervention

Module

concerné

4 Cohérence et respect des standard - C&S

4.1 10.19 Les symboles des icônes sont ceux standards pour les fonctions qu'ils représentent 0

4.2 2.10 Pour le téléchargement de fichiers, l'icône adéquate est utilisée (word, pdf...) 0 0 0

4.3 Les liens sont de préférence bleus et soulignés ou du moins clairement distincts du reste du texte 0

4.4 Les termes employés pour les concepts clé sont cohérents dans toute l'interface 0

4.5 3.45 Si plusieurs liens/boutons ouvrent un même objet (fenêtre, boite de dialogue…), ils sont cohérents entre eux 0 0 0

4.6 5.25 Les boutons radio indiquent des options mutuellement exclusives, les check boxes non 0

4.7 Aucun autre texte du site n'a le même codage visuel que les liens hypertextuels 0

4.8 Si plusieurs codages visuels des liens existent, ils ont un sens accompli 0

4.9 3.46 Les mots utilisés pour indiquer chaque fonctionnalité sont cohérents et univoques (ex. éviter "caddie" à un endroit et "panier" à un autre) 0 0 0

4.10 10.20 14.1 L'identité visuelle du site (logo, couleurs, formes, typographie) est cohérente avec celle de l'entité (entreprise, marque…) 0

4.11 Le menu de navigation est présent dans toutes les pages 0

4.12 Les symboles utilisés sont constants dans tout le site 0

4.13 11.8 Les boutons dans les boîtes de dialogue ont toujours le même aspect, texte et séquence (cancel/ok, yes/no…) 0

4.14 11.9 L'aspect des boîtes de dialogue est constant et cohérent 0

4.15 Le titre de chaque page est cohérent avec les liens qui y amènent 0

4.16 1.22 Les éléments "classiques" des IHM (menus déroulants, champs de saisie…) ont un aspect visuel standard et facilement reconaissable 0

4.17 3.27 Chaque élément de sous-menu n'appartient qu'à un et un seul menu supérieur 0 0 0

4.18 7.2 La mise en page (zoning) est cohérente d'une page à l'autre 0

4.19 7.3 14.3 Typographie, couleurs et images (charte graphique) sont cohérentes d'une page à l'autre 0

4.20 7.13 Dans les tableaux la mise en page est optimisée (texte aligné à gauche, chiffres à droite, ou alors toutes les données centrées) 0

4.21 Le logo/symbole du site est positionné en haut à gauche 0

4.22 Le logo/symbole constitue un lien vers la page d'accueil 0

4.23 Des éléments d'interaction similaires (ex. boutons de validation) sont représentés de la même façon 0



23 Nombre Questions





Non

applic

abl

eN

on

Oui

Score

Gravité

(1-3)

Score

Fréquence

(1-4) Severity



Type

Intervention

Module

concerné

5 Gestion des Erreurs - ERR

5.1 11.10 Lorsque l'utilisateur ferme une page éditable/formulaire sans avoir sauvegardé, un pop-up l'informe et lui propose de sauver 0

5.2 6.26 Le site propose l'autocomplétion dans les champs de saisie 0

5.3 Les boutons/icônes/liens temporairement non disponibles sont visuellement grisé(e)s ou n'apparaissent pas 0

5.4 Dans les formulaires, les champs obligatoires sont clairement indiqués 0

5.5 Si une erreur est commise dans un formulaire, lorsqu'il est affiché pour correction, le curseur est placé dans le champ concerné 0

5.6 Lorsqu'un formulaire est rechargé car il contient une erreur, les infos correctes sont gardées (pour éviter de nouvelles erreurs) 0

5.7 Si une erreur est commise dans un formulaire, elle est clairement décrite et expliquée 0

5.8 2.11 11.15 Le langage des messages d'erreurs est à la portée de l'utilisateur et évite le "jargon informatique" 0 0 0

5.9 11.11 Les messages d'erreur ne critiquent pas explicitement ou implicitement l'utilisateur 0

5.10 11.12 Les messages d'erreur sont courts et non ambigus 0

5.11 3.47 11.13 Les messages d'erreur fournissent des explications quant à l'origine du problème et à sa solution 0 0 0

5.12 1.48 Les indications relatives à une erreur ou un problème sont mises en valeur et faciles à voir 0 0 0

5.13 3.48 Lorsque l'utilisateur pointe avec la souris une indication de problème, un message s'affiche en donnant plus de détails, les causes et les actions à entreprendre 0 0 0

5.14 La signalisation des champs obligatoires est placée avant le formulaire 0

5.15 Les champs de saisie sont accompagnés de libellés clairs et, si nécessaire, d'exemples de contenus possibles 0

5.16 12.15 Lorsque nécessaire, une forme d'aide (bulle, lien…) est fournie lors de la saisie d'informations dans un champ 0

5.17 Lorsqu'un nombre maximum de caractères est disponible dans un champ de saisie, un signal sonore prévient l'utilisateur de la fin de l'espace 0

5.18 Lorsqu'un nombre maximum de caractères est disponible dans un champ de saisie, un compteur défile pour prévenir l'utilisateur de l'espace restant 0

5.19 6.27 Lorsque possible, les champs de saisie/menus déroulants sont pré-positionnés sur le choix le plus probable 0

5.20 Le système empêche l'utilisateur de saisir des données erronées (trop longues/courtes, texte à la place de chiffres….) 0

5.21 Le son est utilisé pour attirer l'attention en cas de problème ou erreur 0

5.22 11.14 Lorsque l'utilisateur tente de faire une action non autorisée (ex. drag&drop dans une zone interdite), le système fournit un feedback explicatif 0

5.23 Le moteur de recherche propose des suggestions pertinentes de correction quand il ne trouve pas de résultat 0

5.24 3.7 9.21 Lorsque possible et pertinent, le système permet à l'utilisateur d'anticiper les résultats de ses actions (ex. fonction "Preview" avant d'imprimer une document) 0 0 0

5.25 4.6 Les boutons radio indiquent des options mutuellement exclusives, les check boxes non 0 0 0

5.26 6.5 Lorsque possible, des cases à cocher sont préférées aux champs de saisie 0

5.27 9.2 Les unités de mesure sont clairement identifiées 0

5.28 6.30 Lorsque pertinent, les champs de saisie/menus déroulants sont positionnés sur le dernier choix effectué par l'utilisateur 0

5.29 Les messages d'erreur s'affichent à l'endroit où ils ont le plus de chances d'être vus (centre de l'écran, endroit où l'utilisateur est en train de regarder…) 0

5.30 Le drag & drop doit être facile (recepteur proche, grand, logique) 0

5.31 Aucun lien ne pointe vers des pages non disponibles 0

5.32 Si une page n'est plus disponible (error 404) ceci est expliqué avec un message clair pour l'utilisateur 0

5.33 Si une page n'est plus disponible (error 404) des alternatives sont fournies (lien vers accueil, liens similaires…) 0

5.34 Les différents liens sont visuellement bien distincts entre eux (pas de retours à la ligne sur un même lien, mise en page claire…) 0

5.35 3.56 Les éléments des menus et des tabs sont entièrement cliquables (non seulement le texte mais aussi le fond) 0 0 0

5.36 7.24 La mise en page des cases à cocher/radio buttons n'est pas ambiguë (on est certain de quel label correspond à quelle case) 0

5.37 10.34 Le site évite d'utiliser des captcha et implémente plutôt des champs de texte en javascript (contre le SPAM) 0



37 Nombre Questions



0 Nb de OUI POURCENT. Réussite 0,00%37 Nb de NC POURCENT. Non Complété 100,00% 100,00%

Non

applic

abl

eN

on

Oui

Score

Gravité

(1-3)

Score

Fréquence

(1-4) Severity



Type

Intervention

Module

concerné

6 Optimisation des Performances - PERF

6.1 7.19 14.8 Un style concis, scannable et objectif est employé 0

6.2 11.16 Les phrases longues, les périphrases, les doubles négations et les verbes passifs sont évités 0

6.3 3.51 7.22 Les informations/données les plus fréquemment cherchées sont mises en valeur et faciles à rejoindre 0 0 0

6.4 Les chargements des pages sont rapides même en connexion à bas débit 0

6.5 5.26 Lorsque possible, des cases à cocher sont préférées aux champs de saisie 0 0 0

6.6 La touche Tab dans les formulaires permet d'avancer dans un ordre logique 0

6.7 Shift+Tab permet de revenir à la sélection précédente 0

6.8 Dans le cas où la longueur des données saisies est connue (ex code postal), l'autotabbing permet à l'utilisateur de passer automatiquement au champ suivant 0

6.9 7.20 Les informations essentielles sont mises en valeur et faciles à balayer 0

6.10 Les tableaux de données offrent des fonctions de recherche des occurrences souhaitées 0

6.11 8.30 10.21 Le texte est toujours lisible, suffisamment contrasté par rapport au fond, compatible avec les standards W3C 0

6.12 Les couleurs sont exploitées pour véhiculer une signification (ex. densité d'une propriété…) 0

6.13 Lorsque l'utilisateur rentre dans une page avec plusieurs choix/éléments, celui/ceux qui est/sont le(s) plus pertinent(s)/probable(s) est/sont pré-sélectionné(s) 0

6.14 Lorsque pertinent, des options de copie ou de duplication de données (ex. fiches en création) sont disponibles 0

6.15 Les procédures et actions disponibles dans le site sont structurées de façon à optimiser le nombre de clics nécessaires 0

6.16 Les informations de la page s'affichent au fur et à mesure du téléchargement 0

6.17 10.5 Lorsque possible, le système suggère des choix (ex. produits) pertinents par rapport aux besoins de l'utilisateur 0

6.18 Le "single sign-in" est le plus possible respecté 0

6.19 Le système récupère automatiquement toutes les données saisies qui peuvent être nécessaires à nouveau (ex. adresse de facturation --> adresse d'expédition) 0

6.20 2.9 3.2 L'information importante est placée aux niveaux plus hauts de l'arborescence/des menus/des onglets 0 0 0

6.21 Toute information qui peut être calculée par le système est placée automatiquement dans les champs des formulaires (ex. ville de l'utilisateur, calculée à partir du code postal) 0

6.22 Le drag & drop est utile, améliore l'efficience (par rapport à du copier-coller par exemple) 0

6.23 Les actions de l'utilisateur sont mises en file d'attente et traitées dès que possible (enqueuing), au lieu de lui demander d'attendre que le système soit disponible pour pourvoir agir 0

6.24 3.18 A chaque instant/étape d'une procédure, toutes les options/fonctions utiles à l'utilisateur lui sont fournies 0 0 0

6.25 3.19 A chaque instant/étape d'une procédure, uniquement les options/fonctions utiles à l'utilisateur lui sont fournies 0 0 0

6.26 5.2 Le site propose l'autocomplétion dans les champs de saisie 0 0 0

6.27 5.19 Lorsque possible, les champs de saisie/menus déroulants sont positionnés sur le choix le plus probable 0 0 0

6.28 8.5 Dans les boîtes de dialogue, il est possible de se déplacer entre les boutons avec Tab ou les flèches du clavier et valider par Enter 0

6.29 10.8 Les personnalisations faites par l'utilisateurs sont gardées en mémoire pour les utilisations suivantes 0

6.30 5.33 Lorsque pertinent, les champs de saisie/menus déroulants sont positionnés sur le dernier choix effectué par l'utilisateur 0 0 0

6.31 Si des plug-ins sont nécessaires (Pdf, Flash…) leur absence est détectée automatiquement et l'utilisateur peut aisément les installer sans quitter le site 0

6.32 3.22 Si possible et pertinent, une fonction "Historique des dernières pages visitées" est présente 0 0 0

6.33 Les mots choisis pour constituer un lien hypertexte sont les plus représentatifs de la phrase 0

6.34 10.32 Le site permet le signup (création de compte) en utilisant l'adresse mail de l'utilisateur (la création d'un username/pseudo est proposée par la suite) 0



34 Nombre Questions




34 Nb de NC POURCENT. Non Complété 100,00%

Non

applic

abl

eN

on

Oui

Score

Gravité

(1-3)

Score

Fréquence

(1-4) Severity



Type

Intervention

Module

concerné

7 Layout et mise en page - LAY

7.1 La position des icônes par rapport aux fonctions qui s'y rapportent est bien choisie 0

7.2 4.18 La mise en page (zoning) est cohérente d'une page à l'autre 0 0 0

7.3 4.19 14.3 Typographie, couleurs et images (charte graphique) sont cohérentes d'une page à l'autre 0 0 0

7.4 L'organisation visuelle de l'interface épouse la structure de la tâche de l'utilisateur (zones représentant les différentes sous-tâches à effectuer) 0

7.5 Si possible, le principe de "mapping" entre fonctions et commandes est préservé 0

7.6 9.22 Les champs de saisie de longues chaines numériques sont coupés en unités plus petites 0

7.7 9.23 Les nombres supérieurs à 999 sont séparés par un point (ex. 1.234) pour les sites francophones et par une virgule pour les sites anglophones (ou pas un espace vide, pour toutes les langues) 0

7.8 3.49 Les informations groupées par leur sens, sont visuellement clairement regroupées et distinctes 0 0 0

7.9 3.50 L'espace vide est utilisé pour véhiculer l'organisation conceptuelle du contenu 0 0 0

7.10 Les libellés des formulaires sont alignés à gauche s'ils sont de longueurs similaires et à droite s'ils sont de longueurs très différentes 0

7.11 2.12 Les fonctions de base (par ex. dans le moteur de recherche ) sont mises plus en valeur que les options avancées/spécifiques (visant moins d'utilisateurs) 0 0 0

7.12 10.22 12.16 Le système se base sur les "connaissances dans le monde", mais sans être visuellement surchargé 0

7.13 4.20 Dans les tableaux la mise en page est optimisée (texte aligné à gauche, chiffres à droite, ou alors toutes les données centrées) 0 0 0

7.14 Les étiquettes des champs de saisie/zones de données sont bien placées (ni trop près ni trop loin) 0

7.15 La taille des champs de saisie est adéquate par rapport au contenu à y insérer 0

7.16 10.23 Le groupement visuel des différents champs et éléments d'un formulaire est adéquat par rapport au contenu et est visuellement agréable 0

7.17 La taille des différentes fenêtres/boîtes de dialogues/zones de visualisation est adéquate par rapport au contenu présenté 0

7.18 Dans de gros tableaux de données, les couleurs des lignes sont alternées afin de favoriser la lisibilité des informations 0

7.19 6.1 14.8 Un style concis, scannable et objectif est employé 0 0 0

7.20 6.9 Les informations essentielles sont mises en valeur et faciles à balayer 0 0 0

7.21 10.4 La disposition visuelle des éléments épouse le parcours oculaire de l'utilisateur 0

7.22 3.51 6.3 Les informations les plus fréquemment cherchées sont mises en valeur et faciles à rejoindre 0 0 0

7.23 La page d'accueil ressemble à une page d'accueil (peu de contenu, beaucoup de liens) 0

7.24 5.36 La mise en page des cases à cocher/radio buttons n'est pas ambiguë (on est certain de quel label correspond à quelle case) 0 0 0



24 Nombre Questions





Non

applic

abl

eN

on

Oui

Score

Gravité

(1-3)

Score

Fréquence

(1-4) Severity



Type

Intervention

Module

concerné

8 Flexibilité - FLEX

8.1 Les raccourcis claviers typiques pour les non voyants sont implémentés (accesskeys) 0

8.2 Le code HTML est compatible avec les prérequis des navigateurs vocaux (ex. balise ALT, balises H1-H6...) 0

8.3 Le code HTML est compatible avec les différents Browsers (IE, FireFox, Opéra…) 0

8.4 L'affichage est compatible avec plusieurs résolutions d'écran (min 1024*768) 0

8.5 6.28 Dans les boîtes de dialogue, il est possible de se déplacer entre les boutons avec Tab ou les flèches du clavier et valider par Enter 0 0 0

8.6 Les fonctions de recherche (dans la Doc ou dans des tableaux de données) présentent des options de base et des options avancées 0

8.7 La couleur n'est pas le seul moyen de véhiculer l'information 0

8.8 11.17 Les messages d'erreur présentent une version plus approfondie pour les experts 0

8.9 Les résultats de la recherche peuvent être triés par date/importance/tout autre critère pertinent pour l'utilisateur 0

8.10 1.45 L'état de boutons, icônes et autres objets est codé de façon "lisible" pour les Screen Readers 0 0 0

8.11 1.46 Le feedback des actions utilisateurs (case cochée, objet créé…) est "lisible" pour les Screen Readers 0 0 0

8.12 L'IHM propose des palettes d'icônes de différentes tailles 0

8.13 Les pages sont organisées de façon à être utilisables sans la feuille de style (CSS) 0

8.14 10.24 L'utilisateur peut personnaliser ou parametrer l'interface (zones d'info, couleurs, zoning…) 0

8.15 Les concepts clé sont répétés à plusieurs endroits du site 0

8.16 Si le contenu s'y prête (articles, factures…), le site fournit une fonctionnalité d'impression 0

8.17 Si pertinent, les représentations graphiques ont une option pour zoomer et dézoomer 0

8.18 10.18 Mots et images clignotants ou en mouvement sont évités ou réservés à des cas très particuliers (message d'erreur important…) 0

8.19 La taille des caractères n'est pas codée de façon absolue et permet le redimensionnement 0

8.20 Toutes les actions principales peuvent être réalisées aussi bien via le clavier que via la souris 0

8.21 Si certaines tâches requièrent des actions utilisateurs avec délais temporels limités (double clicks, …), l'utilisateur peut paramétrer ces délais 0

8.22 La navigation par clavier n'active pas les options (ex. un choix avec check-box reçoit le focus en naviguant avec les flèches, mais il est séléctionné avec la barre d'espace) 0

8.23 Le texte est employé uniquement pour écrire des mots et non pas à des fins de dessin (ex. des XXXXX en tant que séparateurs, etc.) 0

8.24 Les tableaux sont correctement codés pour les Screen Readers (colonnes et lignes) 0

8.25 Les liens clé sont répétés à plusieurs endroits de la page d'accueil et du site 0

8.26 1.42 Les messages d'alerte ou erreur doivent rester affichés de façon permanente jusqu'à disparition du problème ou nécessiter une action utilisateur afin de disparaître (ex.click sur OK dans un dialog-box) ou chargement d'une autre page 0 0 0

8.27 Si du Flash est présent, une alternative textuelle de ces contenus est fournie 0

8.28 3.14 12.14 Les icônes sont accompagnées d'un équivalent textuel (dans la page ou en pop-up) 0 0 0

8.29 Si du Flash est employé pour une intro, le site permet de la sauter 0

8.30 6.11 10.21 Le texte est toujours lisible, suffisamment contrasté par rapport au fond, compatible avec les standards W3C 0 0 0

8.31 10.1 Le texte est toujours lisible, suffisamment contrasté par rapport au fond et de taille convenable 0

8.32 10.6 Les représentations graphiques des données peuvent être manipulées et personnalisées (rotation axes, affichage étiquettes, changement couleurs…) 0

8.33 10.7 Lorsque pertinent, les représentations graphiques des données peuvent être sauvegardées ou exportées 0

8.34 Le site s'affiche correctement sur les supports mobiles (smart phones, PDA, Iphone…) 0



34 Nombre Questions





9 Surcharge cognitive - SURC Non

applic

abl

eN

on

Oui

Score

Gravité

(1-3)

Score

Fréquence

(1-4) Severity



Type

Intervention

Module

concerné

9.1 10.25 Les symboles des icônes sont univoques (1 symbole = 1 icône = 1 fonction) 0

9.2 5.27 Les unités de mesure sont clairement identifiées 0 0 0

9.3 Si il est pertinent pour l'utilisateur de comparer des données/produits, des fonctions de type "placer côte à côte" ou des tableaux comparatifs sont disponibles 0

9.4 Les tableaux de données offrent des fonctions de filtrage 0

9.5 Les tableaux de données offrent des fonctions de tri 0

9.6 Non plus de 5 couleurs (ayant une signification précise) ne sont employées dans chaque page 0

9.7 Non plus de 9 couleurs (ayant une signification précise) ne sont employées dans la totalité du site 0

9.8 Le nombre des différents choix proposés ne dépasse pas la taille de la mémoire de travail 0

9.9 Les menus déroulants n'ont pas de scrolling 0

9.10 Les menus déroulants ne contiennent pas plus de 2 niveaux, clairement différenciés 0

9.11 Le nombre maximum d'éléments dans chaque menu et niveau ne dépasse pas 9 0

9.12 Chaque page-écran d'une procédure (inscription, achat…) contient toutes les infos nécessaires et ne fait pas référence à des données dans d'autres pages 0

9.13 1.35 3.32 Les liens déjà visités sont clairement identifiés 0 0 0

9.14 1.3 3.33 Un titre visible est assigné à chaque page/fenêtre/dialog-box/zone de visualisation 0 0 0

9.15 1.4 3.34 Le titre indique correctement le contenu de la page/fenêtre/dialog-box 0 0 0

9.16 1.7 3.37 Dans les procédures (ex. transactions), les steps sont clairement indiqués, ainsi que la progression de l'utilisateur (ex. "2 sur 4") 0 0 0

9.17 1.26 Les représentations graphiques des données sont le plus possible adaptées au contenu représenté (camemberts pour %, courbes pour données qui évoluent dans le temps…) 0 0 0

9.18 1.27 Les représentations graphiques des données sont suffisamment proches de ces dernières pour voir le changement en fonction du changement des données source 0 0 0

9.19 1.30 Si dans les tableaux de données il y a du scrolling, les en-têtes restent toujours visibles 0 0 0

9.20 1.28 3.1 Les titres de différentes pages/fenêtres/dialog-boxes ne prêtent pas à confusion entre eux 0 0 0

9.21 3.7 5.24 Lorsque possible et pertinent, le système permet à l'utilisateur d'anticiper les résultats de ses actions (ex. fonction "Preview" avant d'imprimer une document) 0 0 0

9.22 7.6 Les champs de saisie de longues chaines numériques sont coupés en unités plus petites 0 0 0

9.23 7.7 Les nombres supérieurs à 999 sont séparés par un point (ex. 1.234) pour les sites francophones et par une virgule pour les sites anglophones 0 0 0

9.24 12.11 L'utilisateur peut passer aisément de la consultation de l'aide en ligne à la navigation dans le site 0

9.25 Chaque page véhicule un contenu clair et ne surcharge pas l'utilisateur d'une quantité d'informations trop importante 0

9.26 3.24 Le site privilégie des menus larges plutôt que profonds 0 0 0

9.27 Dans le cas d'un contenu complexe ou non familier, chaque page doit être joignable avec 3 clics maximum 0

9.28 Si l'accueil est un portail, les différentes sections/contenus sont clairement distincts et faciles à différencier 0

9.29 Chaque page représente une unité d'information autonome 0

9.30 Aucune page ne présente un scolling supérieur à trois fois le texte affiché à l'écran 0



30 Nombre Questions





Non

applic

abl

eN

on

Oui

Score

Gravité

(1-3)

Score

Fréquence

(1-4) Severity



Type

Intervention

Module

concerné

10 User Experience - UX

10.1 8.31 Le texte est toujours lisible, suffisamment contrasté par rapport au fond et de taille convenable 0 0 0

10.2 Les symboles des icônes sont visuellement économes 0

10.3 Les icônes ont un design agréable 0

10.4 7.21 La disposition visuelle des éléments épouse le parcours oculaire de l'utilisateur 0 0 0

10.5 6.17 Lorsque possible, le système suggère des choix (ex. produits) pertinents par rapport aux besoins de l'utilisateur 0 0 0

10.6 8.32 Les représentations graphiques des données peuvent être manipulées et personnalisées (rotation axes, affichage étiquettes, changement couleurs…) 0 0 0

10.7 8.33 Lorsque pertinent, les représentations graphiques des données peuvent être sauvegardées ou exportées 0 0 0

10.8 6.29 Les personnalisations faites par l'utilisateurs sont gardées en mémoire pour les utilisations suivantes 0 0 0

10.9 Les lignes du design et les choix des couleurs sont agréables et soignés 0

10.10 La charte graphique est harmonieuse et adaptée au contenu véhiculé (image de marque…) 0

10.11 La mise en forme du texte (gras, majuscules…) est utilisée à bon escient du point de vue de l'esthétisme 0

10.12 Les polices avec empattements sont évitées 0

10.13 La sur-utilisation de mots écrits en lettres majuscules est évitée 0

10.14 Texte et éléments graphiques clignotants, évitent les fréquences entre 10 Hz et 25 Hz 0

10.15 1.24 Les éléments cliquables (boutons, liens…) sont visuellement saillants et bien visibles 0 0 0

10.16 2.5 Les symboles des icônes sont les plus familiers possibles pour l'utilisateur 0 0 0

10.17 2.6 Si les icônes sont fondées sur une métaphore, elle est bien choisie par rapport au public cible 0 0 0

10.18 8.18 Mots et images clignotants ou en mouvement sont évités ou réservés à des cas très particuliers (message d'erreur important…) 0 0 0

10.19 4.1 Les symboles des icônes sont ceux standards pour les fonctions qu'ils représentent 0 0 0

10.20 4.10 14.1 L'identité visuelle du site (logo, couleurs, formes, typographie) est cohérente avec celle de l'entité (entreprise, marque…) 0 0 0

10.21 6.11 8.30 Le texte est toujours lisible, suffisamment contrasté par rapport au fond, compatible avec les standards W3C 0 0 0

10.22 7.12 12.16 Le système se base sur les "connaissances dans le monde", mais sans être visuellement surchargé 0 0 0

10.23 7.16 Le groupement visuel des différents champs et éléments d'un formulaire est adéquat par rapport au contenu et est visuellement agréable 0 0 0

10.24 8.14 L'utilisateur peut personnaliser ou parametrer l'interface (zones d'info, couleurs, zoning…) 0 0 0

10.25 9.1 Les symboles des icônes sont univoques (1 symbole = 1 icône = 1 fonction) 0 0 0

10.26 Le logo est mis en évidence et facile à reconnaître 0

10.27 14.6 La Page d'accueil véhicule clairement le but et la nature du site (informatif, commercial…) 0

10.28 3.58 Si l'utilisateur peut créer un compte/profil, il peut également le supprimer 0 0 0

10.29 11.20 Si de la synthèse vocale est présente, la voix est suffisamment humaine et compréhensible 0

10.30 11.21 Si un système de dialogue doté d'I.A. est présent (ex. assistant SAV virtuel), ses réponses sont claires et pertinentes 0

10.31 13.11 L'utilisateur a la possibilité de s'exprimer (commentaires, avis, notes…) 0

10.32 6.34 Le site permet le signup (création de compte) en utilisant l'adresse mail de l'utilisateur (la création d'un username/pseudo est proposée par la suite) 0 0 0

10.33 Le site n'abonne pas automatiquement l'utilisateur à newletters ou autres formes de communication (sans le prévenir ou en cochant par défault la case d'autorisation) 0

10.34 5.37 Le site évite d'utiliser des captcha et implémente plutôt des champs de texte en javascript (contre le SPAM) 0 0 0



34 Nombre Questions





Non

applic

abl

eN

on

Oui

Score

Gravité

(1-3)

Score

Fréquence

(1-4) Severity



Type

Intervention

Module

concerné

11 Dialogue Homme-Machine - DIAL

11.1 Dans les messages d'info/warning/erreur, les mots clé sont mis en valeur (gras…) 0

11.2 1.51 Les pop-ups ou dialog-boxes des messages d'erreur/warning apparaissent près de l'aire cliquée ou en tout cas dans l'endroit de l'écran avec le plus de chances d'être fixé 0 0 0

11.3 Le système respecte la maxime de Grice de quantité 0

11.4 Le système respecte la maxime de Grice de qualité 0

11.5 Le système respecte la maxime de Grice de pertinence 0

11.6 Le système respecte la maxime de Grice de manière 0

11.7 3.26 Les actions qui ont des conséquences importantes et/ou non réversibles (ex. destruction du profil de l'utilisateur) nécessitent une confirmation de l'utilisateur 0 0 0

11.8 4.13 Les boutons dans les boîtes de dialogue ont toujours le même aspect, texte et séquence (cancel/ok, yes/no…) 0 0 0

11.9 4.14 L'aspect des boîtes de dialogue est constant et cohérent 0 0 0

11.10 5.1 Lorsque l'utilisateur ferme une page éditable/formulaire sans avoir sauvegardé, un pop-up l'informe et lui propose de sauver 0 0 0

11.11 5.9 Les messages d'erreur ne critiquent pas explicitement ou implicitement l'utilisateur 0 0 0

11.12 5.10 Les messages d'erreur sont courts et non ambigus 0 0 0

11.13 5.11 3.47 Les messages d'erreur fournissent des explications quant à l'origine du problème et à sa solution 0 0 0

11.14 5.21 Le son est utilisé pour attirer l'attention en cas de problème ou erreur 0 0 0

11.15 5.22 Lorsque l'utilisateur tente de faire une action non autorisée (ex. drag&drop dans une zone interdite), le système fournit un feedback explicatif 0 0 0

11.16 5.8 2.11 Le langage des messages d'erreurs est à la portée de l'utilisateur et évite le "jargon informatique" 0 0 0

11.17 6.2 Les phrases longues, les périphrases, les doubles négations et les verbes passifs sont évités 0 0 0

11.18 8.8 Les messages d'erreur présentent une version plus approfondie pour les experts 0 0 0

11.19 12.10 Les tootips et autres formes d'aide ne fournissent que des informations pertinentes et adaptées au public cible 0

11.20 10.29 Si de la synthèse vocale est présente, la voix est suffisamment humaine et compréhensible 0 0 0

11.21 10.30 Si un système de dialogue doté d'I.A. est présent (ex. assistant SAV virtuel), ses réponses sont claires et pertinentes 0 0 0



21 Nombre Questions





Non

applic

abl

eN

on

Oui

Score

Gravité

(1-3)

Score

Fréquence

(1-4) Severity



Type

Intervention

Module

concerné

12 Aide et Documentation - AIDE

12.1 Si un langage particulier est employé (acronymes…), un glossaire est présent 0

12.2 Le site dispose d'une rubrique Aide ou FAQ 0

12.3 La rubrique "Aide" est positionnée de façon visible et conventionnelle 0

12.4 La rubrique "Aide" est d'accès facile à partir de toutes les pages du site 0

12.5 Des bulles d'aide expliquent tous les widgets/élements difficiles à comprendre 0

12.6 L'utilisateur a à sa disposition une adresse mail/un formulaire pour demander de l'aide spécifique, contacter le SAV, etc 0

12.7 Lorsque pertinent, des formes d'aide contextuelle sont fournies 0

12.8 3.13 Si le site dépasse les 3 niveaux de profondeur, un plan est disponible 0 0 0

12.9 Le plan du site est cliquable 0

12.10 11.18 Les tootips et autres formes d'aide ne fournissent que des informations pertinentes et adaptées au public cible 0 0 0

12.11 9.24 L'utilisateur peut passer aisément de la consultation de l'aide en ligne à la navigation dans le site 0 0 0

12.12 1.37 Si un nombre important de couleurs ou de codages visuels de l'information est présent, une légende est fournie près des données 0 0 0

12.13 2.4 Si on s'adresse au grand public, les mots techniques sont expliqués (glossaire, tooltips…) 0 0 0

12.14 3.14 8.28 Les icônes sont accompagnées d'un équivalent textuel (dans la page ou en pop-up) 0 0 0

12.15 5.16 Lorsque nécessaire, une forme d'aide (bulle, lien…) est fournie lors de la saisie d'informations dans un champ 0 0 0

12.16 7.12 10.22 Le système se base sur les "connaissances dans le monde", mais sans être visuellement surchargé 0 0 0

12.17 Le plan du site est rejoignable de n'importe quelle page du site (il est par ex. dans le menu) 0

12.18 Toutes les formes d'aide (glossaire, FAQ, etc.) sont facilement repérables et identifiables 0



18 Nombre Questions





13 Collaboration - COLL Non

applic

abl

eN

on

Oui

Score

Gravité

(1-3)

Score

Fréquence

(1-4) Severity



Type

Intervention

Module

concerné

13.1 L'utilisateur est informé de la séquence du Workflow auquel ses données/documents sont soumis(es) 0

13.2 L'utilisateur est informé de la présence d'autres utilisateurs connectés au système 0

13.3 L'utilisateur peut changer son statut de connexion au système (occupé, invisible, disponible…) 0

13.4 Des moyens de communication synchrones et/ou asynchrones sont fournis 0

13.5 3.53 Le système informe l'utilisateur des conséquences de ses actions sur les documents/éléments par rapport au travail d'autres utilisateurs 0 0 0

13.6 1.39 L'utilisateur est informé de l'état actuel de ses données/documents dans le workflow 0 0 0

13.7 1.40 Le système fournit un feedback lorsqu'un document/élément est en cours d'édition de la part d'un autre utilisateur 0 0 0

13.8 1.41 Le système fournit une indication concernant la date et l'auteur des dernières modifications de chaque document/élément 0 0 0

13.9 1.55 Le système indique clairement si les autres utilisateurs peuvent être contactés (disponibles, occupés, absents…) 0 0 0

13.10 1.56 Les moyens de communication avec les autres utilisateurs sont clairs (texte, audio, vidéo) 0 0 0

13.11 10.31 L'utilisateur a la possibilité de s'exprimer (commentaires, avis, notes…) 0 0 0



11 Nombre Questions





grille d'évaluation heuristique des sites web et web appli -...

Documents