12 règles d’ergonomie web
TECHNOFUTUR TIC
Mercredi 12 Décembre 2007
Amélie Boucher www.ergolab.net www.ergonomie-sites-web.com
2 / 28
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
3 / 28
Règle n°1 : Architecture
ORGANISATION
Le site doit être bien rangé
» Qu’est-ce qui fait que l’on se repère facilement ?
4 / 28
» Pensez l'architecture pour vos visiteurs !
Que viennent-ils faire ? Quelles sont leurs connaissances ?
Règle n°1 : Architecture
Une architecture orientée stratégie de marque
5 / 28
» Architecture de l'information= Les fondations de votre site
Règle n°1 : Architecture
» Niveau de l'organisation conceptuelleOn ne s'occupe pas de l'écran(Mais l'écran peut compenser une mauvaise architecture)
6 / 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
7 / 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
8 / 28
Règle n°4 : Conventions
On capitalise sur l’apprentissage externe
» Vous n’êtes pas le 1er sur l’Internet
» Avantages objectifs et subjectifs
» L’ergonomie ne sert pas à être original
9 / 28
Règle n°4 : Conventions
"Une case à cocher, je peux la cocher"
www.clarins.fr
10 / 28
Règle n°4 : Conventions
"Une case à cocher, je peux la cocher"
11 / 28
Règle n°5 : Information
Le site informe l’internaute et lui répond
» Information générale sur le site
» Information ponctuelle
12 / 28
Règle n°5 : Information
» Notion de feedback : L’ordinateur doit acquiescer
www.virgin-mega.fr
Attention à la visibilité du feedback !
13 / 28
Règle n°6 : Compréhension
» Choix des mots et symboles
75% du travail d’ergonomie
. Utiliser les mots
. Bien les choisir
14 / 28
Règle n°7 : Assistance
On doit guider l’internaute
» Mots (mots uniques, légendes, textes explicatifs)à défaut d’autre chose
» Organisation visuelle» Format et comportement des objets
Explicitement Et / ou Implicitement
15 / 28
Règle n°7 : Assistance
» La notion d’affordances
= possibilités d’action suggérées par un objet
16 / 28
Règle n°7 : Assistance
» Visibilité des objets-clés
17 / 28
Règle n°7 : Assistance
» Attention aux contre-affordances
= on incite à emprunter une impasse= on risque la déception
18 / 28
» 3 manières de gérer les erreurs :
Avant l’erreur :
protéger
Après l’erreur :
faciliter le repérage de l’erreurfaciliter la compréhension de l’erreur
Au-delà de l’erreur :
faciliter la correction
Règle n°8 : Gestion des erreurs
Postulat de base : L’internaute va se tromper
19 / 28
Règle n°8 : Gestion des erreurs
» Attention à la sur-protection !
www.rememberthemilk.com
20 / 28
» Ne pas recourir à la mémoire
Règle n°9 : Rapidité
» Pas d'actions inutiles / Pas 2 fois la même chose
» Des fonctionnalités raccourcis(exemple : ListExpress sur Telemarket)
» Faciliter les clics et les interactions (cf. la loi de Fitts)
L’internaute ne doit pas perdre son temps
21 / 28
Règle n°10 : Liberté
C'est l’internaute qui commande
www.labanquepostale.fr
» Attention aux actions au survol !
» Respecter les contrôles utilisateur de base
» L'internaute est acteur : Attention au site qui se prend pour une télé
22 / 28
» Limiter toute intrusion
Règle n°10 : Liberté
23 / 28
Règle n°11 : Accessibilité
» Un site facile d'accès pour tous
Accessibilité physique
Accessibilitétechnologique
24 / 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
25 / 28
Règle n°12 : Satisfaction de votre internaute
Micro-fonctionnalités : l’exemple du “Browze by size” sur Threadless
26 / 28
Puissance et fiabilité technique
Règle n°12 : Satisfaction de votre internaute
Qualité du service
Esthétique & expérience utilisateur globale
27 / 28
Au-delà des règles
» Pondération des règles
» Un guide mental plutôt qu'une checklist
28 / 28
Ceci est la fin, merci et rendez-vous ci-dessous :
www.ergolab.net
Site éditorial
www.ergonomie-sites-web.com
Le site du livre