Successfully reported this slideshow.
Your SlideShare is downloading. ×

Ergonomie web & interface tactile

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 80 Ad

Ergonomie web & interface tactile

Download to read offline

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

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

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Advertisement

Recently uploaded (20)

Ergonomie web & interface tactile

  1. 1. Ergonomie Web – interfaces tactiles Ergonomie Web : Optimiser l'ergonomie de ses applications et sites mobiles Ergonomie Web ­ Emmanuelle POULAIN 1
  2. 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. 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
  4. 4. DÉFINITION ET ENJEUX DE L'ERGONOMIE WEB Ergonomie Web ­ Emmanuelle POULAIN 4
  5. 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. 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. 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, au­delà 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. 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. 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. 10. LES FONDEMENTS DE L'ERGONOMIE : Comprendre l'internaute, l'affordance, comportement cognitif,... Ergonomie Web ­ Emmanuelle POULAIN 11
  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. 12. 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
  13. 13. 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
  14. 14. Comprendre l'internaute : théories  de Gestalt Ergonomie Web ­ Emmanuelle POULAIN 16
  15. 15. Comprendre l'internaute : théories  de Gestalt Ergonomie Web ­ Emmanuelle POULAIN 17
  16. 16. Comprendre l'internaute : loi de Fitts Application de la loi de Fitts : Plus la distance est petite ou plus la cible est grande,  plus la cible (icône) est atteinte rapidement. Ergonomie Web ­ Emmanuelle POULAIN 18
  17. 17. Comprendre l'internaute : loi de Fitts Ergonomie Web ­ Emmanuelle POULAIN 20
  18. 18. 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
  19. 19. LE CONCEPT D'AFFORDANCE Ergonomie Web ­ Emmanuelle POULAIN 22
  20. 20. ERGONOMIE DES INTERFACES : LA GESTUELLE TACTILE Ergonomie Web ­ Emmanuelle POULAIN 23
  21. 21. 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
  22. 22. Ergonomie Ecran tactile mobile Ergonomie Web ­ Emmanuelle POULAIN 25
  23. 23. Ergonomie Ecran tactile Ergonomie Web ­ Emmanuelle POULAIN 26
  24. 24. Ergonomie Ecran Tactile Ergonomie Web ­ Emmanuelle POULAIN 27
  25. 25. L'interface tactile : la gestuelle Ergonomie Web ­ Emmanuelle POULAIN 28
  26. 26. Gestuelle tactile : le simple touch Ergonomie Web ­ Emmanuelle POULAIN 29
  27. 27. Gestuelle tactile : plusieurs doigts  Ergonomie Web ­ Emmanuelle POULAIN 30
  28. 28. Gestuelle tactile :  Ergonomie Web ­ Emmanuelle POULAIN 31
  29. 29. Gestuelle tactile  Le ”single­point” : équivalent du pointeur de la  souris en tactile,  Le ”multi­point” : plusieurs points séparés,  indépendants (plusieurs curseurs de souris).  Encore difficile à gérer par les applications.  Le ”multi­touch single­point” : plusieurs points  reconnus formant une instruction (ex : ”pinch” a  deux doigts)  Le ”multi­touch multi­point” : multi­touch pour  plusieurs fonctions. Ergonomie Web ­ Emmanuelle POULAIN 32
  30. 30. Gestuelle tactile : multitouch Ergonomie Web ­ Emmanuelle POULAIN 33
  31. 31. REGLES ET CRITÈRES ERGONOMIQUES Ergonomie Web ­ Emmanuelle POULAIN 34
  32. 32. 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
  33. 33. 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
  34. 34. REGLE 1 – L'ARCHITECTURE Architecture de l'information : penser la meilleure  manière d'organiser le contenu. Ergonomie Web ­ Emmanuelle POULAIN 37
  35. 35. REGLE 2 : Organisation visuelle Ergonomie Web ­ Emmanuelle POULAIN 38
  36. 36. 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
  37. 37. REGLE 5 : Information L'ordinateur informe et prévient l'internaute  Ex : Feedback et Tagline  Ergonomie Web ­ Emmanuelle POULAIN 41
  38. 38. REGLE 6 : Compréhension Bien choisir les mots et les symboles  Utiliser le vocabulaire et les symboles à bon escient Ergonomie Web ­ Emmanuelle POULAIN 42
  39. 39. 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
  40. 40. 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
  41. 41. REGLE 10 : Liberté de l'internaute LAISSER LE CHOIX Ergonomie Web ­ Emmanuelle POULAIN 47
  42. 42. 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
  43. 43. 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
  44. 44. 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
  45. 45. AUDIT D'APPLICATION WEB : Utilité, utilisabilité, cohérence, lisibilité, … Mise en pratique. Ergonomie Web ­ Emmanuelle POULAIN 51
  46. 46. L'AUDIT ERGONOMIQUE 1.Utilité : test utilisateurs 2.Repérer les défauts interpages 3.Repérer les défauts intratpages Repères : les règles d'ergonomie comme guide de  travail Ergonomie Web ­ Emmanuelle POULAIN 52
  47. 47. 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
  48. 48. 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
  49. 49. LA CONCEPTION WEB : Concevoir pour l'être humain, Les Personas Ergonomie Web ­ Emmanuelle POULAIN 55
  50. 50. 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
  51. 51. Définir l'internaute : les personas Une personne donnée dans un contexte précis.  Des Personnes,  Des Objectifs,  Des Contextes d'utilisation Ergonomie Web ­ Emmanuelle POULAIN 57
  52. 52. Définir l'internaute : les personas Ergonomie Web ­ Emmanuelle POULAIN 58
  53. 53. Définir l'internaute : les personas Persona primaire : type de visiteur le plus fréquent Personas secondaires : second niveau de profil  utilisateurs Personas tertiaires : profils annexes Ante­personas : profil à ne pas satisfaire Tous les personas ont droit à la parole, sous  réserve de ne pas contredire le besoin du  ”persona primaire” Ergonomie Web ­ Emmanuelle POULAIN 59
  54. 54. 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
  55. 55. 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
  56. 56. 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
  57. 57. Zoning mobile Ergonomie Web ­ Emmanuelle POULAIN 65
  58. 58. PROCESSUS DE CONCEPTION Ergonomie Web ­ Emmanuelle POULAIN 66
  59. 59. 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
  60. 60. 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
  61. 61. COHERENCE ET NAVIGATION : Méthode du ”tri de cartes” Ergonomie Web ­ Emmanuelle POULAIN 69
  62. 62. 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
  63. 63. Tri de cartes  1ère étape immersion Ergonomie Web ­ Emmanuelle POULAIN 71
  64. 64. Tri de cartes  2ème étape : validation et précision Ergonomie Web ­ Emmanuelle POULAIN 72
  65. 65. Tri de cartes  3ème étape : Groupement Ergonomie Web ­ Emmanuelle POULAIN 73
  66. 66. Tri de cartes  4ème étape : nommage Ergonomie Web ­ Emmanuelle POULAIN 74
  67. 67. 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
  68. 68. Pour aller plus loin : L'utilité des tests utilisateurs Ergonomie Web ­ Emmanuelle POULAIN 76
  69. 69. 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
  70. 70. IMPACT DES TESTS Ergonomie Web ­ Emmanuelle POULAIN 78
  71. 71. 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 semi­fonctionnel :  A l'écran : simulation d'un site qui marche.  Proche de la situation réelle Ergonomie Web ­ Emmanuelle POULAIN 79
  72. 72. Tests Utilisateurs Prototypage papier et semi­fonctionnel = Méthodes de conception et validation Test sur site finalisé : En amont. Ergonomie Web ­ Emmanuelle POULAIN 80
  73. 73. Les outils  Spencil : maquettage,  Colorzilla pour Firefox,  Eenox.net,  Clickdensity.com,  Snook.ca, : colourcheck,  Secure.supergonomie.com : tests utilisateurs, ... Ergonomie Web ­ Emmanuelle POULAIN 81
  74. 74. 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

×