SlideShare une entreprise Scribd logo
1  sur  124
Télécharger pour lire hors ligne
Elodie Descharmes (ingénieur Orange Labs)
Filière IMR, deuxième année
2012-2013
Ergonomie
Parce qu’il ne sert à rien de réinventer ce qui est déjà très bien fait, ce cours est très largement
basé que le livre suivant :
Ergonomie web, pour des sites web efficaces
Amélie Boucher, Éditions Eyrolles
Les règles
de l’ergonomie web
Architecture Information Rapidité
Organisation visuelle Compréhension Liberté
Cohérence Assistance Accessibilité
Conventions Gestion des erreurs Satisfaction
3
@elodescharmes
Introduction
 Ces règles sont simples, mais elles ne s’inventent pas, et c’est justement leur simplicité qui fait qu’on les
oublie fréquemment !
 Ces règles permettent d’améliorer la qualité perçue d’un site de deux manières
– Lors de la conception d’un nouveau site
– Lors de l’évaluation d’un site existant
 La prise en compte de ces règles demande
– Des connaissances en ergonomie théorique
– De la rigueur de la minutie… Presque de l’acharnement pour les appliquer à toutes les pages !
 Ces règles s’imbriquent les unes les autres, et il faut parfois trouver le juste compromis entre deux
principes qui peuvent se mettre réciproquement en défaut
4
@elodescharmes
Règle n°1 : Architecture
Le site est bien rangé
 L’internaute doit pouvoir y trouver ce qu’il cherche
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
5
@elodescharmes
Règle n°1 : Architecture
Le site est bien rangé
 Les regroupements sont logiques
– Une rubrique est constituée d’éléments partageants suffisamment de caractéristiques
pour être classés dans la même catégorie
 Les menus aident l’internaute à naviguer dans les contenus
– Les intitulés doivent être signifiants, complémentaires, exclusifs
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
6
@elodescharmes
Architecturer un site
 L’architecture d’un site se construit en deux étapes
– Catégorisation : créer des groupes de contenus
– Structuration : hiérarchiser les contenus
 Ces deux étapes doivent tenir compte de l’internaute et
de ses réflexes d’utilisation
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
7
@elodescharmes
Les regroupements sont logiques
 Le regroupement doit avoir un sens
 Pourquoi ?
– Les internautes s’arrêtent très tôt dans le
processus de lecture des titres de rubriques.
Ils pensent avoir compris et extrapolent pour
la suite du menu.
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
8
@elodescharmes
Les regroupements sont logiques
www.sfr.fr (ancienne version du site )
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Mauvaise
application
Des tests ont montré
que 75% des
internautes ne
voyaient pas le mot
« classique » avant la
troisième passe sur la
même page
9
@elodescharmes
La structuration met en avant les contenus clés
 Identifier les pages les plus recherchées par les internautes et les mettre en avant
dans l’architecture du site
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Mauvaise
application
La fonctionnalité d’achat de capsules était
« cachée » dans une sous-rubrique
www.nespresso.com (04/03/2012)
www.nespresso.com (ancienne version du site)
Nouvelle version : la fonctionnalité est mise en
évidence dès la homepage
Bonne
application
10
@elodescharmes
Les menus aident l’internaute à naviguer dans les contenus
 Les menus sont des éléments de navigation
 Les intitulés des rubriques doivent être :
– Signifiants : doit permettre à l’internaute de deviner le contenu de la rubrique
– Complémentaires : il n’existe pas de contenu qui n’appartient à aucune rubrique
– Exclusifs : un intitulé doit être le seul envisageable pour un internaute qui cherche un
contenu précis, il doit pouvoir choisir sans hésiter
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
11
@elodescharmes
Contourner un site mal rangé
 Dans le cas de la refonte d’un site existant, s’il n’est pas possible de remettre en
cause l’architecture globale
 La solution : utiliser les liens transversaux au cœur des pages
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
« Lien transversal »
Lien qui passe outre l’arborescence du site. Il permet de proposer, à des endroits
appropriés, des liaisons directe vers des contenus en rapport avec les informations
consultées.
12
@elodescharmes
Règle n°2 : Organisation visuelle
La page est bien rangée
 La grande majorité des individus se sentent mieux dans des environnements
simples, organisés, aérés
 Objectif cognitif : limiter la charge mentale liée au traitement de ce qu’il voit à
l’écran
 Notion de « bruit visuel »
– tout élément graphique qui ne transmet pas d'information, surcharge la présentation,
ou entre en compétition avec l'information
– très utilisé aussi en environnement urbain, afin d’optimiser la visibilité des signaux
routiers par exemple
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
13
@elodescharmes
Règle n°2 : Organisation visuelle
La page est bien rangée
 Eviter le trop-plein d’information
– Réduite la quantité de mots sur les pages navigantes
– N’afficher que les principaux éléments de navigation et d’interaction
– Différencier les quantités d’informations réelles et perçues
– Démultiplier la valeur du pixel carré
 Optimiser l’organisation et la hiérarchie visuelle
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
14
@elodescharmes
Eviter le trop-plein d’information
 Supprimer tout ce qui ne sert à rien, privilégier l’essentiel
 Diviser la quantité de mots par deux
– Pourquoi ?
– Constat empirique : on arrive en général relativement facilement à réduire la quantité de mots d’un texte
de 50%
– S’adapter au réflexe de « scan visuel » (lecture en diagonale)
– Où ?
– Valable uniquement pour les pages navigantes (vs. Pages de contenu final)
– Comment ?
– Remettre en cause systématiquement l’utilité de chaque élément de l’interface
– Piste d’amélioration : on peut souvent faire l’économie d’une légende explicative avec une interface
mieux conçue
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
« Every sentence, every phrase, every word has to fight for its life »
Crawford Kilian, Writing for the web, 4th édition, Self-Consel Press, 2009
15
@elodescharmes
Réduire la quantité de mots sur les pages navigantes
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Mauvaise
application
Bonne
application
www.smartphoto.fr (04/03/2012)
extrafilm.com (ancienne version)
La répétition du verbe « commander « à
chaque item du menu n’apporte rien
Nouvelle version du site
16
@elodescharmes
Eviter le trop-plein d’information
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Mauvaise
application
« entrez votre
identifiant et
votre mot de
passe » est une
phrase inutile
car redondante
avec les libellés
des champs
17
@elodescharmes
N’afficher que les principaux éléments de navigation et d’interaction
Les options liées au
véhicules n’apparaissent
pas si l’on sélectionne
un autre moyen de
transport
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Bonne
application
18
@elodescharmes
L’hétérogénéité visuelle augmente la charge
informationnelle
 Limiter les typographies et les couleurs différentes
www.mairie-chatillon-sur-seine.fr (04/03/2012)
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Mauvaise
application
19
@elodescharmes
Les images de fond augmentent la charge
informationnelle
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Mauvaise
application
www.allocine.fr (01/03/2011)
20
@elodescharmes
Les animations augmentent la charge informationnelle
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Mauvaise
application
L’animation
publicitaire
détourne le
regard du
contenu effectif
de la page
www.seloger.com (04/03/2012)
21
@elodescharmes
Petit point sur les animations
 Attention !
 Le traitement de l’animation demande beaucoup de ressources mentales car
nous sommes intuitivement dirigés vers son exploration
 L’animation ne doit pas tourner en boucle en permanence
 Ne proposez pas d’animations simultanées
 Attention à bien différencier les animations des affichages successifs (sur
action utilisateur) de contenus statiques. Dans ce cas tout dépend de la
vitesse d’affichage
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
22
@elodescharmes
Différencier les quantité d’informations réelles et perçues
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Affichages successifs
(vs animations) avec
vitesse de défilement
relativement rapide
Plusieurs affichages
dynamiques en boucle
et en parallèle !
+ l’image de fond…
Mauvaise
application
www.virginmega.fr (04/03/2012)
23
@elodescharmes
Démultiplier la valeur du pixel carré
Remplacement de l’information au survol (rollover)
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
www.jules.com (04/03/2012)
Affichage
des photos
des produits
au survol
des vignettes
Bonne
application
24
@elodescharmes
Petit point sur le rollover
 Attention !
– L’internaute doit accomplir une action supplémentaire pour accéder à
ces informations
– La possibilité de faire apparaître des informations au rollover n’est pas
toujours évidente
– Les informations affichées ne doivent pas se situer trop loin du
déclencheur
– Déterminer une zone suffisante pour l’interaction avec la souris
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
25
@elodescharmes
La question de la publicité
 On s’en passerait bien… Mais on ne peut pas toujours remettre en cause un
des principaux modèles économiques du web !
 Cependant on peut la cantonner au pourtour du site (on la clusterise)
 Dans tous les cas, elle ne doit pas se mélanger au contenu !
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
26
@elodescharmes
Optimiser l’organisation et la hiérarchie visuelle
 Nous avons vu comment éviter le trop-plein d’informations
 Encore faut-il que les informations restantes pertinentes soient bien
organisées à l’écran !
 Utiliser les lois de la Gestalt : similarité, proximité
– Dégager des blocs d’informations, des zones différenciées
– Distinguer
– Les espaces de navigation
– Les blocs de contenu
– Les informations complémentaires
– Les éléments d’interaction (boutons d’action, formulaires…)
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
27
@elodescharmes
Optimiser l’organisation et la hiérarchie visuelle
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
http://eu.farrow-ball.com/ (04/03/2012)
L’organisation
visuelle de la
page d’accueil
permet de bien
différencier les
différentes zones
d’interaction et
de contenu
Bonne
application
28
@elodescharmes
Essayer d’emboiter les zones plutôt que de simplement les
juxtaposer
Attention à trouver un bon compromis
entre hétérogénéité (complexité au
niveau de la sélection mentale entre
éléments différents) et homogénéité
(informations difficiles à distinguer
car tout est au même niveau)
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
fr.yahoo.com (04/03/2012)
L’utilisation de sous-parties avec
titres et séparateurs permet une prise
en main simplifiée du formulaire
Bonne
application
29
@elodescharmes
Règle n°3 : Cohérence
Le site capitalise sur l’apprentissage interne
 Lorsqu’un internaute utilise avec succès une première page, il essayera de répéter
le même processus sur les autres pages
 Le site doit être cohérent avec lui-même d’une page à l’autre !
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
30
@elodescharmes
Règle n°3 : Cohérence
Le site capitalise sur l’apprentissage interne
 Les localisations sont cohérentes
– Ne pas changer les éléments d’emplacement d’une page à l’autre !
– Critique pour les éléments de navigation
 Les appellations sont cohérentes
– Toujours faire appel au même mot pour désigner le même élément !
– Exemple : « panier », « liste d’articles », « liste d’achats »…
 Les formats de présentation sont cohérents
– Définir des groupes d’objets et une présentation cohérente pour chaque groupe.
– Peut s’appliquer aux textes, au liens, aux images, aux menus de navigation etc.
 Les interactions sont cohérentes
– Le site doit toujours se comporter de la même manière dans une situation donnée.
– Exemple : si un menu déroulant s’active par un clic, éviter dans d’autres pages de l’activer par rollover…
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
31
@elodescharmes
Les localisations sont cohérentes
Clic
Clic
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
32
@elodescharmes
Charte ergonomique
 La cohérence des localisations, appellations, formats de présentation et des
interactions peut être soutenue par la formalisation et l’utilisation d’une charte
ergonomique
 Ce type d’outil permet à toutes les personnes travaillant sur le projet de partager
la même référence
≠charte graphique !
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
33
@elodescharmes
Règle n°4 : Conventions
Le site capitalise sur l’apprentissage externe
 Capitaliser sur l’expérience de l’internaute (il a très certainement
visité d’autres sites), sur leurs habitudes
 Tenir compte des conventions web
– Pour la plupart de internautes et en particulier les moins
expérimentés, Internet est un concept général.
« Je vais sur l’Internet »
Il ont du mal à faire la distinction entre les sites et s’attendent à
ce que ceux-ci fonctionnent tous de la même manière.
Si ce n’est pas le cas, la conclusion est rapide : c’est forcément
que le site ne marche pas.
Anecdote
Devant la multitude
de sites ne prenant pas
en compte les normes
d’interactions et de
présentation, Jakob
Nielsen (en 2004) a
comparé le Web à une
fourmilière bâtie par
des insectes sous
LSD…
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
34
@elodescharmes
Règle n°4 : Conventions
Le site capitalise sur l’apprentissage externe
 Respecter les conventions de localisation
– Emplacement des éléments sur la page
 Respecter les conventions de vocabulaire
– Employer des mots que les internautes peuvent comprendre facilement dans leur
contexte
 Respecter les conventions d’interaction et de présentation
– Les internautes s’attendent à ce que le site se comporte d’une certaine manière
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
35
@elodescharmes
Qu’est-ce qu’une convention ?
 C’est le plus difficile : déterminer ce qui relève d’une convention
 Définition de Jakob Nielsen :
– Si 80% des sites utilisent le même principe, c’est un standard
– Si 50 à 79% des sites utilisent le même principe, c’est une convention
 Connaître l’internaute pour savoir à quel(s) site(s) il est préalablement habitué
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Faire différent pour se démarquer
Oui… Sur tout sauf sur l’ergonomie !
L’ergonomie doit être transparente pour l’utilisateur, elle
ne peut pas être positionnée comme un élément de
différenciation
36
@elodescharmes
Respecter les conventions de localisation
 Position des éléments d’interaction
– Logo
– Moteur de rechercher
– Accès au panier
– Barres de navigation
– Accès aux mentions légales
– Etc.
 Règle à pondérer en fonction du type de site et de la charge informationnelle à l’écran
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
37
@elodescharmes
Respecter les conventions de localisation
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
http://www.1855.com (05/03/2012)
Pas d’accès
au panier, à
part au
moment précis
où on y ajoute
quelque-chose
Mauvaise
application
38
@elodescharmes
Respecter les conventions de localisation
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
http://www.rowenta.fr (05/03/2012)
Localisation non
conventionnelle du
chemin de navigation
en bas de page
Mauvaise
application
39
@elodescharmes
Respecter les conventions de localisation
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
http://www.chanel.com/ (05/03/2012)
La localisation non
conventionnelle de la
barre de navigation
ne met pas en péril
son utilisation du
fait de sa force
visuelle au regard du
reste de la page
Pas de
problème
40
@elodescharmes
Respecter les conventions de vocabulaire
 Ne pas introduire de mots totalement nouveau pour les internautes afin de désigner
un concept conventionnel du Web
– Accueil
– Panier
– Plan du site
– Contact
– Etc.
 Exemples :
– ne pas remplacer « page suivante » par « prochaine page »
– ne pas remplacer « panier » par « sac »
 Pour un site spécialisé, se renseigner sur les conventions du domaine concerné !
40
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
41
@elodescharmes
Respecter les conventions de vocabulaire
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
http://store.nike.com (05/03/2012)
Qu’est-ce que
monCasier ?
Mauvaise
application
42
@elodescharmes
Respecter les conventions d’interaction et de présentation
 Formulaires, alertes, étapes classiques d’un processus de commande etc.
 Exemple de convention d’interaction : les internautes ont appris qu’une liste
d’objets défilant de manière animée est souvent un menu dont chacun des items est
cliquables
 Attention aux popups de confirmation / indication qui peuvent faire penser à des
messages d’erreur !
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
43
@elodescharmes
Respecter les conventions d’interaction et de présentation
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
http://www.ca-cotesdarmor.fr/ (05/03/2012)
La présence d’un
champ de saisie
laisse penser qu’il
faut faire une saisie
clavier alors que le
code doit être entré
à l’aide de la grille
graphique
Mauvaise
application
44
@elodescharmes
Règle n°5 : Information
Le site informe l’internaute et lui répond
 L’ordinateur informe et prévient l’internaute
– Ne soyez pas avare d’informations !
– information générale
– information pour facilité la navigation
– information ponctuelle
– Informez, mais au bon moment
– Informez pour augmenter votre force persuasive
 L’ordinateur répond aux actions de l’internaute
– Donner du feedback !
– Visibilité du feedback
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
45
@elodescharmes
Donnez de l’information générale
 Qui vous êtes, ce que vous faites etc.
– Logo
– Tagline
– ou baseline, endline, strapline : phrase accompagnant le logo
– Peut être différente du « slogan offline »
– Intitulés de la barre de navigation
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
46
@elodescharmes
Donnez de l’information pour faciliter la navigation
 Aider l’internaute à se situer dans le site, ce qu’il a déjà consulté, etc.
http://www.natureetdecouvertes.com (05/03/2012)
L’internaute est
informé sur sa
situation dans les
différents niveaux de
profondeur du site
Bonne
pratique
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
47
@elodescharmes
Donnez de l’information pour faciliter la navigation
http://www.bazar-bio.fr (05/03/2012)
La rubrique active
n’est pas indiquée (en
peut facilement se
trouver sous la ligne
de flottaison du site)
Mauvaise
pratique
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
48
@elodescharmes
Donnez de l’information pour faciliter la navigation
http://www.google.fr (05/03/2012)
L’internaute est
informé sur les liens
qu’il a déjà visités
grâce à leur couleur
Bonne
pratique
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
49
@elodescharmes
Donnez de l’information ponctuelle
 Renseigner l’internaute sur son avancement dans un processus, sur les étapes qui
vont suivre…
http://www.amazon.fr/ (05/03/2012)
On indique à
l’internaute que ce
n’est pas la dernière
étape
Bonne
pratique
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
50
@elodescharmes
Informez, mais au bon moment
 Exemple : ne pas attendre que l’internaute soit sur une page produit pour
l’informer que l’article n’est plus disponible !
 Exemple : indiquer les documents nécessaire à avoir en main avant de
commencer à remplir un formulaire complexe
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
51
@elodescharmes
Informez, mais au bon moment
L’ensemble des
coloris disponibles
pour un produit est
visualisable dès la
page de liste
Bonne
pratique
http://www.patagonia.com (04/03/2012)
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
52
@elodescharmes
Informez pour augmenter votre force persuasive
L’internaute est
informé du montant
restant pour obtenir
la gratuité des frais
de port
Bonne
pratiquehttp://www.archiduchesse.com/ (04/03/2012)
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
53
@elodescharmes
Informez pour augmenter votre force persuasive
Affichage dès la page
produit du nombre de
point de fidélités
associés à l’achat de
l’article
Bonne
pratique
http://www.saveur-biere.com/ (04/03/2012)
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
54
@elodescharmes
Donner du feedback aux internautes
 Navigation  changement de page
L’utilisateur doit percevoir qu’il s’est passé quelque-chose !
– Attention en cas de rechargement partiel de page
– Attention si la page de départ et la page d’arrivée sont très proches visuellement
– Attention si la page d’arrivée est susceptible de mettre du temps à se charger
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
55
@elodescharmes
Visibilité du feedback
 C’est le défaut le plus fréquent
– Élément visuel de feedback trop éloigné du centre d’attention de l’utilisateur
(en bas à gauche dans la page par exemple)
– Élément visuel de feedback en haut de page, disparaissant au scrolling
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
56
@elodescharmes
Visibilité du feedback
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
http://www.cuisines-aviva.com (05/03/2012)
En résolution
1024*768,
l’utilisateur ne verra
pas que son clic a eu
une conséquence
Mauvaise
pratique
57
@elodescharmes
Règle n°6 : Compréhension
Les mots et symboles sont choisis minutieusement
 Utilisez le vocabulaire !
– Le vocabulaire doit être compréhensible
– orienté utilisateur
– exact et précis
– conventionnel
– Attention aux métaphores
– Le vocabulaire doit être concis
 Les symboles et codes doivent être compréhensibles
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
58
@elodescharmes
Utilisez le vocabulaire !
Attention aux menus
présentés uniquement
sous forme d’icônes
Mauvaise
pratique
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
http://www.rowenta.fr (05/03/2012)
59
@elodescharmes
Le vocabulaire doit être compréhensible
 Utiliser des mots de la langue courante, ne pas essayer d’inventer de
nouveaux codes
 MAIS il ne suffit pas d’utiliser les mots du langage courant pour être
compris par les internautes.
 Les termes doivent être
– Bien choisis
– Faire partie des conventions web
 Attention, ce qui pour un spécialiste peut paraître de l’ordre de la
convention ne l’est pas forcément pour votre internaute
Exemple : « Si vous avez déjà un compte chez nous, veuillez vous connecter à la page
d’ouverture de session. »
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Attention, un
texte ne doit pas
servir à compenser
d’autres libellés
mal choisis !
60
@elodescharmes
Bien choisir ses mots
 Le vocabulaire doit être orienté utilisateur
– Choisir un langage adapté à votre internaute et au service que vous proposez
– Utiliser un vocabulaire exclusif
(chaque mot correspond à un concept et un seul)
 Le vocabulaire doit être concis
– Attention aux phrases inutilement trop longues
 Le vocabulaire doit être exact et précis
– Représenter le plus justement l’idée sous-jacente
Exemple : « Recherche express » ≠ « Recherche avancée » ≠ « Affiner la
recherche » ≠ « Recherche personnalisée »…
 Le vocabulaire doit être conventionnel
– Exemple : « Télécharger » plutôt que « Récupérer le document »
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
61
@elodescharmes
Le vocabulaire doit être compréhensible
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Les items de la
navigation
peuvent être
compris si on y
réfléchis bien…
Mais ils sont
loin d’être
explicites !
Mauvaise
pratique
http://bio-duo.fr/ (07/03/2012)
62
@elodescharmes
Les symboles et codes doivent être
compréhensibles
 Les internautes arrivent sur votre site avec leurs habitudes et leurs apprentissages (vis-à-vis
du monde réel ou vis-à-vis des IHM)
 Attention aux codes et symboles
– Choix des couleurs, respecter les symboliques associées à la culture occidentale
 Rappel de la règle 2 : afin de limiter la charge informationnelle à l’écran, n’utiliser les
couleurs (hors charte graphique simple) que lorsque cela présente un intérêt
Pour aller plus loin…
www.informationisbeautiful.net/visualiza
tions/colours-in-cultures/
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
63
@elodescharmes
Les symboles et codes doivent être
compréhensibles
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
SatisfactionAdresse email
Mot de passe
Confirmer le mot de passe
Nom
Prénom
Date de naissance *
* facultatif
La légende ne suffit
pas à contrecarrer le
fait qu’en voyant un
astérisque rouge, on a
l’impression que le
champ est obligatoire
Mauvaise
pratique
64
@elodescharmes
Règle n°7 : Assistance
Le site aide et dirige l’internaute
 Dirigez grâce à l’organisation et à la visibilité
 Dirigez grâce à des clics logiques
– Dirigez grâce aux affordances
– Attention à ne pas diriger de façon erronée
 Evitez d’avoir à diriger grâce à un modèle d’interaction adapté
 Assistez votre internaute en tenant compte de ses besoins en terme de tâches
 Assistez votre internaute en le suivant de très près
– Fournissez de l’aide explicite en cas de besoin
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
65
@elodescharmes
Dirigez grâce à l’organisation et à la visibilité
 Tout ce dont les utilisateurs peuvent avoir besoin doit être visible (ex : barre de
navigation, liens « page suivante » et « page précédente »…)
 Toujours revenir à la question fondamentale :
que proposez-vous à l’internaute ?
 Points de vigilance
– Scrolling (rappel : indiquer que la page se poursuit)
– Résultats de recherche à pages multiples
– Pages élastiques ou très larges
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
66
@elodescharmes
Dirigez grâce à l’organisation et à la visibilité
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
L’organisation
visuelle de cette
page
n’accompagne
pas l’internaute
dans la
découverte des
contenus
Mauvaise
pratique
http://www.nivea.fr/ (07/03/2012)
67
@elodescharmes
Dirigez grâce à l’organisation et à la visibilité
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
http://www.unebeauty.com (07/03/2012)
Les flèches
permettent de
passer d’une
rubrique à
l’autre mais
sont très peu
visibles
Mauvaise
pratique
68
@elodescharmes
Dirigez grâce à des clics logiques
 Elément cliquable = élément ayant permis la prise de décision
Exemple : « Ecouter un extrait » suivi d’une icône en forme de haut-parleur. Dans ce cas il y
a de grandes chances que l’internaute clique d’abord sur « Ecouter un extrait »…
 A éviter : « Cliquez sur le bouton Machin pour faire Machin »
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
69
@elodescharmes
Dirigez grâce aux affordances
 Les affordances permettent de repérer ce qui est cliquable
– Les éléments cliquables doivent être perçus comme tels
– Profiter des affordances naturelles : les phrases formulées à l’infinitif ou à l’impératif sont les
plus affordantes à la cliquabilité
– Attention aux fausses affordances : grandes images non cliquables par exemple
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
70
@elodescharmes
Dirigez grâce aux affordances
 Les affordances permettent de repérer ce qui est utilisable
– Mettre en évidence les champs de saisie
– Ne pas les remplir
– Attention au contraste
– Utiliser les affordances temporaires
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
71
@elodescharmes
Dirigez grâce aux affordances
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Le champ
actif prend un
affordance
temporaire
qui guide la
saisie
Mauvaise
pratique
http://www.tumblr.com/ (07/03/2012)
Bonne
pratique
72
@elodescharmes
Attention à ne pas diriger de façon erronée
 Le manque de justesse et de précision induit en erreur (attention notamment aux icônes non
accompagnées d’un libellé)
 Les contre-affordances induisent en erreur
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Sur ce site, les
concepteurs ont prévu
le choix du
conditionnement alors
que la quasi-totalité
des produits n’existent
que dans un seul
format…
Mauvaise
pratique
http://www.clarins.fr (07/03/2012)
73
@elodescharmes
Evitez d’avoir à diriger grâce à un modèle d’interaction adapté
 Limiter le nombre d’actions
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
http://www.ikea.com/ (07/03/2012)
L’internaute
doit cliquer
sur le bouton
« actualiser »
après avoir
modifié une
quantité
Mauvaise
pratique
74
@elodescharmes
Assistez votre internaute en tenant compte de ses besoins en terme
de tâches
 S’adapter au comportement des utilisateurs
www.ugc.fr (06/03/2011)
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Le champ d’email est trop
petit et force à une
vérification qui ne se limite
pas à un contrôle visuel,
mais nécessitent
l’utilisation de la souris et
du clavier
Mauvaise
pratique
75
@elodescharmes
Assistez votre internaute en tenant compte de ses besoins en terme
de tâches
 S’adapter au comportement des utilisateurs
www.ugc.fr (06/03/2011)
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Le fait de remplacer au fur
et à mesure les chiffres
saisis par l’utilisateur part
d’une bonne intention en
terme de sécurité perçue,
mais ne tient pas compte du
comportement majoritaire
des internautes lorsqu’ils
renseignent leurs
coordonnées bancaires : ils
vérifient les chiffres à la fin
de la saisie
Mauvaise
pratique
76
@elodescharmes
Assistez votre internaute en le suivant de très près
 Aider l’internaute en lui expliquant très clairement les choix qui s’offrent à lui à
un instant t
 Exemples
– propositions d’orthographes approchantes dans les moteurs de recherche
– Fournir un message explicatif quand une recherche ne propose aucun résultat
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
77
@elodescharmes
Assistez votre internaute en le suivant de très près
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
http://www.yves-rocher.fr (07/03/2012)
L’internaute est
assisté grâce aux
choix qui lui sont
proposés explicitement
lorsqu’il vient
d’ajouter un article au
panier
Bonne
pratique
78
@elodescharmes
Fournissez de l’aide explicite en cas de besoin
 Soit en fournissant un lien vers l’aide en ligne
 Soit en direct (contenus d’aide contextuels)  en général c’est le plus efficace
78
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
On ne doit recourir
à l’aide que lorsque
l’on a tout essayé
avant !!!
Bonne
pratique
79
@elodescharmes
Règle n°8 : Gestion des erreurs
Le site prévoit que l’internaute se trompe
 Erreur fréquente de conception :
on ne prévoit que le parcours idéal !
 Malgré toutes les précautions prises, l’erreur n’est pas un cas isolé et arrivera
forcément, il faut donc la prévoir et aide l’internaute à la surmonter
 Critique pour les interfaces transactionnelles (formulaires)
 Faire une erreur conduira l’internaute à chercher un coupable : suivant son
niveau d’expertise, ce sera lui ou le site…
C’est un point de rupture qui risque de faire perdre votre visiteur.
Il est donc capital
– De les éviter
– De les gérer correctement si elles arrivent
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
80
@elodescharmes
Règle n°8 : Gestion des erreurs
Le site prévoit que l’internaute se trompe
 L’internaute ne doit pas faire d’erreur
– La présentation peut protéger contre l’erreur
– Indiquer les champs obligatoires (pour un formulaire)
– Utiliser des libellés et des légendes explicites
– Bien dimensionner les champs
– Utiliser les affordances
– Le fonctionnement peut protéger contre l’erreur
– Demander des confirmations pour les actions « risquées »
– Empêcher la saisie de données erronées
– Corriger à la volée
 L’internaute doit facilement repérer et comprendre ses erreurs
– Faciliter le repérage
– Expliquer
– Faire preuve de courtoisie dans les messages d’erreur…
 L’internaute doit facilement pouvoir corriger ses erreurs
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
81
@elodescharmes
Eviter les erreurs grâce aux libellés et légendes des champs
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
www.etsy.com (07/03/2012)
Les légendes
accompagnent
l’internaute pour
expliquer à quoi
servent les
informations saisies.
Bonne
pratique
82
@elodescharmes
La présentation du formulaire peut protéger contre l’erreur
 Attention à la taille des champs
 Utiliser les éléments de formulaire à bon escient
– Boutons radio au lieu de cases à cocher par exemple lorsqu’un seul choix est possible
 Attention à l’affordance générale de l’interface
– Ne pas proposer un bouton « annuler » ou « effacer »
Votre département
Votre département
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
83
@elodescharmes
La présentation du formulaire peut protéger contre l’erreur
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Les légendes sont
explicites et affichées
contextuellement en
fonction du champ
dans lequel
l’internaute place son
curseur
Bonne
pratique
http://twitter.com/ (07/03/2012)
84
@elodescharmes
La présentation du formulaire peut protéger contre l’erreur
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Le message n’apporte
rien et risque au
contraire
d’embrouiller
l’internaute avec un
vocabulaire peu
adapté
Mauvaise
pratique
http://balloonup.com (07/03/2012)
85
@elodescharmes
Utiliser les affordances
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Si l’utilisateur clique
sur « annuler »
(pourtant en vert et
plus proche), les
données saisies seront
supprimées…
Mauvaise
pratique
www.cnc-arcene.fr (07/03/2012)
86
@elodescharmes
Le fonctionnement du formulaire peut protéger contre l’erreur
 Demander une confirmation pour les actions risquées (suppression, modification de
données bancaires…)
 Empêcher la saisie de données erronées : n’accepter que les données cohérentes
 Corriger à la volée
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
87
@elodescharmes
Valider ou corriger à la volée
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
http://www.airfrance.fr (11/03/2012)
Exemple de correction
à la volée lorsque l’on
saisi une date de
retour antérieure à la
date de départ.
Bonne
pratique
Attention à ne pas abuser de ce procédé en
l’utilisant sur des champs que l’utilisateur n’a
pas fini de saisir !
88
@elodescharmes
Fournir une explication précise de l’erreur
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Sur le même formulaire :
Exemple d’un message
d’erreur explicite
Exemple d’un message
d’erreur avec 2 pistes
d’explication
« le bon format » ne
renseigne pas précisément
sur ce qui est attendu…
Bonne
pratique
Mauvaise
pratique
www.americanexpress.fr (06/03/2011)
89
@elodescharmes
Conseils pour les messages d’erreur
 Faire preuve de courtoisie dans les messages d’erreur
– « Merci d’indiquer… »
« Merci de préciser… »
– Y compris dans le format de présentation :
éviter les popup d’alerte javascript !
 Présenter toutes les erreurs en une fois (processus moins coûteux en terme d’implication
utilisateur)
 Préférer l’affichage des messages d’erreur directement dans la page (éviter les popup qui
peuvent cacher le contexte)
 Laisser les champs remplis afin que l’internaute puisse comprendre son erreur et la
corriger plus facilement
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
90
@elodescharmes
Règle n°9 : Rapidité
L’internaute ne perd pas son temps
 Optimiser la navigation
– Faciliter l’action de visée des éléments cliquables
– Prendre en compte les besoins de votre internaute sur le plan fonctionnel
 Multiplier les clés d’entrée vers une même page
 Faciliter les interactions
 Eviter les interactions inutiles
– Ne pas demander à l’internaute une action qui peut être prise en charge par la
machine
– Ne pas demander aux internautes deux fois la même chose
 Des modes d’interaction orientés efficience
– Les utilisateurs les plus « experts » doivent pouvoir bénéficier de raccourcis
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
91
@elodescharmes
Prendre en compte les besoins de votre internaute sur le plan
fonctionnel

www.deezer.com (06/03/2011)
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Lors du parcours des éléments de la
ligne, un pictogramme à gauche à
proximité du titre aide à se repérer
Bonne
pratique
92
@elodescharmes
Multiplier les clés d’entrée vers une même page
 L’internaute ne doit pas fonctionner par « essai-erreur » mais uniquement par
« essai-réussite »
 Que l’internaute clique sur un titre, une image, un lien texte, un pictogramme… Il
sera dirigé vers la page correspondante
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
93
@elodescharmes
Faciliter les interactions
 Exemple 1 : proposer des raccourcis pour revenir en arrière de manière sécurisée
lors d’actions transactionnelles (lors d’une commande, possibilité de revenir
modifier le panier après avoir renseigné l’adresse de livraison par exemple)
 Exemple 2 : dans un formulaire, prévoir des champs assez longs pour prendre en
charge la plupart des cas (si le texte est tronqué à l’affichage et que l’utilisateur
veut le vérifier, il devra faire des actions inutiles)
 Exemple 3 : lors de la saisie d’un numéro de carte bancaire en plusieurs champs,
passer automatiquement au champ suivant au cinquième chiffre
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
94
@elodescharmes
Eviter les interactions inutiles
 Ne pas demander à l’internaute une action qui peut être prise en charge par la
machine (moyennant souvent des contrôles supplémentaires)
 Exemple : ne pas proposer de liste déroulante avec une seule option possible  2
clics inutiles !
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
95
@elodescharmes
Eviter les interactions inutiles
www.ugc.fr (06/03/2011)
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Le fait de proposer
d’acheter 0 ou 1 place
de cinéma est inutile.
D’autant plus que
l’option sélectionnée par
défaut est 0 !
Mauvaise
pratique
96
@elodescharmes
Ne pas demander aux internautes deux fois la même chose
 Exemple 1 : conserver les données d’une page à l’autre dans le cas d’une interface
transactionnelle, y compris en cas de rechargement de page, retour à une
page/étape précédente etc.
 Exemple 2 : conserver les mots-clés saisis lorsque l’on passe d’une « recherche
simple » à une « recherche avancée »
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
97
@elodescharmes
Des modes d’interaction orientés efficience
 Les utilisateurs les plus « experts » doivent pouvoir bénéficier de raccourcis
 Qu’appelle-t-on utilisateurs « experts » ?
– Utilisateurs qui savent précisément ce qu’ils veulent
– Utilisateurs récurrents
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
98
@elodescharmes
Des raccourcis pour les utilisateurs qui savent ce qu’ils veulent
www.telemarket.fr (06/03/2011)
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Propose une
fonctionnalité
« LISTExpress »
pour les utilisateurs
déjà fixés sur leurs
choix de type de
produit
Bonne
pratique
99
@elodescharmes
Des raccourcis pour les utilisateurs récurrents
www.coursesu.com (06/03/2011)
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Propose liste de
fonctionnalités
permettant à un
utilisateur récurrent
de récupérer des
données utiles d’une
visite sur l’autre
Bonne
pratique
100
@elodescharmes
Règle n°10 : Liberté
C’est l’internaute qui commande
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
 Respectez les contrôles utilisateur conventionnels
– Ne pas empêcher
– Ne pas imposer
 Fuyez les actions au rollover
 Flexibilité des actions utilisateur
– Il faut TOUJOURS laisser la possibilité à l’utilisateur de revenir en arrière.
 Donnez la possibilité à l’internaute de contourner le système et d’agir dessus
 N’induisez pas de comportement passif
– L’internaute n’est pas devant une télévision !
 N’enfermez pas votre internaute
– Proposez plusieurs systèmes de navigation
 Le système n’est pas intrusif
– Le système n’est pas lourd ou insistant dans ses propositions
– Le système ne force pas l’utilisateur a voir quelque-chose
– Au recours, le site prend le contrôle de l’ordinateur !
101
@elodescharmes
Respectez les contrôles utilisateur conventionnels
 L’internaute doit toujours garder le contrôle sur le site (ou du moins en avoir
l’impression). Il ordonne et la machine répond, et rien ne se passera sans qu’il
l’ait demandé.
 Ne pas empêcher
– l’utilisation du bouton « back »
– La copie d’un contenu textuel
– …
 Ne pas imposer
– L’ouverture en plein écran
– …
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
102
@elodescharmes
Fuyez les actions au rollover
 Ok pour afficher des informations dans une zone dédiée (cf. règle 2 sur
l’organisation visuelle des pages) mais pas pour déclencher des actions !
 L’utilisateur a alors tout de suite l’impression de perdre le contrôlé
Expérience
Passez un peu de temps sur le site
http://www.dontclick.it/
Qu’en pensez-vous ?
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
103
@elodescharmes
Fuyez les actions au rollover
www.labanquepostale.fr (09/03/2011)
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Le système de
renseignement du mot de
passe est basé sur le survol
à la souris des chiffres.
D’autant plus impossible
à utiliser que le code saisi
est masqué !
Mauvaise
pratique
104
@elodescharmes
Flexibilité des actions utilisateur
 Il faut TOUJOURS laisser la possibilité à l’utilisateur de revenir en arrière
 Proposer des fonctions
– D’annulation
– De undo/redo
– De retour en arrière
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
105
@elodescharmes
Flexibilité des actions utilisateur
www.amazon.fr (09/03/2011)
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Tant que la commande
n’est pas expédiée, le client
a la possibilité de l’annuler
très simplement
Bonne
pratique
106
@elodescharmes
Flexibilité des actions utilisateur
www.google.com/calendar/ (09/03/2011)
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Un exemple de bon compromis :
Google agenda ne demande pas de
confirmation à l’utilisation lorsqu’il
supprime un évènement  plus de
fluidité
Cependant l’interface propose la
possibilité d’annuler la dernière
action effectuée  plus de sécurité
Bonne
pratique
107
@elodescharmes
Donnez la possibilité à l’internaute de contourner le système et d’agir
dessus
 Par exemple : autoriser à stopper une animation, une vidéo, du son, contrôler le volume du
son…
 Primordial dans le cas d’affichage successifs de contenus dans le même espace écran (cf.
règle 2, procédé utilisé pour démultiplier la valeur du pixel carré)
– Remarque : l’attente ou l’actualisation de la page ne sont pas des moyens de contournement
 Ce type de contenu est souvent publicitaire : donner le contrôle à l’utilisateur permet de
prendre un compte un comportement majoritaire
– Je viens sur un site avec un objectif précis
– A cette occasion je vois quelque-chose d’annexe
– Je ne vais consulter ce contenu que lorsque j’ai fini mon premier objectif
 Il est donc capital de permettre à l’utilisateur d’y accéder à nouveau quelques minutes
plus tard
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
108
@elodescharmes
Donnez la possibilité à l’internaute de contourner le système et
d’agir dessus
www.fluctuat.net/ (09/03/2011)
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Navigation facilitée
parmi les mises en
avant en images des
contenus
Bonne
pratique
109
@elodescharmes
Donnez la possibilité à l’internaute de contourner le système et
d’agir dessus
www.virginmega.fr (09/03/2011)
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Propose deux
traitements
différents pour la
gestion des contrôles
sur les bandeaux avec
affichages successifs
Bonne
pratique
110
@elodescharmes
Donnez la possibilité à l’internaute de contourner le système et
d’agir dessus
www.toyota.fr (09/03/2011)
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
La présentation de la
gamme donne des
informations dans
une vidéo sur
laquelle le seul
contrôle possible est
de l’arrêter ou de la
rejouer une fois
terminée
Mauvaise
pratique
111
@elodescharmes
N’induisez pas de comportement passif
 Sauf demande explicite (VOD, démo…), l’internaute n’est pas devant une
télévision !
 Problème très fréquent chez les marques qui veulent présenter leur produits : une
présentation web n’est pas la même chose qu’un spot TV
 Les études montrent que les internautes se plaignent de la longueur d’une
animation dès les 30 premières secondes
 Attention aussi à la mise en place animée des pages qui peut prendre du temps (ok
si c’est un temps de chargement, pas si il s’agit uniquement d’un effet visuel voulu
!)
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
112
@elodescharmes
N’induisez pas de comportement passif
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
www.eau-thermale-avene.com (09/03/2011)
Impose un effet de
fondu à chaque
changement de page
Mauvaise
pratique
113
@elodescharmes
N’enfermez pas votre internaute
 Proposez plusieurs systèmes de navigation
– A travers des rubriques
– Recherche par mots-clés
– Recherche par critères
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
114
@elodescharmes
Le système n’est pas intrusif
 Le système n’est pas lourd ou insistant dans ses propositions
 Le système ne force pas l’utilisateur a voir quelque-chose
– Eviter les introductions et fournir des entrées directes (splash pages par exemple)
– Si vous ne pouvez pas faire autrement, essayez quand même de fourni un
moyen de contournement
– Eviter les pop-up spontanées
– Parfois adaptée : contenus complémentaires, aide…
– Uniquement si l’internaute l’a demandé
– Format technique popup pur (javascript:alert(‘texte');) à prospcrire !
– Le site n’agit pas à la place de l’internaute
– Exemple pour un site d’e-commerce : n’ajouter un article au panier que suite
à la clic sur un élément explicite
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
115
@elodescharmes
Le système n’est pas lourd ou insistant dans ses propositions
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Copie d’écran de l’article
www.theinquirer.fr/2008/12/18/ch
ez-pixmania-il-faut-payer-plus-
cher-pour-se-faire-rembourser-la-
difference.html (09/03/2011)
Pixmania impose dans
chacune de ses commande un
« contrat achat tranquille ».
Sa suppression est possible
mais loin d’être évidente !
Mauvaise
pratique
116
@elodescharmes
Le système n’est pas lourd ou insistant dans ses propositions
www.darty.com (09/03/2011)
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Bonne
pratique
117
@elodescharmes
Le système n’est pas intrusif
www.allocine.fr 12/03/2011
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Le splash
screen peut
être contourné
par un bouton
d’accès direct
Bonne
pratique
118
@elodescharmes
Le site n’agit pas à la place de l’internaute
www.nicolas.com (09/03/2011)
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Modifie
automatiquement
la quantité
commandée en
fonction du
conditionnement
des produits
Mauvaise
pratique
119
@elodescharmes
Au secours, le site prend le contrôle de l’ordinateur !
 Respecter la stricte correspondance entre ce que l’internaute a demande et ce
qu’il obtient.
 Eviter d’ouvrir une application logicielle (messagerie, lecteur media…), surtout
avec des contenus pré-remplis
 Eviter de jouer un bande son non demandée
 Eviter le très pénible « assistant trombone »…
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
120
@elodescharmes
Règle n°11 : Accessibilité
Un site facile d’accès pour tous
 Règle 11.1 : Accessibilité physique
– Cf. cours précédent
– Cf. suite du cours : audit ergonomique
 Règle 11.2 : Accessibilité technologique
– Le site doit s’adapter à la plateforme utilisée par l’utilisation pour y accéder
– Plateforme = OS + Browser + Fixe ou portable + taille et résolution de l’écran +
fonctions actives (javascript, cookies…) + plug-in installés (flash, java…) + logiciels
installés (Adobe, RealPlayer, WMP…)
– Le site ne doit pas se présenter toujours forcément de la même manière, mais il doit être
consultable quelle que soit la configuration
Evitez les messages du type « Ce site est optimisé pour une consultation sous le
navigateur XXX, en résolution YYY, veuillez vous y conformer »
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
121
@elodescharmes
Accessibilité technologique
 Deux possibilités :
1. La plateforme de consultation est de l’ordre du bonus : adaptez le contenu
– Détection du navigateur utilisé
– Définir une configuration idéale et une configuration dégradée (par exemple si
Flash n’est pas installé)
2. La plateforme de consultation est stratégique : informez et guidez
– Proposer un lien à l’utilisateur lui permettant de mettre à jour sa plateforme
– Indiquer comment activer une option (accepter les cookies par exemple)
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
Proposer une
version HTML
alternative au
Flash permet
aussi
d’optimiser le
référencement
du site
122
@elodescharmes
Règle n°12 : Satisfaction de votre internaute
 Cette règle passe avant toutes les autres
 Mais c’est la plus difficile à appliquer
– Il faut connaître votre internaute (en temps qu’être humain et en temps que persona
spécifique)
– La satisfaction ne se mesure pas facilement et recouvre beaucoup de problématiques
– Qualité de service, esthétique, expérience utilisateur…
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
123
@elodescharmes
Règle n°12 : Satisfaction de votre internaute
 Satisfaire grâce au critère d’utilité
– Le site permet aux internaute de remplir leurs objectifs
– Le site fourni des fonctionnalités de second niveau optimisant la satisfaction
 Satisfaire grâce à l’esthétique et à l’expérience utilisateur globale
– C’est plutôt l’affaire des graphistes et designers (qui doivent travailler de concert avec
l’ergonome)
 Satisfaire grâce à la qualité du service
– Fournir un site respectueux en terme de transaction et de SAV
– Ne s’applique pas uniquement au sites de e-commerce (ex : possibilité de se désinscrire d’une
newsletter)
 Satisfaire grâce à la puissance et la fiabilité technique
– Au final, votre site doit fonctionner !
– Attention à la fiabilité : erreurs techniques, liens cassés, pages en construction, lenteurs de
chargement etc. (non, ça n’arrive pas qu’aux autres…)
Architecture
Organisation visuelle
Cohérence
Conventions
Information
Compréhension
Assistance
Gestion des erreurs
Rapidité
Liberté
Accessibilité
Satisfaction
124
@elodescharmes
12 règles à utiliser à bon escient
 Ces règles peuvent se compenser les unes par rapport aux autres
 12 points à garder en mémoire lors de la phase de conception
 Ils devraient vous permettre d’éviter les principaux écueils d’un point de vue ergonomique
 Ces 12 règles peuvent également servir de grille pour la réalisation d’un audit ergonomique
(cf. suite du cours)

Contenu connexe

Tendances

Charte Ergonomique
Charte Ergonomique Charte Ergonomique
Charte Ergonomique
Rached Krim
 
Conception et rédaction de contenus pour le web - part 2
Conception et rédaction de contenus pour le web - part 2Conception et rédaction de contenus pour le web - part 2
Conception et rédaction de contenus pour le web - part 2
Nurun
 

Tendances (13)

Cours ergonomie des IHM web - Chapitre 12 - Maquette
Cours ergonomie des IHM web - Chapitre 12 - MaquetteCours ergonomie des IHM web - Chapitre 12 - Maquette
Cours ergonomie des IHM web - Chapitre 12 - Maquette
 
Cours ergonomie des IHM web - Chapitre 9 - Architecturer l'information
Cours ergonomie des IHM web - Chapitre 9 - Architecturer l'informationCours ergonomie des IHM web - Chapitre 9 - Architecturer l'information
Cours ergonomie des IHM web - Chapitre 9 - Architecturer l'information
 
Cours ergonomie des IHM web - Chapitre 1 - contexte
Cours ergonomie des IHM web - Chapitre 1 - contexteCours ergonomie des IHM web - Chapitre 1 - contexte
Cours ergonomie des IHM web - Chapitre 1 - contexte
 
Ergonomie des IHM web - Notes de cours (3/3)
Ergonomie des IHM web - Notes de cours (3/3)Ergonomie des IHM web - Notes de cours (3/3)
Ergonomie des IHM web - Notes de cours (3/3)
 
Cours ergonomie des IHM web - Chapitre 7 - Méthode des personas
Cours ergonomie des IHM web - Chapitre 7 - Méthode des personasCours ergonomie des IHM web - Chapitre 7 - Méthode des personas
Cours ergonomie des IHM web - Chapitre 7 - Méthode des personas
 
Cours ergonomie des IHM web - Chapitre 10 - Méthode du tri des cartes
Cours ergonomie des IHM web - Chapitre 10 - Méthode du tri des cartesCours ergonomie des IHM web - Chapitre 10 - Méthode du tri des cartes
Cours ergonomie des IHM web - Chapitre 10 - Méthode du tri des cartes
 
Ergonomie Web - Une Introduction
Ergonomie Web - Une IntroductionErgonomie Web - Une Introduction
Ergonomie Web - Une Introduction
 
Ergonomie(1) (1)
Ergonomie(1) (1)Ergonomie(1) (1)
Ergonomie(1) (1)
 
L'Ergonomie pour les Nuls
L'Ergonomie pour les NulsL'Ergonomie pour les Nuls
L'Ergonomie pour les Nuls
 
Introduction à l'ergonomie - Drupal Lyon
Introduction à l'ergonomie - Drupal LyonIntroduction à l'ergonomie - Drupal Lyon
Introduction à l'ergonomie - Drupal Lyon
 
Site web conception
Site web conceptionSite web conception
Site web conception
 
Charte Ergonomique
Charte Ergonomique Charte Ergonomique
Charte Ergonomique
 
Conception et rédaction de contenus pour le web - part 2
Conception et rédaction de contenus pour le web - part 2Conception et rédaction de contenus pour le web - part 2
Conception et rédaction de contenus pour le web - part 2
 

Similaire à Cours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie web

cours_integ_web_Cohérence_des_pages_web_23_24.pdf
cours_integ_web_Cohérence_des_pages_web_23_24.pdfcours_integ_web_Cohérence_des_pages_web_23_24.pdf
cours_integ_web_Cohérence_des_pages_web_23_24.pdf
RimBenameur
 
6 1-ergonomie du web
6 1-ergonomie du web6 1-ergonomie du web
6 1-ergonomie du web
RYMAA
 
Ged Open Source - Documation 2010
Ged Open Source - Documation 2010Ged Open Source - Documation 2010
Ged Open Source - Documation 2010
Thomas Choppy
 
Competitic ergonomie site web - numerique en entreprise
Competitic   ergonomie site web - numerique en entrepriseCompetitic   ergonomie site web - numerique en entreprise
Competitic ergonomie site web - numerique en entreprise
COMPETITIC
 
Développement d'un site web pour la promotion de pme 2012 mentor cld vallée...
Développement d'un site web pour la promotion de pme 2012   mentor cld vallée...Développement d'un site web pour la promotion de pme 2012   mentor cld vallée...
Développement d'un site web pour la promotion de pme 2012 mentor cld vallée...
MXO | agence totale
 
Maîtriser et unifier les composants de l'ECM (CXP/Visiativ)
Maîtriser et unifier les composants de l'ECM (CXP/Visiativ)Maîtriser et unifier les composants de l'ECM (CXP/Visiativ)
Maîtriser et unifier les composants de l'ECM (CXP/Visiativ)
Visiativ
 

Similaire à Cours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie web (20)

10 bénéfices d'une bonne architecture d'information - Webinar Yellow Dolphin...
10 bénéfices d'une bonne architecture d'information -  Webinar Yellow Dolphin...10 bénéfices d'une bonne architecture d'information -  Webinar Yellow Dolphin...
10 bénéfices d'une bonne architecture d'information - Webinar Yellow Dolphin...
 
Conception d'un Extranet
Conception d'un ExtranetConception d'un Extranet
Conception d'un Extranet
 
Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...
Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...
Livre blanc : Accessibilité Web, Guide pour la conception de sites web access...
 
cours_integ_web_Cohérence_des_pages_web_23_24.pdf
cours_integ_web_Cohérence_des_pages_web_23_24.pdfcours_integ_web_Cohérence_des_pages_web_23_24.pdf
cours_integ_web_Cohérence_des_pages_web_23_24.pdf
 
Penser et concevoir son site web en 2015
Penser et concevoir son site web en 2015Penser et concevoir son site web en 2015
Penser et concevoir son site web en 2015
 
Ergonomie et Referencement : ami ou ennemi ?
Ergonomie et Referencement : ami ou ennemi ?Ergonomie et Referencement : ami ou ennemi ?
Ergonomie et Referencement : ami ou ennemi ?
 
Analyse comparateur assurance
Analyse comparateur assuranceAnalyse comparateur assurance
Analyse comparateur assurance
 
Nouvelles architectures de sites web et SEO
Nouvelles architectures de sites web et SEONouvelles architectures de sites web et SEO
Nouvelles architectures de sites web et SEO
 
L'accessibilité, au-delà des contraintes, un atout pour votre audience Avanta...
L'accessibilité, au-delà des contraintes, un atout pour votre audience Avanta...L'accessibilité, au-delà des contraintes, un atout pour votre audience Avanta...
L'accessibilité, au-delà des contraintes, un atout pour votre audience Avanta...
 
Intranets230316
Intranets230316Intranets230316
Intranets230316
 
CMSday 2013 - L'accessibilité, au delà des contraintes, un atout pour votre a...
CMSday 2013 - L'accessibilité, au delà des contraintes, un atout pour votre a...CMSday 2013 - L'accessibilité, au delà des contraintes, un atout pour votre a...
CMSday 2013 - L'accessibilité, au delà des contraintes, un atout pour votre a...
 
6 1-ergonomie du web
6 1-ergonomie du web6 1-ergonomie du web
6 1-ergonomie du web
 
Ged Open Source - Documation 2010
Ged Open Source - Documation 2010Ged Open Source - Documation 2010
Ged Open Source - Documation 2010
 
5. Grands principes de conception
5. Grands principes de conception5. Grands principes de conception
5. Grands principes de conception
 
Competitic ergonomie site web - numerique en entreprise
Competitic   ergonomie site web - numerique en entrepriseCompetitic   ergonomie site web - numerique en entreprise
Competitic ergonomie site web - numerique en entreprise
 
Mtl apptalks ux mobile et ucd - janvier 2014
Mtl apptalks   ux mobile et ucd - janvier 2014Mtl apptalks   ux mobile et ucd - janvier 2014
Mtl apptalks ux mobile et ucd - janvier 2014
 
Les nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEOLes nouveaux challenges techniques pour le SEO
Les nouveaux challenges techniques pour le SEO
 
Développement d'un site web pour la promotion de pme 2012 araq-sud - 7 févr...
Développement d'un site web pour la promotion de pme 2012   araq-sud - 7 févr...Développement d'un site web pour la promotion de pme 2012   araq-sud - 7 févr...
Développement d'un site web pour la promotion de pme 2012 araq-sud - 7 févr...
 
Développement d'un site web pour la promotion de pme 2012 mentor cld vallée...
Développement d'un site web pour la promotion de pme 2012   mentor cld vallée...Développement d'un site web pour la promotion de pme 2012   mentor cld vallée...
Développement d'un site web pour la promotion de pme 2012 mentor cld vallée...
 
Maîtriser et unifier les composants de l'ECM (CXP/Visiativ)
Maîtriser et unifier les composants de l'ECM (CXP/Visiativ)Maîtriser et unifier les composants de l'ECM (CXP/Visiativ)
Maîtriser et unifier les composants de l'ECM (CXP/Visiativ)
 

Plus de ElodieDescharmes

Plus de ElodieDescharmes (16)

Petite histoire du Lean
Petite histoire du LeanPetite histoire du Lean
Petite histoire du Lean
 
Project Management 5.1 human resources
Project Management 5.1 human resourcesProject Management 5.1 human resources
Project Management 5.1 human resources
 
Project Management 1.1 introduction
Project Management 1.1 introductionProject Management 1.1 introduction
Project Management 1.1 introduction
 
Project Management 7 agility basics
Project Management 7 agility basicsProject Management 7 agility basics
Project Management 7 agility basics
 
Project Management 10 agile games
Project Management 10 agile gamesProject Management 10 agile games
Project Management 10 agile games
 
Project Management 9 kanban
Project Management 9 kanbanProject Management 9 kanban
Project Management 9 kanban
 
Project Management 8 scrum
Project Management 8 scrumProject Management 8 scrum
Project Management 8 scrum
 
Project Management 6 communication
Project Management 6 communicationProject Management 6 communication
Project Management 6 communication
 
Project Management 4 risks
Project Management 4 risksProject Management 4 risks
Project Management 4 risks
 
Project Management 3.2 cost_exo
Project Management 3.2 cost_exoProject Management 3.2 cost_exo
Project Management 3.2 cost_exo
 
Project Management 3.2 cost
Project Management 3.2 costProject Management 3.2 cost
Project Management 3.2 cost
 
Project Management 3.1 time
Project Management 3.1 timeProject Management 3.1 time
Project Management 3.1 time
 
Project Management 2 scope
Project Management 2 scopeProject Management 2 scope
Project Management 2 scope
 
Cours ergonomie des IHM web - Chapitre 4 - Entretien semi directif
Cours ergonomie des IHM web - Chapitre 4 - Entretien semi directifCours ergonomie des IHM web - Chapitre 4 - Entretien semi directif
Cours ergonomie des IHM web - Chapitre 4 - Entretien semi directif
 
Cours ergonomie des IHM web - Chapitre 3 - Caractéristiques générales des int...
Cours ergonomie des IHM web - Chapitre 3 - Caractéristiques générales des int...Cours ergonomie des IHM web - Chapitre 3 - Caractéristiques générales des int...
Cours ergonomie des IHM web - Chapitre 3 - Caractéristiques générales des int...
 
Acculturation agilite
Acculturation agiliteAcculturation agilite
Acculturation agilite
 

Dernier

Dernier (13)

Un petit coin etwinning- Au fil des cultures urbaines
Un petit coin  etwinning- Au fil des cultures urbainesUn petit coin  etwinning- Au fil des cultures urbaines
Un petit coin etwinning- Au fil des cultures urbaines
 
Réunion des directeurs de Jonzac - 15 mai 2024
Réunion des directeurs de Jonzac - 15 mai 2024Réunion des directeurs de Jonzac - 15 mai 2024
Réunion des directeurs de Jonzac - 15 mai 2024
 
Nathanaëlle Herbelin.pptx Peintre française
Nathanaëlle Herbelin.pptx Peintre françaiseNathanaëlle Herbelin.pptx Peintre française
Nathanaëlle Herbelin.pptx Peintre française
 
Àma Gloria.pptx Un film tourné au Cap Vert et en France
Àma Gloria.pptx   Un film tourné au Cap Vert et en FranceÀma Gloria.pptx   Un film tourné au Cap Vert et en France
Àma Gloria.pptx Un film tourné au Cap Vert et en France
 
Saint Damien, missionnaire auprès des lépreux de Molokai, Hawaï.pptx
Saint Damien, missionnaire auprès des lépreux de Molokai, Hawaï.pptxSaint Damien, missionnaire auprès des lépreux de Molokai, Hawaï.pptx
Saint Damien, missionnaire auprès des lépreux de Molokai, Hawaï.pptx
 
Texte avec différentes critiques positives, négatives ou mitigées
Texte avec différentes critiques positives, négatives ou mitigéesTexte avec différentes critiques positives, négatives ou mitigées
Texte avec différentes critiques positives, négatives ou mitigées
 
GHASSOUB _Seance 3_ measurement and evaluation in education.pptx
GHASSOUB _Seance 3_ measurement and evaluation in education.pptxGHASSOUB _Seance 3_ measurement and evaluation in education.pptx
GHASSOUB _Seance 3_ measurement and evaluation in education.pptx
 
Fiche de vocabulaire pour faire une appréciation
Fiche de vocabulaire pour faire une appréciationFiche de vocabulaire pour faire une appréciation
Fiche de vocabulaire pour faire une appréciation
 
Chapitre3-Classififcation des structures de chaussu00E9e.pptx
Chapitre3-Classififcation des structures de  chaussu00E9e.pptxChapitre3-Classififcation des structures de  chaussu00E9e.pptx
Chapitre3-Classififcation des structures de chaussu00E9e.pptx
 
CALENDRIER ET COMPTE RENDU REUNION DIRECTION
CALENDRIER ET COMPTE RENDU REUNION DIRECTIONCALENDRIER ET COMPTE RENDU REUNION DIRECTION
CALENDRIER ET COMPTE RENDU REUNION DIRECTION
 
Les débuts de la collection "Le livre de poche"
Les débuts de la collection "Le livre de poche"Les débuts de la collection "Le livre de poche"
Les débuts de la collection "Le livre de poche"
 
GHASSOUB _Seance 4_ measurement and evaluation in education_-.pptx
GHASSOUB _Seance 4_ measurement and evaluation in education_-.pptxGHASSOUB _Seance 4_ measurement and evaluation in education_-.pptx
GHASSOUB _Seance 4_ measurement and evaluation in education_-.pptx
 
complement de agri cours irrigation.pptx
complement de agri cours irrigation.pptxcomplement de agri cours irrigation.pptx
complement de agri cours irrigation.pptx
 

Cours ergonomie des IHM web - Chapitre 5 - Les règles de l'ergonomie web

  • 1. Elodie Descharmes (ingénieur Orange Labs) Filière IMR, deuxième année 2012-2013 Ergonomie Parce qu’il ne sert à rien de réinventer ce qui est déjà très bien fait, ce cours est très largement basé que le livre suivant : Ergonomie web, pour des sites web efficaces Amélie Boucher, Éditions Eyrolles
  • 2. Les règles de l’ergonomie web Architecture Information Rapidité Organisation visuelle Compréhension Liberté Cohérence Assistance Accessibilité Conventions Gestion des erreurs Satisfaction
  • 3. 3 @elodescharmes Introduction  Ces règles sont simples, mais elles ne s’inventent pas, et c’est justement leur simplicité qui fait qu’on les oublie fréquemment !  Ces règles permettent d’améliorer la qualité perçue d’un site de deux manières – Lors de la conception d’un nouveau site – Lors de l’évaluation d’un site existant  La prise en compte de ces règles demande – Des connaissances en ergonomie théorique – De la rigueur de la minutie… Presque de l’acharnement pour les appliquer à toutes les pages !  Ces règles s’imbriquent les unes les autres, et il faut parfois trouver le juste compromis entre deux principes qui peuvent se mettre réciproquement en défaut
  • 4. 4 @elodescharmes Règle n°1 : Architecture Le site est bien rangé  L’internaute doit pouvoir y trouver ce qu’il cherche Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 5. 5 @elodescharmes Règle n°1 : Architecture Le site est bien rangé  Les regroupements sont logiques – Une rubrique est constituée d’éléments partageants suffisamment de caractéristiques pour être classés dans la même catégorie  Les menus aident l’internaute à naviguer dans les contenus – Les intitulés doivent être signifiants, complémentaires, exclusifs Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 6. 6 @elodescharmes Architecturer un site  L’architecture d’un site se construit en deux étapes – Catégorisation : créer des groupes de contenus – Structuration : hiérarchiser les contenus  Ces deux étapes doivent tenir compte de l’internaute et de ses réflexes d’utilisation Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 7. 7 @elodescharmes Les regroupements sont logiques  Le regroupement doit avoir un sens  Pourquoi ? – Les internautes s’arrêtent très tôt dans le processus de lecture des titres de rubriques. Ils pensent avoir compris et extrapolent pour la suite du menu. Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 8. 8 @elodescharmes Les regroupements sont logiques www.sfr.fr (ancienne version du site ) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Mauvaise application Des tests ont montré que 75% des internautes ne voyaient pas le mot « classique » avant la troisième passe sur la même page
  • 9. 9 @elodescharmes La structuration met en avant les contenus clés  Identifier les pages les plus recherchées par les internautes et les mettre en avant dans l’architecture du site Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Mauvaise application La fonctionnalité d’achat de capsules était « cachée » dans une sous-rubrique www.nespresso.com (04/03/2012) www.nespresso.com (ancienne version du site) Nouvelle version : la fonctionnalité est mise en évidence dès la homepage Bonne application
  • 10. 10 @elodescharmes Les menus aident l’internaute à naviguer dans les contenus  Les menus sont des éléments de navigation  Les intitulés des rubriques doivent être : – Signifiants : doit permettre à l’internaute de deviner le contenu de la rubrique – Complémentaires : il n’existe pas de contenu qui n’appartient à aucune rubrique – Exclusifs : un intitulé doit être le seul envisageable pour un internaute qui cherche un contenu précis, il doit pouvoir choisir sans hésiter Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 11. 11 @elodescharmes Contourner un site mal rangé  Dans le cas de la refonte d’un site existant, s’il n’est pas possible de remettre en cause l’architecture globale  La solution : utiliser les liens transversaux au cœur des pages Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction « Lien transversal » Lien qui passe outre l’arborescence du site. Il permet de proposer, à des endroits appropriés, des liaisons directe vers des contenus en rapport avec les informations consultées.
  • 12. 12 @elodescharmes Règle n°2 : Organisation visuelle La page est bien rangée  La grande majorité des individus se sentent mieux dans des environnements simples, organisés, aérés  Objectif cognitif : limiter la charge mentale liée au traitement de ce qu’il voit à l’écran  Notion de « bruit visuel » – tout élément graphique qui ne transmet pas d'information, surcharge la présentation, ou entre en compétition avec l'information – très utilisé aussi en environnement urbain, afin d’optimiser la visibilité des signaux routiers par exemple Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 13. 13 @elodescharmes Règle n°2 : Organisation visuelle La page est bien rangée  Eviter le trop-plein d’information – Réduite la quantité de mots sur les pages navigantes – N’afficher que les principaux éléments de navigation et d’interaction – Différencier les quantités d’informations réelles et perçues – Démultiplier la valeur du pixel carré  Optimiser l’organisation et la hiérarchie visuelle Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 14. 14 @elodescharmes Eviter le trop-plein d’information  Supprimer tout ce qui ne sert à rien, privilégier l’essentiel  Diviser la quantité de mots par deux – Pourquoi ? – Constat empirique : on arrive en général relativement facilement à réduire la quantité de mots d’un texte de 50% – S’adapter au réflexe de « scan visuel » (lecture en diagonale) – Où ? – Valable uniquement pour les pages navigantes (vs. Pages de contenu final) – Comment ? – Remettre en cause systématiquement l’utilité de chaque élément de l’interface – Piste d’amélioration : on peut souvent faire l’économie d’une légende explicative avec une interface mieux conçue Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction « Every sentence, every phrase, every word has to fight for its life » Crawford Kilian, Writing for the web, 4th édition, Self-Consel Press, 2009
  • 15. 15 @elodescharmes Réduire la quantité de mots sur les pages navigantes Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Mauvaise application Bonne application www.smartphoto.fr (04/03/2012) extrafilm.com (ancienne version) La répétition du verbe « commander « à chaque item du menu n’apporte rien Nouvelle version du site
  • 16. 16 @elodescharmes Eviter le trop-plein d’information Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Mauvaise application « entrez votre identifiant et votre mot de passe » est une phrase inutile car redondante avec les libellés des champs
  • 17. 17 @elodescharmes N’afficher que les principaux éléments de navigation et d’interaction Les options liées au véhicules n’apparaissent pas si l’on sélectionne un autre moyen de transport Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Bonne application
  • 18. 18 @elodescharmes L’hétérogénéité visuelle augmente la charge informationnelle  Limiter les typographies et les couleurs différentes www.mairie-chatillon-sur-seine.fr (04/03/2012) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Mauvaise application
  • 19. 19 @elodescharmes Les images de fond augmentent la charge informationnelle Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Mauvaise application www.allocine.fr (01/03/2011)
  • 20. 20 @elodescharmes Les animations augmentent la charge informationnelle Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Mauvaise application L’animation publicitaire détourne le regard du contenu effectif de la page www.seloger.com (04/03/2012)
  • 21. 21 @elodescharmes Petit point sur les animations  Attention !  Le traitement de l’animation demande beaucoup de ressources mentales car nous sommes intuitivement dirigés vers son exploration  L’animation ne doit pas tourner en boucle en permanence  Ne proposez pas d’animations simultanées  Attention à bien différencier les animations des affichages successifs (sur action utilisateur) de contenus statiques. Dans ce cas tout dépend de la vitesse d’affichage Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 22. 22 @elodescharmes Différencier les quantité d’informations réelles et perçues Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Affichages successifs (vs animations) avec vitesse de défilement relativement rapide Plusieurs affichages dynamiques en boucle et en parallèle ! + l’image de fond… Mauvaise application www.virginmega.fr (04/03/2012)
  • 23. 23 @elodescharmes Démultiplier la valeur du pixel carré Remplacement de l’information au survol (rollover) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction www.jules.com (04/03/2012) Affichage des photos des produits au survol des vignettes Bonne application
  • 24. 24 @elodescharmes Petit point sur le rollover  Attention ! – L’internaute doit accomplir une action supplémentaire pour accéder à ces informations – La possibilité de faire apparaître des informations au rollover n’est pas toujours évidente – Les informations affichées ne doivent pas se situer trop loin du déclencheur – Déterminer une zone suffisante pour l’interaction avec la souris Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 25. 25 @elodescharmes La question de la publicité  On s’en passerait bien… Mais on ne peut pas toujours remettre en cause un des principaux modèles économiques du web !  Cependant on peut la cantonner au pourtour du site (on la clusterise)  Dans tous les cas, elle ne doit pas se mélanger au contenu ! Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 26. 26 @elodescharmes Optimiser l’organisation et la hiérarchie visuelle  Nous avons vu comment éviter le trop-plein d’informations  Encore faut-il que les informations restantes pertinentes soient bien organisées à l’écran !  Utiliser les lois de la Gestalt : similarité, proximité – Dégager des blocs d’informations, des zones différenciées – Distinguer – Les espaces de navigation – Les blocs de contenu – Les informations complémentaires – Les éléments d’interaction (boutons d’action, formulaires…) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 27. 27 @elodescharmes Optimiser l’organisation et la hiérarchie visuelle Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction http://eu.farrow-ball.com/ (04/03/2012) L’organisation visuelle de la page d’accueil permet de bien différencier les différentes zones d’interaction et de contenu Bonne application
  • 28. 28 @elodescharmes Essayer d’emboiter les zones plutôt que de simplement les juxtaposer Attention à trouver un bon compromis entre hétérogénéité (complexité au niveau de la sélection mentale entre éléments différents) et homogénéité (informations difficiles à distinguer car tout est au même niveau) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction fr.yahoo.com (04/03/2012) L’utilisation de sous-parties avec titres et séparateurs permet une prise en main simplifiée du formulaire Bonne application
  • 29. 29 @elodescharmes Règle n°3 : Cohérence Le site capitalise sur l’apprentissage interne  Lorsqu’un internaute utilise avec succès une première page, il essayera de répéter le même processus sur les autres pages  Le site doit être cohérent avec lui-même d’une page à l’autre ! Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 30. 30 @elodescharmes Règle n°3 : Cohérence Le site capitalise sur l’apprentissage interne  Les localisations sont cohérentes – Ne pas changer les éléments d’emplacement d’une page à l’autre ! – Critique pour les éléments de navigation  Les appellations sont cohérentes – Toujours faire appel au même mot pour désigner le même élément ! – Exemple : « panier », « liste d’articles », « liste d’achats »…  Les formats de présentation sont cohérents – Définir des groupes d’objets et une présentation cohérente pour chaque groupe. – Peut s’appliquer aux textes, au liens, aux images, aux menus de navigation etc.  Les interactions sont cohérentes – Le site doit toujours se comporter de la même manière dans une situation donnée. – Exemple : si un menu déroulant s’active par un clic, éviter dans d’autres pages de l’activer par rollover… Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 31. 31 @elodescharmes Les localisations sont cohérentes Clic Clic Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 32. 32 @elodescharmes Charte ergonomique  La cohérence des localisations, appellations, formats de présentation et des interactions peut être soutenue par la formalisation et l’utilisation d’une charte ergonomique  Ce type d’outil permet à toutes les personnes travaillant sur le projet de partager la même référence ≠charte graphique ! Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 33. 33 @elodescharmes Règle n°4 : Conventions Le site capitalise sur l’apprentissage externe  Capitaliser sur l’expérience de l’internaute (il a très certainement visité d’autres sites), sur leurs habitudes  Tenir compte des conventions web – Pour la plupart de internautes et en particulier les moins expérimentés, Internet est un concept général. « Je vais sur l’Internet » Il ont du mal à faire la distinction entre les sites et s’attendent à ce que ceux-ci fonctionnent tous de la même manière. Si ce n’est pas le cas, la conclusion est rapide : c’est forcément que le site ne marche pas. Anecdote Devant la multitude de sites ne prenant pas en compte les normes d’interactions et de présentation, Jakob Nielsen (en 2004) a comparé le Web à une fourmilière bâtie par des insectes sous LSD… Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 34. 34 @elodescharmes Règle n°4 : Conventions Le site capitalise sur l’apprentissage externe  Respecter les conventions de localisation – Emplacement des éléments sur la page  Respecter les conventions de vocabulaire – Employer des mots que les internautes peuvent comprendre facilement dans leur contexte  Respecter les conventions d’interaction et de présentation – Les internautes s’attendent à ce que le site se comporte d’une certaine manière Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 35. 35 @elodescharmes Qu’est-ce qu’une convention ?  C’est le plus difficile : déterminer ce qui relève d’une convention  Définition de Jakob Nielsen : – Si 80% des sites utilisent le même principe, c’est un standard – Si 50 à 79% des sites utilisent le même principe, c’est une convention  Connaître l’internaute pour savoir à quel(s) site(s) il est préalablement habitué Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Faire différent pour se démarquer Oui… Sur tout sauf sur l’ergonomie ! L’ergonomie doit être transparente pour l’utilisateur, elle ne peut pas être positionnée comme un élément de différenciation
  • 36. 36 @elodescharmes Respecter les conventions de localisation  Position des éléments d’interaction – Logo – Moteur de rechercher – Accès au panier – Barres de navigation – Accès aux mentions légales – Etc.  Règle à pondérer en fonction du type de site et de la charge informationnelle à l’écran Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 37. 37 @elodescharmes Respecter les conventions de localisation Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction http://www.1855.com (05/03/2012) Pas d’accès au panier, à part au moment précis où on y ajoute quelque-chose Mauvaise application
  • 38. 38 @elodescharmes Respecter les conventions de localisation Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction http://www.rowenta.fr (05/03/2012) Localisation non conventionnelle du chemin de navigation en bas de page Mauvaise application
  • 39. 39 @elodescharmes Respecter les conventions de localisation Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction http://www.chanel.com/ (05/03/2012) La localisation non conventionnelle de la barre de navigation ne met pas en péril son utilisation du fait de sa force visuelle au regard du reste de la page Pas de problème
  • 40. 40 @elodescharmes Respecter les conventions de vocabulaire  Ne pas introduire de mots totalement nouveau pour les internautes afin de désigner un concept conventionnel du Web – Accueil – Panier – Plan du site – Contact – Etc.  Exemples : – ne pas remplacer « page suivante » par « prochaine page » – ne pas remplacer « panier » par « sac »  Pour un site spécialisé, se renseigner sur les conventions du domaine concerné ! 40 Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 41. 41 @elodescharmes Respecter les conventions de vocabulaire Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction http://store.nike.com (05/03/2012) Qu’est-ce que monCasier ? Mauvaise application
  • 42. 42 @elodescharmes Respecter les conventions d’interaction et de présentation  Formulaires, alertes, étapes classiques d’un processus de commande etc.  Exemple de convention d’interaction : les internautes ont appris qu’une liste d’objets défilant de manière animée est souvent un menu dont chacun des items est cliquables  Attention aux popups de confirmation / indication qui peuvent faire penser à des messages d’erreur ! Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 43. 43 @elodescharmes Respecter les conventions d’interaction et de présentation Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction http://www.ca-cotesdarmor.fr/ (05/03/2012) La présence d’un champ de saisie laisse penser qu’il faut faire une saisie clavier alors que le code doit être entré à l’aide de la grille graphique Mauvaise application
  • 44. 44 @elodescharmes Règle n°5 : Information Le site informe l’internaute et lui répond  L’ordinateur informe et prévient l’internaute – Ne soyez pas avare d’informations ! – information générale – information pour facilité la navigation – information ponctuelle – Informez, mais au bon moment – Informez pour augmenter votre force persuasive  L’ordinateur répond aux actions de l’internaute – Donner du feedback ! – Visibilité du feedback Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 45. 45 @elodescharmes Donnez de l’information générale  Qui vous êtes, ce que vous faites etc. – Logo – Tagline – ou baseline, endline, strapline : phrase accompagnant le logo – Peut être différente du « slogan offline » – Intitulés de la barre de navigation Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 46. 46 @elodescharmes Donnez de l’information pour faciliter la navigation  Aider l’internaute à se situer dans le site, ce qu’il a déjà consulté, etc. http://www.natureetdecouvertes.com (05/03/2012) L’internaute est informé sur sa situation dans les différents niveaux de profondeur du site Bonne pratique Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 47. 47 @elodescharmes Donnez de l’information pour faciliter la navigation http://www.bazar-bio.fr (05/03/2012) La rubrique active n’est pas indiquée (en peut facilement se trouver sous la ligne de flottaison du site) Mauvaise pratique Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 48. 48 @elodescharmes Donnez de l’information pour faciliter la navigation http://www.google.fr (05/03/2012) L’internaute est informé sur les liens qu’il a déjà visités grâce à leur couleur Bonne pratique Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 49. 49 @elodescharmes Donnez de l’information ponctuelle  Renseigner l’internaute sur son avancement dans un processus, sur les étapes qui vont suivre… http://www.amazon.fr/ (05/03/2012) On indique à l’internaute que ce n’est pas la dernière étape Bonne pratique Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 50. 50 @elodescharmes Informez, mais au bon moment  Exemple : ne pas attendre que l’internaute soit sur une page produit pour l’informer que l’article n’est plus disponible !  Exemple : indiquer les documents nécessaire à avoir en main avant de commencer à remplir un formulaire complexe Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 51. 51 @elodescharmes Informez, mais au bon moment L’ensemble des coloris disponibles pour un produit est visualisable dès la page de liste Bonne pratique http://www.patagonia.com (04/03/2012) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 52. 52 @elodescharmes Informez pour augmenter votre force persuasive L’internaute est informé du montant restant pour obtenir la gratuité des frais de port Bonne pratiquehttp://www.archiduchesse.com/ (04/03/2012) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 53. 53 @elodescharmes Informez pour augmenter votre force persuasive Affichage dès la page produit du nombre de point de fidélités associés à l’achat de l’article Bonne pratique http://www.saveur-biere.com/ (04/03/2012) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 54. 54 @elodescharmes Donner du feedback aux internautes  Navigation  changement de page L’utilisateur doit percevoir qu’il s’est passé quelque-chose ! – Attention en cas de rechargement partiel de page – Attention si la page de départ et la page d’arrivée sont très proches visuellement – Attention si la page d’arrivée est susceptible de mettre du temps à se charger Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 55. 55 @elodescharmes Visibilité du feedback  C’est le défaut le plus fréquent – Élément visuel de feedback trop éloigné du centre d’attention de l’utilisateur (en bas à gauche dans la page par exemple) – Élément visuel de feedback en haut de page, disparaissant au scrolling Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 56. 56 @elodescharmes Visibilité du feedback Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction http://www.cuisines-aviva.com (05/03/2012) En résolution 1024*768, l’utilisateur ne verra pas que son clic a eu une conséquence Mauvaise pratique
  • 57. 57 @elodescharmes Règle n°6 : Compréhension Les mots et symboles sont choisis minutieusement  Utilisez le vocabulaire ! – Le vocabulaire doit être compréhensible – orienté utilisateur – exact et précis – conventionnel – Attention aux métaphores – Le vocabulaire doit être concis  Les symboles et codes doivent être compréhensibles Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 58. 58 @elodescharmes Utilisez le vocabulaire ! Attention aux menus présentés uniquement sous forme d’icônes Mauvaise pratique Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction http://www.rowenta.fr (05/03/2012)
  • 59. 59 @elodescharmes Le vocabulaire doit être compréhensible  Utiliser des mots de la langue courante, ne pas essayer d’inventer de nouveaux codes  MAIS il ne suffit pas d’utiliser les mots du langage courant pour être compris par les internautes.  Les termes doivent être – Bien choisis – Faire partie des conventions web  Attention, ce qui pour un spécialiste peut paraître de l’ordre de la convention ne l’est pas forcément pour votre internaute Exemple : « Si vous avez déjà un compte chez nous, veuillez vous connecter à la page d’ouverture de session. » Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Attention, un texte ne doit pas servir à compenser d’autres libellés mal choisis !
  • 60. 60 @elodescharmes Bien choisir ses mots  Le vocabulaire doit être orienté utilisateur – Choisir un langage adapté à votre internaute et au service que vous proposez – Utiliser un vocabulaire exclusif (chaque mot correspond à un concept et un seul)  Le vocabulaire doit être concis – Attention aux phrases inutilement trop longues  Le vocabulaire doit être exact et précis – Représenter le plus justement l’idée sous-jacente Exemple : « Recherche express » ≠ « Recherche avancée » ≠ « Affiner la recherche » ≠ « Recherche personnalisée »…  Le vocabulaire doit être conventionnel – Exemple : « Télécharger » plutôt que « Récupérer le document » Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 61. 61 @elodescharmes Le vocabulaire doit être compréhensible Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Les items de la navigation peuvent être compris si on y réfléchis bien… Mais ils sont loin d’être explicites ! Mauvaise pratique http://bio-duo.fr/ (07/03/2012)
  • 62. 62 @elodescharmes Les symboles et codes doivent être compréhensibles  Les internautes arrivent sur votre site avec leurs habitudes et leurs apprentissages (vis-à-vis du monde réel ou vis-à-vis des IHM)  Attention aux codes et symboles – Choix des couleurs, respecter les symboliques associées à la culture occidentale  Rappel de la règle 2 : afin de limiter la charge informationnelle à l’écran, n’utiliser les couleurs (hors charte graphique simple) que lorsque cela présente un intérêt Pour aller plus loin… www.informationisbeautiful.net/visualiza tions/colours-in-cultures/ Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 63. 63 @elodescharmes Les symboles et codes doivent être compréhensibles Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité SatisfactionAdresse email Mot de passe Confirmer le mot de passe Nom Prénom Date de naissance * * facultatif La légende ne suffit pas à contrecarrer le fait qu’en voyant un astérisque rouge, on a l’impression que le champ est obligatoire Mauvaise pratique
  • 64. 64 @elodescharmes Règle n°7 : Assistance Le site aide et dirige l’internaute  Dirigez grâce à l’organisation et à la visibilité  Dirigez grâce à des clics logiques – Dirigez grâce aux affordances – Attention à ne pas diriger de façon erronée  Evitez d’avoir à diriger grâce à un modèle d’interaction adapté  Assistez votre internaute en tenant compte de ses besoins en terme de tâches  Assistez votre internaute en le suivant de très près – Fournissez de l’aide explicite en cas de besoin Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 65. 65 @elodescharmes Dirigez grâce à l’organisation et à la visibilité  Tout ce dont les utilisateurs peuvent avoir besoin doit être visible (ex : barre de navigation, liens « page suivante » et « page précédente »…)  Toujours revenir à la question fondamentale : que proposez-vous à l’internaute ?  Points de vigilance – Scrolling (rappel : indiquer que la page se poursuit) – Résultats de recherche à pages multiples – Pages élastiques ou très larges Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 66. 66 @elodescharmes Dirigez grâce à l’organisation et à la visibilité Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction L’organisation visuelle de cette page n’accompagne pas l’internaute dans la découverte des contenus Mauvaise pratique http://www.nivea.fr/ (07/03/2012)
  • 67. 67 @elodescharmes Dirigez grâce à l’organisation et à la visibilité Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction http://www.unebeauty.com (07/03/2012) Les flèches permettent de passer d’une rubrique à l’autre mais sont très peu visibles Mauvaise pratique
  • 68. 68 @elodescharmes Dirigez grâce à des clics logiques  Elément cliquable = élément ayant permis la prise de décision Exemple : « Ecouter un extrait » suivi d’une icône en forme de haut-parleur. Dans ce cas il y a de grandes chances que l’internaute clique d’abord sur « Ecouter un extrait »…  A éviter : « Cliquez sur le bouton Machin pour faire Machin » Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 69. 69 @elodescharmes Dirigez grâce aux affordances  Les affordances permettent de repérer ce qui est cliquable – Les éléments cliquables doivent être perçus comme tels – Profiter des affordances naturelles : les phrases formulées à l’infinitif ou à l’impératif sont les plus affordantes à la cliquabilité – Attention aux fausses affordances : grandes images non cliquables par exemple Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 70. 70 @elodescharmes Dirigez grâce aux affordances  Les affordances permettent de repérer ce qui est utilisable – Mettre en évidence les champs de saisie – Ne pas les remplir – Attention au contraste – Utiliser les affordances temporaires Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 71. 71 @elodescharmes Dirigez grâce aux affordances Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Le champ actif prend un affordance temporaire qui guide la saisie Mauvaise pratique http://www.tumblr.com/ (07/03/2012) Bonne pratique
  • 72. 72 @elodescharmes Attention à ne pas diriger de façon erronée  Le manque de justesse et de précision induit en erreur (attention notamment aux icônes non accompagnées d’un libellé)  Les contre-affordances induisent en erreur Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Sur ce site, les concepteurs ont prévu le choix du conditionnement alors que la quasi-totalité des produits n’existent que dans un seul format… Mauvaise pratique http://www.clarins.fr (07/03/2012)
  • 73. 73 @elodescharmes Evitez d’avoir à diriger grâce à un modèle d’interaction adapté  Limiter le nombre d’actions Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction http://www.ikea.com/ (07/03/2012) L’internaute doit cliquer sur le bouton « actualiser » après avoir modifié une quantité Mauvaise pratique
  • 74. 74 @elodescharmes Assistez votre internaute en tenant compte de ses besoins en terme de tâches  S’adapter au comportement des utilisateurs www.ugc.fr (06/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Le champ d’email est trop petit et force à une vérification qui ne se limite pas à un contrôle visuel, mais nécessitent l’utilisation de la souris et du clavier Mauvaise pratique
  • 75. 75 @elodescharmes Assistez votre internaute en tenant compte de ses besoins en terme de tâches  S’adapter au comportement des utilisateurs www.ugc.fr (06/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Le fait de remplacer au fur et à mesure les chiffres saisis par l’utilisateur part d’une bonne intention en terme de sécurité perçue, mais ne tient pas compte du comportement majoritaire des internautes lorsqu’ils renseignent leurs coordonnées bancaires : ils vérifient les chiffres à la fin de la saisie Mauvaise pratique
  • 76. 76 @elodescharmes Assistez votre internaute en le suivant de très près  Aider l’internaute en lui expliquant très clairement les choix qui s’offrent à lui à un instant t  Exemples – propositions d’orthographes approchantes dans les moteurs de recherche – Fournir un message explicatif quand une recherche ne propose aucun résultat Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 77. 77 @elodescharmes Assistez votre internaute en le suivant de très près Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction http://www.yves-rocher.fr (07/03/2012) L’internaute est assisté grâce aux choix qui lui sont proposés explicitement lorsqu’il vient d’ajouter un article au panier Bonne pratique
  • 78. 78 @elodescharmes Fournissez de l’aide explicite en cas de besoin  Soit en fournissant un lien vers l’aide en ligne  Soit en direct (contenus d’aide contextuels)  en général c’est le plus efficace 78 Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction On ne doit recourir à l’aide que lorsque l’on a tout essayé avant !!! Bonne pratique
  • 79. 79 @elodescharmes Règle n°8 : Gestion des erreurs Le site prévoit que l’internaute se trompe  Erreur fréquente de conception : on ne prévoit que le parcours idéal !  Malgré toutes les précautions prises, l’erreur n’est pas un cas isolé et arrivera forcément, il faut donc la prévoir et aide l’internaute à la surmonter  Critique pour les interfaces transactionnelles (formulaires)  Faire une erreur conduira l’internaute à chercher un coupable : suivant son niveau d’expertise, ce sera lui ou le site… C’est un point de rupture qui risque de faire perdre votre visiteur. Il est donc capital – De les éviter – De les gérer correctement si elles arrivent Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 80. 80 @elodescharmes Règle n°8 : Gestion des erreurs Le site prévoit que l’internaute se trompe  L’internaute ne doit pas faire d’erreur – La présentation peut protéger contre l’erreur – Indiquer les champs obligatoires (pour un formulaire) – Utiliser des libellés et des légendes explicites – Bien dimensionner les champs – Utiliser les affordances – Le fonctionnement peut protéger contre l’erreur – Demander des confirmations pour les actions « risquées » – Empêcher la saisie de données erronées – Corriger à la volée  L’internaute doit facilement repérer et comprendre ses erreurs – Faciliter le repérage – Expliquer – Faire preuve de courtoisie dans les messages d’erreur…  L’internaute doit facilement pouvoir corriger ses erreurs Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 81. 81 @elodescharmes Eviter les erreurs grâce aux libellés et légendes des champs Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction www.etsy.com (07/03/2012) Les légendes accompagnent l’internaute pour expliquer à quoi servent les informations saisies. Bonne pratique
  • 82. 82 @elodescharmes La présentation du formulaire peut protéger contre l’erreur  Attention à la taille des champs  Utiliser les éléments de formulaire à bon escient – Boutons radio au lieu de cases à cocher par exemple lorsqu’un seul choix est possible  Attention à l’affordance générale de l’interface – Ne pas proposer un bouton « annuler » ou « effacer » Votre département Votre département Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 83. 83 @elodescharmes La présentation du formulaire peut protéger contre l’erreur Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Les légendes sont explicites et affichées contextuellement en fonction du champ dans lequel l’internaute place son curseur Bonne pratique http://twitter.com/ (07/03/2012)
  • 84. 84 @elodescharmes La présentation du formulaire peut protéger contre l’erreur Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Le message n’apporte rien et risque au contraire d’embrouiller l’internaute avec un vocabulaire peu adapté Mauvaise pratique http://balloonup.com (07/03/2012)
  • 85. 85 @elodescharmes Utiliser les affordances Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Si l’utilisateur clique sur « annuler » (pourtant en vert et plus proche), les données saisies seront supprimées… Mauvaise pratique www.cnc-arcene.fr (07/03/2012)
  • 86. 86 @elodescharmes Le fonctionnement du formulaire peut protéger contre l’erreur  Demander une confirmation pour les actions risquées (suppression, modification de données bancaires…)  Empêcher la saisie de données erronées : n’accepter que les données cohérentes  Corriger à la volée Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 87. 87 @elodescharmes Valider ou corriger à la volée Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction http://www.airfrance.fr (11/03/2012) Exemple de correction à la volée lorsque l’on saisi une date de retour antérieure à la date de départ. Bonne pratique Attention à ne pas abuser de ce procédé en l’utilisant sur des champs que l’utilisateur n’a pas fini de saisir !
  • 88. 88 @elodescharmes Fournir une explication précise de l’erreur Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Sur le même formulaire : Exemple d’un message d’erreur explicite Exemple d’un message d’erreur avec 2 pistes d’explication « le bon format » ne renseigne pas précisément sur ce qui est attendu… Bonne pratique Mauvaise pratique www.americanexpress.fr (06/03/2011)
  • 89. 89 @elodescharmes Conseils pour les messages d’erreur  Faire preuve de courtoisie dans les messages d’erreur – « Merci d’indiquer… » « Merci de préciser… » – Y compris dans le format de présentation : éviter les popup d’alerte javascript !  Présenter toutes les erreurs en une fois (processus moins coûteux en terme d’implication utilisateur)  Préférer l’affichage des messages d’erreur directement dans la page (éviter les popup qui peuvent cacher le contexte)  Laisser les champs remplis afin que l’internaute puisse comprendre son erreur et la corriger plus facilement Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 90. 90 @elodescharmes Règle n°9 : Rapidité L’internaute ne perd pas son temps  Optimiser la navigation – Faciliter l’action de visée des éléments cliquables – Prendre en compte les besoins de votre internaute sur le plan fonctionnel  Multiplier les clés d’entrée vers une même page  Faciliter les interactions  Eviter les interactions inutiles – Ne pas demander à l’internaute une action qui peut être prise en charge par la machine – Ne pas demander aux internautes deux fois la même chose  Des modes d’interaction orientés efficience – Les utilisateurs les plus « experts » doivent pouvoir bénéficier de raccourcis Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 91. 91 @elodescharmes Prendre en compte les besoins de votre internaute sur le plan fonctionnel  www.deezer.com (06/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Lors du parcours des éléments de la ligne, un pictogramme à gauche à proximité du titre aide à se repérer Bonne pratique
  • 92. 92 @elodescharmes Multiplier les clés d’entrée vers une même page  L’internaute ne doit pas fonctionner par « essai-erreur » mais uniquement par « essai-réussite »  Que l’internaute clique sur un titre, une image, un lien texte, un pictogramme… Il sera dirigé vers la page correspondante Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 93. 93 @elodescharmes Faciliter les interactions  Exemple 1 : proposer des raccourcis pour revenir en arrière de manière sécurisée lors d’actions transactionnelles (lors d’une commande, possibilité de revenir modifier le panier après avoir renseigné l’adresse de livraison par exemple)  Exemple 2 : dans un formulaire, prévoir des champs assez longs pour prendre en charge la plupart des cas (si le texte est tronqué à l’affichage et que l’utilisateur veut le vérifier, il devra faire des actions inutiles)  Exemple 3 : lors de la saisie d’un numéro de carte bancaire en plusieurs champs, passer automatiquement au champ suivant au cinquième chiffre Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 94. 94 @elodescharmes Eviter les interactions inutiles  Ne pas demander à l’internaute une action qui peut être prise en charge par la machine (moyennant souvent des contrôles supplémentaires)  Exemple : ne pas proposer de liste déroulante avec une seule option possible  2 clics inutiles ! Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 95. 95 @elodescharmes Eviter les interactions inutiles www.ugc.fr (06/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Le fait de proposer d’acheter 0 ou 1 place de cinéma est inutile. D’autant plus que l’option sélectionnée par défaut est 0 ! Mauvaise pratique
  • 96. 96 @elodescharmes Ne pas demander aux internautes deux fois la même chose  Exemple 1 : conserver les données d’une page à l’autre dans le cas d’une interface transactionnelle, y compris en cas de rechargement de page, retour à une page/étape précédente etc.  Exemple 2 : conserver les mots-clés saisis lorsque l’on passe d’une « recherche simple » à une « recherche avancée » Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 97. 97 @elodescharmes Des modes d’interaction orientés efficience  Les utilisateurs les plus « experts » doivent pouvoir bénéficier de raccourcis  Qu’appelle-t-on utilisateurs « experts » ? – Utilisateurs qui savent précisément ce qu’ils veulent – Utilisateurs récurrents Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 98. 98 @elodescharmes Des raccourcis pour les utilisateurs qui savent ce qu’ils veulent www.telemarket.fr (06/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Propose une fonctionnalité « LISTExpress » pour les utilisateurs déjà fixés sur leurs choix de type de produit Bonne pratique
  • 99. 99 @elodescharmes Des raccourcis pour les utilisateurs récurrents www.coursesu.com (06/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Propose liste de fonctionnalités permettant à un utilisateur récurrent de récupérer des données utiles d’une visite sur l’autre Bonne pratique
  • 100. 100 @elodescharmes Règle n°10 : Liberté C’est l’internaute qui commande Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction  Respectez les contrôles utilisateur conventionnels – Ne pas empêcher – Ne pas imposer  Fuyez les actions au rollover  Flexibilité des actions utilisateur – Il faut TOUJOURS laisser la possibilité à l’utilisateur de revenir en arrière.  Donnez la possibilité à l’internaute de contourner le système et d’agir dessus  N’induisez pas de comportement passif – L’internaute n’est pas devant une télévision !  N’enfermez pas votre internaute – Proposez plusieurs systèmes de navigation  Le système n’est pas intrusif – Le système n’est pas lourd ou insistant dans ses propositions – Le système ne force pas l’utilisateur a voir quelque-chose – Au recours, le site prend le contrôle de l’ordinateur !
  • 101. 101 @elodescharmes Respectez les contrôles utilisateur conventionnels  L’internaute doit toujours garder le contrôle sur le site (ou du moins en avoir l’impression). Il ordonne et la machine répond, et rien ne se passera sans qu’il l’ait demandé.  Ne pas empêcher – l’utilisation du bouton « back » – La copie d’un contenu textuel – …  Ne pas imposer – L’ouverture en plein écran – … Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 102. 102 @elodescharmes Fuyez les actions au rollover  Ok pour afficher des informations dans une zone dédiée (cf. règle 2 sur l’organisation visuelle des pages) mais pas pour déclencher des actions !  L’utilisateur a alors tout de suite l’impression de perdre le contrôlé Expérience Passez un peu de temps sur le site http://www.dontclick.it/ Qu’en pensez-vous ? Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 103. 103 @elodescharmes Fuyez les actions au rollover www.labanquepostale.fr (09/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Le système de renseignement du mot de passe est basé sur le survol à la souris des chiffres. D’autant plus impossible à utiliser que le code saisi est masqué ! Mauvaise pratique
  • 104. 104 @elodescharmes Flexibilité des actions utilisateur  Il faut TOUJOURS laisser la possibilité à l’utilisateur de revenir en arrière  Proposer des fonctions – D’annulation – De undo/redo – De retour en arrière Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 105. 105 @elodescharmes Flexibilité des actions utilisateur www.amazon.fr (09/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Tant que la commande n’est pas expédiée, le client a la possibilité de l’annuler très simplement Bonne pratique
  • 106. 106 @elodescharmes Flexibilité des actions utilisateur www.google.com/calendar/ (09/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Un exemple de bon compromis : Google agenda ne demande pas de confirmation à l’utilisation lorsqu’il supprime un évènement  plus de fluidité Cependant l’interface propose la possibilité d’annuler la dernière action effectuée  plus de sécurité Bonne pratique
  • 107. 107 @elodescharmes Donnez la possibilité à l’internaute de contourner le système et d’agir dessus  Par exemple : autoriser à stopper une animation, une vidéo, du son, contrôler le volume du son…  Primordial dans le cas d’affichage successifs de contenus dans le même espace écran (cf. règle 2, procédé utilisé pour démultiplier la valeur du pixel carré) – Remarque : l’attente ou l’actualisation de la page ne sont pas des moyens de contournement  Ce type de contenu est souvent publicitaire : donner le contrôle à l’utilisateur permet de prendre un compte un comportement majoritaire – Je viens sur un site avec un objectif précis – A cette occasion je vois quelque-chose d’annexe – Je ne vais consulter ce contenu que lorsque j’ai fini mon premier objectif  Il est donc capital de permettre à l’utilisateur d’y accéder à nouveau quelques minutes plus tard Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 108. 108 @elodescharmes Donnez la possibilité à l’internaute de contourner le système et d’agir dessus www.fluctuat.net/ (09/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Navigation facilitée parmi les mises en avant en images des contenus Bonne pratique
  • 109. 109 @elodescharmes Donnez la possibilité à l’internaute de contourner le système et d’agir dessus www.virginmega.fr (09/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Propose deux traitements différents pour la gestion des contrôles sur les bandeaux avec affichages successifs Bonne pratique
  • 110. 110 @elodescharmes Donnez la possibilité à l’internaute de contourner le système et d’agir dessus www.toyota.fr (09/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction La présentation de la gamme donne des informations dans une vidéo sur laquelle le seul contrôle possible est de l’arrêter ou de la rejouer une fois terminée Mauvaise pratique
  • 111. 111 @elodescharmes N’induisez pas de comportement passif  Sauf demande explicite (VOD, démo…), l’internaute n’est pas devant une télévision !  Problème très fréquent chez les marques qui veulent présenter leur produits : une présentation web n’est pas la même chose qu’un spot TV  Les études montrent que les internautes se plaignent de la longueur d’une animation dès les 30 premières secondes  Attention aussi à la mise en place animée des pages qui peut prendre du temps (ok si c’est un temps de chargement, pas si il s’agit uniquement d’un effet visuel voulu !) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 112. 112 @elodescharmes N’induisez pas de comportement passif Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction www.eau-thermale-avene.com (09/03/2011) Impose un effet de fondu à chaque changement de page Mauvaise pratique
  • 113. 113 @elodescharmes N’enfermez pas votre internaute  Proposez plusieurs systèmes de navigation – A travers des rubriques – Recherche par mots-clés – Recherche par critères Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 114. 114 @elodescharmes Le système n’est pas intrusif  Le système n’est pas lourd ou insistant dans ses propositions  Le système ne force pas l’utilisateur a voir quelque-chose – Eviter les introductions et fournir des entrées directes (splash pages par exemple) – Si vous ne pouvez pas faire autrement, essayez quand même de fourni un moyen de contournement – Eviter les pop-up spontanées – Parfois adaptée : contenus complémentaires, aide… – Uniquement si l’internaute l’a demandé – Format technique popup pur (javascript:alert(‘texte');) à prospcrire ! – Le site n’agit pas à la place de l’internaute – Exemple pour un site d’e-commerce : n’ajouter un article au panier que suite à la clic sur un élément explicite Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 115. 115 @elodescharmes Le système n’est pas lourd ou insistant dans ses propositions Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Copie d’écran de l’article www.theinquirer.fr/2008/12/18/ch ez-pixmania-il-faut-payer-plus- cher-pour-se-faire-rembourser-la- difference.html (09/03/2011) Pixmania impose dans chacune de ses commande un « contrat achat tranquille ». Sa suppression est possible mais loin d’être évidente ! Mauvaise pratique
  • 116. 116 @elodescharmes Le système n’est pas lourd ou insistant dans ses propositions www.darty.com (09/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Bonne pratique
  • 117. 117 @elodescharmes Le système n’est pas intrusif www.allocine.fr 12/03/2011 Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Le splash screen peut être contourné par un bouton d’accès direct Bonne pratique
  • 118. 118 @elodescharmes Le site n’agit pas à la place de l’internaute www.nicolas.com (09/03/2011) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Modifie automatiquement la quantité commandée en fonction du conditionnement des produits Mauvaise pratique
  • 119. 119 @elodescharmes Au secours, le site prend le contrôle de l’ordinateur !  Respecter la stricte correspondance entre ce que l’internaute a demande et ce qu’il obtient.  Eviter d’ouvrir une application logicielle (messagerie, lecteur media…), surtout avec des contenus pré-remplis  Eviter de jouer un bande son non demandée  Eviter le très pénible « assistant trombone »… Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 120. 120 @elodescharmes Règle n°11 : Accessibilité Un site facile d’accès pour tous  Règle 11.1 : Accessibilité physique – Cf. cours précédent – Cf. suite du cours : audit ergonomique  Règle 11.2 : Accessibilité technologique – Le site doit s’adapter à la plateforme utilisée par l’utilisation pour y accéder – Plateforme = OS + Browser + Fixe ou portable + taille et résolution de l’écran + fonctions actives (javascript, cookies…) + plug-in installés (flash, java…) + logiciels installés (Adobe, RealPlayer, WMP…) – Le site ne doit pas se présenter toujours forcément de la même manière, mais il doit être consultable quelle que soit la configuration Evitez les messages du type « Ce site est optimisé pour une consultation sous le navigateur XXX, en résolution YYY, veuillez vous y conformer » Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 121. 121 @elodescharmes Accessibilité technologique  Deux possibilités : 1. La plateforme de consultation est de l’ordre du bonus : adaptez le contenu – Détection du navigateur utilisé – Définir une configuration idéale et une configuration dégradée (par exemple si Flash n’est pas installé) 2. La plateforme de consultation est stratégique : informez et guidez – Proposer un lien à l’utilisateur lui permettant de mettre à jour sa plateforme – Indiquer comment activer une option (accepter les cookies par exemple) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction Proposer une version HTML alternative au Flash permet aussi d’optimiser le référencement du site
  • 122. 122 @elodescharmes Règle n°12 : Satisfaction de votre internaute  Cette règle passe avant toutes les autres  Mais c’est la plus difficile à appliquer – Il faut connaître votre internaute (en temps qu’être humain et en temps que persona spécifique) – La satisfaction ne se mesure pas facilement et recouvre beaucoup de problématiques – Qualité de service, esthétique, expérience utilisateur… Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 123. 123 @elodescharmes Règle n°12 : Satisfaction de votre internaute  Satisfaire grâce au critère d’utilité – Le site permet aux internaute de remplir leurs objectifs – Le site fourni des fonctionnalités de second niveau optimisant la satisfaction  Satisfaire grâce à l’esthétique et à l’expérience utilisateur globale – C’est plutôt l’affaire des graphistes et designers (qui doivent travailler de concert avec l’ergonome)  Satisfaire grâce à la qualité du service – Fournir un site respectueux en terme de transaction et de SAV – Ne s’applique pas uniquement au sites de e-commerce (ex : possibilité de se désinscrire d’une newsletter)  Satisfaire grâce à la puissance et la fiabilité technique – Au final, votre site doit fonctionner ! – Attention à la fiabilité : erreurs techniques, liens cassés, pages en construction, lenteurs de chargement etc. (non, ça n’arrive pas qu’aux autres…) Architecture Organisation visuelle Cohérence Conventions Information Compréhension Assistance Gestion des erreurs Rapidité Liberté Accessibilité Satisfaction
  • 124. 124 @elodescharmes 12 règles à utiliser à bon escient  Ces règles peuvent se compenser les unes par rapport aux autres  12 points à garder en mémoire lors de la phase de conception  Ils devraient vous permettre d’éviter les principaux écueils d’un point de vue ergonomique  Ces 12 règles peuvent également servir de grille pour la réalisation d’un audit ergonomique (cf. suite du cours)