Ergonomie web

Table of contents

1. Couverture
2. Page de titre
3. Copyright
4. Dans la collection « Accès Libre »
5. Table des matières
6. Avant-Propos
   1. Internet change, nous aussi !
   2. Pourquoi ce livre ?
   3. À qui s’adresse ce livre ?
   4. Est-ce que mon site est concerné ?
   5. Que vais-je trouver dans ce livre ?
   6. Remerciements
7. Première Partie: Introduction à L’ergonomie web
   1. 1. L’ergonomie web, qu’est-ce que c’est ?
      1. L’ergonomie, pour considérer l’homme dans le rapport homme-machine
      2. Généalogie et objectifs de l’ergonomie web
         1. Un site web ergonomique est un site utile et utilisable
            1. La notion d’utilité
            2. La notion d’utilisabilité
               1. Au départ : un utilisateur, des objectifs, un contexte
               2. Objectif 1 : efficacité
               3. Objectif 2 : efficience
               4. Objectif 3 : satisfaction
      3. Intérêt et retours sur investissement
      4. Les méthodes de l’ergonomie web
         1. Méthodes expertes
         2. Méthodes participatives
      5. La place de l’ergonomie dans un projet web
   2. 2. Top 10 des idées reçues sur l’ergonomie
      1. La sacro-sainte règle des 3 clics
         1. L’idée reçue en quelques mots
         2. Pourquoi faut-il se méfier de cette règle ?
         3. Le bon côté de la règle, et comment aller plus loin
      2. Les internautes sont des idiots
      3. L’ergonomie et le design, ennemis jurés
         1. Idée reçue et réalités du métier
         2. Pourquoi l’ergonomie aime le design graphique
      4. Pas besoin d’ergonomie, on a fait un focus group
      5. Faites-moi un site ergonomique
      6. Les internautes lisent en F
      7. L’ergonomie, c’est juste du bon sens
      8. On le fera en HTML 5, en Ajax, etc.
      9. Les internautes ne scrollent pas
      10. Pour l’ergonomie, on verra à la fin
          1. L’idée reçue en quelques mots
          2. Pourquoi faut-il commencer par l’ergonomie ?
8. Deuxième Partie: Dans la peau de votre internaute : les fondements de l’ergonomie
   1. 3. Comprendre l’internaute : d’abord un être humain
      1. Découvrez et appliquez les théories de la Gestalt
         1. La loi de proximité
            1. La proximité doit respecter la logique des contenus
            2. La proximité au niveau microscopique
            3. La proximité peut causer des soucis d’interaction
            4. La loi de similarité
      2. Découvrez et appliquez la loi de Fitts
         1. Les éléments cliquables doivent être gros
            1. Augmenter la taille réelle des éléments cliquables
            2. Augmenter la taille virtuelle des éléments cliquables
               1. Augmenter la surface cliquable des éléments cliquables
               2. Augmenter la distance entre les éléments cliquables
         2. Les éléments cliquables doivent être proches
      3. Découvrez et appliquez le concept d’affordance
         1. Optimiser l’affordance « vous pouvez me cliquer »
         2. Attention aux affordances erronées
         3. Optimiser l’affordance « vous pouvez interagir avec moi »
      4. Le nombre magique de Miller et la loi de Hick
      5. Accessibilité visuelle et lisibilité
         1. Faciliter l’utilisation de moyens de contournement du mode visuel
         2. Optimiser la lisibilité à l’écran
            1. Optimisation des couleurs
               1. La différence de couleurs
               2. La différence de brillance
            2. Optimisation des caractéristiques des textes
   2. 4. Définir votre internaute : critères et méthode des personas
      1. Une personne donnée dans un contexte précis
         1. La notion de tâche pour mieux cerner l’internaute
         2. Les statistiques de visite, un atout majeur
         3. Interroger les internautes
      2. Un persona pas comme les autres
         1. Pourquoi avez-vous intérêt à inventer des personas ?
            1. Inventer des personas vous force à vous pencher réellement sur votre cible
            2. Inventer des personas humanise votre cible
            3. Inventer des personas donne des objectifs à votre cible
         2. Comment créer et utiliser des personas ?
            1. Il existe différents types de personas
            2. Combien de personas devez-vous créer ?
            3. La création d’un persona est un travail collectif
            4. Comment définit-on un persona ?
            5. Communiquer sur les personas
9. Troisième partie: les règles de l’ergonomie web
   1. 5. 12 Règles pour optimiser l’ergonomie de votre site
      1. Règle n° 1. Architecture : le site est bien rangé
         1. Les regroupements sont logiques
         2. La structuration met en avant les contenus clés
         3. Les menus aident l’internaute à naviguer dans les contenus
         4. Contourner un site mal rangé
      2. Règle n° 2. Organisation visuelle : la page est bien rangée
         1. Éviter le trop-plein d’informations
            1. Réduire la quantité de mots sur les pages navigantes
            2. N’afficher que les principaux éléments de navigation et d’interaction
               1. Afficher les éléments optionnels seulement si nécessaire
               2. Supprimer les éléments d’interaction inutiles
               3. N’afficher que les éléments d’interaction les plus utiles
            3. Différencier les quantités d’informations réelles et perçues
               1. L’hétérogénéité visuelle augmente la charge informationnelle
               2. Les images de fond augmentent la charge informationnelle
               3. Les animations augmentent la charge informationnelle
            4. Démultiplier la valeur du pixel carré
               1. Le remplacement d’informations au clic
               2. Le remplacement d’informations au survol
               3. L’apparition d’informations au survol
            5. La question de la publicité
         2. Optimiser l’organisation et la hiérarchie visuelle
      3. Règle n° 3. Cohérence : le site capitalise sur l’apprentissage interne
         1. Les localisations sont cohérentes
         2. Les appellations sont cohérentes
         3. Les formats de présentation sont cohérents
         4. Les interactions sont cohérentes
      4. Règle n° 4. Conventions : le site capitalise sur l’apprentissage externe
         1. Qu’est-ce qu’une convention ?
         2. Respecter les conventions de localisation
         3. Respecter les conventions de vocabulaire
         4. Respecter les conventions d’interaction et de présentation
      5. Règle n° 5. Information : le site informe l’internaute et lui répond
         1. L’ordinateur informe et prévient l’internaute
            1. Ne soyez pas avare d’informations
               1. Donner de l’information générale
               2. Donner de l’information pour faciliter la navigation
               3. Donner de l’information ponctuelle
            2. Informez, mais au bon moment
            3. Informez pour augmenter votre force persuasive
         2. L’ordinateur répond aux actions de l’internaute
         3. Donner du feedback aux actions de l’internaute
         4. Visibilité du feedback
      6. Règle n° 6. Compréhension : les mots et symboles sont choisis minutieusement
         1. La bonne utilisation des mots sur le Web
            1. Utilisez le vocabulaire !
            2. Le vocabulaire doit être compréhensible
               1. Le vocabulaire doit être orienté utilisateur
               2. Le vocabulaire doit être exact et précis
               3. Le vocabulaire doit être conventionnel
               4. Attention à l’utilisation des métaphores
            3. Le vocabulaire doit être concis
         2. Les symboles et codes doivent être compréhensibles
      7. Règle n° 7. Assistance : le site aide et dirige l’internaute
         1. Dirigez grâce à l’organisation et à la visibilité
         2. Dirigez grâce aux affordances
            1. Les affordances permettent de repérer ce qui est cliquable
            2. Les affordances permettent de repérer ce qui est utilisable
         3. Hiérarchisez vos call-to-action
         4. Attention à ne pas diriger de façon erronée
         5. Évitez d’avoir à diriger grâce à un modèle d’interaction adapté
         6. Assistez votre internaute en tenant compte de ses besoins en termes de tâches
         7. Assistez votre internaute en le suivant de très près
         8. Fournissez de l’aide explicite en cas de besoin
      8. Règle n° 8. Gestion des erreurs : le site prévoit que l’internaute se trompe
         1. L’internaute ne doit pas faire d’erreur
            1. La présentation du formulaire peut protéger contre l’erreur
               1. Éviter les erreurs grâce à l’indication des champs obligatoires
               2. Éviter les erreurs grâce aux libellés et légendes des champs
               3. Éviter les erreurs grâce à la taille des champs
               4. Éviter les erreurs en utilisant les éléments de formulaire à bon escient
               5. Éviter les erreurs par l’affordance générale de l’interface
            2. Le fonctionnement du formulaire peut protéger contre l’erreur
               1. Éviter les erreurs en demandant une confirmation pour les actions risquées
               2. Éviter les erreurs en empêchant la saisie de données erronées
               3. Éviter les erreurs en validant ou en corrigeant à la volée
         2. L’internaute doit facilement repérer et comprendre ses erreurs
            1. Faciliter le repérage de l’erreur
            2. Fournir une explication précise de l’erreur
            3. Faire preuve de courtoisie dans les messages d’erreur
         3. L’internaute doit facilement pouvoir corriger ses erreurs
            1. Faciliter la correction grâce à l’explication de l’erreur
            2. Faciliter la correction grâce aux mécanismes de gestion des erreurs
      9. Règle n° 9. Rapidité : l’internaute ne perd pas son temps
         1. Faciliter les interactions
            1. Faciliter l’action de visée des éléments cliquables
            2. Prendre en compte les besoins de votre internaute sur le plan fonctionnel
         2. Éviter les actions inutiles
         3. Proposer pour simplifier la tâche
         4. Des modes d’interaction orientés efficience
      10. Règle n° 10. Liberté : c’est l’internaute qui commande
          1. Respectez les contrôles utilisateur conventionnels
          2. Fuyez les actions au rollover
          3. Flexibilité des actions utilisateur
          4. Donnez la possibilité à l’internaute de contourner le système et d’agir dessus
          5. N’induisez pas de comportement passif
      11. Le système n’est pas intrusif
          1. Le système n’est pas lourd ou insistant dans ses propositions
          2. Le système ne force pas l’utilisateur à voir quelque chose
             1. Éviter les introductions et fournir des entrées directes
             2. Éviter l’affichage de pop-ups spontanées
          3. Le site n’agit pas à la place de l’internaute
          4. Au secours, le site prend le contrôle de l’ordinateur
      12. Règle n° 11. Accessibilité : un site facile d’accès pour tous
          1. Accessibilité physique
          2. Accessibilité technologique
             1. La plate-forme de consultation est de l’ordre du bonus : adaptez le contenu
             2. La plate-forme de consultation est stratégique : informez et guidez
      13. Règle n° 12. Satisfaction de votre internaute
          1. Satisfaire grâce au critère d’utilité
          2. Satisfaire grâce à l’esthétique et à l’expérience utilisateur globale
          3. Satisfaire grâce à la qualité du service
          4. Satisfaire grâce à la puissance et à la fiabilité technique
      14. En bref : 12 règles à utiliser à bon escient
   2. 6. L’Audit Ergonomique : Conseils et méthodologie
      1. Pratique, support et moyens de l’audit ergonomique
         1. L’évaluation ergonomique, une pratique multiforme
         2. Support et périmètre de l’évaluation ergonomique
         3. Normes, conventions, critères, checklists, etc.
      2. Structurer l’étude selon vos besoins
         1. Les personas pondèrent les règles génériques
         2. Les technologies vous mettent la puce à l’oreille
            1. Le type de site et son contenu impliquent despointsclésàsurveiller
      3. Conduire une analyse ergonomique
         1. Seul ou à plusieurs ?
         2. Le fil rouge : dans la peau de votre persona
         3. Par où commencer ?
         4. Les outils de l’audit ergonomique
            1. Les règles d’ergonomie, premier guide de travail
            2. Logiciels et outils techniques
               1. Prendre des notes
               2. Faire des captures d’écran
               3. Tester la compatibilité technique
               4. Évaluer l’accessibilité visuelle
               5. Évaluer la forme générale du site
         5. Que faire de vos observations ?
            1. Hiérarchisez vos observations
            2. Les livrables de l’audit
            3. La suite des événements
10. Quatrième Partie: Les étapes de la conception web : pensez votre site de a à z
    1. 7. Définition des contenus et analyse concurrentielle
       1. Votre contenu répond à un besoin de l’internaute
          1. Quelle est votre utilité globale ?
          2. Créez vos micro-utilités
          3. Comment imaginer et choisir des micro-utilités
          4. Des exemples de micro-utilités
             1. Offrir la vue la plus complète possible d’un produit
             2. Prendre en compte les comportements liés à l’achat
             3. Précéder les interrogations des internautes
             4. Simplifier la tâche des internautes en précédant leurs besoins fonctionnels
             5. Prendre en compte les potentialisateurs d’action
          5. Pour énumérer vos contenus, exploitez toutes vos sources !
       2. Que font les autres ? L’analyse concurrentielle en ergonomie
          1. La démarche de l’analyse concurrentielle
             1. Principes de base de l’analyse concurrentielle
             2. Définissez votre panel concurrentiel
                1. Qui sont vos concurrents ergonomiques ?
                2. Combien de concurrents devez-vous analyser ?
          2. Analyses concurrentielles générales
          3. Analyses concurrentielles détaillées
    2. 8. Architecturer l’information et les interactions
       1. Ranger pour aider à trouver
       2. Comment visite-t-on un site Internet ?
          1. La recherche par mot-clé : droit au but !
          2. La navigation ciblée : étape par étape
             1. Support : la navigation globale, un repère persistant
             2. Support : la navigation locale, fille de la navigation globale
          3. La navigation libre, ou comment se promener sur le Web
             1. Support : la navigation transversale, générée en fonction du besoin
          4. Rechercher ou naviguer, telle est la question
             1. La raison pour laquelle on vient sur le site
             2. Les préférences personnelles de l’utilisateur
             3. Les objectifs poursuivis
             4. La confiance envers le moteur de recherche et la navigation
             5. Le type de site
             6. La présentation des fonctions de recherche et de navigation
       3. Une organisation calquée sur les attentes de l’internaute
          1. Source d’inspiration n° 1 : les objectifs et comportements utilisateur
          2. Source d’inspiration n° 2 : les représentations mentales
          3. Source d’inspiration n° 3 : allez voir ailleurs !
          4. Source d’inspiration interdite : votre propre vision des choses
       4. Concevez votre architecture de l’information
          1. Mode d’emploi en deux étapes : catégoriser puis structurer
             1. La catégorisation : regrouper pour simplifier
                1. Alphabet
                2. Chronologie
                3. Localisation géographique
                4. Thème
                5. Actions utilisateur
                6. Cible utilisateur
             2. La structuration de l’information
                1. Une structure hiérarchique représentée par les menus
                2. Une structure secondaire représentée par des liens contextuels
                3. Une structure floue représentée par des liens semés au gré du site
                4. Une structure vivante
          2. Réaliser un plan de site
          3. Bien choisir ses mots
             1. La quête du mot idéal
             2. Intégrer les contraintes spécifiques du Web
                1. La concision : faites court !
                2. Prendre en compte les conventions de vocabulaire
          4. Traduire l’architecture par la navigation
       5. Au-delà de la navigation : architecturer les parcours client et les interactions
       6. En bref : obtenir des bases solides pour la suite
    3. 9. PAssez à l’écran : zonings et wireframes
       1. Le zoning : un premier découpage
          1. Espace disponible et principes de répartition
             1. L’espace horizontal : une limite maximale
             2. L’espace vertical et la notion de fold
          2. Les types de zones
          3. Le zoning par l’exemple
       2. Le wireframe : chaque zone en détail
          1. Les différents types de wireframes
          2. Qu’est-ce que je mets dans mon wireframe ?
             1. Textes et vocabulaire
             2. Apparence et comportement des objets
                1. Apparence et comportement de classes d’objets
                2. Apparence et comportement d’éléments individuels
          3. Le wireframe par l’exemple
       3. Et la suite ?
11. Cinquième partie: mettez votre site à l’épreuve
    1. 10. La méthode du tri de cartes pour organiser un site
       1. La préparation du tri de cartes
          1. Le matériel du tri de cartes
          2. Les participants au tri de cartes
       2. Déroulement d’un tri de cartes : les règles du jeu
          1. 1re étape : immersion
          2. 2e étape : validation et précision des contenus
          3. 3e étape : groupement
          4. 4e étape : nommage
          5. Accompagner vos participants
       3. Les grands types de tris de cartes
          1. Selon la liberté d’action des participants
             1. Tri de cartes ouvert : tout est possible
             2. Tri de cartes fermé : une place pour chaque chose et chaque chose à sa place
          2. Selon le support du tri de cartes
             1. Le tri de cartes physique
             2. Le tri de cartes informatisé
          3. Selon votre panel de participants
             1. Avec des internautes, pour s’adapter à leurs attentes
             2. Avec des spécialistes, pour s’inspirer de leur expertise
          4. Selon le niveau de profondeur du tri de cartes
          5. Extensions possibles au tri de cartes
       4. Ce que l’on peut tirer d’un tri de cartes : analysez les données
       5. Le tri de cartes en bref : utilité et limites
    2. 11. Les tests utilisateurs
       1. Préparer votre test
          1. Les participants d’un test utilisateur
             1. Des participants plus vrais que nature
             2. Des participants représentatifs de votre cible réelle
                1. Genre
                2. Âge
                3. Métier et CSP
                4. Rapport au site, à la marque ou à un domaine
                5. Niveau d’expertise
                6. Situation familiale, région, projets de vie, etc.
             3. La personnalité idéale du testeur
                1. Plus ils jouent le jeu, mieux c’est
                2. Plus ils s’expriment, mieux c’est
             4. Combien de participants sont-ils nécessaires ?
                1. Oubliez les échantillons statistiquement suffisants
                2. Nombre idéal et nombre acceptable de participants
                3. Plus de participants ou plus de tests ?
             5. L’étape de recrutement
                1. La logistique du recrutement
                2. Présenter l’étude à vos invités : mystère et doigté
             6. Comment remercier les participants ?
          2. Le support de test : tester quoi, à quel moment ?
             1. Prototype papier ou maquettes statiques à l’écran
             2. Prototype semi-fonctionnel
             3. Site finalisé
             4. Récapitulatif et intérêts de supports multiples
          3. Plan de test et objectifs d’utilisabilité
             1. Un test comme dans la vraie vie
             2. « Nous voulons tester l’efficacité de la barre de navigation »
                1. Tester un élément d’interface en particulier
                2. Excluez les tests comparatifs
             3. Réalisme des scénarios
             4. Souplesse des scénarios
             5. Nombre de scénarios
             6. Au-delà des tâches la compréhension du site
             7. Effets d’ordre et contrebalancements
             8. Les erreurs à éviter lors de l’écriture du plan de test
                1. Un plan de test ne doit pas utiliser les mêmes mots que le site
                2. Un plan de test ne doit pas détailler les étapes permettant de réaliser la tâche
                3. Un plan de test ne doit pas être un questionnaire
                4. Un plan de test doit tester les missions du persona et non vos propres objectifs
                5. Un plan de test ne s’écrit pas seul
             9. Les objectifs d’utilisabilité
       2. Pendant le test utilisateur
          1. Un participant, et qui d’autre ?
             1. Qui doit être chargé du test ?
             2. Le rôle de l’animateur
             3. Les observateurs
          2. Combien de temps dure un test utilisateur ?
          3. Le déroulement d’un test : étapes et recommandations
             1. Pré-questionnaire et décharges
             2. Mise en situation : les points clés
                1. Familiarisation avec la procédure
                2. Familiarisation avec le produit
             3. Réalisation des scénarios
                1. Comment présenter le plan de test ?
                2. La bonne manière de prendre des notes
                3. Comment relancer en cas de déviation ou d’échec ?
             4. Post-questionnaire et débriefing
             5. Post-test
          4. Le matériel d’enregistrement
       3. Analyse des résultats et suite des événements
          1. Tri et hiérarchisation des observations
             1. Quelles sont les observations que vous allez prendre en compte ?
             2. Pondération des observations
          2. Interprétation et pistes de résolution
             1. Interprétation des observations
             2. Trouver des solutions
          3. Le rapport de test
       4. Un test utilisateur à votre mesure
       5. Aller plus loin que le test utilisateur : l’usage réel
12. Conclusion
    1. Et après ?
13. Ergonomie web illustrée : 60 sites à la loupe
14. Mémento ergonomie web
15. Index