12 règles d’ergonomie web technofutur tic mercredi 12 décembre 2007
DESCRIPTION
12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007. Amélie Boucher www.ergolab.net www.ergonomie-sites-web.com. » Pré-règle = connaître votre internaute. Avant toute chose. » 12 règles d’ergonomie = un outil ≠ une finalité. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/1.jpg)
12 règles d’ergonomie web
TECHNOFUTUR TIC
Mercredi 12 Décembre 2007
Amélie Boucher www.ergolab.net www.ergonomie-sites-web.com
![Page 2: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/2.jpg)
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
![Page 3: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/3.jpg)
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 ?
![Page 4: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/4.jpg)
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
![Page 5: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/5.jpg)
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)
![Page 6: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/6.jpg)
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
![Page 7: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/7.jpg)
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
![Page 8: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/8.jpg)
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
![Page 9: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/9.jpg)
9 / 28
Règle n°4 : Conventions
"Une case à cocher, je peux la cocher"
www.clarins.fr
![Page 10: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/10.jpg)
10 / 28
Règle n°4 : Conventions
"Une case à cocher, je peux la cocher"
![Page 11: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/11.jpg)
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
![Page 12: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/12.jpg)
12 / 28
Règle n°5 : Information
» Notion de feedback : L’ordinateur doit acquiescer
www.virgin-mega.fr
Attention à la visibilité du feedback !
![Page 13: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/13.jpg)
13 / 28
Règle n°6 : Compréhension» Choix des mots et symboles 75% du travail d’ergonomie
. Utiliser les mots
. Bien les choisir
![Page 14: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/14.jpg)
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
![Page 15: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/15.jpg)
15 / 28
Règle n°7 : Assistance
» La notion d’affordances = possibilités d’action suggérées par un objet
![Page 16: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/16.jpg)
16 / 28
Règle n°7 : Assistance
» Visibilité des objets-clés
![Page 17: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/17.jpg)
17 / 28
Règle n°7 : Assistance
» Attention aux contre-affordances = on incite à emprunter une impasse = on risque la déception
![Page 18: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/18.jpg)
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
![Page 19: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/19.jpg)
19 / 28
Règle n°8 : Gestion des erreurs» Attention à la sur-protection !
www.rememberthemilk.com
![Page 20: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/20.jpg)
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
![Page 21: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/21.jpg)
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é
![Page 22: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/22.jpg)
22 / 28
» Limiter toute intrusion
Règle n°10 : Liberté
![Page 23: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/23.jpg)
23 / 28
Règle n°11 : Accessibilité
» Un site facile d'accès pour tous
Accessibilité physique
Accessibilitétechnologique
![Page 24: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/24.jpg)
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
![Page 25: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/25.jpg)
25 / 28
Règle n°12 : Satisfaction de votre internauteMicro-fonctionnalités : l’exemple du “Browze by size” sur Threadless
![Page 26: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/26.jpg)
26 / 28
Puissance et fiabilité technique
Règle n°12 : Satisfaction de votre internaute
Qualité du service
Esthétique & expérience utilisateur globale
![Page 27: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/27.jpg)
27 / 28
Au-delà des règles
» Pondération des règles
» Un guide mental plutôt qu'une checklist
![Page 28: 12 règles d’ergonomie web TECHNOFUTUR TIC Mercredi 12 Décembre 2007](https://reader030.vdocuments.pub/reader030/viewer/2022032708/56812bcb550346895d9021e6/html5/thumbnails/28.jpg)
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