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 conceptuelle On 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 internauteMicro-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