Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Ergonomie Web – interfaces tactiles


              Ergonomie Web :
        Optimiser l'ergonomie de ses
        applicati...
Sommaire
      L'Ergonomie web : généalogie définition et enjeux
         ..................................................
Sommaire (suite)

      Conception des interfaces web : comprendre 
        l'internaute, les personnas, l'utilisabilité,...
DÉFINITION ET ENJEUX DE L'ERGONOMIE
                     WEB




Ergonomie Web ­ Emmanuelle POULAIN         4
Ergonomie : Définitions


       ”L'ensemble des connaissances
       scientifiques relatives à l'Homme
 nécessaires pour ...
Ergonomie : définitions
       L'ergonomie est l'utilisation de connaissances 
        scientifiques relatives à l'homme ...
Ergonomie : Définitions
   L'ergonomie se caractérise généralement selon deux 
   composantes :
                  L'effic...
Généalogie
      L'ergonomie web arrive après la lignée de 
         disciplines tentant d'appliquer  les principes de 
 ...
Un site web ergonomique : utile, 
                    utilisable
       On qualifie un site web ”Ergonomique” lorsqu'il 
...
LES FONDEMENTS DE L'ERGONOMIE :
            Comprendre l'internaute, l'affordance,
                 comportement cognitif,...
Les fondements de l'ergonomie : 
              comportement cognitif
      Les théories de psychologie distinguent trois ...
Ergonomie : théorie de l'action
      Il en découle les éléments suivants :
                      qu'une liste d'items d...
Comportement cognitif : théories de 
              Gestalt
      Théorie de Gestalt : la manière dont notre cerveau 
    ...
Comprendre l'internaute : théories 
              de Gestalt




Ergonomie Web ­ Emmanuelle POULAIN        16
Comprendre l'internaute : théories 
              de Gestalt




Ergonomie Web ­ Emmanuelle POULAIN        17
Comprendre l'internaute : loi de Fitts
 Application de la loi de Fitts :
    Plus la distance est petite ou plus la cible ...
Comprendre l'internaute : loi de Fitts




Ergonomie Web ­ Emmanuelle POULAIN   20
Le CONCEPT D'AFFORDANCE
       Optimiser l'affordance : 
      ”vous pouvez me cliquer 
                 !”


            ...
LE CONCEPT D'AFFORDANCE




Ergonomie Web ­ Emmanuelle POULAIN   22
ERGONOMIE DES INTERFACES : LA
                  GESTUELLE TACTILE




Ergonomie Web ­ Emmanuelle POULAIN           23
Utilisabilité : prise en compte des 
                     appareils
               Différences entre les postes de télévis...
Ergonomie Ecran tactile mobile




Ergonomie Web ­ Emmanuelle POULAIN        25
Ergonomie Ecran tactile




Ergonomie Web ­ Emmanuelle POULAIN             26
Ergonomie Ecran Tactile




Ergonomie Web ­ Emmanuelle POULAIN            27
L'interface tactile : la gestuelle




Ergonomie Web ­ Emmanuelle POULAIN              28
Gestuelle tactile : le simple touch




Ergonomie 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­poi...
Gestuelle tactile : multitouch




Ergonomie Web ­ Emmanuelle POULAIN             33
REGLES ET CRITÈRES ERGONOMIQUES




Ergonomie Web ­ Emmanuelle POULAIN       34
REGLES ET CRITERES 
                     ERGONOMIQUES
          Idées eronnées : qu'est qui a changé ?
      Les 3 clics,...
REGLES DE BASES POUR 
          OPTIMISER L'ERGONOMIE
    1 – ARCHITECTURE : plan, organisation   7 – ASSISTANCE : aide,
 ...
REGLE 1 – L'ARCHITECTURE
       Architecture de l'information : penser la meilleure 
                 manière d'organiser ...
REGLE 2 : Organisation visuelle




Ergonomie Web ­ Emmanuelle POULAIN       38
REGLE 3 : Cohérence
              La cohérence exploite les apprentissages 
               inconscients – l'apprentissage ...
REGLE 5 : Information
  L'ordinateur informe et prévient l'internaute
  Ex : Feedback et Tagline 




Ergonomie Web ­ Emma...
REGLE 6 : Compréhension
              Bien choisir les mots et les symboles
      Utiliser le vocabulaire et les symboles...
REGLE 7 : Assistance
                        Aider et diriger l'internaute
      Rendre visible ce que l'internaute n'att...
REGLE 9 : RAPIDITÉ
                                     Utiliser la loi de FITTS
   Prendre en compte le besoin de l'inter...
REGLE 10 : Liberté de l'internaute
       LAISSER LE CHOIX




Ergonomie Web ­ Emmanuelle POULAIN      47
REGLE 11 : Accessibilité
                         Un site facile d'accès pour tous :
                                     ...
REGLE 12 : SATISFACTION
                pour conclure
                                       Critère d'utilité,
          ...
REGLES DE BASES POUR 
          OPTIMISER L'ERGONOMIE
    1 – ARCHITECTURE : plan, organisation   7 – ASSISTANCE : aide,
 ...
AUDIT D'APPLICATION WEB :
           Utilité, utilisabilité, cohérence, lisibilité, …
                          Mise en pr...
L'AUDIT ERGONOMIQUE
 1.Utilité : test utilisateurs
 2.Repérer les défauts interpages
 3.Repérer les défauts intratpages
  ...
AUDIT : répartition des règles
 Première passe                        Seconde passe
   Traduction de l'utilité générale   ...
AUDIT : les outils
      Règles Ergonomiques,
      Logiciels et outils techniques,
      Prendre des notes,
      Fai...
LA CONCEPTION WEB :
                        Concevoir pour l'être humain,
                              Les Personas




E...
Concevoir pour l'être humain
      L'être humain recherche l'émotion,
      L'être humain a besoin d'humaniser.
      L...
Définir l'internaute : les personas
 Une personne donnée dans un contexte précis.


      Des Personnes,
      Des Objec...
Définir l'internaute : les personas




Ergonomie Web ­ Emmanuelle POULAIN           58
Définir l'internaute : les personas
 Persona primaire : type de visiteur le plus fréquent
 Personas secondaires : second n...
Définir l'internaute : les Personas
      INFORMATION SOCIODEMOGRAPHIQUES;
      RELATION A LA MARQUE, AUX 
        CONC...
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 comportem...
Zoning mobile




Ergonomie Web ­ Emmanuelle POULAIN                   65
PROCESSUS DE CONCEPTION




Ergonomie Web ­ Emmanuelle POULAIN   66
RESPONSIVE WEB DESIGN
 ADAPTABILITÉ : créer un site qui s'adaptera à toutes 
        les tailles et résolutions des écrans...
S'ADAPTER AU CONTENU DU 
               MOBILE
      Privilégier le contenu aux liens 
      Rebondir et explorer
     ...
COHERENCE ET NAVIGATION :
                     Méthode du ”tri de cartes”




Ergonomie Web ­ Emmanuelle POULAIN          ...
Méthodologie : TRI DE CARTES
        OBJECTIF : structurer de manière optimale 
       l'organisation d'un site web pour s...
Tri de cartes
      1ère étape immersion




Ergonomie Web ­ Emmanuelle POULAIN                   71
Tri de cartes
      2ème étape : validation et précision




Ergonomie Web ­ Emmanuelle POULAIN                   72
Tri de cartes
      3ème étape : Groupement




Ergonomie Web ­ Emmanuelle POULAIN                   73
Tri de cartes
      4ème étape : nommage




Ergonomie Web ­ Emmanuelle POULAIN                   74
Tri de cartes : les limites
      Important pour le rubriquage mais ne teste pas la 
         navigation de l'utilisateur...
Pour aller plus loin :
                          L'utilité des tests utilisateurs




Ergonomie Web ­ Emmanuelle POULAIN  ...
TESTS UTILISATEURS
       Bien les choisirs : utiliser les personas.
            ●

  ●Plus ils jouent le jeu : mieux c'es...
IMPACT DES TESTS




Ergonomie Web ­ Emmanuelle POULAIN         78
Méthodes Tests utilisateurs
      Prototype papier :
                  Maquette en fonction de l'action du testeur,
    ...
Tests Utilisateurs


                  Prototypage papier et semi­fonctionnel
                                         =
 ...
Les outils
      Spencil : maquettage,
      Colorzilla pour Firefox,
      Eenox.net,
      Clickdensity.com,
      ...
Références et pour aller plus loin
      Blog Ergophile : analyse de l'ergonomie web et 
        mobile
      Ergonomie ...
Ergonomie web & interface tactile
Ergonomie web & interface tactile
Ergonomie web & interface tactile
Ergonomie web & interface tactile
Ergonomie web & interface tactile
Ergonomie web & interface tactile
Upcoming SlideShare
Loading in …5
×

of

Ergonomie web & interface tactile Slide 1 Ergonomie web & interface tactile Slide 2 Ergonomie web & interface tactile Slide 3 Ergonomie web & interface tactile Slide 4 Ergonomie web & interface tactile Slide 5 Ergonomie web & interface tactile Slide 6 Ergonomie web & interface tactile Slide 7 Ergonomie web & interface tactile Slide 8 Ergonomie web & interface tactile Slide 9 Ergonomie web & interface tactile Slide 10 Ergonomie web & interface tactile Slide 11 Ergonomie web & interface tactile Slide 12 Ergonomie web & interface tactile Slide 13 Ergonomie web & interface tactile Slide 14 Ergonomie web & interface tactile Slide 15 Ergonomie web & interface tactile Slide 16 Ergonomie web & interface tactile Slide 17 Ergonomie web & interface tactile Slide 18 Ergonomie web & interface tactile Slide 19 Ergonomie web & interface tactile Slide 20 Ergonomie web & interface tactile Slide 21 Ergonomie web & interface tactile Slide 22 Ergonomie web & interface tactile Slide 23 Ergonomie web & interface tactile Slide 24 Ergonomie web & interface tactile Slide 25 Ergonomie web & interface tactile Slide 26 Ergonomie web & interface tactile Slide 27 Ergonomie web & interface tactile Slide 28 Ergonomie web & interface tactile Slide 29 Ergonomie web & interface tactile Slide 30 Ergonomie web & interface tactile Slide 31 Ergonomie web & interface tactile Slide 32 Ergonomie web & interface tactile Slide 33 Ergonomie web & interface tactile Slide 34 Ergonomie web & interface tactile Slide 35 Ergonomie web & interface tactile Slide 36 Ergonomie web & interface tactile Slide 37 Ergonomie web & interface tactile Slide 38 Ergonomie web & interface tactile Slide 39 Ergonomie web & interface tactile Slide 40 Ergonomie web & interface tactile Slide 41 Ergonomie web & interface tactile Slide 42 Ergonomie web & interface tactile Slide 43 Ergonomie web & interface tactile Slide 44 Ergonomie web & interface tactile Slide 45 Ergonomie web & interface tactile Slide 46 Ergonomie web & interface tactile Slide 47 Ergonomie web & interface tactile Slide 48 Ergonomie web & interface tactile Slide 49 Ergonomie web & interface tactile Slide 50 Ergonomie web & interface tactile Slide 51 Ergonomie web & interface tactile Slide 52 Ergonomie web & interface tactile Slide 53 Ergonomie web & interface tactile Slide 54 Ergonomie web & interface tactile Slide 55 Ergonomie web & interface tactile Slide 56 Ergonomie web & interface tactile Slide 57 Ergonomie web & interface tactile Slide 58 Ergonomie web & interface tactile Slide 59 Ergonomie web & interface tactile Slide 60 Ergonomie web & interface tactile Slide 61 Ergonomie web & interface tactile Slide 62 Ergonomie web & interface tactile Slide 63 Ergonomie web & interface tactile Slide 64 Ergonomie web & interface tactile Slide 65 Ergonomie web & interface tactile Slide 66 Ergonomie web & interface tactile Slide 67 Ergonomie web & interface tactile Slide 68 Ergonomie web & interface tactile Slide 69 Ergonomie web & interface tactile Slide 70 Ergonomie web & interface tactile Slide 71 Ergonomie web & interface tactile Slide 72 Ergonomie web & interface tactile Slide 73 Ergonomie web & interface tactile Slide 74 Ergonomie web & interface tactile Slide 75 Ergonomie web & interface tactile Slide 76 Ergonomie web & interface tactile Slide 77 Ergonomie web & interface tactile Slide 78 Ergonomie web & interface tactile Slide 79 Ergonomie web & interface tactile Slide 80
Upcoming SlideShare
Ergonomie des sites internet touristique
Next
Download to read offline and view in fullscreen.

15 Likes

Share

Download to read offline

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

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
  • milieEscali

    Nov. 14, 2018
  • jfgalano

    Mar. 29, 2018
  • LiliaTARZOUT

    Oct. 18, 2017
  • bessongwilliam

    Oct. 13, 2016
  • NellyDUBOURG

    Jun. 5, 2016
  • ihsanmokhlisse

    Feb. 3, 2016
  • OlivierDrze

    Jan. 31, 2016
  • AlicedeLaChapelle

    Oct. 8, 2015
  • MargauxPoncelindeRau

    Mar. 20, 2015
  • jydeparis

    Mar. 6, 2015
  • AymenGraja

    Oct. 29, 2014
  • rvalliod

    Oct. 29, 2014
  • MarcVassal

    Oct. 24, 2014
  • mamadarnet

    Jan. 27, 2014
  • nathalielapitauste

    Jan. 15, 2014

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

Views

Total views

11,155

On Slideshare

0

From embeds

0

Number of embeds

1,782

Actions

Downloads

419

Shares

0

Comments

0

Likes

15

×