FONDAMENTAUX De L'e Gonomie - Net.pf
FONDAMENTAUXde l’ergonomieL’humain et la cognitionLes critères ergonomiquesBonnes pratiquesBons & mauvais exemplesMise en pratiquecorinneleulier@yahoo.frDirectrice UX chez Klee GroupSaison 2017Reproduction interdite1
Corinne LEULIER - KLEE GROUPPsychologue Cogniticienne – ErgonomeDirectrice de l’eXpérience UtilisateurResponsable de la cellule yahoo.frReproduction interdite2
Objectifs du coursReproduction interditeComprendre ce qu’estl’ergonomieApprendre à avoir les « bons »réflexesA quoi ça sert et ce qu’elle peutapporter (techniques et méthodes)Avec des exemples et une mise enpratiqueInteractivitéRègles de fonctionnementC’est un cours interactif, n’hésitez pas àm’interrompre / intervenir / réagirCoupez les portablesVous aurez la présentation3
Vos attentesReproduction interdite4
SommaireAIntroductionFCas pratiqueBDéfinitionsGPour aller plus loinCComment fonctionne-t-on ?DLes critères ergonomiquesEComment faire des outils adaptés ?Reproduction interdite5
DEFINITIONSErgonomie / UXConception Centrée Utilisateurs80/20Reproduction interdite6
Qu’est-ce que l’ergonomie, selon vous ?Reproduction interdite7
Plaisird’utilisationUtilitéSatisfactionOutils interactifssite web, app, logiciel MotivationReproduction interditeUtilisabilitéSentimentd’efficacité8
sfactionOutils interactifssite web, app, logiciel MotivationReproduction interditeUtilisabilité« Roue des usages » – SWOT ergonomiqueSentimentd’efficacité9
Objectifs de l’ergonomie Simplifier & créer de la valeur pour l’utilisateur80/20Reproduction interdite10
Reproduction interdite
Reproduction interdite12
Reproduction interdite13
FRUSTRER UN UTILISATEUR,C’EST QUOI ?Reproduction interdite14
C’EST LUI DEMANDER D’EFFECTUER UNE ACTIONIMPOSSIBLE OU TROP COMPLEXE !.Comme taper son numéro de téléphone.Reproduction interdite
Reproduction interdite16
Reproduction interdite17
Reproduction interdite18
der-ux/Reproduction interdite19
Définitions - ErgonomieDes interventions variées liées à l’homme au travailPoste de travailZones de confortErgonomie physiqueAdaptation aux caractéristiquesphysiologiques et morphologiquesConception d’espaces et de postes detravail, d’outilsErgonomie mentale / cognitive /informatiqueAdaptation des outils aufonctionnement cognitifPrésentation et traitement desinformationsConception des interactions HommeMachineReproduction interditeOrganisation du travail (conceptionde poste de travail, process )Analyse des risques etaccidentologie, maladiesprofessionnellesAmbiances physiques (ambianceslumineuses, acoustiques,thermiques)Design des outilsOptimisation de l’Interface HommeMachine (IHM)Innovation par les usagesApproche disruptive20
Définitions - ErgonomieAdaptation d’un système à une cible, dans un environnement spécifique, pour réaliser des tâches spécifiquesDu grec « Ergon » &« Nomos »Human factors & Analyse dutravailAdaptation au contexted’usageDesign de l’InformationScience de l’Homme autravailMédecine, psychologie,sociologie, sciences de gestion,organisation du travail, design Pluri-disciplinaires2 grands courantsErgonomie anglosaxonne (UxPA)Ergonomie de langue française(SELF)Spécificité del'ergonomieInteractions HommeMachineModifier les outils pour qu'ilssoient plus adaptés auxutilisateursDiscipline scientifique (études) etempirique (observations sur leterrain) au service de l’utilisateurReproduction interdite21
Reproduction interdite22
L’humain et la cognitionCOMMENTFONCTIONNE-T-ON ?On agit comme ça parce qu’on esttous comme ça !Invariants & ComportementsReproduction interdite23
L’être humainSes caractéristiquesReproduction interditeN’AIME PAS CHERCHERLe cerveau estparesseuxFAIT DES ERREURSEt c’est ce qui luipermetd’apprendreFUIT LA DIFFICULTEVa au plus simplepour gagner dutemps24
Répétition du mêmemotif, des formes quis’emboitent les unes dansles autres Soucis de symétrie etd’ économieMais pas seulementLe monde qui nousentoure aussiReproduction interdite25
LA VISIONTRAITEMENT DES INFOSPOUR LES ACTIONSImportance ducontexteReproduction interdite26
Reproduction interdite27
Reproduction interdite28
VISION MEMOIREImportance desimagesReproduction interdite29
VISION MEMOIREImportance desimagesReproduction interdite18
COMPRENDREMémoriser & AgirReproduction interditeConstruire desconnaissancesPrendre desdécisions21
Reproduction interdite32
RAISONNERGénéraliser & ParticulariserReproduction interditeDiagnostiquer la situation pourmettre en place le boncomportementFaire des hypothèses à partir desinformations sur la situation et deses connaissances
EVALUERÉcarts objectif / but atteintDétection des incidentsDétection des impassesÉtablir et utiliser des critèresd’évaluation du résultat del’action Veronika Lenarth / Barcroft MediaReproduction interdite23
MISSION DE L’UX / ERGONOMEIMPACTSPour laconceptionL’Utilisateur sélectionne etstructure ce qu’il perçoit pourdécider de l’action à menerAider l’utilisateur à comprendrel’information présentée, àraisonner, à évaluer lesconséquences de sescomportements possiblesOrganisation des infosGuidageFeedback / repérageReproduction interdite24
Les utilisateurs aiment avoir le pouvoir, utiliser des applications qui leur facilite lavie, avec lesquels ils se sentent efficaces.Ils veulent être performants et atteindre leurs objectifs.Concevoir des applications indispensables aux utilisateurs est notre Graal, maisc’est plus facile à dire qu’à faire.UXTactiques pour undesign optimalLa refonte (ou la conception) d’un site ou d’une application est difficile car elledoit à la fois garder les bonnes pratiques et les avantages de l’ancien système, enaméliorant les points posant problème, les irritants, les ruptures dans le parcoursutilisateur Si la conception est bonne, l’interface doit être transparente pour l’utilisateur : cedernier arrive alors, comme par magie, à atteindre ses objectifs facilement,simplement et en plus, il est content.Reproduction interdite25
Reproduction interdite37
Reproduction interdite38
Conception / Refonte : 8 critères principauxCritères de la qualité ergonomique d’un produit interactif J.M.C Bastien et D.L. Scapin1 Guidage5 Gestion des erreurs2 Charge de travail6 Homogénéité / Cohérence3 Contrôle explicite7 Signifiance des codes et Dénominations4 Adaptabilité8CompatibilitéReproduction interdite26
L’inspection ou audit ergonomiqueAnalyse del’interfaceJugement d’1évaluateur (ou )Basée sur les critères d’évaluationReproduction interdite40
1RENDRE LE TRAVAILPLUS SIMPLESoulager l’effortFaciliter la concentrationSimplifier l’utilisationReproduction interdite41
CRITERESSoulager l’effortFaciliter on interditeGUIDAGE ET REPÉRAGECHARGE DE TRAVAILSIGNIFIANCE DES CODESSavoir à tout moment oùon se trouveConnaître les actionspossibles et leursconséquencesObtenir de l’informationsupplémentaire.Diminuer les risquesd’erreurs.Eviter les distractions.Optimiser les parcours.Pour améliorer le rappel etl’identification des objets.Prévenir les actions nondésirées (gérer les erreurs)Brièveté : concision etlimiter le nombre d’actionspossiblesDensité informationnelleActions MinimalesDes codes et dénominations" signifiants " disposent d’unerelation sémantique forteavec leur référentIncitation (« call to action »)Regroupement en zonesFeedback immédiatLisibilité42
Lorem ipsum dolor sit amet PrécédentSuivantAnnulerPrévisualiserGUIDAGE& repéragePrévisualiserLorem ipsum dolor sit amet PrécédentReproduction interditeAnnulerSuivant43
GUIDAGE& repérageReproduction interdite44
GUIDAGE& repérageReproduction interdite45
GUIDAGE& repérageReproduction interdite46
GUIDAGE& repérageReproduction interdite48
GUIDAGEEncouragementsReproduction interdite49
GUIDAGEAssistanceReproduction interdite51
GUIDAGEPersuasionReproduction interdite52
GUIDAGEAccompagnementReproduction interdite53
Reproduction interdite54
CHARGE DE TRAVAILConcisionReproduction interdite55
CHARGE DE TRAVAILActions minimalesReproduction interdite
CHARGE DE TRAVAILActions minimalesJ’ai perdu mon mot de passeReproduction interdite
CHARGE DE TRAVAILActions minimalesJe dois saisir à nouveau mon numéro fiscalReproduction interdite
CHARGE DE TRAVAILActions minimalesJe me reconnecte à mon profilReproduction interdite59
CHARGE DE TRAVAILActions minimalesJe dois fermer cette fenêtre et rouvrir le site pour me connecterReproduction interdite60
CHARGE DE TRAVAILActions minimalesReproduction interdite
SIGNIFIANCE DESCODESReproduction interdite62
SIGNIFIANCE DESCODESReproduction interdite
2RACCOURCIR LADISTANCE ENTRE LESOBJECTIFS ET LEURATTEINTEPenser FlexibilitéPenser aux cas simpleset aux cas complexesHiérarchiser & prioriserReproduction interdite64
FLEXIBILITECOMPATIBILITEIl faut permettre àl’utilisateur d’atteindreun même objectif. Ensuivant différents modesopératoires.Un système compatibleest un système optimisépour s’adapter au mieuxaux utilisateurs et aucontexte d’utilisation(tâches à réaliser etenvironnement).Le système doit aussiêtre techniquementcompatible (avec lematériel, les logiciels,etc.).CRITERESPenser FlexibilitéPenser aux cas simpleset aux cas complexesHiérarchiser & prioriserReproduction interditeFlexibilité (personnalisation del’interface)Prise en compte del’expérience de l’utilisateur(métier / informatique )HOMOGENEITE /COHERENCEAide à la reconnaissance etau repérage des élémentsvisuelsLe système devientd’avantage prévisibleLes apprentissagesdeviennent plusgénéralisablesLes erreurs sont réduites.Le manque d’homogénéitéest une raison importante derefus d’utilisation.La cohérence permet la miseen place rapide de repères.65
FLEXIBILITEReproduction interdite
FLEXIBILITEReproduction interdite
COMPATIBILITEReproduction interdite
COMPATIBILITEReproduction interdite69http://www.google.fr/flights/
COMPATIBILITEReproduction interdite
COMPATIBILITEReproduction interdite
Proposer lesfonctionnalités utilesselon le contexted’usageReproduction interditeCOMPATIBILITE72
Accueil personnalisé ?COMPATIBILITEReproduction interdite
Accueil personnaliséCOMPATIBILITEReproduction interdite
COHERENCEPour une mêmemarque, une mêmeplate-forme, unmême nts de navigationEspaces blancsStructure de pagesReproduction interdite75
COHERENCEReproduction interdite76
COHERENCEReproduction interditeGarantir la cohérenceà travers les dispositifsgrâce au responsiveweb design77
3VERS UNE INTERFACETRANSPARENTEPermettre à l’utilisateur de sefocaliser sur l’essentielReproduction interdite78
CONCEVOIRVers une interfaceinvisible Reproduction interditeUne interface efficace se fait oublier pour faire la part belle au contenu et aux fonctionnalitésqu’elle présente.Une bonne interface : Est compréhensible en un clin d’œil, sans effort Ne distrait pas l’utilisateur par des parasites visuels (éléments décoratifs) Est claire, organisée et structurée (car cela donne une impression de simplicité, et doncd’efficacité, aux utilisateurs) Guide les utilisateurs directement vers les fonctionnalités les plus importantes.79
4EVITER LES ERREURS DESUTILISATEURSL’humain fait des erreursVotre mission, c’est de vousen rappelerReproduction interdite80
GESTION DES ERREURSCONTRÔLE EXPLICITEIl faut permettre à l’utilisateurd’atteindre un même objectif. Ensuivant différents modesopératoires.C’est la prise en compte par le systèmedes actions explicites des utilisateurs ;Et c’est le contrôle qu’ont les utilisateurssur le traitement de leurs actions.CRITERESPrendre en compteles erreurs et laisserle contrôle auxutilisateursReproduction interditeProtection contre les erreursQualité des messages d’erreurCorrection des erreursActions explicitesContrôle Utilisateur81
PREVENIRLes erreursReproduction interditeGuider les utilisateurs permet d’éviter un grand nombre d’erreurs. Griser les options non actives, les rendre active dès que le process le permet Faciliter l’entrée des données dans les champs (taille de ces derniers proportionnelle au type desaisie attendue, format des dates, boutons raccourcis )82
Les boutons d’action Annuler et OK sonttrop proches et pas assez distincts.Modification des paramètresLes boutons ont été éloignés pour gérer le risque del’annulation et différenciés (couleur et taille).Modification des paramètresVos paramètres de connexion sont les suivants :Vos paramètres de connexion sont les suivants :Nom :DuboisNom :DuboisPrénom :MartinPrénom :MartinProfession :BoxeurProfession :BoxeurAge :29 ansAge :29 ansPREVENIREn cliquant sur le bouton « Je m’inscris » ci-dessous, vous acceptez derecevoir la Newsletter. Elle sera émise tous les mois et vous seraenvoyée à l’adresse email que vous avez-renseigné.AnnulerReproduction interditeOKEn cliquant sur le bouton « Je m’inscris » ci-dessous, vous acceptez derecevoir la Newsletter. Elle sera émise tous les mois et vous seraenvoyée à l’adresse email que vous avez-renseigné.les erreursAnnulerOK
PREVENIRles erreursReproduction interdite
PREVENIRles erreursGitHubReproduction interdite
CORRECTIONdes erreursReproduction interditeDifférents moyens permettent de prendre en compte les erreurs des utilisateurs dès laconception : Lorsqu’une erreur se produit, il faut que « ça se voit ». Pas besoin d’en rajouter : lorsqu’une personne fait une erreur, elle est déjà suffisammentpunie : lui proposer un message clair, précis, sans humour ni agressivité sera apprécié Donner des moyens de corriger facilement les erreurs sera salvateur pour lui.86
CORRECTIONdes erreursReproduction interdite
QUALITE DESMessages d’erreursReproduction interdite
QUALITE DESMessages d’erreursReproduction interdite
QUALITE DESMessages d’erreursReproduction interdite
QUALITE DESMessages d’erreursReproduction interdite
EXERCICEHey, alors, est-ce que c’est« ergonomique », hein ?Reproduction interdite92
Reproduction interdite
Reproduction interdite
Reproduction interdite
Utiliser les critèresergonomiquesModus OperandiReproduction interdite96
Comment s’en servir ?1Comme guide pour l’auditergonomique4Pour argumenter desrecommandations2Comme checklist de find’évaluation5Pour s’affirmer en tantqu’expertLes résultats d’audit :3Pour structurer un rapportd’évaluationReproduction interdite Doivent toujours être accompagnés de recommandations Doivent toujours être présentés en « live » (réunion, visioconférence, conférence téléphonique )
Méthodologie1Découverte2Concept3ContraintesPrise de connaissance du produitObjectifs du produit (usages,business )Matériel, logiciel, cibles,environnement, etc.456OrganisationHiérarchisation / pondération descritères selon le contexteReproduction interditeRéalisation de l’auditPassage en revue de l’ensembledu produitRecommandationsRestitutionSynthèse et rapport détaillé7Présentation9898
Pour résumer Un outil doit d’abord être fonctionnelÊtre utile, rendre serviceÊtre accessible par tous, dans toutes circonstancesUtilisable facilementIntuitif, sans se poser de questionPersuasif, donnant enviePyramide d’optimisationVoir Bryan Eisenberg et John QuartovonTivadar . « a/b always be testing »,2008.Reproduction interdite99
Reproduction interdite100
Reproduction interdite101
Comment donner envie de lire/utiliser unproduit ?Faciliter la perceptionFaciliter la compréhensionExploiter le digitalLectureConcisionMise en reliefIntégration des visuelsOrganisation du contenuContexteHypertexteAnimation du siteSoigner la crédibilitéTon éditorial adaptéMultimédiaDynamiqueRéseaux sociauxEt si possible, faire vivre des ÉMOTIONSReproduction interdite102
OSERL’indécision ne mène nulle parthttps://www.youtube.com/watch?v LAcoBFdGUtwReproduction interdite
Reproduction interdite
SIMPLIFIERSimplifier l’interaction avec l’utilisateurhttps://www.youtube.com/watch?v z6c16T xwl4Reproduction interdite105
Reproduction interdite
ET ETRE MALIN Reproduction interdite107
L’art d’innover malin et efficace !MERCIComment faire transporter sans effort 50 litres d’eau par des enfants ?Reproduction interdite
Au Philippines, une bouteillesolaire dans les bidonvilleshttps://www.youtube.com/watch?v vx ca8kDIiMReproduction interdite
Reproduction interdite110
Reproduction interdite
Veille Quelques sites à voirDes formulaires engageants - http://slaveryfootprint.org/survey/#where do you liveUn concept astucieux - http://anewwarrior.ddbparis.net/?lang frUne narration interactive - http://www.monet2010.com/fr#/voyage/ et http://www.spaceneedle.com/homeUn rapport annuel interactif - lite-et-securitehttp://www.fitbit.com : regarder le site global et sélectionner un produitIkea 3D - catalogue avec réalité augmentéeDispositif KBC astucieux -- http://www.youtube.com/watch?v U76EIiTW LEReproduction interdite112
Mise en pratiqueReproduction interdite113
Checklist rapide - critères ergonomiques Guidage :Sait-on où on se trouve ?dans la pagedans les zones de la page ?Sait-on où cliquer ? (call to action)Y a t-il des feedbacks immédiats et systématiques ?Y at-il une aide contextuelle au besoin ? Charge de travailChasser le bruit / LisibilitéRéduire les risques d’erreurProposer des actions courtes et concises Contrôle expliciteY at il un feedback explicite de validation des actionsL’utilisateur peut-il contrôler lui-même ses actions ? Adaptabilitél’interface s’adapte-t il à différents utilisateurs ?(personnalisation) Gestion des erreursLa saisie de données est-elle optimisée face aux erreurs ?Les messages d’erreur sont-ils de qualité ?(au bon moment, précis )Peut-on corriger les erreurs ? HomogénéitéCodes visuelsNavigationDénominationsProcess Signifiance des codes et dénominationsles libellés sont-ils explicites ?et les icones ? Compatibilitéavec les appareils ? avec les systèmes ?avec la résolution des écrans ? avec les navigateurs ?en mobilité ?
DEBRIEFFORCES ET FAIBLESSES DU SITE OUDE L’APPLI QUE VOUS AVEZ AUDITÉReproduction interdite115
Ne jamais faire une inspection sans donnerdes recommandations d’optimisationElles peuvent être maquettées ou nonEntrainez vous le plus possible à faire desrapports d’inspection / audits flashRapports à montrer aux recruteurs potentielsEtre humbleLes systèmes ont souvent de bonnes raisonsd’être tels qu’ils sont, attentionBien balayer, avant de rendre le rapport, lesdifférentes contraintes de l’applicationNota Bene
Reproduction interdite
Avec quoi jerepars ?Reproduction interdite118
Package checklist Critères ergonomiques utilisées lors de la mise en pratiqueInfographie biais cognitifsReproduction interdite119
Pour aller plus loinReproduction interdite120
vidéos7 principles that make your website more engaginghttp://www.youtube.com/watch?v 3J85SUZFXNMThe ROI of User Experiencehttps://www.youtube.com/watch?v O94kYyzqvTcReproduction interdite121
OutilsOutil en ligne pour audit de site webhttp://capian.co/Quelques checklistshttp://keepwomen.com/static pages/checklist on interdite122
Vidéo à voir Site audit http://www.youtube.com/watch?v vSx2wayTk0gUX Design 1: How To Design a Website: Site AuditReproduction interdite123
Ergonomie et Interaction Design Usability toolbox– http://jthom.best.vwh.net/usability/ Page wikipedia – Interaction design– http://en.wikipedia.org/wiki/Interaction design Usability Professionals’ Association– http://www.upassoc.org/usability resources/index.html The Usability Body of Knowledge– http://www.usabilitybok.org/ Ergolab– http://www.ergolab.netReproduction interdite124
Outils Tools & methods– http://usabilitynet.org/tools.htm Des modèles et exemples à télécharger– http://www.hhs.gov/usability/templates/ Une comparaison d’outils de prototypage Rapid prototyping tools – une revue deDan Harrelson (september 2009)– http://spreadsheets.google.com/pub?key pOa2Uqiakxlry5hNuZm89Eg&output html– r-interfaceprototyping-tools/Reproduction interdite125
Communautés FLUPA – France Luxembourg Usability Professionals’ Association– http://www.flupa.eu SELF – Société d’Ergonomie de Langue Française– http://www.self.org ErgoIHM– http://www.netvibes.com/ergoihm revue de blogs qui traitent de l’ergonomie des IHM(Interactions Homme Machine) ACM SIGCHI – The Association for Computing Machinery Special Interest Group onComputer Human Interaction– http://www.sigchi.orgReproduction interdite126
Une véritable bible pour tout praticienReproduction interdite127
Livres (en anglais)Reproduction interdite128
MerciCréateur de solutions digitales métierReproduction interdite
Flexibilité (personnalisation de l'intefae) Prise en compte de l'expéiene de l'utilisateu (métie / infomatiue ) Le man ue d'homogénéité est une raison importante de efus d'utilisation. La cohérence permet la mise en place rapide de repères. CRITERES Penser Flexibilité Penser aux cas simples et aux cas complexes
pratique du développement sous Java. Téléchar gement www.editions-eni.fr.fr sur www.editions-eni.fr: b Les exemples de code cités dans le livre. b Les corrigés des exercices proposés. Java 11-Les fondamentaux du langage Java 11 Les fondamentaux du langage (avec exercices pratiques et corrigés) Thierry GROUSSARD Thierry RICHARD Java 11
JAVA 8 Les fondamentaux du langage Java Avec exercices pratiques et corrigés Ce livre s’adresse à tout informaticien désirant développer sous Java. Que le lecteur soit débutant ou qu’il ait déjà une première expérience avec un autre langage il trouvera dans cet ouvrage toutes les bases nécessaires pour se familiariser rapidement
Guide pour l’enseignement des éléments fondamentaux de la culture kanak . DOCUMENT DE TRAVAIL Page 2 Le conseil partenarial des langues et de la culture kanak a validé les constituants des programmes relatifs aux éléments fondamentaux de la culture kanak, sur la File Size: 2MB
Liste des 30 droits humains fondamentaux Déclaration universelle des droits de l'homme Liste des 30
CHAPITRE 3 Les concepts fondamentaux de la psychologie du travail et des organisation
Introduction à l'évaluation économique Principes fondamentaux Toute évaluation économique se fonde sur deux principes fondamentaux: 1. Une évaluation économique détermine tant les coûts d'une
COURS BARDON - WORD 2010 / INTRODUCTION 3 WORD 2010 - INTRODUCTION FONDAMENTAUX OFFICE 2010 Pour étudier des méthodes et éléments essentiels, communs aux logiciels Microsoft Office 2010, donc applicables à Word 2010, voir sur notre site www.coursbardon-microsoftoffice.fr le document suivant : FONDAMENTAUX OFFICE 2010
avanzados de Alfredo López Austin, Leonardo López Lujan, Guilhem Olivier, Carlos Felipe Barrera y Elsa Argelia Guerrero con la intención de mostrar si existió ó no el sacrificio humano entre los aztecas y si los hubo con qué frecuencia y crueldad. Por otra parte, he de mencionar que la elaboración de este trabajo ha sido una ardua tarea de síntesis de diferentes fuentes sobre la .
