Ergonomie Web
« 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, fin des années 50




        ● C'est une démarche
        ● Notion de tâche primordiale

        ● Méthodes d'analyse et de conception

        ● Optimisation ergonomique
●   Paradigme n°1 : conception centrée sur les
    interactions Homme/Machine
    ●   Quelle est la tâche de l'utilisateur? accessibilité ?
    ●   Comment améliorer l'utilité et l'utilisabilité d'un produit?
    ●   Comment interpréter l'environnement cognitif (traitement de
        l'information), pour améliorer :
           performance, satisfaction, sécurité.

●   Paradigme n°2 : conception centrée sur
    l'expérience de l'utilisateur « user experience »
    ●   Comment interpréter la dimension affective et les émotions
        pour améliorer :
           beauté perçue, qualité hédonique, bien-être, plaisir,
           amusement, fun
Lien étroit entre le cognitif et l’ émotif

Les émotions affectent la façon dont nous
traitons l'information :
●   notre jugement
●   nos prises de décisions
●   notre apprentissage

Elles modifient notre manière de nous confronter
à la réalité et de résoudre les problèmes.

Elles nous aident à évaluer les situations comme
bonnes ou mauvaises, sécuritaires ou dangereuses.
Qualité hédonique d'un produit

●   Est-ce que l'utilisation d'un produit est source
    de plaisir pour l'utilisateur?
●   Buzz words très tendance
    ●   Emotional design
    ●   Perceived hedonic quality
    ●   Pleasurable products
    ●   Funology
●   Concepts parallèles : amusement, fun, beau,
    joie, enchantement, attrait, nouveauté
Attractive things work better
●   Emotion & Design – Donald Norman (2002)

●   Trois théières :
    ●   Accent sur l'utilisabilié (plus exactement la non
        utilisabilité)
    ●   Accent sur l'esthètique
    ●   Accent sur le fonctionnel
Carelman : Catalogue des objets
introuvables (1969)               Peter Bo : Maru Teapot (2007)
The Ronnefeldt « tilting » teapot (2004)
Accessibilité
           caractère de quelque chose qui est accessible

●   Se dit d'un lieu, d'une situation, etc., auxquels on peut
    accéder : Village difficilement accessible.
●   Se dit de quelque chose (livre, œuvre, art) que l'on peut
    comprendre ; intelligible, compréhensible.
●   Se dit de quelque chose (produit, service, loisir, etc.) que
    l'on peut s'offrir ; abordable : Le ski est maintenant
    accessible à beaucoup de gens.
●   Qui se laisse émouvoir, toucher ; sensible : Un homme
    accessible à la pitié.
●   Que l'on peut facilement aborder : Un président-directeur
    général accessible.
WCAG 2.0 : Règles pour l' accessibilité des
              contenus Web
●   quatre principes fondamentaux : perceptible,
    utilisable, compréhensible et robuste
●   12 règles : trame, objectifs de base
●   critères de succès : tests de conformité des règles
    (spécification de conception, achat, réglementation, accords
    contractuels). Trois niveaux de conformité : A (le plus bas), AA
    et AAA (le plus élevé).
●   techniques suffisantes, recommandées

       W3C : Web Content Accessibility Guidelines
       accessiweb.org : Label_Accessibilite
Iso 9241 :   Utilisabilité
« Un produit est dit utilisable lorsqu'il peut être
utilisé avec efficacité, efficience et satisfaction
par des utilisateurs donnés (specified),
cherchant à atteindre des objectifs donnés,
dans un contexte d'utilisation donné. »




                +                        =
Iso 9241 :     Utilisabilité
« Un produit est dit utilisable lorsqu'il peut être utilisé avec
efficacité, efficience et satisfaction par des utilisateurs
donnés (specified), cherchant à atteindre des objectifs
donnés, dans un contexte d'utilisation donné. »


             Conception Centrée Utilisateur

                        3 dimensions

  Ce qu'il est                                Où il se trouve

                      Ce qu'il veut
ISO 13407 :
              étapes du cycle de
    conception centrée utilisateur

                                                                1: analyse




3: évaluation
                                                                  2: conception

        http://www.ergolab.net/articles/conception-centree-utilisateur.php
Iso 9241 :      Utilisabilité
« Un produit est dit utilisable lorsqu'il peut être utilisé avec
efficacité, efficience et satisfaction par des utilisateurs
donnés (specified), cherchant à atteindre des objectifs
donnés, dans un contexte d'utilisation donné. »


Objectif 1 : Efficacité
L'utilisateur doit réussir à faire ce qu'il veut
● Aisance d'utilisation

● Facilité d'apprentissage



●Critère primordial pour les interfaces grand public
●Séduire de nouveaux utilisateurs
Iso 9241 :      Utilisabilité
« Un produit est dit utilisable lorsqu'il peut être utilisé avec
efficacité, efficience et satisfaction par des utilisateurs
donnés (specified), cherchant à atteindre des objectifs
donnés, dans un contexte d'utilisation donné. »


Objectif 2 : Efficience
Il doit atteindre ses objectifs
● Le plus rapidement possible

● Avec le moins d'erreurs possibles



● Dimension critique pour les interfaces spécialisées,
applications métiers
● Conserver des clients existants
Iso 9241 :      Utilisabilité
« Un produit est dit utilisable lorsqu'il peut être utilisé avec
efficacité, efficience et satisfaction par des utilisateurs
donnés (specified), cherchant à atteindre des objectifs
donnés, dans un contexte d'utilisation donné. »o
Les méthodes
●   Méthodes expertes
    ●   ne font pas intervenir d'utilisateur
    ●   pas spécialement expert en Ergonomie
    ●   le cerveau du concepteur

●   Méthodes participatives
    ●   utilisateurs finaux des interfaces
    ●   observer, questionner, analyser le comportement et
        le discours des internautes
Les méthodes expertes
●   Audit ergonomique,
      Jacob Nielsen : 5 utilisateurs-expert : 80% des pb
●   Réalisations de plans de site
●   Réalisations de flux d'interaction
●   Réalisations de zonings et maquettes
Les méthodes participatives
●   Entretiens (Focus group)
      recueil de données subjectives :
      attitudes, opinions, satisfaction
      → conclusion sur le discours
●   Questionnaires
●   Test utilisateur (User testing)
      recueil de données objectives :
      → conclusion sur le comportement
●   Tri par cartes → architecture du site
Questionnaires
●   NAU : Nielsen's Attribute of Usability
       –   5 Q, échelle 7 points
●   PUTQ : Purdue Usability Questionnaire
       –   100 Q, 8 dimensions, échelle 7 points
           Compatibilité            Actions minimales
           Cohérence                Mémorisation
           Flexibilité              Limites perceptives
           Facilité d'apprentissage Guidage
●   WAMMI : Website Analysis and Measurement
    Inventory
       –   20 Q, 5 dimensions, échelle en 5 points
WAMMI
    Website Analysis and Measurement Inventory
         20 Affirmations, 5 dimensions, échelle en 5 points

●   Attrait - Q : 1,6,16
●   Contrôle - Q : 2, 7, 17, 19
●   Efficacité - Q : 3, 8, 13
●   Utilité - Q : 9, 11, 12, 14, 18
●   Facilité d'apprentissage - Q : 4, 5, 10, 15, 20
Test utilisateur (User testing)
●   Scénario : exécution de tâches représentatives des tâches
    réelles
●   Outils logiciels
    ●   Mouchard électronique (monitoring) : enregistre tous
        les événements dans des fichiers « log file ».



                                                         outils heatmap.pdf

    ●   Video Log « the observer » : pilote un magnétoscope,
        retour de contrôle écran couplé à une caméra qui filme le
        visage et les expressions de l'utilisateur.
    ●   Eye-Tracking : enregistre les mouvements des yeux.
Eye-tracking
●   Zones de priorité d'un écran




●   Différences individuelles Audit Lab
Trois types de lecture
         selon le contexte d'utilisation, l'expertise de l'internaute

 ●   Repérage (survol)
 ●   Balayage (survol + synthèse)
 ●   Lecture en profondeur (décortication, « mot à mot »)

J. Nielsen   → grands principes pour l'écriture Web :
  * concision : nous lisons 25 % plus lentement à l'écran.

  * balayabilité : quand nous lisons, nous "scannons", nous lisons « en diagonale »
79 % balaient les textes.
16% lisent mot à mot tout le contenu qui leur est présenté.

   * morcellement des pages : les internautes n'utilisent pas systématiquement
l'ascenseur vertical, cela milite donc pour des pages plutôt courtes, et un positionnement
des informations importantes en haut de la page.
Tri par cartes (card sorting)
●   Architecture de l'information : Méthode privilégiée en
    amont du cycle de conception
●   Jeu : faire ranger des contenus afin de comprendre comment
    les internautes opèrent des regroupements (modèles mentaux)
●   4 dimensions
    ●   Liberté d'action : ouvert/fermé
    ●   Support matériel : physique/informatisé
    ●   Panel participants : cible/experts domaine
    ●   Profondeur du tri : totalité du site/partiel
« Penser comme un utilisateur,
    pas comme un expert »
Tri informatisé
Tri physique
Analyse des clusters
                      (regroupement)




Représentation graphique : dendogramme (arbre)
Limites du tri par cartes
●   Conception théorique
    ●   Processus bottom-up : on part des contenus pour
        accèder aux représentations
    ●   Processus top-down : les représentations guident la
        recherche de contenu

●   Contexte d'un site web : Architecture + choix
    d'interface
Références
●   Ergonomie Web, Amélie Boucher, Eyrolles 2009
    http://www.ergonomie-sites-web.com/telechargements/index.php
●
    Webergos : http://www-public.int-evry.fr/~milon/index.php
●


●


●




    Vidéo conférence
●   Tri par cartes – Etat de l'art

Concepts methodes

  • 1.
  • 2.
    « l 'ensemble des connaissancesscientifiques 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, fin des années 50 ● C'est une démarche ● Notion de tâche primordiale ● Méthodes d'analyse et de conception ● Optimisation ergonomique
  • 3.
    Paradigme n°1 : conception centrée sur les interactions Homme/Machine ● Quelle est la tâche de l'utilisateur? accessibilité ? ● Comment améliorer l'utilité et l'utilisabilité d'un produit? ● Comment interpréter l'environnement cognitif (traitement de l'information), pour améliorer : performance, satisfaction, sécurité. ● Paradigme n°2 : conception centrée sur l'expérience de l'utilisateur « user experience » ● Comment interpréter la dimension affective et les émotions pour améliorer : beauté perçue, qualité hédonique, bien-être, plaisir, amusement, fun
  • 4.
    Lien étroit entrele cognitif et l’ émotif Les émotions affectent la façon dont nous traitons l'information : ● notre jugement ● nos prises de décisions ● notre apprentissage Elles modifient notre manière de nous confronter à la réalité et de résoudre les problèmes. Elles nous aident à évaluer les situations comme bonnes ou mauvaises, sécuritaires ou dangereuses.
  • 5.
    Qualité hédonique d'unproduit ● Est-ce que l'utilisation d'un produit est source de plaisir pour l'utilisateur? ● Buzz words très tendance ● Emotional design ● Perceived hedonic quality ● Pleasurable products ● Funology ● Concepts parallèles : amusement, fun, beau, joie, enchantement, attrait, nouveauté
  • 6.
    Attractive things workbetter ● Emotion & Design – Donald Norman (2002) ● Trois théières : ● Accent sur l'utilisabilié (plus exactement la non utilisabilité) ● Accent sur l'esthètique ● Accent sur le fonctionnel
  • 7.
    Carelman : Cataloguedes objets introuvables (1969) Peter Bo : Maru Teapot (2007)
  • 8.
  • 9.
    Accessibilité caractère de quelque chose qui est accessible ● Se dit d'un lieu, d'une situation, etc., auxquels on peut accéder : Village difficilement accessible. ● Se dit de quelque chose (livre, œuvre, art) que l'on peut comprendre ; intelligible, compréhensible. ● Se dit de quelque chose (produit, service, loisir, etc.) que l'on peut s'offrir ; abordable : Le ski est maintenant accessible à beaucoup de gens. ● Qui se laisse émouvoir, toucher ; sensible : Un homme accessible à la pitié. ● Que l'on peut facilement aborder : Un président-directeur général accessible.
  • 10.
    WCAG 2.0 :Règles pour l' accessibilité des contenus Web ● quatre principes fondamentaux : perceptible, utilisable, compréhensible et robuste ● 12 règles : trame, objectifs de base ● critères de succès : tests de conformité des règles (spécification de conception, achat, réglementation, accords contractuels). Trois niveaux de conformité : A (le plus bas), AA et AAA (le plus élevé). ● techniques suffisantes, recommandées W3C : Web Content Accessibility Guidelines accessiweb.org : Label_Accessibilite
  • 11.
    Iso 9241 : Utilisabilité « Un produit est dit utilisable lorsqu'il peut être utilisé avec efficacité, efficience et satisfaction par des utilisateurs donnés (specified), cherchant à atteindre des objectifs donnés, dans un contexte d'utilisation donné. » + =
  • 12.
    Iso 9241 : Utilisabilité « Un produit est dit utilisable lorsqu'il peut être utilisé avec efficacité, efficience et satisfaction par des utilisateurs donnés (specified), cherchant à atteindre des objectifs donnés, dans un contexte d'utilisation donné. » Conception Centrée Utilisateur 3 dimensions Ce qu'il est Où il se trouve Ce qu'il veut
  • 13.
    ISO 13407 : étapes du cycle de conception centrée utilisateur 1: analyse 3: évaluation 2: conception http://www.ergolab.net/articles/conception-centree-utilisateur.php
  • 14.
    Iso 9241 : Utilisabilité « Un produit est dit utilisable lorsqu'il peut être utilisé avec efficacité, efficience et satisfaction par des utilisateurs donnés (specified), cherchant à atteindre des objectifs donnés, dans un contexte d'utilisation donné. » Objectif 1 : Efficacité L'utilisateur doit réussir à faire ce qu'il veut ● Aisance d'utilisation ● Facilité d'apprentissage ●Critère primordial pour les interfaces grand public ●Séduire de nouveaux utilisateurs
  • 15.
    Iso 9241 : Utilisabilité « Un produit est dit utilisable lorsqu'il peut être utilisé avec efficacité, efficience et satisfaction par des utilisateurs donnés (specified), cherchant à atteindre des objectifs donnés, dans un contexte d'utilisation donné. » Objectif 2 : Efficience Il doit atteindre ses objectifs ● Le plus rapidement possible ● Avec le moins d'erreurs possibles ● Dimension critique pour les interfaces spécialisées, applications métiers ● Conserver des clients existants
  • 16.
    Iso 9241 : Utilisabilité « Un produit est dit utilisable lorsqu'il peut être utilisé avec efficacité, efficience et satisfaction par des utilisateurs donnés (specified), cherchant à atteindre des objectifs donnés, dans un contexte d'utilisation donné. »o
  • 17.
    Les méthodes ● Méthodes expertes ● ne font pas intervenir d'utilisateur ● pas spécialement expert en Ergonomie ● le cerveau du concepteur ● Méthodes participatives ● utilisateurs finaux des interfaces ● observer, questionner, analyser le comportement et le discours des internautes
  • 18.
    Les méthodes expertes ● Audit ergonomique, Jacob Nielsen : 5 utilisateurs-expert : 80% des pb ● Réalisations de plans de site ● Réalisations de flux d'interaction ● Réalisations de zonings et maquettes
  • 19.
    Les méthodes participatives ● Entretiens (Focus group) recueil de données subjectives : attitudes, opinions, satisfaction → conclusion sur le discours ● Questionnaires ● Test utilisateur (User testing) recueil de données objectives : → conclusion sur le comportement ● Tri par cartes → architecture du site
  • 20.
    Questionnaires ● NAU : Nielsen's Attribute of Usability – 5 Q, échelle 7 points ● PUTQ : Purdue Usability Questionnaire – 100 Q, 8 dimensions, échelle 7 points Compatibilité Actions minimales Cohérence Mémorisation Flexibilité Limites perceptives Facilité d'apprentissage Guidage ● WAMMI : Website Analysis and Measurement Inventory – 20 Q, 5 dimensions, échelle en 5 points
  • 21.
    WAMMI Website Analysis and Measurement Inventory 20 Affirmations, 5 dimensions, échelle en 5 points ● Attrait - Q : 1,6,16 ● Contrôle - Q : 2, 7, 17, 19 ● Efficacité - Q : 3, 8, 13 ● Utilité - Q : 9, 11, 12, 14, 18 ● Facilité d'apprentissage - Q : 4, 5, 10, 15, 20
  • 22.
    Test utilisateur (Usertesting) ● Scénario : exécution de tâches représentatives des tâches réelles ● Outils logiciels ● Mouchard électronique (monitoring) : enregistre tous les événements dans des fichiers « log file ». outils heatmap.pdf ● Video Log « the observer » : pilote un magnétoscope, retour de contrôle écran couplé à une caméra qui filme le visage et les expressions de l'utilisateur. ● Eye-Tracking : enregistre les mouvements des yeux.
  • 23.
    Eye-tracking ● Zones de priorité d'un écran ● Différences individuelles Audit Lab
  • 24.
    Trois types delecture selon le contexte d'utilisation, l'expertise de l'internaute ● Repérage (survol) ● Balayage (survol + synthèse) ● Lecture en profondeur (décortication, « mot à mot ») J. Nielsen → grands principes pour l'écriture Web : * concision : nous lisons 25 % plus lentement à l'écran. * balayabilité : quand nous lisons, nous "scannons", nous lisons « en diagonale » 79 % balaient les textes. 16% lisent mot à mot tout le contenu qui leur est présenté. * morcellement des pages : les internautes n'utilisent pas systématiquement l'ascenseur vertical, cela milite donc pour des pages plutôt courtes, et un positionnement des informations importantes en haut de la page.
  • 25.
    Tri par cartes(card sorting) ● Architecture de l'information : Méthode privilégiée en amont du cycle de conception ● Jeu : faire ranger des contenus afin de comprendre comment les internautes opèrent des regroupements (modèles mentaux) ● 4 dimensions ● Liberté d'action : ouvert/fermé ● Support matériel : physique/informatisé ● Panel participants : cible/experts domaine ● Profondeur du tri : totalité du site/partiel
  • 26.
    « Penser comme unutilisateur, pas comme un expert »
  • 28.
  • 29.
    Analyse des clusters (regroupement) Représentation graphique : dendogramme (arbre)
  • 30.
    Limites du tripar cartes ● Conception théorique ● Processus bottom-up : on part des contenus pour accèder aux représentations ● Processus top-down : les représentations guident la recherche de contenu ● Contexte d'un site web : Architecture + choix d'interface
  • 31.
    Références ● Ergonomie Web, Amélie Boucher, Eyrolles 2009 http://www.ergonomie-sites-web.com/telechargements/index.php ● Webergos : http://www-public.int-evry.fr/~milon/index.php ● ● ● Vidéo conférence ● Tri par cartes – Etat de l'art