Ergonomie – S. Metz – 22/09/09 Master VCIel – … · 2015-03-24 · La théorie de Norman fournit un cadre ... Intégrer l’utilisateur au centre du processus de conception

Ergonomie–S.Metz–MasterVCIel–2009/2010

22/09/09

1

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

Ergonomie – S. Metz - Master VCIel

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


Document ou site web = interface

Référentiel cognitif

Un document ou un site web

4



22/09/09

2

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


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



22/09/09

3

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


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



22/09/09

4

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



22/09/09

5

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


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



22/09/09

6

É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



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




22/09/09

7

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



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



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




22/09/09

8

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



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


Nous allons voir de plus près :

1.  La Conception des pages individuelles :

l’écriture web

2.  L’Évaluation

32



22/09/09

9

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


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



22/09/09

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

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


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



22/09/09

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

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


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



22/09/09

12

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


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



22/09/09

13

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




22/09/09

14

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



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



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



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



22/09/09

15


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



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



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



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



22/09/09

16


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



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



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



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



22/09/09

17

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

Documents

Ergonomie – S. Metz – 22/09/09 Master VCIel – … · 2015-03-24 · La théorie de Norman fournit un cadre ... Intégrer l’utilisateur au centre du processus de conception