Axe 3 – La conception en ergonomie
I- Ergonomie et Sites Web / II- Ergonomie et Conception Web Cours d’ergonomie - S. Metz – Master VCIel
1
I - Ergonomie et Sites Web
Un site web , comme un document, est une interface
L’ergonomie s’applique aussi aux sites web
L’utilisateur est au centre
2
Document et site web : similitudes
Caractères communs par exemple la question de la lisibilité
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
3 Ergonomie – S. Metz - Master VCIel
Document ou site web = interface
Référentiel cognitif
Un document ou un site web
4 Ergonomie – S. Metz - Master VCIel
Théorie de l’action de Norman (1986)
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é
5
Exemple : faire un café
Exercice : appliquer le modèle de Norman à la préparation d’un café
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.
7 Ergonomie – S. Metz - Master VCIel
Faire communiquer humains et machines
C’est identifier les facteurs de la reconstruction du sens, les parties du processus de communication homme- machine 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
8 Ergonomie – S. Metz - Master VCIel
Les 3 distances dans les sites Web
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
Cycle de Norman 1
10
Cycle de Norman 2 : « evaluation gap »
Les 3 distances sont réparties dans les différents processus
11 Ergonomie – S. Metz - Master VCIel
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
L’évaluation 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
Il passe de la perception des informations visuelles à la compréhension, en passant par une organisation des informations transmises
12 Ergonomie – S. Metz - Master VCIel
Site web et reconstruction du sens
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
13
Norme ergonomique du processus de conception centré utilisateur (Norman)
14
Intégrer l’utilisateur au centre du processus de conception
II- Conception et sites web
Les étapes de la conception / L’écriture Web / L’évaluation
15
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
Manque d’aide à la navigation
Noms de liens trompeurs
Téléchargement difficile …
16 Ergonomie – S. Metz - Master VCIel
Problèmes liés à une méconnaissance de l’utilisateur
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
Méconnaissance de l’environnement de consultation
17
Problèmes liés à une mauvaise conception
Consultation réduite des pages
Commentaires critiques
18
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
19 Ergonomie – S. Metz - Master VCIel
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
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 Ergonomie – S. Metz - Master VCIel
Étapes de conception d’un site
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
21
1) Identification des objectifs
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
22
Les étapes de la conception
2) Identification des propriétaires et auteurs du contenu
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
23
Les étapes de la conception
Ergonomie – S. Metz - Master VCIel
3) Identification des utilisateurs potentiels
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 ...
24
Les étapes de la conception
Ergonomie – S. Metz - Master VCIel
4) Description des tâches-utilisateurs et compréhension des 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
25
Les étapes de la conception
4)1- Comment expliciter les attentes et les besoins ?
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)
26
Les étapes de la conception / 4- description des tâches et compréhension des besoins
4)2- Hiérarchisation des tâches
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
27
Les étapes de la conception / 4- description des tâches et compréhension des besoins Ergonomie – S. Metz - Master VCIel
Structuration du site A- Technique du tri de cartes
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.
28
Les étapes de la conception / 4- description des tâches et compréhension des besoins Ergonomie – S. Metz - Master VCIel
Structuration du site B- Caractère intuitif des icônes
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
Ces tests peuvent être réalisés dès le maquettage
29
Les étapes de la conception / 4- description des tâches et compréhension des besoins
Organisation du site
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
30
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)
Évaluation ergonomique
31 Ergonomie – S. Metz - Master VCIel
Nous allons voir de plus près :
1. La Conception des pages individuelles : l’écriture web
2. L’Évaluation
32 Ergonomie – S. Metz - Master VCIel
1- L’écriture 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. »
33
Écrire sur le web
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
34
L’écriture Web
Le Web est « vivant » !
Ouverture du site Web
Mise à jour du site Web
T3
T1 T2 T4
Première visite
Nouvelle visite Que trouve-t-on ? Quoi de neuf ? Sa réaction
Vous Le « Temps » L'internaute
Le contenu de votre site
Information de référence
Information d'actualité L’écriture Web
Ergonomie – S. Metz - Master VCIel
4 types de variables (Lompré)
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 L’écriture Web
Ergonomie – S. Metz - Master VCIel
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
37
L’écriture Web
Les balises
Titres
Sous-titres
Sur-titres
Chapeaux
Accroches
Titres de rubrique
Légendes d’illustration
Tables des matières
Objets des e-mails
Icônes et barres de navigation
38
L’écriture Web
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
L’écriture Web
Ergonomie – S. Metz - Master VCIel
Exigences de l’utilisateur (Forrester research)
40
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%
L’écriture Web
Ergonomie – S. Metz - Master VCIel
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
41
L’écriture Web
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
42
L’écriture Web
Fonctionnalités Actualités, événementiel
Langues
Thématiques
Pays Partenaires
43
L’écriture Web
Ergonomie – S. Metz - Master VCIel
Comprendre Contenus de référence (fiches de description multimédia des langues).
Chercher Moteur de recherche sur l’ensemble des contenus disponibles sur le site et sur Internet.
Acheter Boutique en ligne sous la forme de partenariat avec des commerces spécialisés (librairies, etc.).
Apprendre Informations à propos de l’apprentissage des langues et proposition de modules de formation à distance.
Explorer
Une sélection de ressources Internet (sites web) en rapport avec les langues de la Méditerranée.
Participer
La participation des différents acteurs et utilisateurs est l’axe principal du dispositif. Cette participation pourra se faire de nombreuses manières.
Entendre Accès audio à des ressources dans les langues étudiées. Lexique.
Expression courante.
Lire et Voir Accès à des ressources écrites dans les langues étudiées. Graphie.
Textes, poésie…
44
L’écriture Web
Ergonomie – S. Metz - Master VCIel
L’évaluation
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.
45
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
46
L’évaluation
Critères ergonomiques et recommandations pour la conception et l’évaluation de produits informatiques
Guidage
Charge de travail
Contrôle explicite
Adaptabilité
Gestion des erreurs
Homogénéité/cohérence
Signifiance des codes et dénominations
Compatibilité
47
L’évaluation
Ergonomie – S. Metz - Master VCIel
La chekList de Nogier (2005)
48
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 L’évaluation
Ergonomie – S. Metz - Master VCIel
Méthodes d’évaluation
Mesure du degré d’utilisabilité du logiciel
En dehors du contexte d’utilisation :
Evaluation par inspection
En situation d’utilisation :
Evaluation coopérative
Test d’utilisabilité
49
L’évaluation
L’utilisabilité
Norme ISO 9241-11
Efficacité : taux de réussite de la tâche
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
50
L’évaluation / Les méthodes
L’évaluation par inspection
Chaque composant du système est analysé au regard d’une grille de critères ergonomiques (Nogier, 2005)
Analyse
Principes ergonomiques Logiciel
Site web Grille de critères Composants
51
L’évaluation / Les méthodes
Ergonomie – S. Metz - Master VCIel
L’évaluation 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
52
L’évaluation / Les méthodes
Ergonomie – S. Metz - Master VCIel
Test d’utilisabilité (Nielsen, 93)
1/2« Expérimentation » en situation naturelle 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
53
L’évaluation / Les méthodes
Test d’utilisabilité (Nielsen, 93)
2/2 Le test permet d’évaluer l’outil, pas l’utilisateur
Définir un objectif précis par séance de test
Choisir un panel d’utilisateur représentatif
Cinq utilisateurs suffisent
Etapes de la conception amélioration de l’adaptabilité
Test 1 Test 2 Test 3
Version 1 Version 2 Version 3
…
5 util. 5 util. 5 util.
54
L’évaluation / 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!
Ne se réalise pas en situation naturelle, seul jugement de l’évaluateur!
Coopérative! 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!
Manque d’exhaustivité, on ne peut pas observer l’utilisateur sur toute l’interface!
Difficile d’observer en situation naturelle!
Test
d’utilisabilité! Observation de l’utilisateur en
contexte situation! Préparation lourde : protocole expérimental et grille d’observation!
55
L’évaluation / Les méthodes
Ergonomie – S. Metz - Master VCIel
Conseils (d’après Nielsen, 93)
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.
56
L’évaluation
Ergonomie – S. Metz - Master VCIel
Conseils (d’après Nielsen, 93)
L’utilisateur a 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
57
L’évaluation
Conseils (d’après Nielsen, 93)
L’utilisateur n’a pas toujours raison
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.
58
L’évaluation
Conseils (d’après Nielsen, 93)
L’utilisateur n’est pas le développeur
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
59
L’évaluation
Ergonomie – S. Metz - Master VCIel
Conseils (d’après Nielsen, 93)
Le développeur n’est pas l’utilisateur
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.
60
L’évaluation
Ergonomie – S. Metz - Master VCIel
Conseils (d’après Nielsen, 93)
Le PDG n’est pas l’utilisateur
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.
61
L’évaluation
Conseils (d’après Nielsen, 93)
Le mieux est l’ennemi du bien
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.
62
L’évaluation
Conseils (d’après Nielsen, 93)
Le détail est essentiel
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.
63
L’évaluation
Ergonomie – S. Metz - Master VCIel
Conseils (d’après Nielsen, 93)
L’aide n’en est pas une
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.
64
L’évaluation
Ergonomie – S. Metz - Master VCIel
Bibliographie
Nielsen (2004) Conception de sites web, l'art de la simplicité, de Jakob Nielsen. CampusPress (Studio Graphique) - 2004 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
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.
65
L’évaluation
Webographie
Guide de recommandations ergonomiques pour la création de sites et applications Web - version 2005 (pdf - 4 Mo) http://www.dsi.cnrs.fr/bureau_qualite/ergonomie/
documentation/Guidergoweb2005.pdf http://www.ergolab.net/
http://www.usabilis.com/
http://www.ergologique.com/
66
L’évaluation
Fin …
Merci pour votre lecture. N’hésitez pas à poser des questions à vos tuteurs, signaler des erreurs ….