12 règles d’ergonomie web
TECHNOFUTUR TIC
Mercredi 12 Décembre 2007
Amélie Boucher www.ergolab.net www.ergonomie-sites-web.com

Avant toute chose ...
» 12 règles d’ergonomie
= un outil
≠ une finalité
» De grands principes
= objectifs à atteindre
≠ moyens
» Pré-règle = connaître votre internaute
2 / 28

Règle n°1 : Architecture
Le site doit être bien rangé
ORGANISATION
» Qu’est-ce qui fait que l’on se repère facilement ?
3 / 28

Règle n°1 : Architecture
» Pensez l'architecture pour vos visiteurs !
Que viennent-ils faire ? Quelles sont leurs connaissances ?
Une architecture orientée stratégie de marque
4 / 28

Règle n°1 : Architecture
» Architecture de l'information
= Les fondations de votre site
» Niveau de l'organisation conceptuelle
On ne s'occupe pas de l'écran
(Mais l'écran peut compenser une mauvaise architecture)
5 / 28

Règle n°2 : Organisation visuelle
La page doit être bien rangée
» Limiter la surcharge visuelle
» Quantité d’informations réelle
≠ quantité d’informations perçue
6 / 28

Règle n°3 : Cohérence
On capitalise sur l’apprentissage interne
» On ne change pas les choses d’endroit
» On ne supprime pas des choses utiles sans raison
» Une chose = un mot
» Formats de présentation (exemple des liens)
» Comportement du site
7 / 28

Règle n°4 : Conventions
On capitalise sur l’apprentissage externe
» Vous n’êtes pas le 1er sur l’Internet
» L’ergonomie ne sert pas à être original
» Avantages objectifs et subjectifs
8 / 28

Règle n°4 : Conventions
\"Une case à cocher, je peux la cocher\"
www.clarins.fr
9 / 28

Règle n°4 : Conventions
\"Une case à cocher, je peux la cocher\"
10 / 28

Règle n°5 : Information
Le site informe l’internaute et lui répond
» Information générale sur le site
» Information ponctuelle
11 / 28

Règle n°5 : Information
» Notion de feedback :
L’ordinateur doit acquiescer
Attention à la visibilité du feedback !
www.virgin-mega.fr
12 / 28

Règle n°6 : Compréhension
» Choix des mots et symboles
75% du travail d’ergonomie
. Utiliser les mots
. Bien les choisir
13 / 28

Règle n°7 : Assistance
On doit guider l’internaute
Explicitement Implicitement
Et / ou
» Mots » Organisation visuelle
(mots uniques, légendes, textes » Format et comportement des objets
explicatifs)
à défaut d’autre chose
14 / 28

Règle n°7 : Assistance
» La notion d’affordances
= possibilités d’action suggérées par un objet
15 / 28

Règle n°7 : Assistance
» Visibilité des objets-clés
16 / 28

Règle n°7 : Assistance
» Attention aux contre-affordances
= on incite à emprunter une impasse
= on risque la déception
17 / 28

Règle n°8 : Gestion des
erreurs
Postulat de base : L’internaute va se tromper
» 3 manières de gérer les erreurs :
Avant l’erreur :
protéger
Après l’erreur :
faciliter le repérage de l’erreur
faciliter la compréhension de l’erreur
Au-delà de l’erreur :
faciliter la correction
18 / 28

Règle n°8 : Gestion des
erreurs
» Attention à la sur-protection !
www.rememberthemilk.com
19 / 28

Règle n°9 : Rapidité
L’internaute ne doit pas perdre son temps
» Faciliter les clics et les interactions
(cf. la loi de Fitts)
» Ne pas recourir à la mémoire
» Pas d'actions inutiles / Pas 2 fois la même chose
» Des fonctionnalités raccourcis
(exemple : ListExpress sur Telemarket)
20 / 28

Règle n°10 : Liberté
C'est l’internaute qui commande
» Respecter les contrôles utilisateur de base
» Attention aux actions au survol !
www.labanquepostale.fr
» L'internaute est acteur :
Attention au site qui se prend pour une télé
21 / 28

Règle n°10 : Liberté
» Limiter toute intrusion
22 / 28

Règle n°11 : Accessibilité
» Un site facile d'accès pour tous
Accessibilité Accessibilité
physique technologique
23 / 28

Règle n°12 : Satisfaction de votre internaute
» 4 dimensions :
Utilité
Des micro-fonctionnalités pensées sur-mesure pour votre internaute
www.threadless.com
24 / 28

Règle n°12 : Satisfaction de votre internaute
Micro-fonctionnalités : l’exemple du “Browze by size” sur Threadless
25 / 28

Règle n°12 : Satisfaction de votre internaute
Esthétique & expérience utilisateur globale
Qualité du service
Puissance et fiabilité technique
26 / 28

Au-delà des règles
» Pondération des règles
» Un guide mental plutôt qu'une checklist
27 / 28

Ceci est la fin, merci et rendez-vous ci-dessous :
www.ergolab.net www.ergonomie-sites-web.com
Site éditorial Le site du livre
28 / 28