ergonomie web & interface tactile

Ergonomie Web Emmanuelle POULAIN 1

Ergonomie Web – interfaces tactiles

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


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

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

ErgonomieGénérale

InterfacesHommeMachine

ErgonomieInformatique

ErgonomieWeb


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

Les affordances sont les possibilités d'action

suggérées par les caractéristiques d'un

objet

Optimiser l'affordance : ”vous pouvez me cliquer

!”


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, Différences entre les postes de télévision, ordinateurs bureaux, pc portables, tablette, ordinateurs bureaux, pc portables, tablette,

smartphone, etc...smartphone, etc... Posture de l'utilisateur selon l'appareil,Posture de l'utilisateur selon l'appareil, Méthode de saisie : télécommande, gestes, souris, Méthode de saisie : télécommande, gestes, souris,

clavier, écran tactile, capteur, clavier clavier, écran tactile, capteur, clavier numérique, …numérique, …

Taille moyenne de l'écran : mur, bureau, Taille moyenne de l'écran : mur, bureau, genoux, main ou plus petit encore...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 symboles

12 – SATISFACTION DE L'INTERNAUTE


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'internauteLAISSER 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 : SATISFACTIONpour 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 symboles

12 – SATISFACTION DE L'INTERNAUTE


AUDIT D'APPLICATION WEB :Utilité, utilisabilité, cohérence, lisibilité, …

Mise en pratique.


L'AUDIT ERGONOMIQUE1.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 du site

Contenu des autres pages dans 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

Entertainment & Humor

ergonomie des interfaces

machines et

optimiser lergonomie

dfinitions lensemble

dfinition et enjeux

scurit et defficacit

besoinon doit

internautes viennent