Introduction ergonomie
Historique des interfaces
Conception cycle de vie
Démarche ergonomique
Méthodes
Normes ISO
Evaluation des interfaces
Bibliographie
Contactez-moi
Liens en ergonomie

Exemples

Conception de sites Web à partir de 4 grandes variables

(1) Variables contextuelles

Les informations contextuelles permettent aux utilisateurs, à tout moment, de savoir où ils se trouvent.

Nous mettons ainsi en valeur un logo (en haut à gauche) qui permet de revenir systématiquement à la page d'accueil, l'adresse de l'organisme qui sera ainsi imprimée sur toutes les pages, hors du contexte Internet, la mise en valeur des rubriques pertinentes cliquées et enfin, un mode de navigation homogène sur l'ensemble des pages.

(2) Variables pertinentes

Ce sont de "grandes rubriques" ou catégories d'informations qui sont pertinentes pour les utilisateurs.

La  structuration des rubriques doit ensuite rester stable sur toutes les pages.

Les rubriques de votre site sont-elles vraiment pertinentes ? Il faut étudier les besoins des utilisateurs lorsqu'ils recherchent des informations et vérifier qu'ils trouvent bien les informations souhaitées lorsqu'ils cliquent sur une rubrique.

(3) Variables explicatives

Les informations explicatives donnent des "explications" sur la rubrique pertinente sélectionnée.

Ces informations explicatives seront organisées pour permettre une lecture aisée, selon une petite charte graphique qui structurera les informations de façon homogène sur l'ensemble des pages.

(4) Variables opératoires (ou interactives)

Ce sont des informations de type opératoire qui répondent à des besoins particuliers d'utilisateurs. C'est l'interactivité de l'ordinateur qui permet de créer ce type de variables.

Exemples :

- « Rechercher » permet de trouver rapidement une information
- « Contact » permet de contacter directement une personne.
- D'autres informations opérationnelles, pratiques,  interactives, peuvent être ainsi envisagées en fonction des divers besoins des utilisateurs.

Réaliser une première maquette,

Pour se mettre d'accord sur la structure et vérifier que sur chaque page vous avez bien vos 4 variables. Discuter :

(1) la structuration des informations dès la première page d'accueil,

(2) la définition des grandes catégories proposées,

(3) la forme de présentation des informations explicatives

et (4) la possibilité d'accéder plus rapidement à certaines informations de type opératoire.

Tester votre maquette

Tester votre maquette l'aide d'un panel d'utilisateurs. 

Observez les difficultés des utilisateurs, et notez tout !

A l'issue de ces premiers tests, modifiez votre maquette

Créer un petit guide de conception pour la création de vos sites Web, à l'usage des différentes équipes de conception.

Références bibliographiques

Lompré Nicole (1999). « Usages de conception des pages Web et recommandations ergonomiques », Actes du 2ème Colloque International Usages & Services des Télécommunications, 7-9 juin 99, Arcachon, pp. 460-465.
Télécharger l'article au format pdf
Télécharger un résumé au format pdf
Télécharger les exemples au format Power-Point

209 recommandations du National Cancer Institute

Il existe de très nombreux guides de style. Le plus sérieux me semble être celui-ci :

Leavitt M. O., Shneiderman B., Research-Based Web Design & Usability Guidelines U.S. Government Printing Office, ISBN 0-16-0762707, Téléchargeable en ligne au format pdf : http://usability.gov/guidelines

parce qu'il s'appuie sur de très nombreuses recherches scientifiques. J'ai traduit en français (eh oui, j'ai enfin fini...)

les 209 recommandations de ce guide, reparties sur 18 chapitres en français.pdf

La petite colonne de droite indique l'importance

Chapitre 1- Processus de conception et évaluation

1:01 Fournir des contenus utiles 5
1:02 Etablir les exigences utilisateurs 5
1:03 Comprendre et rencontrer les attentes utilisateurs 5
1:04 Impliquer les utilisateurs dans l'établissement des exigences utilisateurs 5
1:05 Déterminer et énoncer les buts 4
1:06 Se centrer sur la performance avant les préférences 4
1:07 Considérer plusieurs issues d'une interface utilisateur 4
1:08 Soyez facile à trouver dans le Top 30 4
1:09 Etablir des buts d'utilisabilité 3
1:10 Utiliser des conceptions parallèles 2
1:11 Utiliser des personnages 1

Chapitre 2 - Optimisation de l'experience utilisateurs

02:01 Ne pas afficher de fenêtres ou de graphiques insolites 5
02:02 Accrître la crédibilité du site Web 4
02:03 Standardiser les séquences de tâches 4
02:04 Réduire la charge de travail utilisateur 4
02:05 Concevoir en fonction des limites de la mémoire de travail 4
02:06 Minimiser le temps de téléchargement des pages 4
02:07 Attention aux temps hors limites 4
02:08 Afficher l'information dans un format directement utilisable 4
02:09 Format des informations pour la lecture et l'impression 4
02:10 Fournir un Feedback quand les utilisateurs doivent attendre 4
02:11 Informer les utilisateurs des temps de téléchargements longs 4
02:12 Developper des pages qui s'imprimeront correctement 4
02:13 Ne pas exiger des utilisateurs des multitâches pendant qu'ils lisent 3
02:14 Utiliser une terminologie d'utilisateur dans la documentation d'aide 3
02:15 Fournir des options imprimables 3
02:16 Fournir une assistance aux utilisateurs 2

Chapitre 3 - Accessibilité

03:01 Respecter les directives de la Section 508 5
03:02 Concevoir des formulaires pour les utilisateurs utilisant des technologies d'assistance 5
03:03 Ne pas utiliser uniquement les couleurs pour transmettre l'information 5
03:04 Les utilisateurs doivent être capables de sauter les liens de navigation répétitifs 4
03:05 Fournir des textes équivalentspour les éléments non-textuels 4
03:06 Tester les plug-Ins et les Applets pour l' accessibilité  4
03:07 S'assurer que les scripts permettent l'accessibilité 3
03:08 Fournir des pages équivalentes 3
03:09 Fournir côté client des repères d'image 3
03:10 Synchroniser les élements multimédias 3
03:11 Ne pas exiger de feuilles de style 3
03:12 Fournir des titres aux frames 2
03:13 Eviter les écrans qui clignotent 2

Chapitre 4 - Matériels et logiciels

04:01 Concevoir pour les navigateurs habituels 4
04:02 Considérer les différences de navigateurs 4
04:03 Concevoir pour des systèmes d'exploitation populaires 4
04:04 Concevoir pour des vitesses de connexion typiques des utilisateurs 4
04:05 Concevoir pour des résolutions écrans couramment utilisées 3

Chapitre 5 - La page d'accueil

05:01 Permettre l'accès à la page d'accueil 5
05:02 Montrer toutes les rubriques importantes sur la page d'accueil 5
05:03 Créer une première impression positive de votre site 5
05:04 Communiquer la valeur et le but du site Web 4
05:05 Limiter la prose du texte sur la page d'accueil 4
05:06 S'assurer que la page d'accueil ressemble à une page d'accueil 4
05:07 Limiter la longueur de la page d'accueil 3
05:08 Annoncer les changements sur un site Web 2
05:09 Faire attention à la largeur de la page d'accueil 2

Chapitre 6 - Disposition de la page

06:01 Eviter les affichages encombrés ou en désordre 5
06:02 Placer les items importants de façon cohérente 5
06:03 Placer les items importants en haut, au centre 5
06:04 Structurer pour une comparaison facile 4
06:05 Etablir le niveau d'importance 4
06:06 Optimiser la densité de l'affichage 4
06:07 Aligner les items sur la page 4
06:08 Utiliser des affichages fluides 3
06:09 Eviter les barres de défilement qui se bloquent 3
06:10 Fixer les longueurs de page appropriée 3
06:11 Utiliser modéremment les espaces blancs 3
06:12 Choisir des longeurs de lignes appropriées 2
06:13 Utiliser des frames quand les fonctions doivent rester accessibles 1

Chapitre 7 - Navigation

07:01 Fournir des options de navigation 4
07:02 Differencier et grouper les éléments de navigation 4
07:03 Utiliser un sommaire cliquable sur les pages longues 4
07:04 Fournir un Feedback sur la localisation des utilisateurs 4
07:05 Placer les principaux éléments de navigation sur un panneau gauche 4
07:06 Utiliser des étiquettes de tableaux descriptives 3
07:07 Présenter les tableaux efficacement 3
07:08 Garder la navigation seulement sur les pages courtes 2
07:09 Utiliser des menus types appropriés 2
07:10 Utiliser des plans de site 2
07:11 Utiliser des "glisser sur" pour assister la navigation 1
07:12 Navigation par onglets 1

Chapitre 8 - Ascenseurs et Pagination

08:01 Eliminer le défilement horizontal 5
08:02 Faciliter un rapide défilement quand il faut lire 2
08:03 Utiliser des pages de défilement pour la compréhension de la lecture 2
08:04 Utiliser la pagination plutôt que le défilement 2
08:05 Utiliser moins de défilement d'écrans 2

Chapitre 9 - En-têtes, Titres, et rubriques

09:01 Utiliser des labels de rubriques clairs 5
09:02 Fournir des titres de pages descriptifs 4
09:03 Utiliser largement les en-têtes descriptifs 4
09:04 Utiliser des en-têtes descriptifs uniques 4
09:05 Mettre en valeur les données critiques 4
09:06 Utiliser des en-têtes de lignes et colonnes descriptifs 4
09:07 Utiliser les titres dans un ordre HTML approprié 3
09:08 Fournir aux utilisateurs de bons chemins pour réduire les options 2

Chapitre 10 - Liens

10:01 Utiliser des labels de liens compréhensibles 5
10:02 Lier les contenus en relation 4
10:03 Associer les noms de liens avec leurs pages de destination 4
10:04 Eviter de cliquer sur des signaux trompeurs 4
10:05 Répéter les liens importants 4
10:06 Utiliser du texte pour les liens 4
10:07 Désigner les liens utilisés 4
10:08 Fournir des sélections cliquables de façon cohérente 3
10:09 S'assurer que les liens imbriquées soient descriptifs 3
10:10 Utiliser le pointer et cliquer 3
10:11 Utiliser des longueurs de liens de textes appropriés 3
10:12 Indiquer les liens internes vs les liens externes 3
10:13 Clarifier les régions cliquables des images 3
10:14 Avoir un lien vers des informations de support 3

Chapitre 11 - Aspects des textes

11:01 Utiliser du texte noir sur les fonds unis, hautement contrastés 4
11:02 Format des items comuns cohérents 4
11:03 Utiliser une casse mixte pour la prose des textes 4
11:04 Assurer une cohérence visuelle 4
11:05 Utiliser les textes gras avec parcimonie 3
11:06 Utiliser les caractères d'attention attractifs quand c'est approprié 3
11:07 Utiliser des fontes familières 3
11:08 Utiliser au moins une fonte de 12 points 3
11:09 Codage des couleurs et instructions 2
11:10 Accentuer l'importance 2
11:11 Mettre en relief des informations 2

Chapitre 12 - Listes

12:01 Ordonner les éléments pour maximiser la performance 4
12:02 Placer les items importants en haut des listes 4
12:03 Format des listes faciles à parcourir 4
12:04 Afficher les éléments en relation dans les listes 4
12:05 Introduir chaque liste 3
12:06 Utiliser des menus statiques 3
12:07 Commencer la numérotation à 1 2
12:08 Utiliser des styles de listes appropriées 2
12:09 Capitaliser la première lettre du premier mot dans les listes 1

Chapitre 13 - Contrôles sur l'interface (Objets)

13:01 Distinguer les champs de saisie de données obligatoires et facultatifs 5
13:02 Labelliser clairement les boutons à cliquer 5
13:03 Labelliser les entrées de champs de données de façon cohérente 4
13:04 Eviter les casses sensibles pour les codes entrés par les utilisateurs 4
13:05 Labelliser les entrées de champs de données clairement 4
13:06 Minimiser les entrées de données des utilisateurs 4
13:07 Mettre les labels près des entrées de champ de données 3
13:08 Permettre aux utilisateurs de voir leurs données saisies 3
13:09 Utiliser les boutons radios pour des sélections exclusives 3
13:10 Utiliser des objets familiers 3
13:11 Anticiper les erreurs types des utilisateurs 3
13:12 Partitionner les items des données longues 3
13:13 Utiliser une méthode d'entrée de données simple 3
13:14 Prioriser les boutons à cliquer 3
13:15 Utiliser les cases à cocher pour des sélections multiples 3
13:16 Labelliser les unités de mesure 3
13:17 Ne pas limiter la lecture des options de liste 3
13:18 Afficher les valeurs par défaut 3
13:19 Placer le curseur sur le premier champ d'entrée de données 2
13:20 S'assurer que le double clic ne causera pas de problèmes 2
13:21 Utiliser les listes ouvertes pour séléctionner une parmi plusieurs 2
13:22 Utiliser des champs d'entrée de données pour des performances rapides 2
13:23 Utiliser un minimum de deux boutons radios 2
13:24 Fournir des fonctionnalités d'auto-tabulation 2
13:25 Minimiser l'utilisation de la touche majuscule 1

Télécharger une adaptation française du Chapitre 14 Chapitre 14 - Graphiques, Images, et Multimédia

14:01 Utiliser des images de fond simples 4
14:02 Labelliser les images cliquables 4
14:03 S'assurer que les images ne se téléchargent pas lentement 4
14:04 Utiliser les vidéos, animations et audios significativement 4
14:05 Inclure des logos 4
14:06 Les images ne doivent pas ressembler à des bannières 4
14:07 Limiter les grandes images sur la page 4
14:08 S'assurer que les messages des sites Web passent les messages attendus 4
14:09 Limiter l'utilisation des images 3
14:10 Inclure des données réelles avec les données graphiques 3
14:11 Afficher les données de surveillance graphiquement 3
14:12 Introduire les animations 2
14:13 Emuler les objets du monde réels 2
14:14 Utiliser des images miniatures pour prévisualiser les grandes images 2
14:15 Utiliser les images pour faciliter l'apprentissage 1
14:16 Utiliser des photographies de personnes 1

Attention, le pdf correspond à la version du guide 2003

Chapitre 15 - Contenus écrits sur le Web

15:01 Faire des séquences d'actions claires 5
15:02 Eviter le jargon 4
15:03 Utiliser des mots familiers 4
15:04 Définir les acronymes et abréviations 4
15:05 Utiliser les abréviations avec parcimonie 4
15:06 Utliser une casse mixte avec la prose 4
15:07 Limiter le nombre de mots et de phrases 4
15:08 Limiter la prose des textes sur les pages de navigation 3
15:09 Utiliser la voix active 3
15:10 Ecrire les instructions à la voix affirmative 3
15:11 Faire des premières phrases descriptives 3

Chapitre 16 - Organization du contenu

16:01 Organiser l'information clairement 5
16:02 Faciliter la lecture de type "scanning" 5
16:03 S'assurer que les informations nécessaires sont affichées 5
16:04 Grouper les éléments en relation 4
16:05 Minimiser le nombre de clics ou de pages 4
16:06 Concevoir des données quantitatives pour une compréhension rapide 3
16:07 Afficher uniquement les informations nécessaires 3
16:08 Formatter les informations pour de multiples audiences 3
16:09 Utiliser la couleur pour grouper 2

Chapitre 17 - Recherche d'informations

17:01 Assurer l'utilisabilité des résultats de recherche 5
17:02 Concevoir des moteurs de recherches pour chercher sur le site entier 5
17:03 Faire les termes de recherche en majuscules et minuscules équivalents 4
17:04 Fournir une option de recherche sur chaque page 4
17:05 Concevoir la recherche autour des termes utilisateurs 4
17:06 Permettre des recherches simples 3
17:07 Notifier les utilisateurs quand des options de recherches multiples existent 3
17:08 Include Hints to Improve Search Performance 3
17:09 Fournir des modèles de recherche 2

Chapitre 18 - Tests d'utilisabilité (version 2006)

18:01 Utiliser une approche de conception itérative 4
18:02 Solliciter des commentaires des participants aux tests 3
18:03 Evaluer les sites Web avant et après avoir fait les changements 3
18:04 Prioriser les tâches 3
18:05 Distinguer entre la fréquence et la sévérité 3
18:06 Sélectionner le bon nombre de participants 3
18:07 Utiliser les technologies de prototypes appropriées 2
18:08 Utiliser les résultats d'inspection d'évaluation avec précaution 2
18:09 Reconnaître les effets de l'évaluateur 2
18:10 Appliquer des méthodes d'évaluation automatique 1
18:11 Utiliser les listes de questions avec précaution (Cognitive Walkthroughs) 1
18:12 Choisir le laboratoire vs. les tests à distance 1
18:13 Utiliser les jugements d'évaluation avec précaution 1

 

Contre-exemples

Des exemples de conception pas très ergonomique, listés par les utilisateurs (en vrac) :
http://www.baddesigns.com/

 

© nicole.lompre@univ-pau.fr Dernière mise à jour le 12-Fév-2007