Ergonomie web & interface tactile

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


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


DÉFINITION ET ENJEUX DE L'ERGONOMIE
WEB


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 : 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 : 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, audelà du
bon sens du concepteur ;
 L'utilisabilité, marquant l'adéquation aux
capacités de l'utilisateur :
 CONFORT D'UTILISATION
 SECURITÉ


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


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


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 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 : 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.

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.


Comprendre l'internaute : théories
de Gestalt


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.


Comprendre l'internaute : loi de Fitts


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

LE CONCEPT D'AFFORDANCE


ERGONOMIE DES INTERFACES : LA
GESTUELLE TACTILE


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 Ecran tactile mobile


Ergonomie Ecran tactile


Ergonomie Ecran Tactile


L'interface tactile : la gestuelle


Gestuelle tactile : le simple touch


Gestuelle tactile : plusieurs doigts


Gestuelle tactile :


Gestuelle tactile
 Le ”singlepoint” : équivalent du pointeur de la
souris en tactile,
 Le ”multipoint” : plusieurs points séparés,
indépendants (plusieurs curseurs de souris).
Encore difficile à gérer par les applications.
 Le ”multitouch singlepoint” : plusieurs points
reconnus formant une instruction (ex : ”pinch” a
deux doigts)
 Le ”multitouch multipoint” : multitouch pour
plusieurs fonctions.

Gestuelle tactile : multitouch


REGLES ET CRITÈRES ERGONOMIQUES


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,...


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


REGLE 1 – L'ARCHITECTURE
Architecture de l'information : penser la meilleure
manière d'organiser le contenu.


REGLE 2 : Organisation visuelle


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...

REGLE 5 : Information
L'ordinateur informe et prévient l'internaute
Ex : Feedback et Tagline


REGLE 6 : Compréhension
Bien choisir les mots et les symboles
 Utiliser le vocabulaire et les symboles à bon escient


REGLE 7 : Assistance
Aider et diriger l'internaute
 Rendre visible ce que l'internaute n'attends pas,
 Utiliser les affordances,


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


REGLE 10 : Liberté de l'internaute
LAISSER LE CHOIX


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...


REGLE 12 : SATISFACTION
pour conclure
Critère d'utilité,
Critère d'esthétique,
Critère de qualité,
Puissance et fiabilité technique
=


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


AUDIT D'APPLICATION WEB :
Utilité, utilisabilité, cohérence, lisibilité, …
Mise en pratique.


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


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


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...

LA CONCEPTION WEB :
Concevoir pour l'être humain,
Les Personas


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”.


Définir l'internaute : les personas
Une personne donnée dans un contexte précis.

 Des Personnes,
 Des Objectifs,
 Des Contextes d'utilisation


Persona primaire : type de visiteur le plus fréquent
Personas secondaires : second niveau de profil
utilisateurs
Personas tertiaires : profils annexes
Antepersonas : profil à ne pas satisfaire
Tous les personas ont droit à la parole, sous
réserve de ne pas contredire le besoin du
”persona primaire”


Définir l'internaute : les Personas
 INFORMATION SOCIODEMOGRAPHIQUES;
 RELATION A LA MARQUE, AUX
CONCURRENTS,
 HABITUDES, ENVIES,
 OBJECTIFS, MISSIONS SUR LE SITE


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


PENSER SON SITE :
Reprendre les règles

 Source 1 : les objectifs et comportements utilisateurs
 Source 2 : les représentations mentales
 Source 3 : regarder ailleurs


Zoning mobile


PROCESSUS DE CONCEPTION


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


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


COHERENCE ET NAVIGATION :
Méthode du ”tri de cartes”


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.

Tri de cartes
 1ère étape immersion


Tri de cartes
 2ème étape : validation et précision


Tri de cartes
 3ème étape : Groupement


Tri de cartes
 4ème étape : nommage


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


Pour aller plus loin :
L'utilité des tests utilisateurs


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.


IMPACT DES TESTS


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 semifonctionnel :
 A l'écran : simulation d'un site qui marche.
 Proche de la situation réelle


Tests Utilisateurs

Prototypage papier et semifonctionnel
=
Méthodes de conception et validation

Test sur site finalisé : En amont.


Les outils
 Spencil : maquettage,
 Colorzilla pour Firefox,
 Eenox.net,
 Clickdensity.com,
 Snook.ca, : colourcheck,
 Secure.supergonomie.com : tests utilisateurs,
...


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 & interface tactile

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Ergonomie web & interface tactile

Similar to Ergonomie web & interface tactile (20)

Ergonomie web & interface tactile