BarCamp « L’Ergonomie pour les nuls » 
Janvier 2013 @ Paris 
Quentin VIGNIER 
Responsable Architecture et Performance 
@PA...
2 
Au programme 
Qui suis-je ? 
Introduction 
Qu’est-ce que l’Ergonomie ? 
De l’Ergonomie, pour quoi faire ? 
Idées reçues...
QUI SUIS-JE ?
4 
Qui suis-je? 
Quentin VIGNIER – Consultant chez PALO IT 
Quelques informations 
Issu du milieu de la Recherche (BTS en ...
5 
INTRODUCTION
6 
Introduction 
Qu’est-ce que l’Ergonomie ? 
Définition Wikipédia 
« Etude scientifique de la relation entre l’Homme et s...
7 
Introduction 
De l’ Ergonomie, pour quoi faire ? 
Dans les applications grand public 
Simplification de la prise en mai...
8 
Introduction 
Idées reçues sur l’Ergonomie 
L’Ergonomie, c’est juste du bon sens ! 
Faites-moi un site Ergonomique ! 
L...
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...
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...
14 
Introduction 
Comprendre les internautes 
Nombre magique de Miller 
« La capacité de la mémoire de travail de l’être h...
15 
CONCEPTION 
ERGONOMIQUE
16 
Conception ergonomique 
Les 12 règles de l’Ergonomie 
Architecture 
Organisation visuelle 
Cohérence 
Convention 
Info...
17 
Conception ergonomique 
Les Personas 
Définition Wikipédia 
« Les personas sont construits sur la base d’une étude pré...
18 
Conception ergonomique 
Les Personas
19 
Conception ergonomique 
Les Personas 
Définition Wikipédia 
« Organisation des contenus en une structure cohérente que...
20 
Conception ergonomique 
Maquette Ergonomique 
Réalisation en deux étapes 
Zoning 
Maquette Ergonomique. 
Zoning 
Zones...
21 
Conception ergonomique 
Maquette Ergonomique 
Exemple de Zoning
22 
Conception ergonomique 
Tests Utilisateurs 
Trois approches 
Avec vos utilisateurs cibles. 
Avec des utilisateurs lamb...
23 
CAS PRATIQUE
24 
Les formulaires 
Indicateurs de Perception 
Hauteur (indicateur de durée). 
Charge (indicateur de complexité). 
Indica...
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...
27 
Les formulaires 
Validation et correction 
Empêcher les erreurs : 
Bloquer les caractères interdits 
Définir le conten...
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...
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...
37
Prochain SlideShare
Chargement dans…5
×

L'Ergonomie pour les Nuls

802 vues

Publié le

Vous pensez que les utilisateurs n’y comprennent rien ? Vous croyez que l’Ergonomie, c’est juste du bon sens ? Vous êtes persuadé qu’en Informatique, l’Ergonomie ne concerne que les interfaces graphiques ? Vous avez déjà utilisé votre mère comme cobaye pour tester l’utilisabilité de vos interfaces ?
Si vous avez fièrement répondu « Oui » à au moins une de ces questions, votre situation n’est pas désespérée mais vous devriez lire cette présentation.

Problématique :

Comment augmenter la productivité des utilisateurs dans le cadre d’une utilisation d’applications professionnelles ?
Comment améliorer les taux de conversion et de fréquentation, notamment dans un contexte e-Commerce ?
Comment augmenter la satisfaction générale de vos utilisateurs ?
La réponse est simple, mais trop souvent négligée : l’ERGONOMIE !

Programme :

1. Qu’est-ce que l’Ergonomie ? Qu’apporte t-elle au Web ?
2. Ce que vous pensez savoir et ce que vous savez réellement sur l’Ergonomie.
3. Comment intégrer l’Ergonomie aux phases de conception d’applications ?
4. Problématiques et solutions concrètes.
5. Testez vos connaissances.

0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
802
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
1
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

L'Ergonomie pour les Nuls

  1. 1. BarCamp « L’Ergonomie pour les nuls » Janvier 2013 @ Paris Quentin VIGNIER Responsable Architecture et Performance @PALO IT
  2. 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 ?
  3. 3. QUI SUIS-JE ?
  4. 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 !
  5. 5. 5 INTRODUCTION
  6. 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. 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. 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. 9 Introduction Idées reçues sur l’Ergonomie Les internautes lisent en F !
  10. 10. 10 Introduction Idées reçues sur l’Ergonomie Les internautes lisent en F !
  11. 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. 12 Introduction Comprendre les internautes Théorie de la Gestalt – Loi de similarité
  13. 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. 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. 15. 15 CONCEPTION ERGONOMIQUE
  16. 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. 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. 18. 18 Conception ergonomique Les Personas
  19. 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. 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. 21 Conception ergonomique Maquette Ergonomique Exemple de Zoning
  22. 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.
  23. 23. 23 CAS PRATIQUE
  24. 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. 25 Les formulaires Indicateurs de Perception
  26. 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. 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. 28 Les formulaires Validation et correction
  29. 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. 30. ERGO OR NOT ERGO ?
  31. 31. 31 Formulaire de recherche
  32. 32. 32 Inscription Facebook
  33. 33. 33 Inscription Twitter
  34. 34. 34 Inscription MailChimp
  35. 35. RESSOURCES
  36. 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. 37

×