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...
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...
5. RESSOURCES

www.ergolab.net • www.ergologique.com • www.ergonomieweb.com • blog.webatou.info • blog-ergonomieweb.com
La...
DOUBLE CONSTAT
« Le constat est édifiant : un site sur deux est mal conçu, mal écrit et
mal pensé.

Donc logiquement peu at...
FAIRE UN BON SITE WEB ?

Seule certitude :

z!
lie

ub
O

Jean-Claude Dusse (Michel
Blanc) dans Les Bronzés, réalisé
par P...
1. CE QUE VOUS CROYEZ SAVOIR

5 idées reçues sur l’ergonomie

La mise à disposition gratuite est un choix, la propriété in...
1.

CE QUE VOUS CROYEZ SAVOIR

1. L’internaute est sot ou, au contraire, il sait tout
Enoncé

Un enfant de 10ans sait le f...
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 pe...
1.

CE QUE VOUS CROYEZ SAVOIR

2. Le mythe des 3 clics
Enoncé

Risques

L’information doit être accessible à l’utilisateur...
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 p...
1.

CE QUE VOUS CROYEZ SAVOIR

3. Ergonomie et design graphique ne vont pas ensemble
Enoncé

L’ergonomie entrave la créati...
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 graphis...
1.

CE QUE VOUS CROYEZ SAVOIR

4. Un site ergonomique sinon rien
Enoncé

Risques

« Faites-moi un site ergonomique »

1. C...
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 ...
1.

CE QUE VOUS CROYEZ SAVOIR

5. Les internautes lisent en F (Z ou E)
Enoncé

Le regard de l’internaute suit une trajecto...
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...
2. CE QU’EST L’ERGONOMIE

1. Les différents niveaux de l’ergonomie
2. La «qualité web» ou e-qualité

La mise à disposition...
2.

CE QU’EST L’ERGONOMIE

1. Les différents niveaux de l’ergonomie
Ergonomie générale
Interface homme-machine
Informatiqu...
2.

CE QU’EST L’ERGONOMIE

3. La qualité web ou e-qualité
1. Référencement
2. Outils de recherche
1. Visibilité

3. Positi...
2.

CE QU’EST L’ERGONOMIE

3. La qualité web ou e-qualité
1. Utilisabilité ou usability
2. Ergonomie
2. Perception

3. Des...
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
...
2.

CE QU’EST L’ERGONOMIE

3. La qualité web ou e-qualité
1. Ligne éditoriale
2. Rédaction
4. Contenu

3. Traduction, loca...
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 ...
3. L’INTERNAUTE, UN HUMAIN
1. Les principes de la Gestalt
2. La loi de Fitts
3. L’affordance
4. Le nombre magique de Mille...
3.

L’INTERNAUTE, UN HUMAIN

1. Les principes de la Gestalt

1. Loi de similarité

Si deux éléments sont similaires en
tai...
3.

L’INTERNAUTE, UN HUMAIN

1. Les principes de la Gestalt

2. Loi de proximité

Le cerveau associe des éléments
visuels ...
3.

L’INTERNAUTE, UN HUMAIN

1. Les principes de la Gestalt

3. Loi de bonne
continuité

Nous préférons percevoir des
form...
3.

L’INTERNAUTE, UN HUMAIN

1. Les principes de la Gestalt

4. Loi de clôture

Une forme fermée est plus
facilement ident...
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...
3.

L’INTERNAUTE, UN HUMAIN

2. La loi de Fitts

1. Les éléments
clicables doivent
être gros
2. Les éléments
clicables doi...
3.

L’INTERNAUTE, UN HUMAIN

2. La loi de Fitts

La mise à disposition gratuite est un choix, la propriété intellectuelle ...
3.

L’INTERNAUTE, UN HUMAIN

2. La loi de Fitts

La mise à disposition gratuite est un choix, la propriété intellectuelle ...
3.

L’INTERNAUTE, UN HUMAIN

3. L’affordance

1. Définition

Possibilités d’action suggérées par
les caractéristiques d’un ...
3.

L’INTERNAUTE, UN HUMAIN

3. L’affordance

1. Cliquez-moi

2. Affordance web

2. Interagissez avec moi

La mise à dispo...
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 ce...
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 mi...
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écid...
3.

L’INTERNAUTE, UN HUMAIN

5. Exercice

Analyse ergonomique de sites web

La mise à disposition gratuite est un choix, l...
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 : n...
4.

L’ERGONOMIE WEB EN PRATIQUE

2. Un site lisible
1. Ecrivez en minuscules
2. Utilisez des polices standard
3. Exploitez...
4.

L’ERGONOMIE WEB EN PRATIQUE

3. Un site compréhensible

Cf. Ma présentation «communiquez pour le web» !
+ /! au son
+ ...
4.

L’ERGONOMIE WEB EN PRATIQUE

4. Un site rapide
1. Les éléments et contenus se chargent rapidement
2. L’internaute trou...
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations d...
4.

L’ERGONOMIE WEB EN PRATIQUE

5. Un site accessible

1. L’accessibilité technologique
2. L’accessibilité aux seniors et...
4.

L’ERGONOMIE WEB EN PRATIQUE

5. Un site accessible
> 1. L’accessibilité technologique
Elle prend en compte :
1. Le sys...
4.

L’ERGONOMIE WEB EN PRATIQUE

5. Un site accessible
> 1. L’accessibilité technologique

Qualité ergonomique d’une inter...
4.

L’ERGONOMIE WEB EN PRATIQUE

5. Un site accessible
> 2. L’accessibilité aux seniors et personnes moins valides

•US : ...
4.

L’ERGONOMIE WEB EN PRATIQUE

5. Un site accessible
> 2. L’accessibilité aux seniors et personnes moins valides

Source...
4.

L’ERGONOMIE WEB EN PRATIQUE

5. Un site accessible
> 2. L’accessibilité aux seniors et personnes moins valides

Différ...
4.

L’ERGONOMIE WEB EN PRATIQUE

5. Un site accessible
> 2. L’accessibilité aux seniors et personnes moins valides

Outils...
4.

L’ERGONOMIE WEB EN PRATIQUE

5. Un site accessible
> 2. L’accessibilité aux seniors et personnes moins valides

Source...
4.

L’ERGONOMIE WEB EN PRATIQUE

5. Un site accessible
> 2. L’accessibilité aux seniors et personnes moins valides

La WAI...
4.

L’ERGONOMIE WEB EN PRATIQUE

5. Un site accessible
> 2. L’accessibilité aux seniors et personnes moins valides
Les WCA...
4.

L’ERGONOMIE WEB EN PRATIQUE

5. Un site accessible
> 2. L’accessibilité aux seniors et personnes moins valides
Les con...
4.

L’ERGONOMIE WEB EN PRATIQUE

5. Un site accessible
> 2. L’accessibilité aux seniors et personnes moins valides
Les con...
4.

L’ERGONOMIE WEB EN PRATIQUE

5. Un site accessible
> 2. L’accessibilité aux seniors et personnes moins valides
Les con...
La mise à disposition gratuite est un choix, la propriété intellectuelle un droit.
En cas d’utilisation des informations d...
4.

L’ERGONOMIE WEB EN PRATIQUE

5. Un site accessible
> 2. L’accessibilité aux seniors et personnes moins valides
Les con...
4.

L’ERGONOMIE WEB EN PRATIQUE

6. Les 10 ingrédients d’une page web ergonomique
1. Charte graphique: logo, baseline, slo...
6. CONCLUSIONS, MERCI ET VOS QUESTIONS

1. En guise de conclusion
1. L’ergonomie ne s’improvise pas
2. L’ergonomie excède ...
6. CONCLUSIONS, MERCI ET VOS QUESTIONS

2. Merci et vos questions
Merci de votre attention !
Je réponds avec plaisir à vos...
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 ...
Prochain SlideShare
Chargement dans…5
×

L'ergonomie d'un site web par Fred Colantonio

4 733 vues

Publié le

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.

0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
4 733
Sur SlideShare
0
Issues des intégrations
0
Intégrations
850
Actions
Partages
0
Téléchargements
74
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

L'ergonomie d'un site web par Fred Colantonio

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×