Vous êtes sur la page 1sur 38

Ergonomie Voyelle

Introduction

Lergonomie cest quoi ?


Deux objectifs : Rendre un site utile : un site doit proposer linternaute des infos qui lintressent Rentre un site utilisable : Mettre tout en place pour faciliter laccs ces informations en termes de : - navigation - interaction - graphisme - etc

Ergonomie Voyelle
Introduction

Lergonomie cest quoi ?

Un site est utilisable lorsquun utilisateur donn atteint un objectif donn dans un contexte dutilisation donn (efficacit, efficience et satisfaction)

Ergonomie Voyelle
Introduction

Ides reues
La rgle des trois clics
Les internautes ne scrollent pas

On verra lergonomie la fin


On va faire un site ergonomique Les internautes sont idiots

Ergonomie Voyelle
Plan

I- Comprendre linternaute

II- Architecture de linformation


III- Les rgles de lergonomie

Ergonomie Voyelle
Comprendre linternaute

I- Comprendre linternaute

Ergonomie Voyelle
Comprendre linternaute > Thorie de la gelstat

Les thories de la gestalt


Loi de proximit : Notre cerveau regroupe les choses qui sont smantiquement lies Naturellement, notre cerveau attribue un lien smantique entre deux lments proches Deux niveaux dapplication : - Macroscopique : sur le site dans son ensemble - Miscroscopique : dans les dtails

Ergonomie Voyelle
Comprendre linternaute > Thorie de la gelstat

Les thories de la gestalt


Loi de similarit : Notre cerveau regroupe naturellement les choses qui se ressemblent

Si deux objets sont identiques cest quils sont lis


A linverse, si deux objets sont trs diffrents, notre cerveau associe naturellement cette diffrence physique une diffrence smantique

Ergonomie Voyelle
Comprendre linternaute > Loi de fitts

La loi de Fitts
Plus un lment est proche est gros, et plus il est facilement cliquable Plus le bouton cliquer sera gros et moins il sera cach dans la page, et moins lutilisateur a deffort faire pour cliquer dessus a parait normal, mais pourtant : - On a tendance cliquer ct des boutons par approximation - Pour certains internautes lordinateur est une preuve morale et/ou physique

Ergonomie Voyelle
Comprendre linternaute > Les affordances

Le systme daffordance
Laffordance est la capacit dun lment montrer ce pour quoi il a t conu

2 affordances trs importantes sur le web :


Affordance au clic : Les lments cliquables dun site doivent dire au visiteur vas y clique moi . On peut augmenter cette affordance par les couleurs, la forme et les effets de relief

Ergonomie Voyelle
Comprendre linternaute > Les affordances

Le systme daffordance
Affordance la saisie: Les interfaces transactionnelles doivent tre facilement identifiables par linternaute Un input tout blanc est affordant la saisie, alors quun input prrempli lest moins

10

Ergonomie Voyelle
Comprendre linternaute > Les affordances

Le systme daffordance
/!\ Attention aux fausses affordances Si les lments cliquables doivent le montrer, il ne faut pas linverse, quun lment non-cliquable ait lair cliquable

11

Ergonomie Voyelle
Comprendre linternaute > Linternaute type

Il ny a pas dinternaute type


Linternaute type nexiste pas, cest un mythe. Ils se distinguent selon plusieurs critres qui vont faire varier leurs mcanismes cognitifs et leur pratique du web : - Leur age - Leur expertise web - leur expertise dun domaine - leur catgorie socio-professionnelle - Un site ne peut pas avoir comme cible un internaute gnral, a nexiste pas
12

Ergonomie Voyelle
Comprendre linternaute > Lattennte

Limpression dattente
Limpression dattente chez linternaute arrive ds une seconde. Cette impression devient dsagrable ds la deuxime seconde Le sentiment dattente que lutilisateur prouve pendant sa navigation est un des facteurs principaux pouvant le pousser quitter le site prmaturment !

13

Ergonomie Voyelle
Comprendre linternaute > Le vcu des internautes

Les internautes ont une exprience web


80% des internautes viennent sur un site pour la premire fois Ils ont donc une exprience web qui prcde leur venue et quils sont accumule lors de toutes leurs visites de sites web Instinctivement, par mimtisme, linternaute va chercher sur le site les repres quil a tabli sur les autres

14

Ergonomie Voyelle
Comprendre linternaute > Le temps de visite

Le temps de visite moyen sur un site est court


On lestime environ un peu plus de deux minutes (hors lecture approfondie pour la presse par exemple)

Lutilisateur se fonde un premier avis sur le site au bout de quelques secondes seulement, qui lui suffit pour savoir si il continue sa visite ou sil arrte Sa lecture se fait en diagonale, il parcours la page sans la lire la recherche dlments intressants et prohiminants

15

Ergonomie Voyelle
Comprendre linternaute > Les repres

Linternaute est toujours la recherche de repres


Le sentiment dtre perdu sur un site pousse gnralement linternaute le quitter tout de suite ou snerver,

Il a besoin de comprendre immdiatement le fonctionnement du site


Il a besoin de pouvoir contrler tout ce qui se passe sur le site

16

Ergonomie Voyelle
Comprendre linternaute > La mmoire de travail

Limites de la mmoire de travail


Lhumain dispose de deux mmoires, une mmoire longue et une mmoire de travail (assimilables la RAM et au DD dun ordinateur) La mmoire de travail est trs courte et fonctionne la plupart du temps de manire inconsciente

Cest elle qui nous permet de parcourir un menu en gardant en mmoire les diffrents onglets pour savoir lequel correspond
Moins sa mmoire de travail est occupe, plus son choix est facile et moins il a limpression de faire un effort
17

Ergonomie Voyelle
Plan > Architecture de linformation

II- Architecture de linformation

18

Ergonomie Voyelle
Architecture de linformation > Objectif

Objectif
Cest une tape abstraite mais la plus importante dans la cration dun site : Mme avec les meilleurs artifices et le respect de toutes les autres rgles dergonomie, une information mal structure mettra mal tout le site Linformation est le cur de la recherche de linternaute, il faut donc tout mettre en place pour quil y ait accs.

19

Ergonomie Voyelle
Architecture de linformation > Objectif

Se placer dans la peau de lutilisateur


On est trop souvent format par son domaine dexpertise et on tend naturellement classer linformation comme on la voit mais pas comme lutilisateur la voit Plusieurs risques : - Favoriser sa vision plutt que celle de lutilisateur final - Reproduire une organisation matrielle sur le Web Plusieurs solutions : - Travailler avec des personas - Avoir recours au tris de cartes

20

Ergonomie Voyelle
Architecture de linformation >Les personas

Les personas
Le meilleur moyen de cerner les attentes des utilisateurs est de leur crer des rpliques imaginaires

Plusieurs intrts : - Plus facile dutiliser ces personas pour justifier des choix au client - Permet de mieux sapproprier la cible - Moyen efficace pour renforcer lefficacit de la collaboration au sein de lquipe

21

Ergonomie Voyelle
Architecture de linformation > Le tri de cartes

Le tri de cartes
Pour concevoir un plan efficace il est souvent ncessaire de remmtre plat tout larchitecture existante

1- On distingue tous les contenus du futur site et on les place sur des bouts de papier 2- On organise ensuite tous ces contenus en les regroupant entre eux 3- Puis on hirarchise les groupement quon a fait 4- Enfin on donne des libells aux catgories
On est ainsi au plus porches des attentes finales de lutilisateur

22

Ergonomie Voyelle
Architecture de linformation > Sparation des contenus

La sparation des contenus


En plus ou la place du tri de carte, il existe trois rgles permettant de concevoir une architecture cohrente :

Rgle dexclusivit : En lisant les libells, on ne doit pouvoir trouver un contenu que dans une rubrique. Rgle de complmentarit : En lisant tous les onglets du menu on doit savoir tous les contenus que propose le site Rgle de signification : Les intituls doivent tre porteurs de sens
23

Ergonomie Voyelle
Plan > Les rgles de lergonomie

III- Les rgles de lergonomie

24

Ergonomie Voyelle
Les rgles de lergonomie > Le guidage

Le Guidage
Il faut orienter au maximum lutilisateur vers ce quil cherche et lui proposer des aides la navigation

Utiliser les principes de la gestalt pour lier graphiquement les lments et favoriser le reprage des types de contenus
Utiliser la loi de Fitts pour orienter lutilisateur vers les contenus principaux Expliciter lutilisateur toutes les actions du systme pour que la navigation soit fluide

25

Ergonomie Voyelle
Les rgles de lergonomie > Le guidage

Le Guidage
Fournir un systme de navigation complet (barre de navigation, encarts, filtres daffinage)

Jouer sur laffordance au clic des lments cliquables

26

Ergonomie Voyelle
Les rgles de lergonomie > La charge de travail

La charge de travail
Plus lutilisateur va devoir se concentrer et plus a va le fatiguer et risquer de lnerver

Quand on navigue sur un site avec une quantit dinformations gigantesque on est trs vite dcourag (Il suffit de penser Google)
Il faut allger au maximum la charge cognitive de lutilisateur sur deux niveaux : - la charge visuelle - la charge informationnelle

27

Ergonomie Voyelle
Les rgles de lergonomie > La charge de travail

La charge de travail
Optimiser lorganisation visuelle en se basant sur la gestalt Limiter le texte et les illustrations au minimum vital Limiter le travail de lecture et les actions inutiles Assister lutilisateur quand cest possible (principalement dans les interfaces transactionnelles)

28

Ergonomie Voyelle
Les rgles de lergonomie > Contrle explicite

Contrle explicite
Lutilisateur doit avoir la main, ou limpression davoir la main, sur tout le site.

Cest au site de sadapter lutilisateur et non linverse. Cela passe par le contrle de tous les processus :
Permettre lutilisateur dinterrompre les processus: Cest notamment vrai pour les sliders o linternaute ne voit pas forcment le temps qui dfile et na pas ncessairement de moyen pour stopper le dfilement

29

Ergonomie Voyelle
Les rgles de lergonomie > Contrle explcite

Contrle explicite
Limiter au maximum laspect intrusif du systme : Rien ne doit se dclencher sans que lutilisateur ne lait explicitement demand. Cest notamment vrai pour les sons qui dmarrent au chargement de la page ainsi que des achats semi-forcs pour les sites de e-commerce Bien expliciter la relation entre le fonctionnement des processus et les actions de lutilisateur : Il doit comprendre facilement ce quentraine sur le systme chacune de ses oprations (dun point de vue utilisateur, pas dveloppeur)

30

Ergonomie Voyelle
Les rgles de lergonomie > Accessibilit

Accessibilit:
Pour quun site soit ergonomque, il faut quil soit accessible au plus grand nombre.

Accessibilit physique (visuelle essentiellement) : Le site doit pouvoir tre lu mme par des personnes ayant des difficults de lecture - soit en proposant demble des polices larges - soit en mettant la taille des polices en dynamique et en permettant son agrandissement
Laccessibilit visuelle prvoit aussi quun site puisse tre consult par un non-voyant.
31

Ergonomie Voyelle
Les rgles de lergonomie > Accessibilit

Accessibilit:
Accessibilit technologique : Tout le monde ne dispose pas du mme matriel hardware et software - Certaines technologies sont trs lourdes (le flash) qui peuvent diminuer les capacits de lordinateur de manire importante

- Tout le monde nest pas encore en 100Mb/s


- Tous les utilisateurs ne disposent pas des mmes logiciels. Et moins il en faut, moins il y a de chances que lutilisateur ait linstaller

32

Ergonomie Voyelle
Les rgles de lergonomie > Gestion des erreurs

Gestion des erreurs


La gestion des erreurs est un point critique Dans toutes les interfaces transactionnelles il existe un risque derreur important, et parmi ces erreurs, on peut en distinguer trois grand types : - Loubli - Saisir la bonne information mais un mauvais format - Saisir une mauvaise information, incohrente. Pour viter a, deux solutions : - empcher lutilisateur de faire des erreurs - Quand on ne peut pas lempcher, lui fournir une assistance pour les rsoudre
33

Ergonomie Voyelle
Les rgles de lergonomie > Gestion des erreurs

Gestion des erreurs


Empcher lutilisateur de faire des erreurs - Ne proposer lutilisateur que ce quil peut remplir - Favoriser le prremplissage des champs - Nautoriser que la saisie dinformations correctes - Eviter les fausses affordances

34

Ergonomie Voyelle
Les rgles de lergonomie > Gestion des erreurs

Gestion des erreurs


Aider lutilisateur corriger ses erreurs - Prvoir des messages derreur ou de confirmation pour tous les cas de figure, linternaute doit toujours tre averti - Fournir pour ces messages des noncs porteurs de sens (il faut lui parler de son point de vue et non du point de vue du systme)

- Indiquer et localiser clairement les erreurs : montrer quel champ est mal rempli, et le montrer de manire voyante (/!\ il ne faut pas non plus agresser lutilisateur ni lui faire peur) - laider corriger son erreur en lui fournissant des exemples, en expliquant les raisons supposes de lchec
35

Ergonomie Voyelle
Les rgles de lergonomie > Apprentissage interne

Homognit (Apprentissage interne)


Un site doit fonctionner comme une entit entire, et linternaute doit pouvoir y mettre en place des automatismes

Il faut donc capitaliser sur lexprience interne du site au niveau - des localisations - des appellations - des formats de prsentation - des interactions

36

Ergonomie Voyelle
Les rgles de lergonomie > Apprentissage interne

Homognit (Apprentissage externe)


Les internautes ont consult de nombreux sites et en ont donc retir certains mcanismes rcurrents.

Il faut donc au maximum capitaliser sur cette exprience dj acquise

37

Ergonomie Voyelle
Les rgles de lergonomie > Apprentissage interne

Rapidit :
Lattente est une des causes principales poussant au dpart prmatur dun internaute.

Dans a mesure du possible, faire des pages lgres et des interfaces fluides.
Quand on ne peut pas raccourcir un temps, il faut lexpliquer et le matrialiser

38