Retour sur la présentation de l'atelier "Ergonomie d'un site web" animé par Fred Colantonio. Retrouvez les idées reçues, les principes élémentaires, etc.

1. L ro o e
’ g n mi
e
du sew b
’n i e
t
p r rdCoa tno
aF
e
lno i
A eir o n e 2 1
tl d n é n 0 3
e
Ja b s i d c m.o a c mp g elsn é e d nsTEe P d H ia t
’ i e on e o c m c o a n e id p n a t P t ME u an u
,
e d Ba a t l nd n l d v lp e n d lu c mmu iain
t u rb n wal a se é eo p me t e e r o
o
nc t .
o

2. L’ergonomie d’un site web
Créez des sites web pensés pour les utilisateurs
et leur faciliter l’utilisation et l’action
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

3. 5. RESSOURCES
www.ergolab.net • www.ergologique.com • www.ergonomieweb.com • blog.webatou.info • blog-ergonomieweb.com
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

4. DOUBLE CONSTAT
« Le constat est édifiant : un site sur deux est mal conçu, mal écrit et
mal pensé.
Donc logiquement peu attrayant, peu vendeur et globalement peu
efficace. »
Collectif, Ecrire et manager sa communication, EdiPro, 2008, p.78.
« La plupart des sites actuels manquent encore de l’essentiel : un vrai
souci des internautes, de qui ils sont et de leurs besoins. »
BOUCHER A., Ergonomie web - Pour des sites web efficaces, Eyrolles, Accès libre, 2009, p.XIV.
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

5. FAIRE UN BON SITE WEB ?
Seule certitude :
z!
lie
ub
O
Jean-Claude Dusse (Michel
Blanc) dans Les Bronzés, réalisé
par Patrice Leconte, 1978.
« Sur un malentendu,
ça peut marcher »
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

6. 1. CE QUE VOUS CROYEZ SAVOIR
5 idées reçues sur l’ergonomie
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

7. 1.
CE QUE VOUS CROYEZ SAVOIR
1. L’internaute est sot ou, au contraire, il sait tout
Enoncé
Un enfant de 10ans sait le faire, l’internaute aussi
L’internaute sait qu’en cliquant sur le logo, il
reviendra à la page d’accueil
Risques
Contre-productivité :
1. Interfaces ultra-guidées ou simplifiées
2. Interfaces manquant d’intuitivité
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

8. 1.
CE QUE VOUS CROYEZ SAVOIR
Le
su po
r l in
a t
1. L’internaute est sot ou, au contraire, il sait tout
1. Evitez de penser pour les internautes
2. Cherchez à connaître les utilisateurs de votre
site pour l’adapter à leurs besoins
Pe
m nse
ali z
n
!
1. Oubliez le « si ma grand-mère sait le faire »
2. Individualisez : visez le bien-être de vos
internautes
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

9. 1.
CE QUE VOUS CROYEZ SAVOIR
2. Le mythe des 3 clics
Enoncé
Risques
L’information doit être accessible à l’utilisateur en
3 clics maximum
1. Personne au scénario ≠ utilisateur final
2. Multiplication des clics en cas d’erreur
Source : BOUCHER A., ergonomie web, Eyrolles, 2009, p.19.
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

10. 1.
CE QUE VOUS CROYEZ SAVOIR
Le
su po
r l in
a t
2. Le mythe des 3 clics
1. Les 3 clics ont aidé à une époque
2. Ils peuvent compliquer la navigation
Pe
m nse
ali z
n
!
1. Le clic n’est pas un facteur pour quitter un site
2. Mieux vaut 2 clics simples qu’un clic compliqué
3. Chaque clic doit être réfléchi et avoir un intérêt
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

11. 1.
CE QUE VOUS CROYEZ SAVOIR
3. Ergonomie et design graphique ne vont pas ensemble
Enoncé
L’ergonomie entrave la créativité du graphiste
Risques
1. Maquette ergonomique ≠ maquette graphique
2. Opposer ergonomie et graphisme
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

12. 1.
CE QUE VOUS CROYEZ SAVOIR
Le
su po
r l in
a t
3. Ergonomie et design graphique ne vont pas ensemble
1. Sans graphisme, l’ergonomie est laide
2. Le graphisme vient renforcer l’ergonomie
Pe
m nse
ali z
n
!
1. Agencez, séparez les zones, laissez respirer…
2. Faites des aller-retour graphisme / ergonomie
3. Sachez que l’esthétique influence la perception
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

13. 1.
CE QUE VOUS CROYEZ SAVOIR
4. Un site ergonomique sinon rien
Enoncé
Risques
« Faites-moi un site ergonomique »
1. Croire que le site ergonomique existe
2. Croire qu’il existe une façon de faire
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

14. 1.
CE QUE VOUS CROYEZ SAVOIR
Le
su po
r l in
a t
4. Un site ergonomique sinon rien
1. L’ergonomie se travaille au cas par cas
2. L’ergonomie est «objectivement subjective»
Pe
m nse
ali z
n
!
1. Contextualisez : un internaute donné, à un
instant donné, dans un contexte donné
2. Ciblez l’internaute dans sa pratique du site
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

15. 1.
CE QUE VOUS CROYEZ SAVOIR
5. Les internautes lisent en F (Z ou E)
Enoncé
Le regard de l’internaute suit une trajectoire
unique et prédéterminée
Risques
1. Croire aux schémas intellectuels de lecture
2. Se baser sur une règle sans fondement
scientifique
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

16. 1.
CE QUE VOUS CROYEZ SAVOIR
Le
su po
r l in
a t
5. Les internautes lisent en F (Z ou E)
1. Les habitudes conditionnent les réflexes
2. Les pages produisent les comportements
(pas les internautes)
Pe
m nse
ali z
n
!
1. Apparence + animations –> parcours visuel
2. De haut en bas et de gauche à droite…
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

17. 2. CE QU’EST L’ERGONOMIE
1. Les différents niveaux de l’ergonomie
2. La «qualité web» ou e-qualité
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

18. 2.
CE QU’EST L’ERGONOMIE
1. Les différents niveaux de l’ergonomie
Ergonomie générale
Interface homme-machine
Informatique
Web
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

19. 2.
CE QU’EST L’ERGONOMIE
3. La qualité web ou e-qualité
1. Référencement
2. Outils de recherche
1. Visibilité
3. Positionnement
4. Webmarketing
5. Mesure d’audience
6. Communication
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

20. 2.
CE QU’EST L’ERGONOMIE
3. La qualité web ou e-qualité
1. Utilisabilité ou usability
2. Ergonomie
2. Perception
3. Design
4. Webdesign
5. Accessibilité
6. Navigation
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

21. 2.
CE QU’EST L’ERGONOMIE
3. La qualité web ou e-qualité
1. Sécurité
2. Hardware (matériel)
3. Technique
3. Hébergement
4. Qualité logicielle
5. Qualité du réseau
6. Conformité technique
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

22. 2.
CE QU’EST L’ERGONOMIE
3. La qualité web ou e-qualité
1. Ligne éditoriale
2. Rédaction
4. Contenu
3. Traduction, localisation
4. Syndication
5. Fraîcheur
6. Nétiquette
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

23. 2.
CE QU’EST L’ERGONOMIE
3. La qualité web ou e-qualité
1. Réponse aux e-mails
2. E-commerce
5. E-services
3. Services et e-services
4. E-logistique
5. Support, SAV, garantie
6. Relation client/usager
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

24. 3. L’INTERNAUTE, UN HUMAIN
1. Les principes de la Gestalt
2. La loi de Fitts
3. L’affordance
4. Le nombre magique de Miller et la loi de Hick
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

25. 3.
L’INTERNAUTE, UN HUMAIN
1. Les principes de la Gestalt
1. Loi de similarité
Si deux éléments sont similaires en
taille et en forme (*), alors le
cerveau les associera
(*) couleur et orientation comptent moins
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

26. 3.
L’INTERNAUTE, UN HUMAIN
1. Les principes de la Gestalt
2. Loi de proximité
Le cerveau associe des éléments
visuels lorsqu’ils sont proches les
uns des autres ou si les espaces
entre eux sont équivalents.
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

27. 3.
L’INTERNAUTE, UN HUMAIN
1. Les principes de la Gestalt
3. Loi de bonne
continuité
Nous préférons percevoir des
formes continues en termes de
formes, tailles et espacement
formant un pattern plutôt que des
changements abrupts.
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

28. 3.
L’INTERNAUTE, UN HUMAIN
1. Les principes de la Gestalt
4. Loi de clôture
Une forme fermée est plus
facilement identifiée comme une
figure (ou comme une forme)
qu’une forme ouverte.
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

29. 3.
L’INTERNAUTE, UN HUMAIN
1. Les principes de la Gestalt
5. Loi de symétrie
Un ensemble de formes sera mieux
perçu si les formes composant
l’ensemble sont symétriques entre
elles.
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

30. 3.
L’INTERNAUTE, UN HUMAIN
2. La loi de Fitts
1. Les éléments
clicables doivent
être gros
2. Les éléments
clicables doivent
être proches
Le temps mis pour atteindre une
cible est proportionnel à sa
distance et inversement
proportionnel à sa taille
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

31. 3.
L’INTERNAUTE, UN HUMAIN
2. La loi de Fitts
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

32. 3.
L’INTERNAUTE, UN HUMAIN
2. La loi de Fitts
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

33. 3.
L’INTERNAUTE, UN HUMAIN
3. L’affordance
1. Définition
Possibilités d’action suggérées par
les caractéristiques d’un objet
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

34. 3.
L’INTERNAUTE, UN HUMAIN
3. L’affordance
1. Cliquez-moi
2. Affordance web
2. Interagissez avec moi
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

35. 3.
L’INTERNAUTE, UN HUMAIN
4. Le nombre magique de Miller et la loi de Hick
1. Définition
Au-delà de 7 objets, notre cerveau
s’embrouille !
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

36. 3.
L’INTERNAUTE, UN HUMAIN
4. Le nombre magique de Miller et la loi de Hick
2. Middle-point
De 5 à 9 éléments !
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

37. 3.
L’INTERNAUTE, UN HUMAIN
4. Le nombre magique de Miller et la loi de Hick
3. Loi de Hick
Il est plus facile de décider parmi
un nombre réduit d’éléments
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

38. 3.
L’INTERNAUTE, UN HUMAIN
5. Exercice
Analyse ergonomique de sites web
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

39. 4.
L’ERGONOMIE WEB EN PRATIQUE
1. Le cahier des charges
C’est la feuille de route de votre site web !
1. Généralités : nom du site, URL, cible, langues…
2. Equipe mobilisée : fonction, rôle, identité…
3. Fonctionnalités : ce que doit précisément faire le site +
description des interactions avec l’internaute…
4. Graphisme : charte graphique, webdesign…
5. Technique : sécurité, fréquentation estimée…
6. Rétro-planning & budget
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

40. 4.
L’ERGONOMIE WEB EN PRATIQUE
2. Un site lisible
1. Ecrivez en minuscules
2. Utilisez des polices standard
3. Exploitez une taille de caractère 12 à 14px
4. Gérez les couleurs et la signalétique
5. Facilitez l’accès aux rubriques d’aide
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

41. 4.
L’ERGONOMIE WEB EN PRATIQUE
3. Un site compréhensible
Cf. Ma présentation «communiquez pour le web» !
+ /! au son
+ Facilité à prendre contact
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

42. 4.
L’ERGONOMIE WEB EN PRATIQUE
4. Un site rapide
1. Les éléments et contenus se chargent rapidement
2. L’internaute trouve rapidement ce qu’il cherche
3. Le moteur de recherche du site donne des résultats pertinents
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

43. La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

44. 4.
L’ERGONOMIE WEB EN PRATIQUE
5. Un site accessible
1. L’accessibilité technologique
2. L’accessibilité aux seniors et personnes moins valides
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

45. 4.
L’ERGONOMIE WEB EN PRATIQUE
5. Un site accessible
> 1. L’accessibilité technologique
Elle prend en compte :
1. Le système d’exploitation
2. Le navigateur
3. La résolution d’écran
4. Les logiciels et plug-in installés
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

46. 4.
L’ERGONOMIE WEB EN PRATIQUE
5. Un site accessible
> 1. L’accessibilité technologique
Qualité ergonomique d’une interface (norme ISO 9241)
1. Choix technologique à effectuer selon la cible visée
2. Notion de « dégradabilité » du site
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

47. 4.
L’ERGONOMIE WEB EN PRATIQUE
5. Un site accessible
> 2. L’accessibilité aux seniors et personnes moins valides
•US : 1999, Section 508 du Rehabilitation Act
•Europe : plans 2002 et 2005 confirment la priorité des
actions à mener pour « lever toute forme de discrimination
par Internet »
•UK : un utilisateur peut attaquer un site non accessible
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

48. 4.
L’ERGONOMIE WEB EN PRATIQUE
5. Un site accessible
> 2. L’accessibilité aux seniors et personnes moins valides
Source : http://www.dailymotion.com/video/xb3kxy_maria-breffy-standard-et-secretaria_news
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

49. 4.
L’ERGONOMIE WEB EN PRATIQUE
5. Un site accessible
> 2. L’accessibilité aux seniors et personnes moins valides
Différents handicaps à considérer :
• Visuels : daltonisme, cécité
• Auditifs : surdité
• Moteurs et psychologiques
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

50. 4.
L’ERGONOMIE WEB EN PRATIQUE
5. Un site accessible
> 2. L’accessibilité aux seniors et personnes moins valides
Outils exploités pour répondre à ces handicaps :
• Toucher : afficheur braille, clavier virtuel
• Ouïe : synthèse vocale
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

51. 4.
L’ERGONOMIE WEB EN PRATIQUE
5. Un site accessible
> 2. L’accessibilité aux seniors et personnes moins valides
Source : http://www.youtube.com/watch?v=SZ0bgMjYG_E&feature=related
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

52. 4.
L’ERGONOMIE WEB EN PRATIQUE
5. Un site accessible
> 2. L’accessibilité aux seniors et personnes moins valides
La WAI (Web Accessibility Initiative) :
• Créée en 1997 par le W3C
• +500 membres
• A l’origine des WCAG (Web Content Accessibility
Guidelines)
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

53. 4.
L’ERGONOMIE WEB EN PRATIQUE
5. Un site accessible
> 2. L’accessibilité aux seniors et personnes moins valides
Les WCAG = 4 principes pour les contenus web accessibles :
• Perceptibles
• Utilisables
• Compréhensibles
• Robustes
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

54. 4.
L’ERGONOMIE WEB EN PRATIQUE
5. Un site accessible
> 2. L’accessibilité aux seniors et personnes moins valides
Les contenus doivent être perceptibles :
• Tout contenu multimédia doit proposer une alternative
textuelle
• Exemple :
• <img src=“fichier.jpg”
alt=“” />
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

55. 4.
L’ERGONOMIE WEB EN PRATIQUE
5. Un site accessible
> 2. L’accessibilité aux seniors et personnes moins valides
Les contenus doivent être utilisables :
• Tout contenu multimédia doit être accessible par
l’utilisation du clavier ou d’un autre dispositif adapté
• Exemple :
• <a href=“lien.html”
tabindex=“n“>
• n = ordre de la tabulation
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

56. 4.
L’ERGONOMIE WEB EN PRATIQUE
5. Un site accessible
> 2. L’accessibilité aux seniors et personnes moins valides
Les contenus doivent être compréhensibles :
• Tout contenu doit être compréhensible par tous
• Exemple :
• Aides pour guider la navigation
• Explications des erreurs de navigation
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

57. La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

58. 4.
L’ERGONOMIE WEB EN PRATIQUE
5. Un site accessible
> 2. L’accessibilité aux seniors et personnes moins valides
Les contenus doivent être « robustes » :
• Le contenu ne doit pas être altéré par un tiers
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

59. 4.
L’ERGONOMIE WEB EN PRATIQUE
6. Les 10 ingrédients d’une page web ergonomique
1. Charte graphique: logo, baseline, slogan, design en grille
2. Langues
3. Cibles
4. Navigation
5. Moteur de recherche interne
6. Fil d’Ariane
7. Mise en évidence de la page en cours
8. Facilite de retour la page d'accueil
9. Facilite d'accès aux rubriques d’aide
10. Coordonnées de contact ou lien visible vers la rubrique
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

60. 6. CONCLUSIONS, MERCI ET VOS QUESTIONS
1. En guise de conclusion
1. L’ergonomie ne s’improvise pas
2. L’ergonomie excède le web et nous concerne au quotidien
3. L’ergonomie concerne bien plus que le layout du site
4. Un site ergonomique tient compte des attentes des internautes
5. Un site ergonomique impose le moins possible de contraintes à
l’utilisateur
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

61. 6. CONCLUSIONS, MERCI ET VOS QUESTIONS
2. Merci et vos questions
Merci de votre attention !
Je réponds avec plaisir à vos questions.
Fred Colantonio
+32 486 99 58 68
contact@fredcolantonio.com
www.fredcolantonio.com
:
: FredColantonio
Crédit images : www.sxc.hu
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations de cette présentation, merci d’en citer la source de la façon suivante :
© Fred Colantonio, tous droits réservés | www.fredcolantonio.com | contact@fredcolantonio.com

62. E s v i ls u
n a or u sr
p
Ja b s i d c m.o ?
’ i e on e o c m
www. ie on e o c m
j b s id c m.o
a
fc b o .o jie on e o
a e o k m/ b s id c m
c
a
t t r o jie on e o
wie. m/ b s id c m
t c
a
if@jie on e o c m
no ab s id c m.o
T l 0 15 5 1
é : 7 /8 3 5
Ja b s i d c m.o a c mp g elsn é e d nsTEe P d H ia t
’ i e on e o c m c o a n e id p n a t P t ME u an u
,
e d Ba a t l nd n l d v lp e n d lu c mmu iain
t u rb n wal a se é eo p me t e e r o
o
nc t .
o