Ergonomie Web – interfaces tactiles              Ergonomie Web :        Optimiser lergonomie de ses        applications et...
Sommaire      LErgonomie web : généalogie définition et enjeux         .....................................................
Sommaire (suite)      Conception des interfaces web : comprendre         linternaute, les personnas, lutilisabilité,     ...
DÉFINITION ET ENJEUX DE LERGONOMIE                     WEBErgonomie Web ­ Emmanuelle POULAIN         4
Ergonomie : Définitions       ”Lensemble des connaissances       scientifiques relatives à lHomme nécessaires pour concevo...
Ergonomie : définitions       Lergonomie est lutilisation de connaissances         scientifiques relatives à lhomme (psyc...
Ergonomie : Définitions   Lergonomie se caractérise généralement selon deux    composantes :                  Lefficacité...
Généalogie      Lergonomie web arrive après la lignée de          disciplines tentant dappliquer  les principes de       ...
Un site web ergonomique : utile,                     utilisable       On qualifie un site web ”Ergonomique” lorsquil     ...
LES FONDEMENTS DE LERGONOMIE :            Comprendre linternaute, laffordance,                 comportement cognitif,...Er...
Les fondements de lergonomie :               comportement cognitif      Les théories de psychologie distinguent trois typ...
Ergonomie : théorie de laction      Il en découle les éléments suivants :                      quune liste ditems doit d...
Comportement cognitif : théories de               Gestalt      Théorie de Gestalt : la manière dont notre cerveau        ...
Comprendre linternaute : théories               de GestaltErgonomie Web ­ Emmanuelle POULAIN        16
Comprendre linternaute : théories               de GestaltErgonomie Web ­ Emmanuelle POULAIN        17
Comprendre linternaute : loi de Fitts Application de la loi de Fitts :    Plus la distance est petite ou plus la cible est...
Comprendre linternaute : loi de FittsErgonomie Web ­ Emmanuelle POULAIN   20
Le CONCEPT DAFFORDANCE       Optimiser laffordance :       ”vous pouvez me cliquer                  !”                    ...
LE CONCEPT DAFFORDANCEErgonomie Web ­ Emmanuelle POULAIN   22
ERGONOMIE DES INTERFACES : LA                  GESTUELLE TACTILEErgonomie Web ­ Emmanuelle POULAIN           23
Utilisabilité : prise en compte des                      appareils               Différences entre les postes de télévisio...
Ergonomie Ecran tactile mobileErgonomie Web ­ Emmanuelle POULAIN        25
Ergonomie Ecran tactileErgonomie Web ­ Emmanuelle POULAIN             26
Ergonomie Ecran TactileErgonomie Web ­ Emmanuelle POULAIN            27
Linterface tactile : la gestuelleErgonomie Web ­ Emmanuelle POULAIN              28
Gestuelle tactile : le simple touchErgonomie Web ­ Emmanuelle POULAIN            29
Gestuelle tactile : plusieurs doigts Ergonomie Web ­ Emmanuelle POULAIN            30
Gestuelle tactile : Ergonomie Web ­ Emmanuelle POULAIN                    31
Gestuelle tactile      Le ”single­point” : équivalent du pointeur de la         souris en tactile,      Le ”multi­point”...
Gestuelle tactile : multitouchErgonomie Web ­ Emmanuelle POULAIN             33
REGLES ET CRITÈRES ERGONOMIQUESErgonomie Web ­ Emmanuelle POULAIN       34
REGLES ET CRITERES                      ERGONOMIQUES          Idées eronnées : quest qui a changé ?      Les 3 clics,   ...
REGLES DE BASES POUR           OPTIMISER LERGONOMIE    1 – ARCHITECTURE : plan, organisation   7 – ASSISTANCE : aide,    2...
REGLE 1 – LARCHITECTURE       Architecture de linformation : penser la meilleure                  manière dorganiser le co...
REGLE 2 : Organisation visuelleErgonomie Web ­ Emmanuelle POULAIN       38
REGLE 3 : Cohérence              La cohérence exploite les apprentissages                inconscients – lapprentissage int...
REGLE 5 : Information  Lordinateur informe et prévient linternaute  Ex : Feedback et Tagline Ergonomie Web ­ Emmanuelle PO...
REGLE 6 : Compréhension              Bien choisir les mots et les symboles      Utiliser le vocabulaire et les symboles à...
REGLE 7 : Assistance                        Aider et diriger linternaute      Rendre visible ce que linternaute nattends ...
REGLE 9 : RAPIDITÉ                                     Utiliser la loi de FITTS   Prendre en compte le besoin de linternau...
REGLE 10 : Liberté de linternaute       LAISSER LE CHOIXErgonomie Web ­ Emmanuelle POULAIN      47
REGLE 11 : Accessibilité                         Un site facile daccès pour tous :                                     Vis...
REGLE 12 : SATISFACTION                pour conclure                                       Critère dutilité,              ...
REGLES DE BASES POUR           OPTIMISER LERGONOMIE    1 – ARCHITECTURE : plan, organisation   7 – ASSISTANCE : aide,    2...
AUDIT DAPPLICATION WEB :           Utilité, utilisabilité, cohérence, lisibilité, …                          Mise en prati...
LAUDIT ERGONOMIQUE 1.Utilité : test utilisateurs 2.Repérer les défauts interpages 3.Repérer les défauts intratpages     Re...
AUDIT : répartition des règles Première passe                        Seconde passe   Traduction de lutilité générale    Co...
AUDIT : les outils      Règles Ergonomiques,      Logiciels et outils techniques,      Prendre des notes,      Faire d...
LA CONCEPTION WEB :                        Concevoir pour lêtre humain,                              Les PersonasErgonomie...
Concevoir pour lêtre humain      Lêtre humain recherche lémotion,      Lêtre humain a besoin dhumaniser.      Le cervea...
Définir linternaute : les personas Une personne donnée dans un contexte précis.      Des Personnes,      Des Objectifs, ...
Définir linternaute : les personasErgonomie Web ­ Emmanuelle POULAIN           58
Définir linternaute : les personas Persona primaire : type de visiteur le plus fréquent Personas secondaires : second nive...
Définir linternaute : les Personas      INFORMATION SOCIODEMOGRAPHIQUES;      RELATION A LA MARQUE, AUX         CONCURRE...
CONCEPTION WEB :  Contenu,          Analyse concurrentielle      Analyse concurrentielle : voir ce qui ce fait pour      ...
PENSER SON SITE :                          Reprendre les règles                  Source 1 : les objectifs et comportement...
Zoning mobileErgonomie Web ­ Emmanuelle POULAIN                   65
PROCESSUS DE CONCEPTIONErgonomie Web ­ Emmanuelle POULAIN   66
RESPONSIVE WEB DESIGN ADAPTABILITÉ : créer un site qui sadaptera à toutes         les tailles et résolutions des écrans   ...
SADAPTER AU CONTENU DU                MOBILE      Privilégier le contenu aux liens       Rebondir et explorer      Reto...
COHERENCE ET NAVIGATION :                     Méthode du ”tri de cartes”Ergonomie Web ­ Emmanuelle POULAIN                69
Méthodologie : TRI DE CARTES        OBJECTIF : structurer de manière optimale        lorganisation dun site web pour ses u...
Tri de cartes      1ère étape immersionErgonomie Web ­ Emmanuelle POULAIN                   71
Tri de cartes      2ème étape : validation et précisionErgonomie Web ­ Emmanuelle POULAIN                   72
Tri de cartes      3ème étape : GroupementErgonomie Web ­ Emmanuelle POULAIN                   73
Tri de cartes      4ème étape : nommageErgonomie Web ­ Emmanuelle POULAIN                   74
Tri de cartes : les limites      Important pour le rubriquage mais ne teste pas la          navigation de lutilisateur fi...
Pour aller plus loin :                          Lutilité des tests utilisateursErgonomie Web ­ Emmanuelle POULAIN         ...
TESTS UTILISATEURS       Bien les choisirs : utiliser les personas.            ●  ●Plus ils jouent le jeu : mieux cest... ...
IMPACT DES TESTSErgonomie Web ­ Emmanuelle POULAIN         78
Méthodes Tests utilisateurs      Prototype papier :                  Maquette en fonction de laction du testeur,        ...
Tests Utilisateurs                  Prototypage papier et semi­fonctionnel                                         =      ...
Les outils      Spencil : maquettage,      Colorzilla pour Firefox,      Eenox.net,      Clickdensity.com,      Snook...
Références et pour aller plus loin      Blog Ergophile : analyse de lergonomie web et         mobile      Ergonomie web ...
Ergonomie web & interface tactile
Ergonomie web & interface tactile
Ergonomie web & interface tactile
Ergonomie web & interface tactile
Ergonomie web & interface tactile
Ergonomie web & interface tactile
Prochain SlideShare
Chargement dans…5
×

Ergonomie web & interface tactile

8 754 vues

Publié le

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

Publié dans : Divertissement et humour
0 commentaire
12 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

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

Aucune remarque pour cette diapositive

Ergonomie web & interface tactile

  1. 1. Ergonomie Web – interfaces tactiles Ergonomie Web : Optimiser lergonomie de ses applications et sites mobilesErgonomie Web ­ Emmanuelle POULAIN 1
  2. 2. Sommaire  LErgonomie web : généalogie définition et enjeux ................................................................ Page 4.  Les fondements de lergonomie : comportement  cognitif, affordance, ...............................Page 11.  Les interfaces tactiles : gestuelle et ergonomie ................................................................ Page 23.  Les règles et critères ergonomique............ Page 34.  Laudit Ergonomique des applications web, mise en  pratique................................................... Page 51Ergonomie Web ­ Emmanuelle POULAIN 2
  3. 3. Sommaire (suite)  Conception des interfaces web : comprendre  linternaute, les personnas, lutilisabilité,  responsive et web mobile,...................... Page 55  La cohérence : navigation et contenu, méthode du  tri de cartes..............................................Page 69  Pour aller plus loin : lutilité des tests utilisateurs  ................................................................ Page 76  Les outils et références.............................. Page 81Ergonomie Web ­ Emmanuelle POULAIN 3
  4. 4. DÉFINITION ET ENJEUX DE LERGONOMIE WEBErgonomie Web ­ Emmanuelle POULAIN 4
  5. 5. Ergonomie : Définitions ”Lensemble des connaissances scientifiques relatives à lHomme 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 defficacité.” Alain Wisner – 1950Ergonomie Web ­ Emmanuelle POULAIN 5
  6. 6. Ergonomie : définitions  Lergonomie est lutilisation de connaissances  scientifiques relatives à lhomme (psychologie,  physiologie, médecine) dans le but daméliorer son  environnement de travail. Ergonomie Web ­ Emmanuelle POULAIN 6
  7. 7. Ergonomie : Définitions Lergonomie se caractérise généralement selon deux  composantes :  Lefficacité, consistant à adopter des solutions  appropriées dutilisation dun produit, au­delà du  bon sens du concepteur ;  Lutilisabilité, marquant ladéquation aux  capacités de lutilisateur :   CONFORT DUTILISATION  SECURITÉErgonomie Web ­ Emmanuelle POULAIN 7
  8. 8. Généalogie  Lergonomie web arrive après la lignée de  disciplines tentant dappliquer  les principes de  bases de lergonomie sur différents types doutils Interfaces Ergonomie Ergonomie Ergonomie Homme Générale Informatique Web MachineErgonomie Web ­ Emmanuelle POULAIN 8
  9. 9. Un site web ergonomique : utile,  utilisable  On qualifie un site web ”Ergonomique” lorsquil  satisfait les critères dutilité et dutilisabilité. UTILITÉ : Répondre à un besoin Les internautes viennent pour faire quelque chose UTILISABILITÉ : faciliter la satisfaction du besoin On doit les aider à atteindre leurs objectifsErgonomie Web ­ Emmanuelle POULAIN 9
  10. 10. LES FONDEMENTS DE LERGONOMIE : Comprendre linternaute, laffordance, comportement cognitif,...Ergonomie Web ­ Emmanuelle POULAIN 11
  11. 11. Les fondements de lergonomie :  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 , cest­à­ dire des motifs visuels ou sonores telle quun mot,  etc.) pendant plusieurs minutes.      La mémoire à long terme, capable de  stocker un nombre infini dinformations de manière  permanente.Ergonomie Web ­ Emmanuelle POULAIN 12
  12. 12. Ergonomie : théorie de laction  Il en découle les éléments suivants :  quune liste ditems doit de préférence comporter  moins de 7 éléments ;  que lusage de couleurs et dune signalétique liant les  éléments dune interface aident lutilisateur à se  lapproprier ;  que des messages courts facilitent leur mémorisation   que létat de linterface doit représenter fidèlement  létat du système. Cela signifie notamment que des  messages dalertes 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 linternaute : théories  de GestaltErgonomie Web ­ Emmanuelle POULAIN 16
  15. 15. Comprendre linternaute : théories  de GestaltErgonomie Web ­ Emmanuelle POULAIN 17
  16. 16. Comprendre linternaute : 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 linternaute : loi de FittsErgonomie Web ­ Emmanuelle POULAIN 20
  18. 18. Le CONCEPT DAFFORDANCE Optimiser laffordance :  ”vous pouvez me cliquer  !” Les affordances sont les  possibilités daction  suggérées par les  caractéristiques dun  objetErgonomie Web ­ Emmanuelle POULAIN 21
  19. 19. LE CONCEPT DAFFORDANCEErgonomie Web ­ Emmanuelle POULAIN 22
  20. 20. ERGONOMIE DES INTERFACES : LA GESTUELLE TACTILEErgonomie 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 lutilisateur selon lappareil,  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 mobileErgonomie Web ­ Emmanuelle POULAIN 25
  23. 23. Ergonomie Ecran tactileErgonomie Web ­ Emmanuelle POULAIN 26
  24. 24. Ergonomie Ecran TactileErgonomie Web ­ Emmanuelle POULAIN 27
  25. 25. Linterface tactile : la gestuelleErgonomie Web ­ Emmanuelle POULAIN 28
  26. 26. Gestuelle tactile : le simple touchErgonomie 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 : multitouchErgonomie Web ­ Emmanuelle POULAIN 33
  31. 31. REGLES ET CRITÈRES ERGONOMIQUESErgonomie Web ­ Emmanuelle POULAIN 34
  32. 32. REGLES ET CRITERES  ERGONOMIQUES Idées eronnées : quest qui a changé ?  Les 3 clics,  Le scroll,  Les internautes lisent en F,  Lergonomie on verra à la fin,...Ergonomie Web ­ Emmanuelle POULAIN 35
  33. 33. REGLES DE BASES POUR  OPTIMISER LERGONOMIE 1 – ARCHITECTURE : plan, organisation 7 – ASSISTANCE : aide, 2 – ORGANISATION VISUELLE 8 – GESTION DES ERREURS : prévoir, 3 – COHERENCE sur linformation 9 – RAPIDITE : trouver rapidement linformation 4 – CONVENTIONS : les respecter 10 – LIBERTE : laisser le choix à linternaute 5 – INFORMATION 11 – ACCESSIBILITÉ : facilité 6 – COMPRÉHENSION : mots et 12 – SATISFACTION DE LINTERNAUTE symbolesErgonomie Web ­ Emmanuelle POULAIN 36
  34. 34. REGLE 1 – LARCHITECTURE Architecture de linformation : penser la meilleure  manière dorganiser le contenu.Ergonomie Web ­ Emmanuelle POULAIN 37
  35. 35. REGLE 2 : Organisation visuelleErgonomie Web ­ Emmanuelle POULAIN 38
  36. 36. REGLE 3 : Cohérence La cohérence exploite les apprentissages  inconscients – lapprentissage 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)  linternaute prends confiance...Ergonomie Web ­ Emmanuelle POULAIN 39
  37. 37. REGLE 5 : Information Lordinateur informe et prévient linternaute  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 escientErgonomie Web ­ Emmanuelle POULAIN 42
  39. 39. REGLE 7 : Assistance Aider et diriger linternaute  Rendre visible ce que linternaute nattends 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 linternaute dun point  de vue fonctionnel EFFICIENCE : faire gagner du temps aux  expérimentésErgonomie Web ­ Emmanuelle POULAIN 46
  41. 41. REGLE 10 : Liberté de linternaute LAISSER LE CHOIXErgonomie Web ­ Emmanuelle POULAIN 47
  42. 42. REGLE 11 : Accessibilité Un site facile daccè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 dutilité, Critère desthétique, Critère de qualité, Puissance et fiabilité technique =Ergonomie Web ­ Emmanuelle POULAIN 49
  44. 44. REGLES DE BASES POUR  OPTIMISER LERGONOMIE 1 – ARCHITECTURE : plan, organisation 7 – ASSISTANCE : aide, 2 – ORGANISATION VISUELLE 8 – GESTION DES ERREURS : prévoir, 3 – COHERENCE sur linformation 9 – RAPIDITE : trouver rapidement linformation 4 – CONVENTIONS : les respecter 10 – LIBERTE : laisser le choix à linternaute 5 – INFORMATION 11 – ACCESSIBILITÉ : facilité 6 – COMPRÉHENSION : mots et 12 – SATISFACTION DE LINTERNAUTE symbolesErgonomie Web ­ Emmanuelle POULAIN 50
  45. 45. AUDIT DAPPLICATION WEB : Utilité, utilisabilité, cohérence, lisibilité, … Mise en pratique.Ergonomie Web ­ Emmanuelle POULAIN 51
  46. 46. LAUDIT ERGONOMIQUE 1.Utilité : test utilisateurs 2.Repérer les défauts interpages 3.Repérer les défauts intratpages Repères : les règles dergonomie comme guide de  travailErgonomie Web ­ Emmanuelle POULAIN 52
  47. 47. AUDIT : répartition des règles Première passe Seconde passe Traduction de lutilité générale Contenu des autres pages dans du site lordre dimportance Architecture de linformation, navigation, structuration du dialogue, enchaînements, interactions Pages incontournables Thèmes incontournablesErgonomie 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 laccessibilité 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 PersonasErgonomie Web ­ Emmanuelle POULAIN 55
  50. 50. Concevoir pour lêtre humain  Lêtre humain recherche lémotion,  Lêtre humain a besoin dhumaniser.  Le cerveau doit interprêter le visuel ”beau” : ex le  nombre dor.  Méthode dengagement 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 linternaute : les personas Une personne donnée dans un contexte précis.  Des Personnes,  Des Objectifs,  Des Contextes dutilisationErgonomie Web ­ Emmanuelle POULAIN 57
  52. 52. Définir linternaute : les personasErgonomie Web ­ Emmanuelle POULAIN 58
  53. 53. Définir linternaute : 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 linternaute : les Personas  INFORMATION SOCIODEMOGRAPHIQUES;  RELATION A LA MARQUE, AUX  CONCURRENTS,  HABITUDES, ENVIES,  OBJECTIFS, MISSIONS SUR LE SITEErgonomie Web ­ Emmanuelle POULAIN 60
  55. 55. CONCEPTION WEB :  Contenu, Analyse concurrentielle  Analyse concurrentielle : voir ce qui ce fait pour  souvrir à de nouvelles présentations  Objectifs :  Sinspirer des bonnes idées,  Repérer les conventions de présentations  et de  fonctionnement,  Repérer les conventions terminologiquesErgonomie 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 ailleursErgonomie Web ­ Emmanuelle POULAIN 62
  57. 57. Zoning mobileErgonomie Web ­ Emmanuelle POULAIN 65
  58. 58. PROCESSUS DE CONCEPTIONErgonomie Web ­ Emmanuelle POULAIN 66
  59. 59. RESPONSIVE WEB DESIGN ADAPTABILITÉ : créer un site qui sadaptera à 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  CSS3Ergonomie Web ­ Emmanuelle POULAIN 67
  60. 60. SADAPTER 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 lexpérience mobile : langage du toucherErgonomie 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  lorganisation dun site web pour ses utilisateurs  finaux ARCHITECTURE DE LINFORMATION Pour mener un tri : Avoir énuméré lensemble des contenus à  soumettre aux participants, Ces mots permettront de naviguer à lintérieur des  rubriques : architecture du site.Ergonomie Web ­ Emmanuelle POULAIN 70
  63. 63. Tri de cartes  1ère étape immersionErgonomie Web ­ Emmanuelle POULAIN 71
  64. 64. Tri de cartes  2ème étape : validation et précisionErgonomie Web ­ Emmanuelle POULAIN 72
  65. 65. Tri de cartes  3ème étape : GroupementErgonomie Web ­ Emmanuelle POULAIN 73
  66. 66. Tri de cartes  4ème étape : nommageErgonomie Web ­ Emmanuelle POULAIN 74
  67. 67. Tri de cartes : les limites  Important pour le rubriquage mais ne teste pas la  navigation de lutilisateur final. Différent.  Différent du contexte du site web Méthode utile et importante mais uniquement pour  obtenir la base et indice de larchitecture. Pour la valider : test utilisateurErgonomie Web ­ Emmanuelle POULAIN 75
  68. 68. Pour aller plus loin : Lutilité des tests utilisateursErgonomie Web ­ Emmanuelle POULAIN 76
  69. 69. TESTS UTILISATEURS Bien les choisirs : utiliser les personas. ● ●Plus ils jouent le jeu : mieux cest... 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 linterface testée.Ergonomie Web ­ Emmanuelle POULAIN 77
  70. 70. IMPACT DES TESTSErgonomie Web ­ Emmanuelle POULAIN 78
  71. 71. Méthodes Tests utilisateurs  Prototype papier :  Maquette en fonction de laction du testeur,  Avant réalisation de la charte : permet de valider  avant la finalisation des concepts  Prototype semi­fonctionnel :  A lécran : simulation dun site qui marche.  Proche de la situation réelleErgonomie 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 lergonomie 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

×