Intervention réalisée lors de séances d'ateliers à Deauville, Tourisme Numérique, les 17 et 18 mars 2014. #TN2

1. ATELIER
A4
ERGONOMIE
D’UN
SITE
INTERNET

2. ATELIER
A4
!
AVEC
LA
PARTICIPATION
DE
:
!
!
#
PIERRE
CROIZET,
GMT
ÉDITIONS
!
!
!
ANIMÉ
PAR
:
!
!
#
LUDOVIC
DUBLANCHET

3. ERGONOMIE
D’UN SITE
Animateur : Ludovic Dublanchet
Intervenant : Pierre Croizet
Durée : 1h15
ATELIER

4. PRINCIPES
• Etre clair : halte à la surcharge !
• Cohérence : navigation constante
• Respectez les conventions : intuitif = familier
• Libellez vos boutons !
• Accès rapide exigé !!
• Pas de mode d’emploi requis
Merci à http://www.radisnoir.com

5. REPÈRES
• Selon les études : un internaute lit 20 à 28%
des mots d’une page web
• Le processus de lecture sur papier et sur
écran est identique, mais on lit plus
lentement sur écran
• La lisibilité dépend de la taille des
caractères et des blancs
Source : Lisibilité des sites web, Marie-Valentine Blond, Olivier Marcellin, Mélina Zerbib- Editions Eyrolles

6. REPÈRES
Source : Google et Kantar Media Compete France 2013

7. EXPÉRIENCE
UTILISATEUR
• Le client vient sur votre site avec une requête
précise formulée d’abord dans Google
• C’est un humain

8. D’ABORD REPTILES

9. http://bit.ly/1dPtM4l
http://www.copyblogger.comSource :
Améliorer
le taux de
clic des
boutons
Accès article :
Accès mobile :

10. LA GUERRE DES
BOUTONS
Etape 1 : permettre la décision, en connaissance de cause

11. LA GUERRE DES
COULEURS
Etape 2 : attirer les reptiles
+ 81% / Control
+ 95 % / Control

12. LA GUERRE DES
COULEURS
Etape 2 : attirer les reptiles
+ 81% / Control
+ 95 % / Control

13. CHOISIR EST
DIFFICILE
Etape 3 : proposer de la variété mais éviter la confusion

14. CHOISIR EST
DIFFICILE
Etape 3 : proposer de la variété mais éviter la confusion

15. FAIRE CLIQUER
Etape 4 : donner envie de cliquer (neocortex)
Les boutons sont plus facilement cliqués lorsqu’ils sont
cliquables...

16. CONCLURE
Etape 5 : emballer c’est pesé
Rassurer définitivement avec des preuves

18. SOIGNEZ LA
PERFORMANCE
La bataille du temps de chargement des
pages :
!
Réduisez le poids des images
!
Optimisez la moindre bannière
!
Grapillez des millisecondes !

19. RÉPONDEZ AUX ATTENTES
MAIS LIMITEZ L’ATTENTE
• Etude Nah F. F.-H. (2004)* et Nielsen (1993)
!
• 0,1 seconde : aucun feedback nécessaire,
l’utilisateur ressent l’instantanéité
!
• 1,0 seconde : l’utilisateur remarque l’attente, il
reste concentré mais il perd le contrôle
!
• 2,0 secondes : inacceptable.
* Behaviour and Information Technology, a study on tolerable waiting time, 23, 153-163

20. POUR NE PAS
CONCLURE
Et les applications mobiles ?
Une contrainte bénéfique : occuper tout
l’écran mais pas plus.
!
Débat : faut-il stopper le scroll ???

21. POUR NE PAS
CONCLURE
Suivre les guidelines
Ex. : bit.ly/IV9atu
Déférence : l’UI interagit avec les contenus mais ne les
masque pas
!
Priorité : mettez en avant les coeurs de fonctionnalités
!
Evidence : laissez des espaces blancs

22. QU’EN PENSEZ-VOUS ?
Merci de votre attention :)

23. ATELIER
A4
!
AVEC
LA
PARTICIPATION
DE
:
!
!
#
PIERRE
CROIZET,
GMT
ÉDITIONS
!
!
!
ANIMÉ
PAR
:
!
!
#
LUDOVIC
DUBLANCHET