• Aucun résultat trouvé

I - Ergonomie et Sites Web

N/A
N/A
Protected

Academic year: 2022

Partager "I - Ergonomie et Sites Web"

Copied!
17
0
0

Texte intégral

(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

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

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

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

(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 Ergonomie – S. Metz - Master VCIel

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

(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

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

(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

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

(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

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

(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

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

(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

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

(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

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

(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

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

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

(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

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

(15)

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

(16)

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

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

Références

Documents relatifs

In Chapter 4 we propose a new semi-supervised learning algorithm which learns similarity measures based on available information, and is able to work on very large networks...

Agence de la santé publique du Canada / Public Health Agency of

Je vais multiplier la première équation par 5 et la deuxième par (-2)..

Avant de commencer, soyez sûre et certaine de votre détermination, votre maturité, votre implication, votre motivation et enfin de la sincérité dont vous devrez faire preuve durant

Chaque acteur est responsable d’abord de ce qu’il fait, doit être un professionnel averti qui examine et contrôle le maillon d’avant et qui s’implique dans le

• Deux stimuli dans le même cycle sont fusionné pour créer un seule concept. • Film semble «réel» à

● Sélectionner les données dans la base pour alimenter le modèle. ● Passer les éléments du modèle aux vues correspondant à

C’est ce que nous nous proposons de faire, dans le domaine de la relation humain-technologie, en nous basant sur la théorie de la symbiose