Définition et enjeux de l'Ergonomie Web, interfaces tactiles, web mobile, marketing web... Présentation sur interface tactile, web mobile, multi-écran : responsive... Outils Firefox pour faciliter l'ergonomie de son application web, Support formation.
Auteur : Emmanuelle POULAIN Consultante Formatrice Web 2.0, Webmarketing, NTIC, http://www.idnetinfo.net
1. Ergonomie Web – interfaces tactiles
Ergonomie Web :
Optimiser l'ergonomie de ses
applications et sites mobiles
Ergonomie Web Emmanuelle POULAIN 1
2. Sommaire
L'Ergonomie web : généalogie définition et enjeux
................................................................ Page 4.
Les fondements de l'ergonomie : comportement
cognitif, affordance, ...............................Page 11.
Les interfaces tactiles : gestuelle et ergonomie
................................................................ Page 23.
Les règles et critères ergonomique............ Page 34.
L'audit Ergonomique des applications web, mise en
pratique................................................... Page 51
Ergonomie Web Emmanuelle POULAIN 2
3. Sommaire (suite)
Conception des interfaces web : comprendre
l'internaute, les personnas, l'utilisabilité,
responsive et web mobile,...................... Page 55
La cohérence : navigation et contenu, méthode du
tri de cartes..............................................Page 69
Pour aller plus loin : l'utilité des tests utilisateurs
................................................................ Page 76
Les outils et références.............................. Page 81
Ergonomie Web Emmanuelle POULAIN 3
5. Ergonomie : Définitions
”L'ensemble des connaissances
scientifiques relatives à l'Homme
nécessaires pour concevoir des outils, des
machines et des dispositifs qui puissent être
utilisés avec le maximum de confort, de
sécurité et d'efficacité.” Alain Wisner – 1950
Ergonomie Web Emmanuelle POULAIN 5
6. Ergonomie : définitions
L'ergonomie est l'utilisation de connaissances
scientifiques relatives à l'homme (psychologie,
physiologie, médecine) dans le but d'améliorer son
environnement de travail.
Ergonomie Web Emmanuelle POULAIN 6
7. Ergonomie : Définitions
L'ergonomie se caractérise généralement selon deux
composantes :
L'efficacité, consistant à adopter des solutions
appropriées d'utilisation d'un produit, audelà du
bon sens du concepteur ;
L'utilisabilité, marquant l'adéquation aux
capacités de l'utilisateur :
CONFORT D'UTILISATION
SECURITÉ
Ergonomie Web Emmanuelle POULAIN 7
8. Généalogie
L'ergonomie web arrive après la lignée de
disciplines tentant d'appliquer les principes de
bases de l'ergonomie sur différents types d'outils
Interfaces Ergonomie Ergonomie
Ergonomie Homme
Générale Informatique Web
Machine
Ergonomie Web Emmanuelle POULAIN 8
9. Un site web ergonomique : utile,
utilisable
On qualifie un site web ”Ergonomique” lorsqu'il
satisfait les critères d'utilité et d'utilisabilité.
UTILITÉ : Répondre à un besoin
Les internautes viennent pour faire quelque chose
UTILISABILITÉ : faciliter la satisfaction du besoin
On doit les aider à atteindre leurs objectifs
Ergonomie Web Emmanuelle POULAIN 9
10. LES FONDEMENTS DE L'ERGONOMIE :
Comprendre l'internaute, l'affordance,
comportement cognitif,...
Ergonomie Web Emmanuelle POULAIN 11
11. Les fondements de l'ergonomie :
comportement cognitif
Les théories de psychologie distinguent trois types
de mémoires :
La mémoire sensorielle : stimulis
La mémoire à court terme, capable de
stocker un nombre restreint de mnèmes , c'està
dire des motifs visuels ou sonores telle qu'un mot,
etc.) pendant plusieurs minutes.
La mémoire à long terme, capable de
stocker un nombre infini d'informations de manière
permanente.
Ergonomie Web Emmanuelle POULAIN 12
12.
13. Ergonomie : théorie de l'action
Il en découle les éléments suivants :
qu'une liste d'items doit de préférence comporter
moins de 7 éléments ;
que l'usage de couleurs et d'une signalétique liant les
éléments d'une interface aident l'utilisateur à se
l'approprier ;
que des messages courts facilitent leur mémorisation
que l'état de l'interface doit représenter fidèlement
l'état du système. Cela signifie notamment que des
messages d'alertes appropriés doivent être mis en
oeuvre.
Ergonomie Web Emmanuelle POULAIN 14
14. Comportement cognitif : théories de
Gestalt
Théorie de Gestalt : la manière dont notre cerveau
analyse le monde environnant comme un
ensemble de formes
Lois des théories de la Gestalt :
Loi de proximité : proche = une seule entité.
Loi de similarité : identique = même groupe.
Ergonomie Web Emmanuelle POULAIN 15
20. Le CONCEPT D'AFFORDANCE
Optimiser l'affordance :
”vous pouvez me cliquer
!”
Les affordances sont les
possibilités d'action
suggérées par les
caractéristiques d'un
objet
Ergonomie Web Emmanuelle POULAIN 21
23. Utilisabilité : prise en compte des
appareils
Différences entre les postes de télévision,
ordinateurs bureaux, pc portables, tablette,
smartphone, etc...
Posture de l'utilisateur selon l'appareil,
Méthode de saisie : télécommande, gestes, souris,
clavier, écran tactile, capteur, clavier
numérique, …
Taille moyenne de l'écran : mur, bureau,
genoux, main ou plus petit encore...
Ergonomie Web Emmanuelle POULAIN 24
31. Gestuelle tactile
Le ”singlepoint” : équivalent du pointeur de la
souris en tactile,
Le ”multipoint” : plusieurs points séparés,
indépendants (plusieurs curseurs de souris).
Encore difficile à gérer par les applications.
Le ”multitouch singlepoint” : plusieurs points
reconnus formant une instruction (ex : ”pinch” a
deux doigts)
Le ”multitouch multipoint” : multitouch pour
plusieurs fonctions.
Ergonomie Web Emmanuelle POULAIN 32
34. REGLES ET CRITERES
ERGONOMIQUES
Idées eronnées : qu'est qui a changé ?
Les 3 clics,
Le scroll,
Les internautes lisent en F,
L'ergonomie on verra à la fin,...
Ergonomie Web Emmanuelle POULAIN 35
35. REGLES DE BASES POUR
OPTIMISER L'ERGONOMIE
1 – ARCHITECTURE : plan, organisation 7 – ASSISTANCE : aide,
2 – ORGANISATION VISUELLE 8 – GESTION DES ERREURS : prévoir,
3 – COHERENCE sur l'information 9 – RAPIDITE : trouver rapidement
l'information
4 – CONVENTIONS : les respecter 10 – LIBERTE : laisser le choix à
l'internaute
5 – INFORMATION 11 – ACCESSIBILITÉ : facilité
6 – COMPRÉHENSION : mots et 12 – SATISFACTION DE L'INTERNAUTE
symboles
Ergonomie Web Emmanuelle POULAIN 36
36. REGLE 1 – L'ARCHITECTURE
Architecture de l'information : penser la meilleure
manière d'organiser le contenu.
Ergonomie Web Emmanuelle POULAIN 37
38. REGLE 3 : Cohérence
La cohérence exploite les apprentissages
inconscients – l'apprentissage interne :
Repères, localisation (ex: menus),
Appelations cohérentes,
Formats de présentation,
Intéractions cohérentes,...
Si le site se comporte de manière cohérente
(manipulations similaires sur les pages)
l'internaute prends confiance...
Ergonomie Web Emmanuelle POULAIN 39
41. REGLE 6 : Compréhension
Bien choisir les mots et les symboles
Utiliser le vocabulaire et les symboles à bon escient
Ergonomie Web Emmanuelle POULAIN 42
42. REGLE 7 : Assistance
Aider et diriger l'internaute
Rendre visible ce que l'internaute n'attends pas,
Utiliser les affordances,
Ergonomie Web Emmanuelle POULAIN 43
43.
44. REGLE 9 : RAPIDITÉ
Utiliser la loi de FITTS
Prendre en compte le besoin de l'internaute d'un point
de vue fonctionnel
EFFICIENCE : faire gagner du temps aux
expérimentés
Ergonomie Web Emmanuelle POULAIN 46
46. REGLE 11 : Accessibilité
Un site facile d'accès pour tous :
Visuel et facile
Accessibilité physique : aggrandissement des
polices, son,...
Accessibilité technologique ou compatibilité :
penser à la mise à jour...
Ergonomie Web Emmanuelle POULAIN 48
47. REGLE 12 : SATISFACTION
pour conclure
Critère d'utilité,
Critère d'esthétique,
Critère de qualité,
Puissance et fiabilité technique
=
Ergonomie Web Emmanuelle POULAIN 49
48. REGLES DE BASES POUR
OPTIMISER L'ERGONOMIE
1 – ARCHITECTURE : plan, organisation 7 – ASSISTANCE : aide,
2 – ORGANISATION VISUELLE 8 – GESTION DES ERREURS : prévoir,
3 – COHERENCE sur l'information 9 – RAPIDITE : trouver rapidement
l'information
4 – CONVENTIONS : les respecter 10 – LIBERTE : laisser le choix à
l'internaute
5 – INFORMATION 11 – ACCESSIBILITÉ : facilité
6 – COMPRÉHENSION : mots et 12 – SATISFACTION DE L'INTERNAUTE
symboles
Ergonomie Web Emmanuelle POULAIN 50
49. AUDIT D'APPLICATION WEB :
Utilité, utilisabilité, cohérence, lisibilité, …
Mise en pratique.
Ergonomie Web Emmanuelle POULAIN 51
51. AUDIT : répartition des règles
Première passe Seconde passe
Traduction de l'utilité générale Contenu des autres pages dans
du site l'ordre d'importance
Architecture de l'information,
navigation, structuration du
dialogue, enchaînements,
interactions
Pages incontournables
Thèmes incontournables
Ergonomie Web Emmanuelle POULAIN 53
52. AUDIT : les outils
Règles Ergonomiques,
Logiciels et outils techniques,
Prendre des notes,
Faire des captures d'écran
Tester la compatibilité technique
Evaluer l'accessibilité visuelle
Evaluer la forme générale,
Puis hierarchiser ses observations...
Ergonomie Web Emmanuelle POULAIN 54
53. LA CONCEPTION WEB :
Concevoir pour l'être humain,
Les Personas
Ergonomie Web Emmanuelle POULAIN 55
54. Concevoir pour l'être humain
L'être humain recherche l'émotion,
L'être humain a besoin d'humaniser.
Le cerveau doit interprêter le visuel ”beau” : ex le
nombre d'or.
Méthode d'engagement par l'émotion : ”surprise”,
”humour”, ”personnalité”,...
Pas de formules, juste des principes de psychologie
adapté aux personnes ”ciblées”.
Ergonomie Web Emmanuelle POULAIN 56
58. Définir l'internaute : les Personas
INFORMATION SOCIODEMOGRAPHIQUES;
RELATION A LA MARQUE, AUX
CONCURRENTS,
HABITUDES, ENVIES,
OBJECTIFS, MISSIONS SUR LE SITE
Ergonomie Web Emmanuelle POULAIN 60
59. CONCEPTION WEB : Contenu,
Analyse concurrentielle
Analyse concurrentielle : voir ce qui ce fait pour
s'ouvrir à de nouvelles présentations
Objectifs :
S'inspirer des bonnes idées,
Repérer les conventions de présentations et de
fonctionnement,
Repérer les conventions terminologiques
Ergonomie Web Emmanuelle POULAIN 61
60. PENSER SON SITE :
Reprendre les règles
Source 1 : les objectifs et comportements utilisateurs
Source 2 : les représentations mentales
Source 3 : regarder ailleurs
Ergonomie Web Emmanuelle POULAIN 62
65. RESPONSIVE WEB DESIGN
ADAPTABILITÉ : créer un site qui s'adaptera à toutes
les tailles et résolutions des écrans
INGREDIENTS
1 – Une grille de mise en page flexible,
2 – Des images et des médias flexibles,
3 – Les média queries, un module de la spécification
CSS3
Ergonomie Web Emmanuelle POULAIN 67
66. S'ADAPTER AU CONTENU DU
MOBILE
Privilégier le contenu aux liens
Rebondir et explorer
Retour en arrière
Un ancrage solide
Rester clair et organisé
Organiser l'expérience mobile : langage du toucher
Ergonomie Web Emmanuelle POULAIN 68
68. Méthodologie : TRI DE CARTES
OBJECTIF : structurer de manière optimale
l'organisation d'un site web pour ses utilisateurs
finaux
ARCHITECTURE DE L'INFORMATION
Pour mener un tri :
Avoir énuméré l'ensemble des contenus à
soumettre aux participants,
Ces mots permettront de naviguer à l'intérieur des
rubriques : architecture du site.
Ergonomie Web Emmanuelle POULAIN 70
69. Tri de cartes
1ère étape immersion
Ergonomie Web Emmanuelle POULAIN 71
70. Tri de cartes
2ème étape : validation et précision
Ergonomie Web Emmanuelle POULAIN 72
71. Tri de cartes
3ème étape : Groupement
Ergonomie Web Emmanuelle POULAIN 73
72. Tri de cartes
4ème étape : nommage
Ergonomie Web Emmanuelle POULAIN 74
73. Tri de cartes : les limites
Important pour le rubriquage mais ne teste pas la
navigation de l'utilisateur final. Différent.
Différent du contexte du site web
Méthode utile et importante mais uniquement pour
obtenir la base et indice de l'architecture.
Pour la valider : test utilisateur
Ergonomie Web Emmanuelle POULAIN 75
74. Pour aller plus loin :
L'utilité des tests utilisateurs
Ergonomie Web Emmanuelle POULAIN 76
75. TESTS UTILISATEURS
Bien les choisirs : utiliser les personas.
●
●Plus ils jouent le jeu : mieux c'est... Bien choisir.
●Seuls les laboratoires auront le nombre de
testeurs suffisants...
PARAMETRES
Homogénéité de la cible,
Variabilité du plan de test,
Complexité de l'interface testée.
Ergonomie Web Emmanuelle POULAIN 77
77. Méthodes Tests utilisateurs
Prototype papier :
Maquette en fonction de l'action du testeur,
Avant réalisation de la charte : permet de valider
avant la finalisation des concepts
Prototype semifonctionnel :
A l'écran : simulation d'un site qui marche.
Proche de la situation réelle
Ergonomie Web Emmanuelle POULAIN 79
78. Tests Utilisateurs
Prototypage papier et semifonctionnel
=
Méthodes de conception et validation
Test sur site finalisé : En amont.
Ergonomie Web Emmanuelle POULAIN 80
80. Références et pour aller plus loin
Blog Ergophile : analyse de l'ergonomie web et
mobile
Ergonomie web (3ème édition Amélie Boucher),
Mobile First (Luke Wroblewski),
Responsive web design (Ethan Marcotte),
Touch gesture référence guide (Craig Villamor,
Dan Willis, and Luke Wroblewski),
Design Emotionnel web (Aaron Walter),
Ergonomie Web Emmanuelle POULAIN 82