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 ?

3.
QUI SUIS-JE ?

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
INTRODUCTION

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 ».

15.
15
CONCEPTION
ERGONOMIQUE

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

32.
32
Inscription Facebook

33.
33
Inscription Twitter

34.
34
Inscription MailChimp

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