SlideShare una empresa de Scribd logo
1 de 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

Más contenido relacionado

La actualidad más candente

Diapo prévention des risques.ppt
Diapo prévention des risques.pptDiapo prévention des risques.ppt
Diapo prévention des risques.ppt
MOUTIALGADOU
 
Prevention des risques de chutes de hauteur
Prevention des risques de chutes de hauteurPrevention des risques de chutes de hauteur
Prevention des risques de chutes de hauteur
FFSNW Formation
 
Règlementation travail en hauteur
Règlementation travail en hauteurRèglementation travail en hauteur
Règlementation travail en hauteur
FFSNW Formation
 

La actualidad más candente (20)

Diapo prévention des risques.ppt
Diapo prévention des risques.pptDiapo prévention des risques.ppt
Diapo prévention des risques.ppt
 
Visite des chantiers et ouvrages
Visite des chantiers et ouvrages  Visite des chantiers et ouvrages
Visite des chantiers et ouvrages
 
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
 
Formation des membres de la CPHS " Accidents de travail et maladie profession...
Formation des membres de la CPHS " Accidents de travail et maladie profession...Formation des membres de la CPHS " Accidents de travail et maladie profession...
Formation des membres de la CPHS " Accidents de travail et maladie profession...
 
Prevention des risques de chutes de hauteur
Prevention des risques de chutes de hauteurPrevention des risques de chutes de hauteur
Prevention des risques de chutes de hauteur
 
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
 
Guide hse 2009
Guide hse 2009Guide hse 2009
Guide hse 2009
 
7 decret 02-427 formation
7  decret 02-427 formation7  decret 02-427 formation
7 decret 02-427 formation
 
FORMATION SUR LE TRAVAIL EN HAUTEUR.ppt
FORMATION SUR LE TRAVAIL EN HAUTEUR.pptFORMATION SUR LE TRAVAIL EN HAUTEUR.ppt
FORMATION SUR LE TRAVAIL EN HAUTEUR.ppt
 
9 principes de la manutention manuelle
9 principes de la manutention manuelle9 principes de la manutention manuelle
9 principes de la manutention manuelle
 
Règlementation travail en hauteur
Règlementation travail en hauteurRèglementation travail en hauteur
Règlementation travail en hauteur
 
Management des risques ibtissam el hassani-chapitre1-2
Management des risques   ibtissam el hassani-chapitre1-2Management des risques   ibtissam el hassani-chapitre1-2
Management des risques ibtissam el hassani-chapitre1-2
 
HAMMANI loi 88/ 07 DU 26/01/1988 RELATIVE A L'HYGIENNE SECUTITE ET MEDECINE ...
HAMMANI  loi 88/ 07 DU 26/01/1988 RELATIVE A L'HYGIENNE SECUTITE ET MEDECINE ...HAMMANI  loi 88/ 07 DU 26/01/1988 RELATIVE A L'HYGIENNE SECUTITE ET MEDECINE ...
HAMMANI loi 88/ 07 DU 26/01/1988 RELATIVE A L'HYGIENNE SECUTITE ET MEDECINE ...
 
fORMATION Travaux en hauteur
fORMATION Travaux en hauteur fORMATION Travaux en hauteur
fORMATION Travaux en hauteur
 
LES RISQUES LIES AUX OPERATIONS DE SOUDAGE
LES RISQUES LIES AUX OPERATIONS DE SOUDAGELES RISQUES LIES AUX OPERATIONS DE SOUDAGE
LES RISQUES LIES AUX OPERATIONS DE SOUDAGE
 
Catering Traning.ppt
Catering Traning.pptCatering Traning.ppt
Catering Traning.ppt
 
Présentation du département hse minutée
Présentation du département hse minutéePrésentation du département hse minutée
Présentation du département hse minutée
 
Etude de danger envir. hammani
Etude de danger envir. hammaniEtude de danger envir. hammani
Etude de danger envir. hammani
 
Animer des « quart d’heure sécurité »
Animer des « quart d’heure sécurité »Animer des « quart d’heure sécurité »
Animer des « quart d’heure sécurité »
 
Hygiène et sécurité au travail
Hygiène et sécurité au travailHygiène et sécurité au travail
Hygiène et sécurité au travail
 

Destacado

Charte Ergonomique
Charte Ergonomique Charte Ergonomique
Charte Ergonomique
Rached Krim
 
Tms ssst cambrai dr thorez
Tms ssst cambrai dr thorezTms ssst cambrai dr thorez
Tms ssst cambrai dr thorez
Philippe Porta
 
Formation sst (tres interessant)
Formation sst (tres interessant)Formation sst (tres interessant)
Formation sst (tres interessant)
pascalbaudin
 

Destacado (20)

Ergonomie en entreprise
Ergonomie en entrepriseErgonomie en entreprise
Ergonomie en entreprise
 
Charte Ergonomique
Charte Ergonomique Charte Ergonomique
Charte Ergonomique
 
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...
 
Guide pratique du travail sur écran
Guide pratique du travail sur écranGuide pratique du travail sur écran
Guide pratique du travail sur écran
 
Ergonomie
Ergonomie Ergonomie
Ergonomie
 
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
 
Tms ssst cambrai dr thorez
Tms ssst cambrai dr thorezTms ssst cambrai dr thorez
Tms ssst cambrai dr thorez
 
Manutention de charges
Manutention de chargesManutention de charges
Manutention de charges
 
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
 

Similar a 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
 

Similar a 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
 

Más de 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
 

Más de 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