SlideShare une entreprise Scribd logo
1  sur  2
Télécharger pour lire hors ligne
Ergonomie – Notes de cours
IMR2 – 2012-2013
Référence : Ergonomie web, pour des sites web efficaces
Amélie Boucher, Éditions Eyrolles
ERGONOMIE
NOTES DE COURS
LES 12 RÈGLES DE L’ERGONOMIE WEB
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é
2. ORGANISATION VISUELLE : LA PAGE EST
BIEN RANGÉE
Eviter le trop-plein d’information
 Réduire la quantité de mots sur les pages
navigantes
 N’afficher que les principaux éléments de
navigation et d’interaction
 Différencier les quantités d’informations réelles et
perçues
 Démultiplier la valeur du pixel carré
 La question de la publicité
Optimiser l’organisation et la hiérarchisation visuelle
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 sur cohérentes
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
5. INFORMATION : LE SITE INFORME
L’INTERNAUTE ET LUI RÉPOND
L’ordinateur informe et prévient l’internaute
 Ne soyez pas avare d’informations
 Informez, mais au bon moment
 Informez pour augmenter votre force persuasive
L’ordinateur répond aux actions de l’internaute
 Donner du feedback aux actions de l’internaute
 Visibilité du feedback
6. COMPRÉHENSION : LES MOTS ET SYMBOLES
SONT CHOISIS MINUTIEUSEMENT
La bonne utilisation des mots sur le web
 Utilisez le vocabulaire !
 Le vocabulaire doit être compréhensible
 Le vocabulaire doit être concis
Les symboles et codes doivent être compréhensibles
7. ASSISTANCE : LE SITE AIDE ET DIRIGE
L’INTERNAUTE
Dirigez grâce à l’organisation et à la visibilité
Dirigez grâce aux affordances
 Les affordances permettent de repérer ce qui est
cliquable
 Les affordances permettent de repérer ce qui est
utilisable
Hiérarchisez vos call-to-action
Attention à ne pas diriger de façon erronée
Eviter d’avoir à diriger grâce à un modèle d’interaction
adapté
Assistez votre internaute en tenant compte de ses besoins
en termes de tâches
Assistez votre internaute en le suivant de très près
Fournissez de l’aide explicite en cas de besoin
Ergonomie – Notes de cours
IMR2 – 2012-2013
Référence : Ergonomie web, pour des sites web efficaces
Amélie Boucher, Éditions Eyrolles
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
 Le fonctionnement du formulaire peut protéger
contre l’erreur
L’internaute doit facilement repérer et comprendre ses
erreurs
 Faciliter le repérage de l’erreur
 Fournir une explication précise de l’erreur
 Faire preuve de courtoisie dans les messages
d’erreur
L’internaute doit facilement pouvoir corriger ses erreurs
 Faciliter la correction grâce à l’explication de
l’erreur
 Faciliter la correction grâce aux mécanismes de
gestion des erreurs
9. RAPIDITÉ : L’INTERNAUTE NE PERD PAS
SON TEMPS
Faciliter les interactions
 Faciliter l’action de visée des éléments cliquables
 Prendre en compte les besoins de votre internaute
sur le plan fonctionnel
Eviter les actions inutiles
Proposer pour simplifier la tâche
Des modes d’interaction orientés efficience
10. LIBERTÉ : C’EST L’INTERNAUTE QUI
COMMANDE
Respectez les contrôles utilisateurs conventionnels
Fuyez les actions au rollover
Flexibilité des actions utilisateur
Donnez la possibilité à l’internaute de contourner le
système et d’agir dessus
N’induisez pas de comportement passif
Le système n’est pas intrusif
 Le système n’est pas lourd et insistant dans ses
propositions
 Le système ne force pas l’utilisateur à voir
quelque-chose
 Le site n’agit pas à la place de l’internaute
 Au secours, le site prend le contrôle de
l’ordinateur
11. ACCESSIBILITÉ
Accessibilité physique
Accessibilité technologique
 La plateforme de consultation est de l’ordre du
bonus : adaptez le contenu
 La plateforme de consultation est stratégique :
informez et guidez
12. SATISFACTION DE 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é de service
Satisfaire grâce à la puissance et à la fiabilité technique

Contenu connexe

Tendances

Conception et rédaction de contenus pour le web - part 2
Conception et rédaction de contenus pour le web - part 2Conception et rédaction de contenus pour le web - part 2
Conception et rédaction de contenus pour le web - part 2
Nurun
 
Marielle Metge Agostinelli
Marielle Metge AgostinelliMarielle Metge Agostinelli
Marielle Metge Agostinelli
omsrp
 

Tendances (12)

Ergonomie des IHM web - Notes de cours (3/3)
Ergonomie des IHM web - Notes de cours (3/3)Ergonomie des IHM web - Notes de cours (3/3)
Ergonomie des IHM web - Notes de cours (3/3)
 
Cours ergonomie des IHM web - Chapitre 1 - contexte
Cours ergonomie des IHM web - Chapitre 1 - contexteCours ergonomie des IHM web - Chapitre 1 - contexte
Cours ergonomie des IHM web - Chapitre 1 - contexte
 
Ergonomie des IHM web - Notes de cours (1/3)
Ergonomie des IHM web - Notes de cours (1/3)Ergonomie des IHM web - Notes de cours (1/3)
Ergonomie des IHM web - Notes de cours (1/3)
 
Cours ergonomie des IHM web - Chapitre 2 - Introduction et définition
Cours ergonomie des IHM web - Chapitre 2 - Introduction et définitionCours ergonomie des IHM web - Chapitre 2 - Introduction et définition
Cours ergonomie des IHM web - Chapitre 2 - Introduction et définition
 
Cours ergonomie des IHM web - Chapitre 7 - Méthode des personas
Cours ergonomie des IHM web - Chapitre 7 - Méthode des personasCours ergonomie des IHM web - Chapitre 7 - Méthode des personas
Cours ergonomie des IHM web - Chapitre 7 - Méthode des personas
 
Cours ergonomie des IHM web - Chapitre 10 - Méthode du tri des cartes
Cours ergonomie des IHM web - Chapitre 10 - Méthode du tri des cartesCours ergonomie des IHM web - Chapitre 10 - Méthode du tri des cartes
Cours ergonomie des IHM web - Chapitre 10 - Méthode du tri des cartes
 
Conception et rédaction de contenus pour le web - part 2
Conception et rédaction de contenus pour le web - part 2Conception et rédaction de contenus pour le web - part 2
Conception et rédaction de contenus pour le web - part 2
 
Ergonomie Web - Une Introduction
Ergonomie Web - Une IntroductionErgonomie Web - Une Introduction
Ergonomie Web - Une Introduction
 
Site web conception
Site web conceptionSite web conception
Site web conception
 
Introduction à l'ergonomie - Drupal Lyon
Introduction à l'ergonomie - Drupal LyonIntroduction à l'ergonomie - Drupal Lyon
Introduction à l'ergonomie - Drupal Lyon
 
Marielle Metge Agostinelli
Marielle Metge AgostinelliMarielle Metge Agostinelli
Marielle Metge Agostinelli
 
Ergonomie(1) (1)
Ergonomie(1) (1)Ergonomie(1) (1)
Ergonomie(1) (1)
 

Similaire à Ergonomie des IHM web - Notes de cours (2/3)

cours_integ_web_Cohérence_des_pages_web_23_24.pdf
cours_integ_web_Cohérence_des_pages_web_23_24.pdfcours_integ_web_Cohérence_des_pages_web_23_24.pdf
cours_integ_web_Cohérence_des_pages_web_23_24.pdf
RimBenameur
 

Similaire à Ergonomie des IHM web - Notes de cours (2/3) (20)

10 bénéfices d'une bonne architecture d'information - Webinar Yellow Dolphin...
10 bénéfices d'une bonne architecture d'information -  Webinar Yellow Dolphin...10 bénéfices d'une bonne architecture d'information -  Webinar Yellow Dolphin...
10 bénéfices d'une bonne architecture d'information - Webinar Yellow Dolphin...
 
Penser et concevoir son site web en 2015
Penser et concevoir son site web en 2015Penser et concevoir son site web en 2015
Penser et concevoir son site web en 2015
 
Ergonomie web pour les nuls
Ergonomie web pour les nulsErgonomie web pour les nuls
Ergonomie web pour les nuls
 
Atelier startup « communiquer sur son innovation Deep Tech pour mieux convain...
Atelier startup « communiquer sur son innovation Deep Tech pour mieux convain...Atelier startup « communiquer sur son innovation Deep Tech pour mieux convain...
Atelier startup « communiquer sur son innovation Deep Tech pour mieux convain...
 
cours_integ_web_Cohérence_des_pages_web_23_24.pdf
cours_integ_web_Cohérence_des_pages_web_23_24.pdfcours_integ_web_Cohérence_des_pages_web_23_24.pdf
cours_integ_web_Cohérence_des_pages_web_23_24.pdf
 
Competitic ergonomie et design site internet - numerique en entreprise
Competitic   ergonomie et design site internet  - numerique en entrepriseCompetitic   ergonomie et design site internet  - numerique en entreprise
Competitic ergonomie et design site internet - numerique en entreprise
 
Good Morning UX #1 : Initiation à la conception UX
Good Morning UX #1 : Initiation à la conception UXGood Morning UX #1 : Initiation à la conception UX
Good Morning UX #1 : Initiation à la conception UX
 
Mtl apptalks ux mobile et ucd - janvier 2014
Mtl apptalks   ux mobile et ucd - janvier 2014Mtl apptalks   ux mobile et ucd - janvier 2014
Mtl apptalks ux mobile et ucd - janvier 2014
 
Guide internet
Guide internetGuide internet
Guide internet
 
1680274500731_Interfacehommemachine.pptx
1680274500731_Interfacehommemachine.pptx1680274500731_Interfacehommemachine.pptx
1680274500731_Interfacehommemachine.pptx
 
Entreprise 2.0 :intranets 2.0 & reseaux sociaux (Paris 2.0)
Entreprise 2.0 :intranets 2.0 & reseaux sociaux (Paris 2.0)Entreprise 2.0 :intranets 2.0 & reseaux sociaux (Paris 2.0)
Entreprise 2.0 :intranets 2.0 & reseaux sociaux (Paris 2.0)
 
Projet web : lexique et notions
Projet web : lexique et notionsProjet web : lexique et notions
Projet web : lexique et notions
 
Conception d'un Extranet
Conception d'un ExtranetConception d'un Extranet
Conception d'un Extranet
 
Comment l'accessibilité améliore la UX
Comment l'accessibilité améliore la UXComment l'accessibilité améliore la UX
Comment l'accessibilité améliore la UX
 
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoirGreen France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
Green France Tourisme : Visibilité sur Internet, le mobile prend le pouvoir
 
Conduite du changement dans un projet portail 2.0
Conduite du changement dans un projet portail 2.0Conduite du changement dans un projet portail 2.0
Conduite du changement dans un projet portail 2.0
 
L'Ergonomie pour les Nuls
L'Ergonomie pour les NulsL'Ergonomie pour les Nuls
L'Ergonomie pour les Nuls
 
Le référencement d’un site e-Commerce
Le référencement d’un site e-CommerceLe référencement d’un site e-Commerce
Le référencement d’un site e-Commerce
 
DIVERSITE 2.0 = Philippe Colin, IteXium lors de paris 2.0 mars 2010
DIVERSITE 2.0 = Philippe Colin, IteXium lors de paris 2.0 mars 2010DIVERSITE 2.0 = Philippe Colin, IteXium lors de paris 2.0 mars 2010
DIVERSITE 2.0 = Philippe Colin, IteXium lors de paris 2.0 mars 2010
 
DIVERSITE 2.0 = Philippe Colin, IteXium (lors de paris 2.0)
DIVERSITE 2.0 = Philippe Colin, IteXium (lors de paris 2.0)DIVERSITE 2.0 = Philippe Colin, IteXium (lors de paris 2.0)
DIVERSITE 2.0 = Philippe Colin, IteXium (lors de paris 2.0)
 

Plus de ElodieDescharmes

Plus de ElodieDescharmes (16)

Petite histoire du Lean
Petite histoire du LeanPetite histoire du Lean
Petite histoire du Lean
 
Project Management 5.1 human resources
Project Management 5.1 human resourcesProject Management 5.1 human resources
Project Management 5.1 human resources
 
Project Management 1.1 introduction
Project Management 1.1 introductionProject Management 1.1 introduction
Project Management 1.1 introduction
 
Project Management 7 agility basics
Project Management 7 agility basicsProject Management 7 agility basics
Project Management 7 agility basics
 
Project Management 10 agile games
Project Management 10 agile gamesProject Management 10 agile games
Project Management 10 agile games
 
Project Management 9 kanban
Project Management 9 kanbanProject Management 9 kanban
Project Management 9 kanban
 
Project Management 8 scrum
Project Management 8 scrumProject Management 8 scrum
Project Management 8 scrum
 
Project Management 6 communication
Project Management 6 communicationProject Management 6 communication
Project Management 6 communication
 
Project Management 4 risks
Project Management 4 risksProject Management 4 risks
Project Management 4 risks
 
Project Management 3.2 cost_exo
Project Management 3.2 cost_exoProject Management 3.2 cost_exo
Project Management 3.2 cost_exo
 
Project Management 3.2 cost
Project Management 3.2 costProject Management 3.2 cost
Project Management 3.2 cost
 
Project Management 3.1 time
Project Management 3.1 timeProject Management 3.1 time
Project Management 3.1 time
 
Project Management 2 scope
Project Management 2 scopeProject Management 2 scope
Project Management 2 scope
 
Cours ergonomie des IHM web - Chapitre 4 - Entretien semi directif
Cours ergonomie des IHM web - Chapitre 4 - Entretien semi directifCours ergonomie des IHM web - Chapitre 4 - Entretien semi directif
Cours ergonomie des IHM web - Chapitre 4 - Entretien semi directif
 
Cours ergonomie des IHM web - Chapitre 3 - Caractéristiques générales des int...
Cours ergonomie des IHM web - Chapitre 3 - Caractéristiques générales des int...Cours ergonomie des IHM web - Chapitre 3 - Caractéristiques générales des int...
Cours ergonomie des IHM web - Chapitre 3 - Caractéristiques générales des int...
 
Acculturation agilite
Acculturation agiliteAcculturation agilite
Acculturation agilite
 

Dernier

Dernier (14)

Texte avec différentes critiques positives, négatives ou mitigées
Texte avec différentes critiques positives, négatives ou mitigéesTexte avec différentes critiques positives, négatives ou mitigées
Texte avec différentes critiques positives, négatives ou mitigées
 
Nathanaëlle Herbelin.pptx Peintre française
Nathanaëlle Herbelin.pptx Peintre françaiseNathanaëlle Herbelin.pptx Peintre française
Nathanaëlle Herbelin.pptx Peintre française
 
Quitter la nuit. pptx
Quitter        la             nuit.   pptxQuitter        la             nuit.   pptx
Quitter la nuit. pptx
 
Quitter la nuit. pptx
Quitter          la        nuit.    pptxQuitter          la        nuit.    pptx
Quitter la nuit. pptx
 
rapport de stage gros oeuvre_compressed.pdf
rapport de stage gros oeuvre_compressed.pdfrapport de stage gros oeuvre_compressed.pdf
rapport de stage gros oeuvre_compressed.pdf
 
GHASSOUB _Seance 3_ measurement and evaluation in education.pptx
GHASSOUB _Seance 3_ measurement and evaluation in education.pptxGHASSOUB _Seance 3_ measurement and evaluation in education.pptx
GHASSOUB _Seance 3_ measurement and evaluation in education.pptx
 
Exemple de grille d'audit 5S, check liste Audit
Exemple de grille d'audit 5S, check liste AuditExemple de grille d'audit 5S, check liste Audit
Exemple de grille d'audit 5S, check liste Audit
 
Fiche de vocabulaire pour faire une appréciation
Fiche de vocabulaire pour faire une appréciationFiche de vocabulaire pour faire une appréciation
Fiche de vocabulaire pour faire une appréciation
 
Un petit coin etwinning- Au fil des cultures urbaines
Un petit coin  etwinning- Au fil des cultures urbainesUn petit coin  etwinning- Au fil des cultures urbaines
Un petit coin etwinning- Au fil des cultures urbaines
 
PowerPoint-de-Soutenance-de-TFE-infirmier.pdf
PowerPoint-de-Soutenance-de-TFE-infirmier.pdfPowerPoint-de-Soutenance-de-TFE-infirmier.pdf
PowerPoint-de-Soutenance-de-TFE-infirmier.pdf
 
Àma Gloria.pptx Un film tourné au Cap Vert et en France
Àma Gloria.pptx   Un film tourné au Cap Vert et en FranceÀma Gloria.pptx   Un film tourné au Cap Vert et en France
Àma Gloria.pptx Un film tourné au Cap Vert et en France
 
Réunion des directeurs de Jonzac - 15 mai 2024
Réunion des directeurs de Jonzac - 15 mai 2024Réunion des directeurs de Jonzac - 15 mai 2024
Réunion des directeurs de Jonzac - 15 mai 2024
 
GHASSOUB _Seance 4_ measurement and evaluation in education_-.pptx
GHASSOUB _Seance 4_ measurement and evaluation in education_-.pptxGHASSOUB _Seance 4_ measurement and evaluation in education_-.pptx
GHASSOUB _Seance 4_ measurement and evaluation in education_-.pptx
 
Les débuts de la collection "Le livre de poche"
Les débuts de la collection "Le livre de poche"Les débuts de la collection "Le livre de poche"
Les débuts de la collection "Le livre de poche"
 

Ergonomie des IHM web - Notes de cours (2/3)

  • 1. Ergonomie – Notes de cours IMR2 – 2012-2013 Référence : Ergonomie web, pour des sites web efficaces Amélie Boucher, Éditions Eyrolles ERGONOMIE NOTES DE COURS LES 12 RÈGLES DE L’ERGONOMIE WEB 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é 2. ORGANISATION VISUELLE : LA PAGE EST BIEN RANGÉE Eviter le trop-plein d’information  Réduire la quantité de mots sur les pages navigantes  N’afficher que les principaux éléments de navigation et d’interaction  Différencier les quantités d’informations réelles et perçues  Démultiplier la valeur du pixel carré  La question de la publicité Optimiser l’organisation et la hiérarchisation visuelle 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 sur cohérentes 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 5. INFORMATION : LE SITE INFORME L’INTERNAUTE ET LUI RÉPOND L’ordinateur informe et prévient l’internaute  Ne soyez pas avare d’informations  Informez, mais au bon moment  Informez pour augmenter votre force persuasive L’ordinateur répond aux actions de l’internaute  Donner du feedback aux actions de l’internaute  Visibilité du feedback 6. COMPRÉHENSION : LES MOTS ET SYMBOLES SONT CHOISIS MINUTIEUSEMENT La bonne utilisation des mots sur le web  Utilisez le vocabulaire !  Le vocabulaire doit être compréhensible  Le vocabulaire doit être concis Les symboles et codes doivent être compréhensibles 7. ASSISTANCE : LE SITE AIDE ET DIRIGE L’INTERNAUTE Dirigez grâce à l’organisation et à la visibilité Dirigez grâce aux affordances  Les affordances permettent de repérer ce qui est cliquable  Les affordances permettent de repérer ce qui est utilisable Hiérarchisez vos call-to-action Attention à ne pas diriger de façon erronée Eviter d’avoir à diriger grâce à un modèle d’interaction adapté Assistez votre internaute en tenant compte de ses besoins en termes de tâches Assistez votre internaute en le suivant de très près Fournissez de l’aide explicite en cas de besoin
  • 2. Ergonomie – Notes de cours IMR2 – 2012-2013 Référence : Ergonomie web, pour des sites web efficaces Amélie Boucher, Éditions Eyrolles 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  Le fonctionnement du formulaire peut protéger contre l’erreur L’internaute doit facilement repérer et comprendre ses erreurs  Faciliter le repérage de l’erreur  Fournir une explication précise de l’erreur  Faire preuve de courtoisie dans les messages d’erreur L’internaute doit facilement pouvoir corriger ses erreurs  Faciliter la correction grâce à l’explication de l’erreur  Faciliter la correction grâce aux mécanismes de gestion des erreurs 9. RAPIDITÉ : L’INTERNAUTE NE PERD PAS SON TEMPS Faciliter les interactions  Faciliter l’action de visée des éléments cliquables  Prendre en compte les besoins de votre internaute sur le plan fonctionnel Eviter les actions inutiles Proposer pour simplifier la tâche Des modes d’interaction orientés efficience 10. LIBERTÉ : C’EST L’INTERNAUTE QUI COMMANDE Respectez les contrôles utilisateurs conventionnels Fuyez les actions au rollover Flexibilité des actions utilisateur Donnez la possibilité à l’internaute de contourner le système et d’agir dessus N’induisez pas de comportement passif Le système n’est pas intrusif  Le système n’est pas lourd et insistant dans ses propositions  Le système ne force pas l’utilisateur à voir quelque-chose  Le site n’agit pas à la place de l’internaute  Au secours, le site prend le contrôle de l’ordinateur 11. ACCESSIBILITÉ Accessibilité physique Accessibilité technologique  La plateforme de consultation est de l’ordre du bonus : adaptez le contenu  La plateforme de consultation est stratégique : informez et guidez 12. SATISFACTION DE 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é de service Satisfaire grâce à la puissance et à la fiabilité technique