Ergonomie S. Metz Master VCIel 2009/ /09/09. I - Ergonomie et Sites Web

Transcription

1 I - Ergonomie et Sites Web Un site web, comme un document, est une interface Axe 3 La conception en ergonomie L ergonomie s applique aussi aux sites web I- Ergonomie et Sites Web / II- Ergonomie et Conception Web Cours d ergonomie - S. Metz Master VCIel L utilisateur est au centre 1 2 Document et site web : similitudes Caractères communs par exemple la question de la lisibilité Document ou site web = interface Référentiel cognitif Problèmes spécifiques Nécessité de comprendre les règles générales Un même objectif : réduire l effort que fait le lecteur ou l utilisateur pour reconstruire le sens Un document ou un site web 3 4 1

2 Théorie de l action de Norman (1986) Exemple : faire un café Pour mieux comprendre l ergonomie des sites web il faut réfléchir à ce qu est une action. Référons-nous à Norman Toute action est un cycle itératif en 2 temps : une exécution et une évaluation comprenant plusieurs phases Les phases : la personne a un but elle fait un plan qui donne lieu à des actions elle perçoit les modifications de l environnement elle les interprète en fonction de ses connaissances elle compare le résultat avec le but visé Exercice : appliquer le modèle de Norman à la préparation d un café 5 6 Théorie de l action de Norman appliquée au dialogue homme-machine La théorie de Norman fournit un cadre théorique de compréhension de la complexité d utilisation d une interface homme-machine Le cycle itératif en 2 temps : l utilisateur exécute une commande puis il évalue la modification obtenue par rapport au but qu il avait défini. Faire communiquer humains et machines C est identifier les facteurs de la reconstruction du sens, les parties du processus de communication hommemachine dont le concepteur doit tenir compte C est distinguer trois «distances» entre homme et machine qu il s agit de réduire : distances opératoire, articulatoire et sémantique 7 8 2

3 Les 3 distances dans les sites Web Cycle de Norman 1 La distance opératoire : celle qui capture les aspects relevant de la lisibilité, de la suggestivité ou des perturbations apportées par certains effets visuels La distance articulatoire : celle qui correspond à la structure des pages, à la structure de navigation indiquant à l utilisateur les actions possibles et leurs effets La distance sémantique : celle relevant du sens du contenu, de la rhétorique utilisée par le biais du langage textuel ou visuel, de la cohérence 9 10 Cycle de Norman 2 : «evaluation gap» Commentaire du schéma La transmission se situe au niveau de la perception, elle renvoie donc à la distance opératoire L interprétation des informations amène l utilisateur à l action, cela renvoie à la distance articulatoire située au niveau sémantique correspond à la distance sémantique L effort que doit faire l utilisateur pour reconstruire le sens est fonction de la somme des distances opératoire, articulatoire et sémantique. L utilisateur passe de la forme au sens Les 3 distances sont réparties dans les différents processus Il passe de la perception des informations visuelles à la compréhension, en passant par une organisation des informations transmises

4 Intégrer l utilisateur au centre du processus de conception Site web et reconstruction du sens Norme ergonomique du processus de conception centré utilisateur (Norman) Objectif : réduire l effort de l utilisateur (comme celui du lecteur d un document) pour reconstruire le sens Réduire le «evaluation gap» au sens de Norman Passage de la forme au sens Sites web : constatations Difficulté à trouver l information cherchée Manque d organisation des pages et sites Pages en construction Présence de liens sans objet II- Conception et sites web Les étapes de la conception / / Manque d aide à la navigation Noms de liens trompeurs Téléchargement difficile

5 Problèmes liés à une méconnaissance de l utilisateur Problèmes liés à une mauvaise conception Pas d identification des besoins Pas de prise en compte des caractéristiques des utilisateurs Pas d identification et analyse de la tâche à réaliser Consultation réduite des pages Commentaires critiques Méconnaissance de l environnement de consultation Conception ergonomique de sites web C est la réponse aux constatations précédentes C est une notion constante en IHM C est ne pas se contenter de lister des principes de conception et donner des recettes, des «guide lines» C est situer les mécanismes dans un cadre cognitif C est comprendre les fondements Objectifs du site web Le site est le moyen/outil que va utiliser l utilisateur pour atteindre son objectif, réaliser sa tâche C est aussi un système d information L utilisateur est dans un contexte spécifique et a des connaissances spécifiques Le site doit être à la fois : Utilisable Une aide à l activité pour atteindre la tâche 19 Exemple : Même si le site de la SNCF permet de ne pas se déplacer (aider l activité pour réaliser la tâche), s il n est pas utilisable la personne se déplacera. 20 5

6 Les étapes de la conception Étapes de conception d un site 1) Identification des objectifs 1) Identification ou explicitation des objectifs 2) Identification des propriétaires et des auteurs du contenu des pages web 3) Identification des utilisateurs potentiels et leur environnement matériel et logiciel d accès au web 4) Description des tâches utilisateurs et compréhension des besoins Première étape de la conception Ex: partager l information, collaborer, faire du commerce électronique, présenter des produits, proposer des démonstrations Facilite la planification de la présentation générale et de l organisation du site Les étapes de la conception 2) Identification des propriétaires et auteurs du contenu Les étapes de la conception 3) Identification des utilisateurs potentiels Concerne les décisions prises quant à : La nature des informations qui seront rendues disponibles sur le web La maintenance du site après sa création Les personnes «propriétaires» et les auteurs devraient être impliquées dès le début du processus de conception La clientèle internet peut être différente de la clientèle habituelle, rencontrée dans un magasin Questionnaires Profil professionnel (emploi, fonction, resp.) Matériel et logiciel de navigation Habitudes (lecture de doc à l écran ou imprimés, temps consacré à la consultation) Préférences (ce qu ils aiment sur un site ) Question formulées pour aider le concepteur

7 Les étapes de la conception 4) Description des tâches-utilisateurs et compréhension des besoins Les étapes de la conception / 4- description des tâches et compréhension des besoins 4)1- Comment expliciter les attentes et les besoins? Permet d assurer une bonne compatibilité entre les tâches utilisateurs à réaliser (trouver un produit dans le cas d un site commercial) et l organisation et la présentation du contenu sur le site. Techniques pour expliciter les attentes et les besoins des utilisateurs: définition du contenu et identification des tâches Hiérarchisation des tâches Les forums de discussion Les questionnaires Les exercices de construction de scénarios (les participants doivent décrire les raisons qui pourraient les amener à visiter le site prévu et faire une liste des objectifs de consultation, c està-dire expliciter ce qu ils aimeraient y faire et comment ils aimeraient procéder) L analyse des sites concurrents (le concepteur s attarde sur le contenu et sur les services qui peuvent constituer une valeur ajoutée) Les étapes de la conception / 4- description des tâches et compréhension des besoins 4)2- Hiérarchisation des tâches Les étapes de la conception / 4- description des tâches et compréhension des besoins Structuration du site A- Technique du tri de cartes Les tâches les plus importantes devront être directement accessibles à partir de la page d accueil et de n importe quel endroit dans le site Structuration du site: A- technique du tri de cartes B- étude du caractère intuitif des icônes Les futurs utilisateurs doivent trier et regrouper des cartes sur lesquelles diverses informations sont inscrites (services offerts par le site, informations qu il doit contenir), selon leur degré d affinité ou de similitude. Les utilisateurs doivent nommer les regroupements: proposer des noms permettant de les désigner et organiser ces groupements les uns par rapports aux autres Analyse de ces groupements permet de réfléchir à l organisation des informations sur le site

8 Les étapes de la conception / 4- description des tâches et compréhension des besoins Structuration du site B- Caractère intuitif des icônes Organisation du site Présentation aux participants des icônes (avec et/ou sans légende selon que l on veut tester l icône elle-même ou l icône et sa légende) Demander ce qu elles signifient et représentent Identification des icônes pour lesquelles la signification attribuée par les utilisateurs diffère de celle projetée par les concepteurs Permet de faire apparaître des pages types telles que la page d accueil; des pages d identification, d index, de recherche, des pages personnelles Permet d identifier chaque page, son contenu et ses liens avec d autres pages Doit être présentée clairement à l utilisateur de manière à bien le guider dans son exploration et à éviter qu il se perde Ces tests peuvent être réalisés dès le maquettage Conception et développement Attention particulière sur: Compression des images (temps de téléchargement) Métaphores choisies (compréhensibles par les utilisateurs visés) Conception des pages individuelles (lecture et recherche d informations facilitées) Pré-requis technologiques des techniques choisies (utilisables par un éventail large d utilisateurs) Caractère international des utilisateurs (problèmes liés aux différences culturelles, linguistiques et régionales) Nous allons voir de plus près : 1. La Conception des pages individuelles : l écriture web 2. L Évaluation Évaluation ergonomique

9 1- L écriture web Écrire sur le web «Style d'écriture propre au Web, proche du multimédia, qui se caractérise par l'hypertexte et l'interactivité, dont le rôle est de maximiser la lisibilité et la perception des informations proposées dans un site Web, en tenant compte des contraintes d'espace et d'affichage qui y sont rattachées.» C est avant tout écrire C est adapter le contenu et le style aux objectifs du site et aux utilisateurs visés C est adapter ce contenu aux spécificités du média Internet : non-linéarité, hypertexte, accès à des bases de données, multiplicité des médias C est une nouvelle écriture, l écriture multimédia mise en scène au travers du design et de l ergonomie Le Web est «vivant»! 4 types de variables (Lompré) Vous Ouverture du site Web Mise à jour du site Web Le «Temps» T1 T2 T3 T4 L'internaute Première visite Nouvelle visite Sa réaction Le contenu de votre site Que trouve-t-on? Quoi de neuf? Information de référence Information d'actualité Permettent de situer le texte : titre, logo, mise à jour Rubriques cliquables classées par thèmes Ressemblent au sommaire d un livre Donnent des explications des différentes catégories ou rubriques : figurent surtout sur les pages secondaires Répondent à des besoins des utilisateurs, permettent de rechercher directement des opérations sans dérouler l ensemble des pages : aides, index. 36 9

10 Les règles éditoriales Écrire sur le web implique de suivre les règles communes à tous les médias en particulier celles de la presse écrite et de l édition Écrire sur le web implique d utiliser les formes et formats s inspirant d exemples existants : brève, article de fond, chronique, encadré, interview, enquête Écrire sur le web implique d écrire correctement : bon usage de la langue, absence d erreurs de grammaire ou d orthographe et clarté du message Les balises Titres Sous-titres Sur-titres Chapeaux Accroches Titres de rubrique Légendes d illustration Tables des matières Objets des s Icônes et barres de navigation Le rôle des balises Elles servent à fournir rapidement à l utilisateur l information la plus pertinente Elles servent à animer un site Elles servent à attirer l attention 39 Exigences de l utilisateur (Forrester research) L utilisateur considère important Qualité du contenu 75% Facilité d utilisation 66% Rapidité de téléchargement 58% Fréquence de mise à jour 54% Promotions 14% Marque 13% Technologie 12% Jeux 11% Options d achat 11% Chat 10% Autres 6% 40 10

11 Le design du site(style du site) Logo, barre de navigation et boutons Charte graphique du fond de page, des textes et des liens Type de police de caractère Articulation textes/images Organisation de l écran : en-tête et bas de page, titres Contenu *Organisation*Graphisme*Ergonomie*Contexte Huit critères de base Qualité visuelle de la page d accueil Qualité et pertinence de l information présentée Convivialité de l environnement (métaphores, images ) Organisation de l information Interactivité du site Rapidité d accès Aisance de la navigation Présence de liens complémentaires Fonctionnalités Actualités, événementiel Explorer Une sélection de ressources Internet (sites web) en rapport avec les langues de la Méditerranée. Chercher Moteur de recherche sur l ensemble des contenus disponibles sur le site et sur Internet. Apprendre Informations à propos de l apprentissage des langues et proposition de modules de formation à distance. Langues Entendre Accès audio à des ressources dans les langues étudiées. Lexique. Expression courante. Acheter Boutique en ligne sous la forme de partenariat avec des commerces spécialisés (librairies, etc.). Thématiques Pays Lire et Voir Accès à des ressources écrites dans les langues étudiées. Graphie. Textes, poésie Participer La participation des différents acteurs et utilisateurs est l axe principal du dispositif. Cette participation pourra se faire de nombreuses manières. Comprendre Contenus de référence (fiches de description multimédia des langues). Partenaires

12 Doit se réaliser en adéquation à l analyse du travail Les grilles d évaluation doivent être utilisées comme des guides à l activité d évaluation et non comme des recettes. Outils pour l évaluation Les critères de Bastien et Scapin La cheklist de Nogier : appliquée pour la comparaison de deux sites Les conseils de Nielsen La normalisation ISO et AFNOR Critères ergonomiques et recommandations pour la conception et l évaluation de produits informatiques La cheklist de Nogier (2005) Guidage Charge de travail Contrôle explicite Adaptabilité Gestion des erreurs Homogénéité/cohérence Signifiance des codes et dénominations Compatibilité Points à analyser sous forme de questions 1. Définition et ciblage 2. Structure 3. Navigation 4. Composants de navigation 5. Liens 6. Organisation de la page 7. Page d accueil 8. Graphisme 9. Texte

13 Méthodes d évaluation Mesure du degré d utilisabilité du logiciel / Les méthodes L utilisabilité Norme ISO Efficacité : taux de réussite de la tâche En dehors du contexte d utilisation : Evaluation par inspection En situation d utilisation : Evaluation coopérative Test d utilisabilité Efficience : quantité de ressources nécessaires pour réaliser cette tâche Satisfaction : degré de satisfaction des utilisateurs Exemple pour la saisie de formulaires Efficacité : 95% des formulaires sont saisis correctement Efficience : l utilisateur met moins de trois minutes pour remplir un formulaire Satisfaction : moins de 10% des utilisateurs se plaignent de problèmes de fonctionnement / Les méthodes par inspection Chaque composant du système est analysé au regard d une grille de critères ergonomiques (Nogier, 2005) Principes ergonomiques Grille de critères Analyse Composants Logiciel Site web / Les méthodes coopérative Analyse durant la situation : observation de l utilisateur Méthode : Verbalisation de l utilisateur : l utilisateur «pense» à voix haute ce qu il fait au cours de l activité qui le mène à l objectif visé Questions à l utilisateur : «comment faîtes-vous?», «que signifie ce message?», L observateur laisse l utilisateur se tromper, ne l aide pas sauf en cas de blocage

14 / Les méthodes / Les méthodes Test d utilisabilité (Nielsen, 93) 1/2 «Expérimentation» en situation naturelle Test d utilisabilité (Nielsen, 93) 2/2 Le test permet d évaluer l outil, pas l utilisateur L observateur demande à l utilisateur de réaliser des activités typiques de l outil Exemple : «Acheter un billet de train sur internet», ou encore «Commander des fleurs pour un mariage et les faire livrer au domicile» L observateur note les erreurs et difficultés des utilisateurs Préparation de l expérience Mise au point de scénarios d utilisation Analyse de l erreur, d indicateurs de l activité pour la création d une grille d observation Définir un objectif précis par séance de test Choisir un panel d utilisateur représentatif Cinq utilisateurs suffisent Version 2 Version 3 Version 1 Test 1 Test 2 Test 3 5 util. 5 util. 5 util. Etapes de la conception amélioration de l adaptabilité / Les méthodes Types d évaluation : Avantages / Inconvénients Evaluations! Avantages! Inconvénients! Par inspection! Degré de détail de l analyse : l ensemble de l interface est évalué! Bon moyen pour dégrossir le problème! Coopérative! Test d utilisabilité! Implication de l utilisateur, placé dans une situation réelle de travail! Identification de problèmes d utilisabilité avec compréhension du mode pensée! Observation de l utilisateur en contexte situation! Ne se réalise pas en situation naturelle, seul jugement de l évaluateur! Manque d exhaustivité, on ne peut pas observer l utilisateur sur toute l interface! Difficile d observer en situation naturelle! Préparation lourde : protocole expérimental et grille d observation! L enfer est le pavé de bonnes intentions En tant que concepteur, il nous est difficile d avoir le même point de vue que l utilisateur. C est en voulant bien faire qu on en fait trop et que les plus grosses erreurs sont commises

15 L utilisateur a toujours raison L utilisateur n a pas toujours raison Il connaît le domaine dans lequel il se sert de l outil - Ses souhaits sont généralement justifiés car ils répondent à des besoins opérationnels Pourtant, dans certains cas, ce que l utilisateur pense être bon pour lui n est pas ce qui lui permettra d être performant. Un test d utilisabilité permet de montrer qu il fait fausse route L utilisateur n est pas le développeur Le développeur n est pas l utilisateur Dans un projet chacun se partage le travail selon ses compétences : c est aux équipes de développement de prendre les décisions relatives au logiciel L équipe de développement ne connaît pas suffisamment le domaine applicatif et la tâche pour se mettre à la place de l utilisateur. Lorsque le concepteur pense à la place de l utilisateur, il a de fortes chances de se tromper

16 Le PDG n est pas l utilisateur Le mieux est l ennemi du bien Bien qu il soit le client, le PDG n utilise généralement pas le logiciel. Son point de vue n a donc pas le même poids que celui de l utilisateur final. En voulant bien faire, on a tendance à en faire trop, à offrir beaucoup plus de fonctionnalités que l utilisateur n en a réellement besoin. Cette profusion rend le logiciel complexe et difficile à utiliser. Il est préférable de faire simple et pertinent Le détail est essentiel L aide n en est pas une Un détail n est jamais à négliger en terme d utilisabilité, car ce sont souvent de petits détails, se répétant à chaque utilisation du logiciel, qui empoisonnent la vie de l utilisateur. L utilisateur se sert de l aide parce qu il ne comprend pas le fonctionnement du logiciel. Pour véritablement aider l utilisateur, il faut qu il puisse se servir du logiciel sans utiliser l aide

17 Bibliographie Nielsen (2004) Conception de sites web, l'art de la simplicité, de Jakob Nielsen. CampusPress (Studio Graphique) Le best seller de l'ergonomie du web par son gourou le plus médiatique. Un très bon livre d'introduction bourré d'exemples illustrés. Boucher A. (2007) Ergonomie web - Pour des sites web efficaces, Eyrolles. Nogier J-F (2005) De l'ergonomie du logiciel au design des sites web. Seconde édition- DUNOD Webographie Guide de recommandations ergonomiques pour la création de sites et applications Web - version 2005 (pdf - 4 Mo) documentation/guidergoweb2005.pdf Ces livres fourmillent de recommandations. Bien structursé, la check-list de conception d'un site web résume les points essentiels dans l ouvrage de Nogier Fin Merci pour votre lecture. N hésitez pas à poser des questions à vos tuteurs, signaler des erreurs. 17