LIF14 - Ergonomie du Web

LIF14 - Ergonomie du Web Fabien Duchateau fabien.duchateau [at] univ-lyon1.fr Université Claude Bernard Lyon 1 2014-2015 http://liris.cnrs.fr/fabien.duchateau/ens/lif14/ Version originale par Stéphanie Jean-Daubias : http://liris.cnrs.fr/stephanie.jean-daubias/ 1/83

Introduction Rappel d IHM : Utilité = réponse à un besoin Utilisabilité = facilité d emploi 2/83

Une définition de l ergonomie Ergonomie : étude scientifique de la relation entre l homme et ses moyens, méthodes et milieux de travail (sociologie, psychologie cognitive) et l application de ces connaissances à la conception de systèmes qui puissent être utilisés avec le maximum de confort, de sécurité et d efficacité par le plus grand nombre Objectifs de l ergonomie : Améliorer l interaction homme machine Faciliter l utilisation et l apprentissage des logiciels interactifs Boucher A., Ergonomie web : pour des sites web efficaces, Eyrolles (2007). 3/83

Ergonomie au quotidien La machine à café sans gobelets http://www.baddesigns.com/ 4/83

Ergonomie au quotidien (2) 5/83

Définition d un site ergonomique Site web ergonomique = un site qui conduit simplement et rapidement à l information recherchée (capacité à répondre efficacement aux attentes des internautes et à leur fournir un confort de navigation) Aux débuts d Internet, "les bénéfices attendus d une présence [sur Internet] ont créé un empressement qui a bien souvent eu des effets négatifs sur la qualité des sites développés" (Bastien et Scapin, 1998) 6/83

Définition d un site ergonomique Site web ergonomique = un site qui conduit simplement et rapidement à l information recherchée (capacité à répondre efficacement aux attentes des internautes et à leur fournir un confort de navigation) Aux débuts d Internet, "les bénéfices attendus d une présence [sur Internet] ont créé un empressement qui a bien souvent eu des effets négatifs sur la qualité des sites développés" (Bastien et Scapin, 1998) Nécessité de définir des recommandations pour l ergonomie des sites web 6/83

Plan du cours Spécificités du web Un peu de théorie Règles ergonomiques 7/83

Interface classique vs interface web Quelles différences entre ces deux interfaces? 8/83

Interface classique vs interface web (2) Quelques différences : Métaphore (navigation / manipulation directe) Modèle évenementiel (pages web peu réactives) Élements d interface web plus limités : Liens hypertexte indispensables Pas de double clic, glisser-déposer, ou barre de menus avec le HTML... 9/83

Interface classique vs interface web (2) Quelques différences : Métaphore (navigation / manipulation directe) Modèle évenementiel (pages web peu réactives) Élements d interface web plus limités : Liens hypertexte indispensables Pas de double clic, glisser-déposer, ou barre de menus avec le HTML... Potentiel avec les technologies complémentaires du web (e.g., Ajax, Flash) 9/83

Spécificités du Web Notion de site : Ensemble de pages sur un même thème Organisé de manière arborescente page d accueil : entrée principale (mais plus unique) page d orientation : représentation des thèmes du site sous forme textuelle ou graphique (carte) http://www.1cheval.com http://www.univ-lyon2.fr/plan-du-site/ 10/83

Spécificités du Web (2) Navigation : Élément clé (base du protocole HTTP) Liens hypertexte (identifiables par la couleur, le curseur) Barre d outil de navigation http://www.brainlesstales.com 11/83

Spécificités du Web (3) Évolution rapide des technologies : OS Langages Navigateurs Évolution rapide des standards : HTML 2.0 en 1993, HTML 5 en 2008 CSS 1 en 1996, CSS 3 en 2011 Javascript en 1995 12/83

Spécificités du Web (4) http://www.apple.com/ versions 1997, 2000, 2005 et 2009 13/83

Effort d accès à l information Pour accéder à l information : Le résultat doit être atteignable rapidement Le nombre d actions à effectuer doit être minimal 14/83

Spécificités du web Un peu de théorie Règles ergonomiques Surcharge Excès d animations ou de texte qui affecte la compréhension 15/83 http://shihtzu.free.fr LIF4 - IHM // Ergonomie du Web UCBL Lyon 1

Spécificités du web Un peu de théorie Règles ergonomiques Erreurs de liens Des liens "morts" : Liens brisés (pointant vers une erreur 404) Liens factices (menant vers une page en construction) 16/83 LIF4 - IHM // Ergonomie du Web UCBL Lyon 1

Erreurs de liens (2) Des liens inattendus ou hors contexte (l ancre ne décrit pas correctement la page pointée) http://www.angelfire.com/super/badwebs/ 17/83

Incompatibilité Site incompatible en terme de matériel, plateformes, navigateurs (plasticité) 18/83

Non respect des conventions et des standards Non respect des conventions et des standards : Règles ergonomiques Normes W3C http://fr.wikipedia.org/wiki/world_wide_web_consortium http://voiture.org 19/83

Absence de guidage Les internautes ne veulent pas avoir à faire des efforts supplémentaires pour comprendre ce qu est le site, à quoi il sert, comment il fonctionne, et comment accèder au contenu 20/83

En résumé Déception de l internaute : Ne pas trouver l information recherchée Clic sur des liens erronés Charge visuelle trop importante Incompréhension 21/83

Théorie de la Gestalt Théorie de la Gestalt (ou psychologie de la forme) : "notre perception et la représentation mentale traitent spontanément les phénomènes comme des ensembles structurés (les formes) et non comme une simple addition ou juxtaposition d éléments" http://fr.wikipedia.org/wiki/psychologie_de_la_forme 23/83

Théorie de la Gestalt (2) En relation avec la théorie : "le tout est plus que la simple somme de ses parties" Plusieurs formes ñ émergence de nouvelles caractéristiques, qui ne sont dans aucune des formes prises indépendamment Lois applicables de la théorie de la Gestalt : Loi de proximité Loi de similarité (similitude) Loi de distinction figure-fond Loi de continuité visuelle Loi de symétrie Loi du point focal http://www.firstcoastcreative.net/gestalt-theory-graphic-design/ 24/83

Théorie de la Gestalt (3) Loi de proximité : le cerveau tend à rapprocher les choses qui sont proches physiquement (proximité conceptuelle) Le cerveau identifie trois groupes de ronds 25/83

Théorie de la Gestalt (3) Conséquence de la loi de proximité pour une interface web : Rapprocher des éléments avec un rapport fonctionnel Éloigner ceux qui n ont rien en commun Niveaux macroscopique (page) et microscopique http://www.marmiton.org/ http://foursquare.com/ 26/83

Théorie de la Gestalt (4) Loi de similitude : le cerveau tend à regrouper les choses qui se ressemblent (selon leur forme, couleur, taille, comportement, etc.) Le cerveau identifie des ronds pleins et des ronds vides http://en.wikipedia.org/wiki/principles_of_grouping 27/83

Théorie de la Gestalt (5) Conséquence de la loi de similitude pour une interface web : Permet d améliorer l utilisabilité et la compréhension des pages Éviter que deux choses sans rapport aient une même caractéristique (e.g., du texte de la même couleur que les liens) http://enercoop.fr/ 28/83

Loi de Fitts A l origine, étude pour l amélioration ergonomique des cockpits d avion Loi de Fitts : "le temps nécessaire pour atteindre une cible dépend de sa taille et de la distance à laquelle elle se trouve" Deux notions que l on peut appliquer aux interfaces web, et plus particulièrement aux liens hypertexte (cibles) : Taille Distance (à partir du point de départ du mouvement) 29/83

Loi de Fitts (2) Beaucoup de clics à côté d un lien (erreur inconsciente car corrigée directement) Taille des éléments cliquables : augmenter leur taille réelle (texte entre les balises <a></a>) et virtuelle (environnement) http://www.beampulse.com/ http://www.credit-cooperatif.coop/ 30/83

Loi de Fitts (3) Distance d une cible : quelques conventions Pas d interface en largeur Sur un formulaire, le bouton de soumission est proche du dernier élément saisi Proximité immédiate (raccourci clavier et menu contextuel par clic droit) http://www.clickdensity.com/ 31/83

Concept d affordance Affordances : possibilités d action suggérées par les caractéristiques d un objet (signes implicites ou explicites) 32/83

Concept d affordance (2) Au niveau des interfaces web, les affordances permettent d optimiser l utilisabilité : Distinguer ce qui est cliquable (liens primaires) de ce qui ne l est pas Inciter à interagir avec un élément Dimensions exploitables : forme libellé couleur localisation dans l interface ajout d élements confortant un lien comportement 33/83

Nombre magique de Miller Dans les années 1950, expériences de Miller : la mémoire de travail peut contenir 7 objets (plus ou moins 2) Expériences plus récentes : probablement 3 ou 4 objets Au niveau des interfaces web, limiter le nombre d objets à mémoriser (e.g., menus) http://fr.wikipedia.org/wiki/george_armitage_miller http://onlinelibrary.wiley.com/doi/10.1002/piq.20099/abstract 34/83

Loi de Hick Loi de Hick : modèle décrivant le temps nécessaire à un-e utilisateurice pour prendre une décision. Le temps est proportionnel au nombre et à la complexité des options proposées Mêmes conséquences sur les interfaces web que le nombre de Miller http://fr.wikipedia.org/wiki/loi_de_hick http://www.doctordisruption.com/ 35/83

En résumé Résultats de recherche en psychologie et cognition applicables aux interfaces web (mais aussi aux applications bureau) : Théorie de la Gestalt (lois de proximité et similitude) Loi de Fitts (éléments cliquables) Affordances (indices d utilisation) Nombre de Miller et loi de Hick (menus) 36/83

Règles ergonomiques Douze recommandations pour des interfaces web ergonomiques : Pour la conception et l évaluation Satisfaire complètement une règle peut en contraindre une autre Amélie Boucher, Ergonomie Web, 3 eme édition, Eyrolles (2011) 38/83

Architecture Architecture : le site est organisé de manière intuitive pour l internaute Travail de catégorisation et structuration en groupes (ou rubriques, catégories) : Éléments qui partagent des caractéristiques communes Créés selon le contenu et les fonctionnalités Ne pas se baser uniquement sur ses idées 39/83

Architecture Architecture : le site est organisé de manière intuitive pour l internaute Travail de catégorisation et structuration en groupes (ou rubriques, catégories) : Éléments qui partagent des caractéristiques communes Créés selon le contenu et les fonctionnalités Ne pas se baser uniquement sur ses idées Quelle technique de recueil d informations est adaptée à la catégorisation et structuration? 39/83

Architecture (2) En pratique : choix d une architecture adaptée Quatre architectures : Séquentielle Séquentiel Hiérarchique Hiérarchique BDD (type grille) Réseau (type web) BDD Réseau 40/83

Architecture (3) Choix de l architecture et découpage de l information selon : Le public (BDD et réseau pour public averti) Les contenus (séquentiel pour contenu simple) Architecture courante : hiérarchique Composition d un site : Page d accueil Pages de contenus rpages d entrée, de sorties 41/83

Architecture (4) En pratique : mettre en avant les pages ou fonctionnalités les plus recherchées par les internautes 42/83

Architecture (5) Dans ce menu, quels moyens sont utilisés pour mettre en avant certains contenus? http://www.zalando.fr 43/83

Architecture (6) En pratique : les menus aident l internaute à naviguer dans les contenus Caractéristiques des menus : Signifiant (intitulé du menu clair et précis) Complémentaire (tout le contenu doit être accessible via le menu, pas de contenu orphelin) Exclusif (éviter les recoupements entre rubriques, comme "sport collectif" et "sport de ballon") Éventuellement des liens transversaux pour outrepasser l arborescence du site 44/83

Architecture (7) Quel est le problème dans ce menu et sous-menu? http://www.leboncoin.fr/ 45/83

Organisation de la page Organisation de la page : la page est bien organisée visuellement 46/83

Organisation de la page (2) En pratique : éviter la surcharge d informations Chaque élément doit être traité mentalement Utilisation de blocs ou zones aérées Clarté et simplicité http://www.sophienavas.fr/blog/2007/10/ 47/83

Organisation de la page (3) En pratique : réduire la quantité de mots au niveau navigationnel Libellés concis pour le "scan visuel" (repérage de mot-clés) Texte "normal" pour la lecture des zones de contenus http://www.cnc.fr/ 48/83

Organisation de la page (4) En pratique : réduire les éléments d interaction et de navigation Afficher les éléments optionnels quand c est nécessaire Supprimer les éléments interactifs inutiles http://www.allocine.fr/ 49/83

Organisation de la page (5) Densité informationnelle (quantité d informations à analyser) : Hétérogénéité visuelle (typographie, couleurs) Images de fond (identité du site, calques) Animations (bruit visuel qui altère la concentration) http://www.banff.fr 50/83

Organisation de la page (6) En pratique : réduire la densité informationnelle par le clic Remplacer des informations lors d un clic de souris (e.g., onglets, accordéons) Masquer des informations de second plan en accordéon 51/83

Organisation de la page (7) En pratique : réduire la densité informationnelle par le survol Remplacer des informations au survol de la souris Faire apparaître des informations au survol de la souris 52/83

Organisation de la page (8) Types de publicité (externe) : Intersticiel Popup Bannières (déroulantes) Bannières interactives Liens textuels Outils fonctionnels http://ergolab.net/articles/elements-d-interface 53/83

Organisation de la page (9) En pratique : la publicité ne doit pas gêner l internaute Réserver des zones hors contenu pour la publicité : Les internautes ignorent ce qui ressemble à de la pub (phénomène de "banner blindness") Limiter les effets (défilement ou clignotement de texte, couleurs, animations, vidéos, sons, etc.) Simplicité : Pas de technologies au détriment du contenu Pas d appel à des plug-in sans besoin 54/83

Cohérence Cohérence : le site capitalise sur l apprentissage interne Acquisition d un modèle mental sur le site : Navigation Interactions Éléments graphiques 55/83

Cohérence Cohérence : le site capitalise sur l apprentissage interne Acquisition d un modèle mental sur le site : Navigation Interactions Éléments graphiques Quel outil permet d harmoniser l ergonomie d un site? 55/83

Cohérence Cohérence : le site capitalise sur l apprentissage interne Acquisition d un modèle mental sur le site : Navigation Interactions Éléments graphiques Quel outil permet d harmoniser l ergonomie d un site? La charte ergonomique (qui ne doit pas contraindre la créativité!) http://references.modernisation.gouv.fr/charte-internet-de-letat 55/83

Cohérence En pratique : appliquer la cohérence à plusieurs niveaux Localisations (e.g., menus) Libellés des concepts (e.g., caddie/panier) Formats de présentation (e.g., autopromotion/publicité) Interactions (e.g., même action pour un événement) http://www.nu-tronics.com/ 56/83

Standards et conventions Respect des standards et conventions : le site capitalise sur l apprentissage externe Prendre en compte l expérience et les habitudes acquises par les internautes sur d autres sites Standard si utilisé par plus de 80% des sites Convention si utilisé par plus de 50% des sites http://www.bidochon.fr/ 57/83

Standards et conventions (2) En pratique : respecter les conventions de localisation, e.g. : Logo en haut à gauche, sur toutes les pages Moteur de recherche en haut Menus de navigation (en haut horizontal, ou à gauche vertical) Mentions légales dans le pied de page 58/83

Standards et conventions (3) En pratique : respecter les conventions de vocabulaire et d interaction, e.g. : Accueil, plan de site, panier, etc. Le survol d un lien change le curseur de la souris Un clic droit fait apparaître un menu déroulant http://spiralconnect.univ-lyon1.fr/ 59/83

Information Information : le site informe l internaute et lui répond Chaque page doit inclure des informations permettant de comprendre ce qui est proposé sur le site : Logo Slogan/baseline Libellés de navigation 60/83

Information (2) En pratique : fournir suffisamment d informations à l internaute, par le contenu, mais aussi par la présentation (e.g., couleurs) et le comportement (e.g., survol) Informations pour la navigation barre de navigation visible en permanence localisation sur le site (fil d Ariane) pages déjà consultées Informations ponctuelles et au bon moment Informations de persuasion (e.g., montant restant pour avoir des frais de port gratuit) 61/83

Information (3) En pratique : prévoir le feedback (immédiat) Une action de l internaute génère une réponse (visuelle) Penser aussi au feedback entre deux pages très similaires ou avec un rechargement partiel de page http://www.horde.org/apps/webmail 62/83

Information (3) En pratique : prévoir le feedback (immédiat) Une action de l internaute génère une réponse (visuelle) Penser aussi au feedback entre deux pages très similaires ou avec un rechargement partiel de page Sélectionner une langue traduit instantément la page http://www.horde.org/apps/webmail 62/83

Compréhension Compréhension : choix pertinent des mots et symboles Symboles et codes compréhensibles Utilisation du vocabulaire http://www.bibou.org/donjon/ http://www.openrunner.com/ 63/83

Compréhension (2) En pratique : le vocabulaire est compréhensible (non technique ou expert), orienté utilisateurice, et précis Vocabulaire conventionnel si possible Éviter les métaphores sur les concepts métier http://www.bioalaune.com/ 64/83

Assistance Assistance : le site aide et dirige l internaute Penser aux affordances! Aide implicite (e.g., texte d aide, auto-complétion) Aide explicite (e.g., bulles d aide, choix) Simplifier le modèle d interactions (e.g., bouton "recalculer" après une mise à jour du panier) 65/83

Assistance (2) En pratique : le site s adapte aux personnalisations demandées par l internaute (adaptabilité) Examples : Agrandissement de la taille de la police Changement de couleur d arrière plan 66/83

Assistance (3) En pratique : idéalement, le site s adapte sans intervention de l internaute (adaptativité) Personnalisation de l affichage Important pour les dispositifs mobiles http://fr.wikipedia.org/wiki/site_web_adaptatif http://designmodo.com/responsive-design-examples 67/83

Gestion des erreurs Gestion des erreurs : le site prévoit que l internaute va se tromper Principalement au niveau des formulaires Éviter de commettre des erreurs Faciliter la compréhension pour corriger les erreurs Gestion des erreurs sur rememberthemilk.com 68/83

Gestion des erreurs (2) En pratique : empêcher les erreurs par la présentation et le fonctionnement du formulaire Champs obligatoires, libellés, légendes et taille adaptés, type de composant pertinent Utiliser les affordances (e.g., entre boutons effacer et soumettre) Confirmation pour les actions risquées ou possibilité de retour en arrière Limiter la saisie de données erronées par des contraintes (e.g., une liste déroulante) Valider les données à la volée 69/83

Gestion des erreurs (3) En pratique : l internaute doit repérer, comprendre et corriger facilement ses erreurs Utiliser le format de présentation pour repérer les champs erronés (e.g., surbrillance, couleur rouge, message général si long formulaire) Expliquer l erreur de façon précise et courtoise (un message par type d erreur) Faciliter la correction des erreurs présenter toutes les erreurs sur la page afficher les messages d erreur dans la page prévoir le pré-remplissage après soumission, même pour les valeurs erronées 70/83

Gestion des erreurs (4) 71/83

Rapidité Rapidité : l internaute ne perd pas de temps Temps nécessaire pour atteindre un but/information : Règle des 3 clics non réaliste Appliquer la loi de Fitts Simplifier le modèle d interactions http://netvibes.fr/ 72/83

Rapidité (2) En pratique : Simplifier les interactions et éviter les actions inutiles Agrandir les cibles (e.g., liens, boutons de soumission) Offrir des besoins fonctionnels (e.g., conversion de prix en devises) Pré-remplir des champs (e.g., date du jour) Personnaliser les besoins fonctionnels (e.g., raccourcis clavier) Proposer un mode d interaction orienté efficience 73/83

Liberté Liberté : c est l internaute qui commande Laisser le contrôle sur le site, à différents niveaux : Navigation Actions Contenu http://dontclick.it/ 74/83

Liberté (2) En pratique : respecter les contrôles conventionnels, laisser la possibilité de contourner le système, limiter l intrusion Retour à l accueil en un clic, URL explicite Bouton "précédent" fonctionnel, clic droit actif, possibilité de revenir en arrière Possibilité de bloquer une animation, vidéo, son Ne pas décider à la place de l internaute (e.g., modification de valeurs, obligation de regarder une publicité) 75/83

Accessibilité Accessibilité : le site est facilement accessible par toustes Accessibilité visuelle ("vision moyenne" et handicaps) Accessibilité technologique (plasticité) http://www.camillejourdain.fr/ 76/83

Accessibilité (2) En pratique : offrir des alternatives Détecter l environnement de l internaute et prévenir si insuffisant Version dégradée du site (e.g., image au lieu du Flash, pas de Javascript) Texte alternatif aux images Choix adapté du contraste, des couleurs, des polices, etc. http://fr.wikipedia.org/wiki/accessibilit%c3%a9_du_web Web Accessibility Initiative, www.w3.org/wai/ 77/83

Satisfaction de l internaute Satisfaction : un-e internaute satisfait-e reste sur le site Mesure de la satisfaction selon : Critère d utilité (contenus et fonctionnalités) Esthétique et expérience utilisateurice Qualité du service (e.g., désinscription d une newsletter) Puissance et fiabilité (e.g., bugs, lenteurs, liens cassés) 78/83

En résumé (1) 1. Architecture : le site est organisé de manière intuitive 2. Organisation de la page : la page est bien organisée visuellement 3. Cohérence : le site capitalise sur l apprentissage interne 4. Conventions : le site capitalise sur l apprentissage externe 5. Information : le site informe l internaute et lui répond 6. Compréhension : choix pertinent des mots et symboles 7. Assistance : le site aide et dirige internaute 8. Gestion des erreurs : prévoir que l internaute se trompe 79/83

En résumé (2) 9. Rapidité : l internaute ne perd pas de temps 10. Liberté : c est l internaute qui commande 11. Accessibilité : le site est facilement accessible par toustes 12. Satisfaction : un-e internaute satisfait-e reste sur le site 80/83

Bilan Ergonomie spécifique pour les interfaces Web, mais basée sur des théories générales Les règles d ergonomie sont des lignes directrices, source d influence en conception et outil d évaluation Appliquer une règle peut en contraindre d autres Compléter avec les règles d ergonomie (Bastien et Scapin, Meinadier, Coutaz, Nielsen, etc.) 81/83

Ressources Quelques ressources : Amélie Boucher, Ergonomie Web, 3 eme édition, 2011, éditions Eyrolles (disponible à la BU) Conférences filmées, articles (cf. éditions précedentes) http://www.paris-web.fr/ Articles et revues de livres http://www.ergolab.net/ Bonnes pratiques pour le Web http://ergonomie-web.studiovitamine.com/ 82/83

Des questions, commentaires? 83/83