SlideShare une entreprise Scribd logo
1  sur  80
Télécharger pour lire hors ligne
Ergonomie Web – interfaces tactiles


              Ergonomie Web :
        Optimiser l'ergonomie de ses
        applications et sites mobiles




Ergonomie Web ­ Emmanuelle POULAIN       1
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
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
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 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
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
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
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
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
LES FONDEMENTS DE L'ERGONOMIE :
            Comprendre l'internaute, l'affordance,
                 comportement cognitif,...




Ergonomie Web ­ Emmanuelle POULAIN                   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
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
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
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 est grande, 
          plus la cible (icône) est atteinte rapidement.




Ergonomie Web ­ Emmanuelle POULAIN                          18
Comprendre l'internaute : loi de Fitts




Ergonomie Web ­ Emmanuelle POULAIN   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
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é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
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­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
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,
      Le scroll,
      Les internautes lisent en F,
      L'ergonomie on verra à la fin,...



Ergonomie Web ­ Emmanuelle POULAIN                 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
REGLE 1 – L'ARCHITECTURE
       Architecture de l'information : penser la meilleure 
                 manière d'organiser le contenu.




Ergonomie Web ­ Emmanuelle POULAIN                            37
REGLE 2 : Organisation visuelle




Ergonomie Web ­ Emmanuelle POULAIN       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
REGLE 5 : Information
  L'ordinateur informe et prévient l'internaute
  Ex : Feedback et Tagline 




Ergonomie Web ­ Emmanuelle POULAIN            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
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
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
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 :
                                     Visuel et facile
      Accessibilité physique : aggrandissement des 
        polices, son,...
      Accessibilité technologique ou compatibilité : 
        penser à la mise à jour...




Ergonomie Web ­ Emmanuelle POULAIN                            48
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
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
AUDIT D'APPLICATION WEB :
           Utilité, utilisabilité, cohérence, lisibilité, …
                          Mise en pratique.




Ergonomie Web ­ Emmanuelle POULAIN                            51
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
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
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
LA CONCEPTION WEB :
                        Concevoir pour l'être humain,
                              Les Personas




Ergonomie Web ­ Emmanuelle POULAIN                      55
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
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
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 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
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
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
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
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
                                     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
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
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 
       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
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 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
Pour aller plus loin :
                          L'utilité des tests utilisateurs




Ergonomie Web ­ Emmanuelle POULAIN                           76
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
IMPACT DES TESTS




Ergonomie Web ­ Emmanuelle POULAIN         78
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
Tests Utilisateurs


                  Prototypage papier et semi­fonctionnel
                                         =
                    Méthodes de conception et validation


                         Test sur site finalisé : En amont.



Ergonomie Web ­ Emmanuelle POULAIN                            80
Les outils
      Spencil : maquettage,
      Colorzilla pour Firefox,
      Eenox.net,
      Clickdensity.com,
      Snook.ca, : colourcheck,
      Secure.supergonomie.com : tests utilisateurs,
       ...


Ergonomie Web ­ Emmanuelle POULAIN                     81
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

Contenu connexe

Tendances

Tendances (20)

10 exercices de Lean engineering par Michael Ballé
10 exercices de Lean engineering par Michael Ballé10 exercices de Lean engineering par Michael Ballé
10 exercices de Lean engineering par Michael Ballé
 
TD2 - UML - Correction
TD2 - UML - CorrectionTD2 - UML - Correction
TD2 - UML - Correction
 
Lean manufacturing
Lean manufacturingLean manufacturing
Lean manufacturing
 
Présentation pfe Développement d'une application bancaire mobile
Présentation pfe Développement d'une application bancaire mobilePrésentation pfe Développement d'une application bancaire mobile
Présentation pfe Développement d'une application bancaire mobile
 
Les applications mobiles, sites mobiles et web apps
Les applications mobiles, sites mobiles et web appsLes applications mobiles, sites mobiles et web apps
Les applications mobiles, sites mobiles et web apps
 
De l'idée à l'opportunité entrepreneuriale
De l'idée à l'opportunité entrepreneurialeDe l'idée à l'opportunité entrepreneuriale
De l'idée à l'opportunité entrepreneuriale
 
Gestion de projet
Gestion de projetGestion de projet
Gestion de projet
 
Management de projet
Management de projetManagement de projet
Management de projet
 
Le Lean Manufacturing
Le Lean ManufacturingLe Lean Manufacturing
Le Lean Manufacturing
 
Guide du comité de pilotage en EPN
Guide du comité de pilotage en EPNGuide du comité de pilotage en EPN
Guide du comité de pilotage en EPN
 
Mon cours Agile scrum.ppt
Mon cours Agile scrum.pptMon cours Agile scrum.ppt
Mon cours Agile scrum.ppt
 
Modèle cahier des charges site web
Modèle cahier des charges site webModèle cahier des charges site web
Modèle cahier des charges site web
 
Gestion de projet
Gestion de projetGestion de projet
Gestion de projet
 
Digitalisation de la fonction RH, numérique, big data, réseaux sociaux & comm...
Digitalisation de la fonction RH, numérique, big data, réseaux sociaux & comm...Digitalisation de la fonction RH, numérique, big data, réseaux sociaux & comm...
Digitalisation de la fonction RH, numérique, big data, réseaux sociaux & comm...
 
Introduction aux méthodes agiles
Introduction aux méthodes agilesIntroduction aux méthodes agiles
Introduction aux méthodes agiles
 
Scrum
ScrumScrum
Scrum
 
Définition de votre Objectif et Key Results OKR
Définition de votre Objectif et Key Results OKRDéfinition de votre Objectif et Key Results OKR
Définition de votre Objectif et Key Results OKR
 
Petite histoire du Lean
Petite histoire du LeanPetite histoire du Lean
Petite histoire du Lean
 
Le Manifeste Agile
Le Manifeste AgileLe Manifeste Agile
Le Manifeste Agile
 
Cours Génie Logiciel - Cours 2 - Cycles de vie
Cours Génie Logiciel - Cours 2 - Cycles de vieCours Génie Logiciel - Cours 2 - Cycles de vie
Cours Génie Logiciel - Cours 2 - Cycles de vie
 

Similaire à Ergonomie web & interface tactile

Dossier de Conception d'OPI - DreamTime
Dossier de Conception d'OPI - DreamTimeDossier de Conception d'OPI - DreamTime
Dossier de Conception d'OPI - DreamTime
Royer Sophie
 
Innovation + Mobilité = ROI
Innovation + Mobilité = ROIInnovation + Mobilité = ROI
Innovation + Mobilité = ROI
Klee Interactive
 

Similaire à Ergonomie web & interface tactile (20)

Ergonomie(1) (1)
Ergonomie(1) (1)Ergonomie(1) (1)
Ergonomie(1) (1)
 
Dossier de Conception d'OPI - DreamTime
Dossier de Conception d'OPI - DreamTimeDossier de Conception d'OPI - DreamTime
Dossier de Conception d'OPI - DreamTime
 
Le futur des interfaces sur smartphone
Le futur des interfaces sur smartphoneLe futur des interfaces sur smartphone
Le futur des interfaces sur smartphone
 
030 fondamentaux di
030   fondamentaux di030   fondamentaux di
030 fondamentaux di
 
Modelisation et maquettage 2015
Modelisation et maquettage 2015Modelisation et maquettage 2015
Modelisation et maquettage 2015
 
Cours ergonomie des IHM web - Chapitre 2 - Introduction et définition
Cours ergonomie des IHM web - Chapitre 2 - Introduction et définitionCours ergonomie des IHM web - Chapitre 2 - Introduction et définition
Cours ergonomie des IHM web - Chapitre 2 - Introduction et définition
 
UX Design : Concevoir des expériences positives et engageantes - Carine Lalle...
UX Design : Concevoir des expériences positives et engageantes - Carine Lalle...UX Design : Concevoir des expériences positives et engageantes - Carine Lalle...
UX Design : Concevoir des expériences positives et engageantes - Carine Lalle...
 
Ergonomie des IHM web - Notes de cours (1/3)
Ergonomie des IHM web - Notes de cours (1/3)Ergonomie des IHM web - Notes de cours (1/3)
Ergonomie des IHM web - Notes de cours (1/3)
 
Ux design & ergonomie des interfaces 6ème édition (extrait)
Ux design & ergonomie des interfaces 6ème édition (extrait) Ux design & ergonomie des interfaces 6ème édition (extrait)
Ux design & ergonomie des interfaces 6ème édition (extrait)
 
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalitéAgora CMS - 25 avril 2014 - UX : Mythe et réalité
Agora CMS - 25 avril 2014 - UX : Mythe et réalité
 
Améliorer le Design pour améliorer l'UX
Améliorer le Design pour améliorer l'UXAméliorer le Design pour améliorer l'UX
Améliorer le Design pour améliorer l'UX
 
Thème11
Thème11Thème11
Thème11
 
Introduction a l'ergonomie
Introduction a l'ergonomieIntroduction a l'ergonomie
Introduction a l'ergonomie
 
Le progrès de l'intelligence artificielle et ses conséquences
Le progrès de l'intelligence artificielle et ses conséquencesLe progrès de l'intelligence artificielle et ses conséquences
Le progrès de l'intelligence artificielle et ses conséquences
 
Intro conception2017
Intro conception2017Intro conception2017
Intro conception2017
 
Innovation + Mobilité = ROI
Innovation + Mobilité = ROIInnovation + Mobilité = ROI
Innovation + Mobilité = ROI
 
Ergonomie : performance et satisfaction de nos clients
Ergonomie : performance et satisfaction de nos clientsErgonomie : performance et satisfaction de nos clients
Ergonomie : performance et satisfaction de nos clients
 
Introduction à la Conception et Evaluation des IHM
Introduction à la Conception et Evaluation des IHMIntroduction à la Conception et Evaluation des IHM
Introduction à la Conception et Evaluation des IHM
 
Bibdoc 2010 - L'ergonomie de la lecture
Bibdoc 2010 - L'ergonomie de la lectureBibdoc 2010 - L'ergonomie de la lecture
Bibdoc 2010 - L'ergonomie de la lecture
 
Intro conception2014
Intro conception2014Intro conception2014
Intro conception2014
 

Ergonomie web & interface tactile

  • 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
  • 4. DÉFINITION ET ENJEUX DE L'ERGONOMIE WEB Ergonomie Web ­ Emmanuelle POULAIN 4
  • 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, 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. 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
  • 15. Comprendre l'internaute : théories  de Gestalt Ergonomie Web ­ Emmanuelle POULAIN 16
  • 16. Comprendre l'internaute : théories  de Gestalt Ergonomie Web ­ Emmanuelle POULAIN 17
  • 17. 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
  • 18.
  • 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
  • 22. ERGONOMIE DES INTERFACES : LA GESTUELLE TACTILE Ergonomie Web ­ Emmanuelle POULAIN 23
  • 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 ”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
  • 33. REGLES ET CRITÈRES ERGONOMIQUES Ergonomie Web ­ Emmanuelle POULAIN 34
  • 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
  • 39.
  • 40. REGLE 5 : Information L'ordinateur informe et prévient l'internaute  Ex : Feedback et Tagline  Ergonomie Web ­ Emmanuelle POULAIN 41
  • 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
  • 45. REGLE 10 : Liberté de l'internaute LAISSER LE CHOIX Ergonomie Web ­ Emmanuelle POULAIN 47
  • 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
  • 50. 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
  • 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
  • 55. 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
  • 57. 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
  • 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
  • 61.
  • 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
  • 67. COHERENCE ET NAVIGATION : Méthode du ”tri de cartes” Ergonomie Web ­ Emmanuelle POULAIN 69
  • 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 semi­fonctionnel :  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 semi­fonctionnel = Méthodes de conception et validation Test sur site finalisé : En amont. Ergonomie Web ­ Emmanuelle POULAIN 80
  • 79. Les outils  Spencil : maquettage,  Colorzilla pour Firefox,  Eenox.net,  Clickdensity.com,  Snook.ca, : colourcheck,  Secure.supergonomie.com : tests utilisateurs, ... Ergonomie Web ­ Emmanuelle POULAIN 81
  • 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