L'Ergonomie pour les Nuls
•
8 j'aime•2,650 vues
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.
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (18)
Similaire à L'Ergonomie pour les Nuls
Similaire à L'Ergonomie pour les Nuls (20)
Plus de PALO IT
Plus de PALO IT (20)
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 !
- 18. 18 Conception ergonomique Les Personas
- 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.
- 23. 23 CAS PRATIQUE
- 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
- 35. RESSOURCES
- 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