Ergonomie web & interface tactile
Upcoming SlideShare
Loading in...5
×
 

Ergonomie web & interface tactile

on

  • 3,951 views

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

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

Statistics

Views

Total Views
3,951
Views on SlideShare
3,648
Embed Views
303

Actions

Likes
2
Downloads
151
Comments
0

10 Embeds 303

http://www.idnetinfo.net 259
http://www.scoop.it 17
http://idnetinfo.tumblr.com 10
http://assets.txmblr.com 8
http://www.tumblr.com 3
https://twitter.com 2
http://www.docshut.com 1
http://www.docseek.net 1
http://www.slashdocs.com 1
http://www.pearltrees.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ergonomie web & interface tactile Ergonomie web & interface tactile Presentation Transcript

  • Ergonomie Web – interfaces tactiles Ergonomie Web : Optimiser lergonomie de ses applications et sites mobilesErgonomie Web ­ Emmanuelle POULAIN 1
  • Sommaire  LErgonomie web : généalogie définition et enjeux ................................................................ Page 4.  Les fondements de lergonomie : comportement  cognitif, affordance, ...............................Page 11.  Les interfaces tactiles : gestuelle et ergonomie ................................................................ Page 23.  Les règles et critères ergonomique............ Page 34.  Laudit Ergonomique des applications web, mise en  pratique................................................... Page 51Ergonomie Web ­ Emmanuelle POULAIN 2
  • Sommaire (suite)  Conception des interfaces web : comprendre  linternaute, les personnas, lutilisabilité,  responsive et web mobile,...................... Page 55  La cohérence : navigation et contenu, méthode du  tri de cartes..............................................Page 69  Pour aller plus loin : lutilité des tests utilisateurs  ................................................................ Page 76  Les outils et références.............................. Page 81Ergonomie Web ­ Emmanuelle POULAIN 3
  • DÉFINITION ET ENJEUX DE LERGONOMIE WEBErgonomie Web ­ Emmanuelle POULAIN 4
  • Ergonomie : Définitions ”Lensemble des connaissances scientifiques relatives à lHomme 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 defficacité.” Alain Wisner – 1950Ergonomie Web ­ Emmanuelle POULAIN 5
  • Ergonomie : définitions  Lergonomie est lutilisation de connaissances  scientifiques relatives à lhomme (psychologie,  physiologie, médecine) dans le but daméliorer son  environnement de travail. Ergonomie Web ­ Emmanuelle POULAIN 6
  • Ergonomie : Définitions Lergonomie se caractérise généralement selon deux  composantes :  Lefficacité, consistant à adopter des solutions  appropriées dutilisation dun produit, au­delà du  bon sens du concepteur ;  Lutilisabilité, marquant ladéquation aux  capacités de lutilisateur :   CONFORT DUTILISATION  SECURITÉErgonomie Web ­ Emmanuelle POULAIN 7
  • Généalogie  Lergonomie web arrive après la lignée de  disciplines tentant dappliquer  les principes de  bases de lergonomie sur différents types doutils Interfaces Ergonomie Ergonomie Ergonomie Homme Générale Informatique Web MachineErgonomie Web ­ Emmanuelle POULAIN 8
  • Un site web ergonomique : utile,  utilisable  On qualifie un site web ”Ergonomique” lorsquil  satisfait les critères dutilité et dutilisabilité. UTILITÉ : Répondre à un besoin Les internautes viennent pour faire quelque chose UTILISABILITÉ : faciliter la satisfaction du besoin On doit les aider à atteindre leurs objectifsErgonomie Web ­ Emmanuelle POULAIN 9
  • LES FONDEMENTS DE LERGONOMIE : Comprendre linternaute, laffordance, comportement cognitif,...Ergonomie Web ­ Emmanuelle POULAIN 11
  • Les fondements de lergonomie :  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 , cest­à­ dire des motifs visuels ou sonores telle quun mot,  etc.) pendant plusieurs minutes.      La mémoire à long terme, capable de  stocker un nombre infini dinformations de manière  permanente.Ergonomie Web ­ Emmanuelle POULAIN 12
  • Ergonomie : théorie de laction  Il en découle les éléments suivants :  quune liste ditems doit de préférence comporter  moins de 7 éléments ;  que lusage de couleurs et dune signalétique liant les  éléments dune interface aident lutilisateur à se  lapproprier ;  que des messages courts facilitent leur mémorisation   que létat de linterface doit représenter fidèlement  létat du système. Cela signifie notamment que des  messages dalertes 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 linternaute : théories  de GestaltErgonomie Web ­ Emmanuelle POULAIN 16
  • Comprendre linternaute : théories  de GestaltErgonomie Web ­ Emmanuelle POULAIN 17
  • Comprendre linternaute : 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 linternaute : loi de FittsErgonomie Web ­ Emmanuelle POULAIN 20
  • Le CONCEPT DAFFORDANCE Optimiser laffordance :  ”vous pouvez me cliquer  !” Les affordances sont les  possibilités daction  suggérées par les  caractéristiques dun  objetErgonomie Web ­ Emmanuelle POULAIN 21
  • LE CONCEPT DAFFORDANCEErgonomie Web ­ Emmanuelle POULAIN 22
  • ERGONOMIE DES INTERFACES : LA GESTUELLE TACTILEErgonomie 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 lutilisateur selon lappareil,  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 mobileErgonomie Web ­ Emmanuelle POULAIN 25
  • Ergonomie Ecran tactileErgonomie Web ­ Emmanuelle POULAIN 26
  • Ergonomie Ecran TactileErgonomie Web ­ Emmanuelle POULAIN 27
  • Linterface tactile : la gestuelleErgonomie Web ­ Emmanuelle POULAIN 28
  • Gestuelle tactile : le simple touchErgonomie 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 : multitouchErgonomie Web ­ Emmanuelle POULAIN 33
  • REGLES ET CRITÈRES ERGONOMIQUESErgonomie Web ­ Emmanuelle POULAIN 34
  • REGLES ET CRITERES  ERGONOMIQUES Idées eronnées : quest qui a changé ?  Les 3 clics,  Le scroll,  Les internautes lisent en F,  Lergonomie on verra à la fin,...Ergonomie Web ­ Emmanuelle POULAIN 35
  • REGLES DE BASES POUR  OPTIMISER LERGONOMIE 1 – ARCHITECTURE : plan, organisation 7 – ASSISTANCE : aide, 2 – ORGANISATION VISUELLE 8 – GESTION DES ERREURS : prévoir, 3 – COHERENCE sur linformation 9 – RAPIDITE : trouver rapidement linformation 4 – CONVENTIONS : les respecter 10 – LIBERTE : laisser le choix à linternaute 5 – INFORMATION 11 – ACCESSIBILITÉ : facilité 6 – COMPRÉHENSION : mots et 12 – SATISFACTION DE LINTERNAUTE symbolesErgonomie Web ­ Emmanuelle POULAIN 36
  • REGLE 1 – LARCHITECTURE Architecture de linformation : penser la meilleure  manière dorganiser le contenu.Ergonomie Web ­ Emmanuelle POULAIN 37
  • REGLE 2 : Organisation visuelleErgonomie Web ­ Emmanuelle POULAIN 38
  • REGLE 3 : Cohérence La cohérence exploite les apprentissages  inconscients – lapprentissage 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)  linternaute prends confiance...Ergonomie Web ­ Emmanuelle POULAIN 39
  • REGLE 5 : Information Lordinateur informe et prévient linternaute  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 escientErgonomie Web ­ Emmanuelle POULAIN 42
  • REGLE 7 : Assistance Aider et diriger linternaute  Rendre visible ce que linternaute nattends pas,  Utiliser les affordances,Ergonomie Web ­ Emmanuelle POULAIN 43
  • REGLE 9 : RAPIDITÉ Utiliser la loi de FITTS Prendre en compte le besoin de linternaute dun point  de vue fonctionnel EFFICIENCE : faire gagner du temps aux  expérimentésErgonomie Web ­ Emmanuelle POULAIN 46
  • REGLE 10 : Liberté de linternaute LAISSER LE CHOIXErgonomie Web ­ Emmanuelle POULAIN 47
  • REGLE 11 : Accessibilité Un site facile daccè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 dutilité, Critère desthétique, Critère de qualité, Puissance et fiabilité technique =Ergonomie Web ­ Emmanuelle POULAIN 49
  • REGLES DE BASES POUR  OPTIMISER LERGONOMIE 1 – ARCHITECTURE : plan, organisation 7 – ASSISTANCE : aide, 2 – ORGANISATION VISUELLE 8 – GESTION DES ERREURS : prévoir, 3 – COHERENCE sur linformation 9 – RAPIDITE : trouver rapidement linformation 4 – CONVENTIONS : les respecter 10 – LIBERTE : laisser le choix à linternaute 5 – INFORMATION 11 – ACCESSIBILITÉ : facilité 6 – COMPRÉHENSION : mots et 12 – SATISFACTION DE LINTERNAUTE symbolesErgonomie Web ­ Emmanuelle POULAIN 50
  • AUDIT DAPPLICATION WEB : Utilité, utilisabilité, cohérence, lisibilité, … Mise en pratique.Ergonomie Web ­ Emmanuelle POULAIN 51
  • LAUDIT ERGONOMIQUE 1.Utilité : test utilisateurs 2.Repérer les défauts interpages 3.Repérer les défauts intratpages Repères : les règles dergonomie comme guide de  travailErgonomie Web ­ Emmanuelle POULAIN 52
  • AUDIT : répartition des règles Première passe Seconde passe Traduction de lutilité générale Contenu des autres pages dans du site lordre dimportance Architecture de linformation, navigation, structuration du dialogue, enchaînements, interactions Pages incontournables Thèmes incontournablesErgonomie 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 laccessibilité 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 PersonasErgonomie Web ­ Emmanuelle POULAIN 55
  • Concevoir pour lêtre humain  Lêtre humain recherche lémotion,  Lêtre humain a besoin dhumaniser.  Le cerveau doit interprêter le visuel ”beau” : ex le  nombre dor.  Méthode dengagement 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 linternaute : les personas Une personne donnée dans un contexte précis.  Des Personnes,  Des Objectifs,  Des Contextes dutilisationErgonomie Web ­ Emmanuelle POULAIN 57
  • Définir linternaute : les personasErgonomie Web ­ Emmanuelle POULAIN 58
  • Définir linternaute : 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 linternaute : les Personas  INFORMATION SOCIODEMOGRAPHIQUES;  RELATION A LA MARQUE, AUX  CONCURRENTS,  HABITUDES, ENVIES,  OBJECTIFS, MISSIONS SUR LE SITEErgonomie Web ­ Emmanuelle POULAIN 60
  • CONCEPTION WEB :  Contenu, Analyse concurrentielle  Analyse concurrentielle : voir ce qui ce fait pour  souvrir à de nouvelles présentations  Objectifs :  Sinspirer des bonnes idées,  Repérer les conventions de présentations  et de  fonctionnement,  Repérer les conventions terminologiquesErgonomie 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 ailleursErgonomie Web ­ Emmanuelle POULAIN 62
  • Zoning mobileErgonomie Web ­ Emmanuelle POULAIN 65
  • PROCESSUS DE CONCEPTIONErgonomie Web ­ Emmanuelle POULAIN 66
  • RESPONSIVE WEB DESIGN ADAPTABILITÉ : créer un site qui sadaptera à 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  CSS3Ergonomie Web ­ Emmanuelle POULAIN 67
  • SADAPTER 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 lexpérience mobile : langage du toucherErgonomie 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  lorganisation dun site web pour ses utilisateurs  finaux ARCHITECTURE DE LINFORMATION Pour mener un tri : Avoir énuméré lensemble des contenus à  soumettre aux participants, Ces mots permettront de naviguer à lintérieur des  rubriques : architecture du site.Ergonomie Web ­ Emmanuelle POULAIN 70
  • Tri de cartes  1ère étape immersionErgonomie Web ­ Emmanuelle POULAIN 71
  • Tri de cartes  2ème étape : validation et précisionErgonomie Web ­ Emmanuelle POULAIN 72
  • Tri de cartes  3ème étape : GroupementErgonomie Web ­ Emmanuelle POULAIN 73
  • Tri de cartes  4ème étape : nommageErgonomie Web ­ Emmanuelle POULAIN 74
  • Tri de cartes : les limites  Important pour le rubriquage mais ne teste pas la  navigation de lutilisateur final. Différent.  Différent du contexte du site web Méthode utile et importante mais uniquement pour  obtenir la base et indice de larchitecture. Pour la valider : test utilisateurErgonomie Web ­ Emmanuelle POULAIN 75
  • Pour aller plus loin : Lutilité des tests utilisateursErgonomie Web ­ Emmanuelle POULAIN 76
  • TESTS UTILISATEURS Bien les choisirs : utiliser les personas. ● ●Plus ils jouent le jeu : mieux cest... 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 linterface testée.Ergonomie Web ­ Emmanuelle POULAIN 77
  • IMPACT DES TESTSErgonomie Web ­ Emmanuelle POULAIN 78
  • Méthodes Tests utilisateurs  Prototype papier :  Maquette en fonction de laction du testeur,  Avant réalisation de la charte : permet de valider  avant la finalisation des concepts  Prototype semi­fonctionnel :  A lécran : simulation dun site qui marche.  Proche de la situation réelleErgonomie 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 lergonomie 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