SlideShare ist ein Scribd-Unternehmen logo
1 von 37
BarCamp « L’Ergonomie pour les nuls » 
Janvier 2013 @ Paris 
Quentin VIGNIER 
Responsable Architecture et Performance 
@PALO IT
2 
Au programme 
Qui suis-je ? 
Introduction 
Qu’est-ce que l’Ergonomie ? 
De l’Ergonomie, pour quoi faire ? 
Idées reçues sur l’Ergonomie 
Comprendre les internautes. 
Conception Ergonomique 
Les 12 règles de l’Ergonomie 
Les Personas 
Architecture de l’Information 
Maquette Ergonomique 
Tests Utilisateurs. 
Cas Pratique 
Les Formulaires 
Ergo or not Ergo ?
QUI SUIS-JE ?
4 
Qui suis-je? 
Quentin VIGNIER – Consultant chez PALO IT 
Quelques informations 
Issu du milieu de la Recherche (BTS en Biotechnologie) 
Formation d’Analyste Informaticien 
Formation d’Architecte des Systèmes d’Information 
Développeur Web depuis 2 ans 
Passionné par la Psychologie de la prise de décision. 
Conception et Réalisation 
Application dévaluation des téléconseillers 
Application de sondage 
Front End de demande de support 
Portfolios. 
Mais avant tout Internaute à l’oeil critique !
5 
INTRODUCTION
6 
Introduction 
Qu’est-ce que l’Ergonomie ? 
Définition Wikipédia 
« Etude scientifique de la relation entre l’Homme et ses moyens, méthodes et milieu de 
travail. » 
Norme ISO 9241 
« Un produit est dit utilisable lorsqu’il peut-être utilisé avec efficacité, efficience et 
satisfaction par des utilisateurs donnés cherchant à atteindre des objectifs donnés dans 
un contexte d’utilisation donné. » 
Ergonomie (Informatique) = Utilité + Utilisabilité
7 
Introduction 
De l’ Ergonomie, pour quoi faire ? 
Dans les applications grand public 
Simplification de la prise en main 
Facilité de la prise de décision 
Limitation des possibilités d’erreurs 
Augmentation des taux de conversion 
Augmentation de la durée de la fréquence des visites 
Augmentation de la satisfaction (difficile à quantifier). 
Dans les applications professionnelles 
Formation simplifiée 
Augmentation de la productivité (efficacité + efficience ) 
Travail moins fatiguant et moins stressant. 
Users Driven Development (UDD) 
Diminution du temps de développement initial 
Diminution de la quantité d’évolutions requises et de bugs.
8 
Introduction 
Idées reçues sur l’Ergonomie 
L’Ergonomie, c’est juste du bon sens ! 
Faites-moi un site Ergonomique ! 
Les Utilisateurs sont des idiots ! 
Si ma mère y arrive, alors tout le monde peut le faire ! 
Les internautes ne scrollent pas ! 
Pour l’Ergonomie ? On verra à la fin ! 
Ergonomie et Design = ennemis jurés ! 
3 clics pas plus ! 
On le fera avec de l’Ajax ! 
Pas grave, c’est dans le manuel utilisateur ! 
Les internautes lisent en F !
9 
Introduction 
Idées reçues sur l’Ergonomie 
Les internautes lisent en F !
10 
Introduction 
Idées reçues sur l’Ergonomie 
Les internautes lisent en F !
11 
Introduction 
Comprendre les internautes 
Définition de la Perception 
« Faculté Biophysique et Culturelle qui relie l’action du vivant aux mondes et à l’environnement par 
l’intermédiaire des sens et des idéologies individuelles ou collectives ». 
Théorie de la Gestalt – Loi de proximité
12 
Introduction 
Comprendre les internautes 
Théorie de la Gestalt – Loi de similarité
13 
Introduction 
Comprendre les internautes 
L’Affordance 
« L’affordance est la capacité d’un objet à suggérer sa propre utilisation ». 
Affordance → Utilisation Intuitive 
Facteurs d’Affordance 
Forme 
Couleur 
Libellé 
Contenu 
Localisation. 
Attention aux Affordances erronées !
14 
Introduction 
Comprendre les internautes 
Nombre magique de Miller 
« La capacité de la mémoire de travail de l’être humain est de 7 éléments plus ou moins 2. Au-delà le 
risque d’oubli augmente de manière significatif ». 
Mauvaise conclusion 
Mes listes d’éléments ne doivent pas dépasser plus de 7 éléments ! 
Loi de Hick 
« Le temps nécessaire à la prise de décision croît proportionnellement au nombre et à la complexité des 
options proposées ».
15 
CONCEPTION 
ERGONOMIQUE
16 
Conception ergonomique 
Les 12 règles de l’Ergonomie 
Architecture 
Organisation visuelle 
Cohérence 
Convention 
Information 
Compréhension 
Assistance 
Gestion des erreurs 
Rapidité 
Liberté 
Accessibilité 
Satisfaction des Utilisateurs.
17 
Conception ergonomique 
Les Personas 
Définition Wikipédia 
« Les personas sont construits sur la base d’une étude précise des utilisateurs actuels 
et/ou potentiels d’un produit, le plus souvent à partir des données recueillies lors 
d’entretiens individuels ». 
Caractérisation des Personas 
Synthèse non exhaustive des utilisateurs 
Notion d’objectif très importante 
Volonté d’être réaliste 
Plusieurs niveaux de Personas 
Crées par plusieurs intervenants. 
Comment les utiliser ? 
Présentez-les ! 
Interviewez-les pour toutes problématiques fonctionnelles (UDD). 
Traitez-les comme des vraies Personnes !
18 
Conception ergonomique 
Les Personas
19 
Conception ergonomique 
Les Personas 
Définition Wikipédia 
« Organisation des contenus en une structure cohérente que la plupart des gens peuvent comprendre 
rapidement ou de manière intrinsèque ». 
Organisation = Structure + Navigation 
Les types de Navigation 
Navigation directe : recherche par mots clés. 
Navigation ciblée : globale, locale, libre, transversale. 
Comment définir la structure ? 
Les besoins des utilisateurs. 
Les représentations mentales de vos utilisateurs. 
La concurrence !
20 
Conception ergonomique 
Maquette Ergonomique 
Réalisation en deux étapes 
Zoning 
Maquette Ergonomique. 
Zoning 
Zones de positionnement 
Logo, navigation principale, zones principales, footer, etc. 
Indiquez la hiérarchie visuelle.. 
Maquette Ergonomique 
Pas d’élément graphique 
Support pour le Designer 
Détails de chaque zone.
21 
Conception ergonomique 
Maquette Ergonomique 
Exemple de Zoning
22 
Conception ergonomique 
Tests Utilisateurs 
Trois approches 
Avec vos utilisateurs cibles. 
Avec des utilisateurs lambda. 
Sans utilisateur. 
Un Test, ça se prépare ! 
Scénarii et des questions 
Matériel. 
Combien de participants ? 
Nombre idéal VS nombre acceptable. 
10 utilisateurs couvrent 80% des problèmes. 
Favoriser les « Tests au rabais » ? 
Quand les réaliser ? 
Avant, pendant, après le développement. 
Soyez Agile dans vos Tests comme vous l’êtes dans vos développements.
23 
CAS PRATIQUE
24 
Les formulaires 
Indicateurs de Perception 
Hauteur (indicateur de durée). 
Charge (indicateur de complexité). 
Indicateurs à mettre en relation avec la tâche finale ! 
Simplification du contenu 
Limitation du nombre de champs 
Champs obligatoires VS champs utiles. 
Hiérarchisation du contenu 
Regroupement par concept. 
Regroupement visuel. 
Organisation par étape.
25 
Les formulaires 
Indicateurs de Perception
26 
Les formulaires 
Labels et champs de saisie 
Position horizontale 
Diminution de la durée perçue. 
Rupture du parcours visuel. 
Positionnement variable. 
Position verticale 
Simplification du parcours visuel. 
Positionnement constant. 
Augmentation de la durée perçue.
27 
Les formulaires 
Validation et correction 
Empêcher les erreurs : 
Bloquer les caractères interdits 
Définir le contenu attendu 
Utiliser des composants adaptés. 
Aider à la correction : 
Localiser l’erreur 
La définir 
Présenter sa solution. 
Quand déclencher les erreurs ? 
A chaque changement de champs de saisie 
A l’envoi du formulaire.
28 
Les formulaires 
Validation et correction
29 
Les formulaires 
Actions sur les formulaires 
Eviter les termes génériques 
Reprendre le verbe d’action et le contexte. 
Mise en forme 
Do action et Cancel action différents visuellement 
Différence de couleur et de forme. 
Ordre des éléments 
Cancel action > Do action 
Optimisation du parcours visuel.
ERGO OR NOT ERGO ?
31 
Formulaire de recherche
32 
Inscription Facebook
33 
Inscription Twitter
34 
Inscription MailChimp
RESSOURCES
36 
Ressources 
Livres 
Ergonomie Web, Amélie Boucher 
Ergonomie Web illustrée, Amélie Boucher 
Don’t make me think, Steve Krug 
Information Architecture, Louis Rosenfeld et Peter Morville 
Persona Lifecycle, John Pruitt et Tamara Adlin 
Sites Internet 
http://uxmovement.com/ 
http://www.ergolab.net/ 
http://ui-patterns.com/ 
http://uxbooth.com/
37

Weitere ähnliche Inhalte

Was ist angesagt?

Aqhsst optimisez l’efficacité de la gestion des risques sst
Aqhsst optimisez l’efficacité de la gestion des risques sstAqhsst optimisez l’efficacité de la gestion des risques sst
Aqhsst optimisez l’efficacité de la gestion des risques sst
Mario Deshaies
 
Conférence pénibilité
Conférence pénibilitéConférence pénibilité
Conférence pénibilité
proetco
 
Règlementation travail en hauteur
Règlementation travail en hauteurRèglementation travail en hauteur
Règlementation travail en hauteur
FFSNW Formation
 

Was ist angesagt? (20)

les risques thermiques et mécaniques
 les risques thermiques et mécaniques    les risques thermiques et mécaniques
les risques thermiques et mécaniques
 
Gestes et postures 2019
Gestes et postures 2019Gestes et postures 2019
Gestes et postures 2019
 
Travailler en securite
Travailler en securiteTravailler en securite
Travailler en securite
 
Démarche d'analyse de la manutention manuelle
Démarche d'analyse de la manutention manuelle   Démarche d'analyse de la manutention manuelle
Démarche d'analyse de la manutention manuelle
 
Manutention de charges
Manutention de chargesManutention de charges
Manutention de charges
 
Bien-être et santé au travail : quelles sont les bonnes postures pour se prot...
Bien-être et santé au travail : quelles sont les bonnes postures pour se prot...Bien-être et santé au travail : quelles sont les bonnes postures pour se prot...
Bien-être et santé au travail : quelles sont les bonnes postures pour se prot...
 
Risques généraux
Risques généraux Risques généraux
Risques généraux
 
Aqhsst optimisez l’efficacité de la gestion des risques sst
Aqhsst optimisez l’efficacité de la gestion des risques sstAqhsst optimisez l’efficacité de la gestion des risques sst
Aqhsst optimisez l’efficacité de la gestion des risques sst
 
Briefing hse, minutes sécurité..pre job
Briefing hse, minutes sécurité..pre jobBriefing hse, minutes sécurité..pre job
Briefing hse, minutes sécurité..pre job
 
Conférence pénibilité
Conférence pénibilitéConférence pénibilité
Conférence pénibilité
 
La prevention des risques chimiques et la ventilation industrielle
La prevention des risques chimiques et la ventilation industrielleLa prevention des risques chimiques et la ventilation industrielle
La prevention des risques chimiques et la ventilation industrielle
 
Les outils en ligne dédies à la sécurité des machines
Les outils en ligne dédies à  la sécurité des machinesLes outils en ligne dédies à  la sécurité des machines
Les outils en ligne dédies à la sécurité des machines
 
Guide hygiène et sécurité - télécharger : http://goo.gl/NoFrdW
Guide hygiène et sécurité - télécharger : http://goo.gl/NoFrdWGuide hygiène et sécurité - télécharger : http://goo.gl/NoFrdW
Guide hygiène et sécurité - télécharger : http://goo.gl/NoFrdW
 
I NSTRUCTIONS HSE ACCIDENT DE TRAVAIL ET MALADIE PROFESSIONNELLES ISO 45001
I NSTRUCTIONS HSE  ACCIDENT DE TRAVAIL ET MALADIE PROFESSIONNELLES ISO 45001I NSTRUCTIONS HSE  ACCIDENT DE TRAVAIL ET MALADIE PROFESSIONNELLES ISO 45001
I NSTRUCTIONS HSE ACCIDENT DE TRAVAIL ET MALADIE PROFESSIONNELLES ISO 45001
 
Induction HSE - Bureau d'études HSE
Induction HSE - Bureau d'études HSE  Induction HSE - Bureau d'études HSE
Induction HSE - Bureau d'études HSE
 
Managers: 10 lois à connaître
Managers: 10 lois à connaîtreManagers: 10 lois à connaître
Managers: 10 lois à connaître
 
Maintenance des bâtiments : comment travailler en hauteur en toute sécurité ?
Maintenance des bâtiments : comment travailler en hauteur en toute sécurité ?Maintenance des bâtiments : comment travailler en hauteur en toute sécurité ?
Maintenance des bâtiments : comment travailler en hauteur en toute sécurité ?
 
Guide hse 2009
Guide hse 2009Guide hse 2009
Guide hse 2009
 
Ergonomie
Ergonomie Ergonomie
Ergonomie
 
Règlementation travail en hauteur
Règlementation travail en hauteurRèglementation travail en hauteur
Règlementation travail en hauteur
 

Andere mochten auch

Charte Ergonomique
Charte Ergonomique Charte Ergonomique
Charte Ergonomique
Rached Krim
 
Formation sst (tres interessant)
Formation sst (tres interessant)Formation sst (tres interessant)
Formation sst (tres interessant)
pascalbaudin
 

Andere mochten auch (16)

Charte Ergonomique
Charte Ergonomique Charte Ergonomique
Charte Ergonomique
 
Guide pratique du travail sur écran
Guide pratique du travail sur écranGuide pratique du travail sur écran
Guide pratique du travail sur écran
 
Adapter son poste de travail, pourquoi ?
Adapter son poste de travail, pourquoi ?Adapter son poste de travail, pourquoi ?
Adapter son poste de travail, pourquoi ?
 
Td 1 notion d'ergonomie
Td 1 notion d'ergonomieTd 1 notion d'ergonomie
Td 1 notion d'ergonomie
 
Prévention du mal de dos et des TMS (Par François Stévignon)
Prévention du mal de dos et des TMS (Par François Stévignon)Prévention du mal de dos et des TMS (Par François Stévignon)
Prévention du mal de dos et des TMS (Par François Stévignon)
 
Formation sst (tres interessant)
Formation sst (tres interessant)Formation sst (tres interessant)
Formation sst (tres interessant)
 
Ergonomie en milieu de travail - Étude de cas Church & Dwight
Ergonomie en milieu de travail - Étude de cas Church & DwightErgonomie en milieu de travail - Étude de cas Church & Dwight
Ergonomie en milieu de travail - Étude de cas Church & Dwight
 
Guide du travail sur ecran numerique à Lyonnaise des Eaux
Guide du travail sur ecran numerique à Lyonnaise des EauxGuide du travail sur ecran numerique à Lyonnaise des Eaux
Guide du travail sur ecran numerique à Lyonnaise des Eaux
 
Introduction à l'ergonomie - Drupal Lyon
Introduction à l'ergonomie - Drupal LyonIntroduction à l'ergonomie - Drupal Lyon
Introduction à l'ergonomie - Drupal Lyon
 
GT Agile-UX - présentation UCD
GT Agile-UX - présentation UCDGT Agile-UX - présentation UCD
GT Agile-UX - présentation UCD
 
Ergonomie
ErgonomieErgonomie
Ergonomie
 
Cours 3 : pratique de l’ergonomie et mobilité
Cours 3 :  pratique de l’ergonomie et mobilitéCours 3 :  pratique de l’ergonomie et mobilité
Cours 3 : pratique de l’ergonomie et mobilité
 
Cours 1 : introduction a l'ergonomie logicielle
Cours 1 :  introduction a l'ergonomie logicielleCours 1 :  introduction a l'ergonomie logicielle
Cours 1 : introduction a l'ergonomie logicielle
 
Coaching à Paris et en ile-de-France
Coaching à Paris et en ile-de-FranceCoaching à Paris et en ile-de-France
Coaching à Paris et en ile-de-France
 
Evaluation CM2
Evaluation CM2Evaluation CM2
Evaluation CM2
 
Diapo du cours #7 (hiver 2011)
Diapo du cours #7 (hiver 2011)Diapo du cours #7 (hiver 2011)
Diapo du cours #7 (hiver 2011)
 

Ähnlich wie L'Ergonomie pour les Nuls

WEBXDN2012 - Ergonomie & Taux de clics
WEBXDN2012 - Ergonomie & Taux de clicsWEBXDN2012 - Ergonomie & Taux de clics
WEBXDN2012 - Ergonomie & Taux de clics
webxdn
 
Persona grata
Persona grata Persona grata
Persona grata
Eric Brangier
 
101 - UX, Agile, collaboration : une formule gagnante en développement de pr...
101 -  UX, Agile, collaboration : une formule gagnante en développement de pr...101 -  UX, Agile, collaboration : une formule gagnante en développement de pr...
101 - UX, Agile, collaboration : une formule gagnante en développement de pr...
PMI-Montréal
 
Engagez vos utilisateurs
Engagez vos utilisateursEngagez vos utilisateurs
Engagez vos utilisateurs
Simon Bédard
 

Ähnlich wie L'Ergonomie pour les Nuls (20)

1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur1. Introduction à l'Expérience utilisateur
1. Introduction à l'Expérience utilisateur
 
Ergonomie et modélisation des utilisateurs d'une ihm 2014
Ergonomie et modélisation des utilisateurs d'une ihm 2014Ergonomie et modélisation des utilisateurs d'une ihm 2014
Ergonomie et modélisation des utilisateurs d'une ihm 2014
 
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)
 
Ergonomie et taux de clic Webx D&N 2012
Ergonomie et taux de clic Webx D&N 2012Ergonomie et taux de clic Webx D&N 2012
Ergonomie et taux de clic Webx D&N 2012
 
WEBXDN2012 - Ergonomie & Taux de clics
WEBXDN2012 - Ergonomie & Taux de clicsWEBXDN2012 - Ergonomie & Taux de clics
WEBXDN2012 - Ergonomie & Taux de clics
 
Méthodologie de conception: user flow
Méthodologie de conception: user flowMéthodologie de conception: user flow
Méthodologie de conception: user flow
 
bb-d_ERGO-UX
bb-d_ERGO-UXbb-d_ERGO-UX
bb-d_ERGO-UX
 
Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"
 
Good Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UXGood Morning UX #3 : Les fondamentaux du design UX
Good Morning UX #3 : Les fondamentaux du design UX
 
Persona grata
Persona grata Persona grata
Persona grata
 
101 - UX, Agile, collaboration : une formule gagnante en développement de pr...
101 -  UX, Agile, collaboration : une formule gagnante en développement de pr...101 -  UX, Agile, collaboration : une formule gagnante en développement de pr...
101 - UX, Agile, collaboration : une formule gagnante en développement de pr...
 
Optimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open SourceOptimiser l'expérience utilisateur de l'Open Source
Optimiser l'expérience utilisateur de l'Open Source
 
Comment améliorer l'expérience utilisateur
Comment améliorer l'expérience utilisateur Comment améliorer l'expérience utilisateur
Comment améliorer l'expérience utilisateur
 
Engagez vos utilisateurs
Engagez vos utilisateursEngagez vos utilisateurs
Engagez vos utilisateurs
 
Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Pourquoi toutes les organisations ont-elles besoin de Design UX ?Pourquoi toutes les organisations ont-elles besoin de Design UX ?
Pourquoi toutes les organisations ont-elles besoin de Design UX ?
 
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
 
Conception d'un Extranet
Conception d'un ExtranetConception d'un Extranet
Conception d'un Extranet
 
Star d'UX Bordeaux #4 : UX Future
Star d'UX Bordeaux #4 : UX FutureStar d'UX Bordeaux #4 : UX Future
Star d'UX Bordeaux #4 : UX Future
 
DevMobCA #16: Comment arrêter de perdre des clients sur votre site ou appli s...
DevMobCA #16: Comment arrêter de perdre des clients sur votre site ou appli s...DevMobCA #16: Comment arrêter de perdre des clients sur votre site ou appli s...
DevMobCA #16: Comment arrêter de perdre des clients sur votre site ou appli s...
 
Rédiger des User Stories
Rédiger des User StoriesRédiger des User Stories
Rédiger des User Stories
 

Mehr von PALO IT

The Agile Transformation Hell - PALO IT BarCamp
The Agile Transformation Hell - PALO IT BarCampThe Agile Transformation Hell - PALO IT BarCamp
The Agile Transformation Hell - PALO IT BarCamp
PALO IT
 
Design & Develop Disruptive Software
Design & Develop Disruptive SoftwareDesign & Develop Disruptive Software
Design & Develop Disruptive Software
PALO IT
 
Growth Mindset & Psychological Safety - High Performing Teams in Software Dev...
Growth Mindset & Psychological Safety - High Performing Teams in Software Dev...Growth Mindset & Psychological Safety - High Performing Teams in Software Dev...
Growth Mindset & Psychological Safety - High Performing Teams in Software Dev...
PALO IT
 
Explorez l’Employee eXperience grâce au Design Thinking
Explorez l’Employee eXperience grâce au Design ThinkingExplorez l’Employee eXperience grâce au Design Thinking
Explorez l’Employee eXperience grâce au Design Thinking
PALO IT
 
Emerging Innovation: an exploratory journey into Design Thinking and why it m...
Emerging Innovation: an exploratory journey into Design Thinking and why it m...Emerging Innovation: an exploratory journey into Design Thinking and why it m...
Emerging Innovation: an exploratory journey into Design Thinking and why it m...
PALO IT
 
Spark Streaming
Spark StreamingSpark Streaming
Spark Streaming
PALO IT
 

Mehr von PALO IT (20)

The Agile Transformation Hell - PALO IT BarCamp
The Agile Transformation Hell - PALO IT BarCampThe Agile Transformation Hell - PALO IT BarCamp
The Agile Transformation Hell - PALO IT BarCamp
 
Design & Develop Disruptive Software
Design & Develop Disruptive SoftwareDesign & Develop Disruptive Software
Design & Develop Disruptive Software
 
Growth Mindset & Psychological Safety - High Performing Teams in Software Dev...
Growth Mindset & Psychological Safety - High Performing Teams in Software Dev...Growth Mindset & Psychological Safety - High Performing Teams in Software Dev...
Growth Mindset & Psychological Safety - High Performing Teams in Software Dev...
 
BigText, compréhension et inférence avancées sur les textes
BigText, compréhension et inférence avancées sur les textesBigText, compréhension et inférence avancées sur les textes
BigText, compréhension et inférence avancées sur les textes
 
Explorez l’Employee eXperience grâce au Design Thinking
Explorez l’Employee eXperience grâce au Design ThinkingExplorez l’Employee eXperience grâce au Design Thinking
Explorez l’Employee eXperience grâce au Design Thinking
 
Self-Organisation & Transparency: Delegation Poker
Self-Organisation & Transparency: Delegation PokerSelf-Organisation & Transparency: Delegation Poker
Self-Organisation & Transparency: Delegation Poker
 
Framework de Digitalisation par les Organisations Exponentielles
Framework de Digitalisation par les Organisations ExponentiellesFramework de Digitalisation par les Organisations Exponentielles
Framework de Digitalisation par les Organisations Exponentielles
 
Project Managers, our World is Changing!
Project Managers, our World is Changing!Project Managers, our World is Changing!
Project Managers, our World is Changing!
 
The Future of User Experience
The Future of User ExperienceThe Future of User Experience
The Future of User Experience
 
Developers are from Mars, Designers are from Venus
Developers are from Mars, Designers are from VenusDevelopers are from Mars, Designers are from Venus
Developers are from Mars, Designers are from Venus
 
Self-Organization in Agile & Digital Transformation
Self-Organization in Agile & Digital Transformation Self-Organization in Agile & Digital Transformation
Self-Organization in Agile & Digital Transformation
 
Blockchain présenté aux Développeurs
Blockchain présenté aux Développeurs Blockchain présenté aux Développeurs
Blockchain présenté aux Développeurs
 
Pourquoi est-ce si difficile de concevoir une API ?
Pourquoi est-ce si difficile de concevoir une API ?Pourquoi est-ce si difficile de concevoir une API ?
Pourquoi est-ce si difficile de concevoir une API ?
 
Emerging Innovation: an exploratory journey into Design Thinking and why it m...
Emerging Innovation: an exploratory journey into Design Thinking and why it m...Emerging Innovation: an exploratory journey into Design Thinking and why it m...
Emerging Innovation: an exploratory journey into Design Thinking and why it m...
 
Données animées
Données animéesDonnées animées
Données animées
 
Spark Streaming
Spark StreamingSpark Streaming
Spark Streaming
 
Et pourquoi pas JEE ?
Et pourquoi pas JEE ?Et pourquoi pas JEE ?
Et pourquoi pas JEE ?
 
Big Data ou comment retrouver une aiguille dans une botte de foin
Big Data ou comment retrouver une aiguille dans une botte de foinBig Data ou comment retrouver une aiguille dans une botte de foin
Big Data ou comment retrouver une aiguille dans une botte de foin
 
Sarah : l’Internet des Objets au service de la maison connectée
Sarah : l’Internet des Objets au service de la maison connectée Sarah : l’Internet des Objets au service de la maison connectée
Sarah : l’Internet des Objets au service de la maison connectée
 
Product Owner : Gardien du Cap
Product Owner : Gardien du CapProduct Owner : Gardien du Cap
Product Owner : Gardien du Cap
 

L'Ergonomie pour les Nuls

  • 1. BarCamp « L’Ergonomie pour les nuls » Janvier 2013 @ Paris Quentin VIGNIER Responsable Architecture et Performance @PALO IT
  • 2. 2 Au programme Qui suis-je ? Introduction Qu’est-ce que l’Ergonomie ? De l’Ergonomie, pour quoi faire ? Idées reçues sur l’Ergonomie Comprendre les internautes. Conception Ergonomique Les 12 règles de l’Ergonomie Les Personas Architecture de l’Information Maquette Ergonomique Tests Utilisateurs. Cas Pratique Les Formulaires Ergo or not Ergo ?
  • 4. 4 Qui suis-je? Quentin VIGNIER – Consultant chez PALO IT Quelques informations Issu du milieu de la Recherche (BTS en Biotechnologie) Formation d’Analyste Informaticien Formation d’Architecte des Systèmes d’Information Développeur Web depuis 2 ans Passionné par la Psychologie de la prise de décision. Conception et Réalisation Application dévaluation des téléconseillers Application de sondage Front End de demande de support Portfolios. Mais avant tout Internaute à l’oeil critique !
  • 6. 6 Introduction Qu’est-ce que l’Ergonomie ? Définition Wikipédia « Etude scientifique de la relation entre l’Homme et ses moyens, méthodes et milieu de travail. » Norme ISO 9241 « Un produit est dit utilisable lorsqu’il peut-être utilisé avec efficacité, efficience et satisfaction par des utilisateurs donnés cherchant à atteindre des objectifs donnés dans un contexte d’utilisation donné. » Ergonomie (Informatique) = Utilité + Utilisabilité
  • 7. 7 Introduction De l’ Ergonomie, pour quoi faire ? Dans les applications grand public Simplification de la prise en main Facilité de la prise de décision Limitation des possibilités d’erreurs Augmentation des taux de conversion Augmentation de la durée de la fréquence des visites Augmentation de la satisfaction (difficile à quantifier). Dans les applications professionnelles Formation simplifiée Augmentation de la productivité (efficacité + efficience ) Travail moins fatiguant et moins stressant. Users Driven Development (UDD) Diminution du temps de développement initial Diminution de la quantité d’évolutions requises et de bugs.
  • 8. 8 Introduction Idées reçues sur l’Ergonomie L’Ergonomie, c’est juste du bon sens ! Faites-moi un site Ergonomique ! Les Utilisateurs sont des idiots ! Si ma mère y arrive, alors tout le monde peut le faire ! Les internautes ne scrollent pas ! Pour l’Ergonomie ? On verra à la fin ! Ergonomie et Design = ennemis jurés ! 3 clics pas plus ! On le fera avec de l’Ajax ! Pas grave, c’est dans le manuel utilisateur ! Les internautes lisent en F !
  • 9. 9 Introduction Idées reçues sur l’Ergonomie Les internautes lisent en F !
  • 10. 10 Introduction Idées reçues sur l’Ergonomie Les internautes lisent en F !
  • 11. 11 Introduction Comprendre les internautes Définition de la Perception « Faculté Biophysique et Culturelle qui relie l’action du vivant aux mondes et à l’environnement par l’intermédiaire des sens et des idéologies individuelles ou collectives ». Théorie de la Gestalt – Loi de proximité
  • 12. 12 Introduction Comprendre les internautes Théorie de la Gestalt – Loi de similarité
  • 13. 13 Introduction Comprendre les internautes L’Affordance « L’affordance est la capacité d’un objet à suggérer sa propre utilisation ». Affordance → Utilisation Intuitive Facteurs d’Affordance Forme Couleur Libellé Contenu Localisation. Attention aux Affordances erronées !
  • 14. 14 Introduction Comprendre les internautes Nombre magique de Miller « La capacité de la mémoire de travail de l’être humain est de 7 éléments plus ou moins 2. Au-delà le risque d’oubli augmente de manière significatif ». Mauvaise conclusion Mes listes d’éléments ne doivent pas dépasser plus de 7 éléments ! Loi de Hick « Le temps nécessaire à la prise de décision croît proportionnellement au nombre et à la complexité des options proposées ».
  • 16. 16 Conception ergonomique Les 12 règles de l’Ergonomie Architecture Organisation visuelle Cohérence Convention Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction des Utilisateurs.
  • 17. 17 Conception ergonomique Les Personas Définition Wikipédia « Les personas sont construits sur la base d’une étude précise des utilisateurs actuels et/ou potentiels d’un produit, le plus souvent à partir des données recueillies lors d’entretiens individuels ». Caractérisation des Personas Synthèse non exhaustive des utilisateurs Notion d’objectif très importante Volonté d’être réaliste Plusieurs niveaux de Personas Crées par plusieurs intervenants. Comment les utiliser ? Présentez-les ! Interviewez-les pour toutes problématiques fonctionnelles (UDD). Traitez-les comme des vraies Personnes !
  • 19. 19 Conception ergonomique Les Personas Définition Wikipédia « Organisation des contenus en une structure cohérente que la plupart des gens peuvent comprendre rapidement ou de manière intrinsèque ». Organisation = Structure + Navigation Les types de Navigation Navigation directe : recherche par mots clés. Navigation ciblée : globale, locale, libre, transversale. Comment définir la structure ? Les besoins des utilisateurs. Les représentations mentales de vos utilisateurs. La concurrence !
  • 20. 20 Conception ergonomique Maquette Ergonomique Réalisation en deux étapes Zoning Maquette Ergonomique. Zoning Zones de positionnement Logo, navigation principale, zones principales, footer, etc. Indiquez la hiérarchie visuelle.. Maquette Ergonomique Pas d’élément graphique Support pour le Designer Détails de chaque zone.
  • 21. 21 Conception ergonomique Maquette Ergonomique Exemple de Zoning
  • 22. 22 Conception ergonomique Tests Utilisateurs Trois approches Avec vos utilisateurs cibles. Avec des utilisateurs lambda. Sans utilisateur. Un Test, ça se prépare ! Scénarii et des questions Matériel. Combien de participants ? Nombre idéal VS nombre acceptable. 10 utilisateurs couvrent 80% des problèmes. Favoriser les « Tests au rabais » ? Quand les réaliser ? Avant, pendant, après le développement. Soyez Agile dans vos Tests comme vous l’êtes dans vos développements.
  • 24. 24 Les formulaires Indicateurs de Perception Hauteur (indicateur de durée). Charge (indicateur de complexité). Indicateurs à mettre en relation avec la tâche finale ! Simplification du contenu Limitation du nombre de champs Champs obligatoires VS champs utiles. Hiérarchisation du contenu Regroupement par concept. Regroupement visuel. Organisation par étape.
  • 25. 25 Les formulaires Indicateurs de Perception
  • 26. 26 Les formulaires Labels et champs de saisie Position horizontale Diminution de la durée perçue. Rupture du parcours visuel. Positionnement variable. Position verticale Simplification du parcours visuel. Positionnement constant. Augmentation de la durée perçue.
  • 27. 27 Les formulaires Validation et correction Empêcher les erreurs : Bloquer les caractères interdits Définir le contenu attendu Utiliser des composants adaptés. Aider à la correction : Localiser l’erreur La définir Présenter sa solution. Quand déclencher les erreurs ? A chaque changement de champs de saisie A l’envoi du formulaire.
  • 28. 28 Les formulaires Validation et correction
  • 29. 29 Les formulaires Actions sur les formulaires Eviter les termes génériques Reprendre le verbe d’action et le contexte. Mise en forme Do action et Cancel action différents visuellement Différence de couleur et de forme. Ordre des éléments Cancel action > Do action Optimisation du parcours visuel.
  • 30. ERGO OR NOT ERGO ?
  • 31. 31 Formulaire de recherche
  • 36. 36 Ressources Livres Ergonomie Web, Amélie Boucher Ergonomie Web illustrée, Amélie Boucher Don’t make me think, Steve Krug Information Architecture, Louis Rosenfeld et Peter Morville Persona Lifecycle, John Pruitt et Tamara Adlin Sites Internet http://uxmovement.com/ http://www.ergolab.net/ http://ui-patterns.com/ http://uxbooth.com/
  • 37. 37