en téléchargeant dès maintenant
la règle n° 2 (Chapitre 5).
Cet extrait concerne l’organisation
visuelle des pages web.
» Télécharger (PDF, 4.1 Mo)
Grâce aux conseils pratiques et méthodologiques de cet ouvrage,
comprenez et appliquez l'ergonomie web sur le terrain !
Dans la 2ème édition, parue en mars 2009, c'est maintenant 450 pages pour vous initier ou approfondir vos connaissances, dans les domaines théoriques et pratiques :
-
Introduction à l'ergonomie web
01. L’ergonomie web, qu’est-ce que c’est ?
» L'ergonomie, pour considérer l'homme dans le rapport homme-machine
» Généalogie et objectifs de l'ergonomie web
Un site web ergonomique est un site utile et utilisable
La notion d'utilité
La notion d'utilisabilité
Au départ : un utilisateur, des objectifs, un contexte
Objectif 1 : Efficacité
Objectif 2 : Efficience
Objectif 3 : Satisfaction
» Intérêt et retours sur investissement » Les méthodes de l'ergonomie web
Méthodes expertes
Méthodes participatives
» La place de l'ergonomie dans un projet web
» La sacro-sainte règle des 3 clics
» Les internautes sont idiots
» L'ergonomie et le design, ennemis jurés
» Pas besoin d'ergonomie, on a fait un focus group
» Faites-moi un site ergonomique
» Les internautes lisent en F
» L'ergonomie c'est juste du bon sens
» On le fera en web 2.0, en Ajax, etc.
» Les internautes ne scrollent pas
» Pour l'ergonomie, on verra à la fin -
Dans la peau de votre internaute : Les fondements de l'ergonomie
03. Comprendre l’internaute : d'abord un être humain
» Découvrez et appliquez les théories de la Gestalt
La loi de proximité
La loi de similarité
» Découvrez et appliquez la loi de Fitts
Les éléments cliquables doivent être gros
Augmenter la taille réelle des éléments cliquables
Augmenter la taille virtuelle des éléments cliquables
Augmenter la surface cliquable des éléments cliquables
Augmenter la distance entre les éléments cliquables
Les éléments cliquables doivent être proches
» Découvrez et appliquez le concept d'affordance
Optimiser l'affordance « vous pouvez me cliquer »
Optimiser l'affordance « vous pouvez interagir avec moi »
Attention aux affordances erronées
» Le nombre magique de Miller et la loi de Hick
» Accessibilité visuelle et lisibilité
Faciliter l'utilisation de moyens de contournement du mode visuel
Optimiser la lisibilité à l'écran
Optimisation des couleurs
La différence de couleurs
La différence de brillance
Optimisation des caractéristiques des textes
» Une personne donnée dans un contexte précis
La notion de tâche pour mieux cerner l'internauter
Les statistiques de visite, un atout majeur
Interroger les internautes
» Un persona pas comme les autres
Pourquoi avez-vous intérêt à inventer des personas ?
Inventer des personas vous force à vous pencher réellement sur votre cible
Inventer des personas humanise votre cible
Inventer des personas donne des objectifs à votre cible
Comment créer et utiliser des personas ?
Il existe différents types de personas
Combien de personas devez-vous créer ?
La création d'un persona est un travail collectif
Comment définit-on un persona ?
Communiquer sur les personas -
Les règles de l'ergonomie web
05. Les bases et critères de l'ergonomie web
» Règle n°1. Architecture : le site est bien rangé
Les regroupements sont logiques
La structuration met en avant les contenus-clés
Les menus aident l'internaute à naviguer dans les contenus
Contourner un site mal rangé
» Règle n°2. Organisation visuelle : la page est bien rangée
Éviter le trop-plein d'informations
Supprimer la quantité de mots par deux
N'afficher que les éléments de navigation et d'interaction principaux
Afficher les éléments optionnels uniquement si nécessaire
Supprimer les éléments d'interaction inutiles
N'afficher que les éléments d'interaction les plus utiles
Différencier la quantité réelle et la quantité perçue d'informations
L'hétérogénéité visuelle augmente la charge informationnelle
Les images de fond augmentent la charge informationnelle
Les animations augmentent la charge informationnelle
Démultiplier la valeur du pixel carré
Le remplacement d'informations au clic
Le remplacement d'informations au rollover
L'apparition d'informations au rollover
La question de la publicité
Optimiser l'organisation et la hiérarchie visuelle
» Règle n°3. Cohérence : le site capitalise sur l'apprentissage interne
Les localisations sont cohérentes
Les appellations sont cohérentes
Les formats de présentation sont cohérents
Les interactions sont cohérentes
» Règle n°4. Conventions : le site capitalise sur l'apprentissage externe
Qu'est-ce qu'une convention ?
Respecter les conventions de localisation
Respecter les conventions de vocabulaire
Respecter les conventions d'interaction et de présentation
» Règle n°5. Information : le site informe l'internaute et lui répond
L'ordinateur informe et prévient l'internaute
Ne soyez pas avares d'informations
Donner de l'information générale
Donner de l'information ponctuelle
Informez, mais au bon moment
L'ordinateur répond aux actions de l'internaute
Donner du feedback aux actions de l'internaute
Visibilité du feedback
» Règle n°6. Compréhension : les mots et symboles sont choisis minutieusement
La bonne utilisation des mots sur le web
Utiliser le vocabulaire !
Les symboles et codes doivent être compréhensibles
Le vocabulaire doit être compréhensible
Le vocabulaire doit être orienté utilisateur
Le vocabulaire doit être concis
Le vocabulaire doit être exact et précis
Le vocabulaire doit être conventionnel
Attention à l'utilisation des métaphores
» Règle n°7. Assistance : le site aide et dirige l'internaute
Dirigez grâce à l'organisation et à la visibilité
Dirigez grâce à des clics logiques
Dirigez grâce aux affordances
Les affordances permettent de repérer ce qui est cliquable
Attention à ne pas diriger de façon erronée
Les affordances permettent de repérer ce qui est utilisable
Le manque de justesse et précision induit en erreur
Évitez d'avoir à diriger grâce à un modèle d'interaction adapté
Les contre-affordances induisent en erreur
Assistez votre internaute en prenant en compte ses besoins en termes de tâche
Assistez votre internaute en le suivant de très près
Fournissez de l'aide explicite en cas de besoin
» Règle n°8. Gestion des erreurs : le site prévoit que l'internaute se trompe
L'internaute ne doit pas faire d'erreur
La présentation du formulaire peut protéger contre l'erreur
L'internaute doit facilement repérer et comprendre ses erreurs
Éviter les erreurs grâce à l'indication des champs obligatoires
Le fonctionnement du formulaire peut protéger contre l'erreur
Éviter les erreurs grâce aux libellés et légendes des champs
Éviter les erreurs grâce à taille des champs
Éviter les erreurs en utilisant les éléments de formulaire à bon escient
Éviter les erreurs par l'affordance générale de l'interface
Éviter les erreurs en demandant une confirmation pour les actions risquées
Éviter les erreurs en empêchant la saisie de données erronées
Éviter les erreurs en validant ou en corrigeant à la volée
Faciliter le repérage de l'erreur
L'internaute doit facilement pouvoir corriger ses erreurs
Fournir une explication précise de l'erreur
Faire preuve de courtoisie dans les messages d'erreur
Facilité la correction grâce à l'explication de l'erreur
Faciliter la correction grâce aux mécanismes de gestion des erreurs
» Règle n°9. Rapidité : l'internaute ne perd pas son temps
Optimiser la navigation
Faciliter l'action de visée des éléments cliquables
Multiplier les clés d'entrée vers une même page
Prendre en compte les besoins de votre internaute sur le plan fonctionnel
Faciliter les interactions
Éviter les actions inutiles
Ne pas demander à l'internaute deux fois la même chose
Des modes d'interaction orientés efficience
» Règle n°10. Liberté : c'est l'internaute qui commande
Respectez les contrôles utilisateur conventionnels
Fuyez les actions au rollover
Flexibilité des actions utilisateur
Donnez la possibilité à l'internaute de contourner et d'agir sur le système
N'induisez pas de comportement passif
N'enfermez pas votre internaute
Le système n'est pas intrusif
Le système n'est pas lourd ou insistant dans ses propositions
Le système ne force pas l'utilisateur à voir quelque chose
Éviter les introductions et fournir des entrées directes
Le site n'agit pas à la place de l'internaute
Éviter l'affichage de pop-up spontanées
Au secours, le site prend le contrôle de l'ordinateur
» Règle n°11. Accessibilité : un site facile d'accès pour tous
Accessibilité physique
Accessibilité technologique
La plate-forme de consultation est de l'ordre du bonus : adaptez le contenu
La plate-forme de consultation est stratégique : informez et guidez
» Règle n°12. Satisfaire votre internaute
Satisfaire grâce au critère d'utilité
Satisfaire grâce à l'esthétique et à l'expérience utilisateur globale
Satisfaire grâce à la qualité du service
Satisfaire grâce à la puissance et la fiabilité technique
» En bref : 12 règles à utiliser à bon escient
» Pratique, support et moyens de l'audit ergonomique
L'évaluation ergonomique, une pratique multiforme
Support et périmètre de l'évaluation ergonomique
Normes, conventions, critères, checklists & co
» Structurer l'étude selon vos besoins
Les personas pondèrent les règles génériques
L'exemple de l'expert
Les technologies vous mettent la puce à l'oreille
L'exemple du senior
L'exemple d'Ajax & Javascript
La modification partielle de page
Le plié / déplié d'informations
Le drag & drop
Le type de site et son contenu impliquent des points-clés à surveiller
» Conduire une analyse ergonomique
Seul ou à plusieurs ?
Le fil rouge : dans la peau de votre persona, en action
Par où commencer ?
Les outils de l'audit ergonomique
Les règles ergonomiques, premier guide de travail
Que faire de vos observations ?
Logiciels et outils techniques
Prendre des notes
Capturer les écrans
Tester la compatibilité technique
Évaluer l'accessibilité visuelle
Évaluer la forme générale du site
Hiérarchisez vos observations
Les livrables de l'audit
La suite des événements -
Les étapes de la conception web : Pensez votre site de A à Z
07. Définition des contenus et analyse concurrentielle
» Votre contenu répond à un besoin de l'internaute
Quelle est votre utilité globale ?
Créez vos micro-utilités
Comment imaginer et choisir des micro-utilités
Pour énumérer vos contenus, exploitez toutes vos sources !
Des exemples de micro-utilités
Offrir la vue la plus complète possible d'un produit
Prendre en compte les comportements liés à l'achat
Précéder les interrogations des internautes
Précéder les besoins fonctionnels / Simplifier la tâche des internautes
Prendre en compte les potentialisateurs d'action
» Que font les autres ? L'analyse concurrentielle en ergonomie
La démarche de l'analyse concurrentielle
Principes de base de l'analyse concurrentielle
Analyses concurrentielles générales
Définissez votre panel concurrentiel
Qui sont vos concurrents ergonomiques ?
Combien de concurrents devez-vous analyser ?
Exemple : Clés d'entrée dans un catalogue
Analyse concurrentielles détaillées
Exemple : Principe général de navigation
Exemple : Micro-fonctionnalité de navigation
Exemple : Descriptifs produits
» Ranger pour aider à trouver
» Comment visite-t-on un site Internet ?
La recherche par mot-clé : droit au but !
La navigation ciblée : étape par étape
Support : la navigation globale, un repère persistant
La navigation libre, ou comment se promener sur le web
Support : la navigation locale, fille de la navigation globale
Support : la navigation transversale, générée en fonction du besoin
Rechercher ou naviguer, telle est la question
La raison pour laquelle on vient sur le site
Les préférences personnelles de l'utilisateur
Les objectifs que l'on poursuit
La confiance envers le moteur de recherche et la navigation
Le type de site
La présentation des fonctions de recherche et de navigation
» Une organisation calquée sur les attentes de l'internaute
Source d'inspiration n°1 : Les objectifs et comportements utilisateur
Source d'inspiration n°2 : Les représentations mentales
Source d'inspiration n°3 : Allez voir ailleurs !
Source d'inspiration interdite : votre propre vision des choses
» Concevez votre architecture de l'information
Mode d'emploi en deux étapes : Catégoriser puis structurer
La catégorisation : regrouper pour simplifier
Réaliser un plan de site
Alphabet
La structuration de l'information
Chronologie
Localisation géographique
Thème
Actions utilisateur
Cible utilisateur
Une structure hiérarchique représentée par les menus
Une structure secondaire représentée par des liens contextuels
Une structure floue représentée par des liens semés au gré du site
Une structure vivante
Bien choisir ses mots
La quête du mot idéal
Traduire l'architecture par la navigation
Intégrer les contraintes spécifiques du web
La concision : Faites court !
Prendre en compte les conventions de vocabulaire
» Au-delà de la navigation : architecturer les parcours clients et les interactions
» En bref : obtenir des bases solides pour la suite
» Le zoning : un premier découpage
Espace disponible et principes de répartition
L'espace horizontal : une limite maximale
Les types de zones
L'espace vertical et la notion de fold
Le zoning par l'exemple
» La maquette conceptuelle : chaque zone en détail
Les différents types de maquettes
Qu'est-ce que je mets dans ma maquette?
Textes et vocabulaire
La maquette conceptuelle par l'exemple
Apparence et comportement des objets
Apparence et comportement de classes d'objets
Apparence et comportement d'éléments individuels
» Quels logiciels pour réaliser zonings et maquettes ?
» Et la suite ? -
Mettez votre site à l’épreuve
10. La méthode du tri de cartes pour organiser un site
» La préparation du tri de cartes
Le matériel du tri de cartes
Les participants au tri de cartes
» Déroulement d'un tri de cartes : les règles du jeu
1ère étape : Immersion
2ème étape : Validation et précision des contenus
3ème étape : Groupement
4ème étape : Nommage
Accompagner vos participants
» Les grands types de tris de cartes
Selon la liberté d'action des participants
Tri de cartes ouvert : tout est possible
Selon le support du tri de cartes
Tri de cartes fermé : une place pour chaque chose et chaque chose à sa place
Le tri de cartes physique
Selon votre panel de participants
Le tri de cartes informatisé
Avec des internautes pour s'adapter à leurs attentes
Selon le niveau de profondeur du tri de cartes
Avec des spécialistes pour s'inspirer de leur expertise
Extensions possibles au tri de cartes
» Ce que l'on peut tirer d'un tri de cartes : analysez les données
» Le tri de cartes en bref : utilité et limites
» Préparer votre test
Les participants d'un test utilisateur
Des participants plus vrais que nature
Le support de test : tester quoi, Ã quel moment ?
Des participants représentatifs de votre cible réelle
Sexe
La personnalité idéale du testeur
Âge
Métier et CSP
Rapport au site, à la marque ou à un domaine
Niveau d'expertise
Situation familiale, région, projets de vie, etc.
Plus ils jouent le jeu, mieux c'est
Combien de participants sont-ils nécessaires ?
Plus ils s'expriment, mieux c'est
Oubliez les échantillons statistiquement suffisants
L'étape de recrutement
Nombre idéal et nombre acceptable de participants
Plus de participants ou plus de tests ?
La logistique du recrutement
Comment remercier les participants ?
Présenter l'étude à vos invités: mystère et doigté
Prototype papier ou maquettes statiques à l'écran
Plan de test et objectifs d'utilisabilité
Prototype semi-fonctionnel
Site finalisé
Récapitulatif et intérêts de supports multiples
Un test comme dans la vraie vie...
« Nous voulons tester l'efficacité de la barre de navigation »
Tester un élément d'interface en particulier
Réalisme des scénarios
Excluez de faire des tests comparatifs
Souplesse des scénarios
Nombre de scénarios
Au-delà des tâches... la compréhension du site
Effets d'ordre et contrebalancements
Les erreurs à éviter lors de l'écriture du plan de test
Un plan de test ne doit pas utiliser les mêmes mots que le site
Les objectifs d'utilisabilité
Un plan de test ne doit pas détailler les étapes permettant de réaliser la tâche
Un plan de test ne doit pas être un questionnaire
Un plan de test doit tester les missions du persona, et non vos propres objectifs
Un plan de test ne s'écrit pas seul
» Pendant le test utilisateur
Un participant, et qui d'autre ?
Qui doit être chargé du test?
Combien de temps dure un test utilisateur ?
Le rôle de l'animateur
Les observateurs
Le déroulement d'un test : étapes et recommandations
Pré-questionnaire et décharges
Le matériel d'enregistrement
Mise en situation : les points clés
Familiarisation avec la procédure
Réalisation des scénarios
Familiarisation avec le produit
Comment présenter le plan de test ?
Post-questionnaire et debriefing
La bonne manière de prendre des notes
Comment relancer en cas de déviation ou d'échec ?
Post-test
» Analyse des résultats et suite des événements
Tri et hiérarchisation des observations
Quelles sont les observations que vous allez prendre en compte ?
Interprétation et pistes de résolution
Pondération des observations
Interprétation des observations
Trouver des solutions
Le rapport de test
» Un test utilisateur à votre mesure
» Aller plus loin que le test utilisateur : l'usage réel
Préfacé par Elie Sloïm, fondateur du projet Opquast.
Le livre Ergonomie web a été écrit par Amélie Boucher. Productrice du site Ergolab.net, elle dirige le pôle Ergonomie et Architecture de l'information d'Altima.
» En savoir plus sur l'auteur
"Un pan entier de la pratique ergonomique qui manquait en français vient d'être érigé par cet ouvrage étonnant. De part l'amplitude des sujets qu'il aborde et son écriture limpide, Ergonomie Web est un livre pratique en même temps qu'un livre-référence appuyé sur un solide corpus théorique"
Benoît Drouillat, Designers Interactifs
"Très pragmatique, cet ouvrage volumineux accompagne les concepteurs de pages internet dans l'évolution de leurs pratiques de conception actuelles en mettant en avant celles orientées utilisateur."
01Informatique, 17/01/2008
"Je considère ce livre - que tous les experts de la discipline auraient rêvé d'écrire - comme la bible francophone. Le genre d'ouvrage qui par sa qualité intrinsèque satisfera autant les novices que les endurcis."
Gaetano Palermo, Expressions.be
» Voir toutes les réactions
» Donnez votre avis sur le livre
