Bases et fondamentaux de l'ergonomie d'un site web. (04-2009)

1. KPDP – L’ergonomie web
- Avril 2008 -
Thursday, March 7, 2013
DOSI Internet

2. Sommaire
Introduction
Organiser une page web
Pour un texte lisible et clair
Les liens comme clés de la navigation
Des formulaires efficaces
Au « menu » du jour
One step beyond the website
Conclusion
Thursday, March 7, 2013 2

3. Introduction (1/2)
Ergonomie : Définition
L’ergonomie web est une discipline dont les règles permettent d’adapter un outil à l’Homme.
Pour un site Internet c’est l’adapter à sa cible / ses visiteurs, afin de leur faciliter la navigation, les actions souhaitées à la
création du site, ainsi chaque site web est unique.
Chaque internaute à l’arrivée sur une page effectue un balayage visuel ou « scan », il faut lui faciliter la lecture en diagonale.
Théories fondatrices
Gestalt « forme » - début XXe
• Proximité (2 éléments proches entretiennent des points communs)
• Similarité (Le cerveau regroupe les choses qui se ressemblent)
Fitts - 1954
• Une cible est d’autant plus rapide à atteindre qu’elle est proche et grande
• Augmenter la taille et la surface des éléments cliquables
Affordances – fin 70’s
• Un objet de par ses caractéristiques détermine son action possible.
Chiffre de Miller et loi de Hick
• 7 items max à + ou moins 2 éléments
• Le temps nécessaire pour prendre une décision est proportionnel au nombre et à la complexité des choix proposés.
Conventions
• Wording + emplacement (panier, accueil, baseline etc …)
Thursday, March 7, 2013 3

4. Introduction (2/2)
Idées reçues
« Ma grand-mère / Un enfant de 10 ans doit pouvoir y
naviguer » Un site ergonomique n’est pas un site utilisable par les plus
novices mais un site adapté à ses utilisateurs.
L’ergonomie on la fera après.
La règle des 3 clics
Les internautes lisent en F, Z, E etc …
Les internautes ne scrollent pas
Ce sera ergonomique car on le fera en Ajax, Web Deux Zero
Astuces
Fitts : Les 4 coins de l’écran et le centre sont les points les
plus faciles d‘accès pour le pointeur de la souris, attention au trajet du
pointeur et de sa longueur.
Toute action user nécessite un feedback immédiat, toujours
demander confirmation sur une action destructrice (annuler / effacer).
Attention à ne jamais proposer d’impasse de navigation et
travailler ses 404.
Thursday, March 7, 2013 4

5. Organiser une page web
Principes de base
Supprimer tout ce qui est inutile
• Le nombre d’éléments intégrable de façon optimum par un cerveau humain sur une page est limité (7-9)
Limiter le poids des pages et donc le temps de chargement
• Sauf cas spécifique de site de vidéos / photos HQ
Hiérarchiser l’information et la lecture de la page
• L’information la plus importante d’une page doit se dégager visuellement en premier
• Bien dégager des zones dans la page (barre de nav, contenu, promo etc …)
Travailler la cohérence du site pour une meilleure appropriation mentale du site
• Template de page / uniformisation des boutons, des liens internes / externes etc …
Prendre en compte la taille d’affichage disponible
• Résolution d’écran réelle vs utile (1024x768 > 980*570 et 1280x1024 > 1240*820)
• Éviter au maximum le scroll horizontal, le vertical est admis beaucoup plus facilement mais il ne doit pas gêner le
principe de hiérarchisation des informations.
• Éviter les « scroll stopper » et autres espaces vides qui donnent l’impression que la page est terminée.
• Utiliser des templates semi élastiques où seules les colonnes de contenu bougent en hauteur.
Utiliser le blanc pou aérer la page mais sans en abuser car cela casse le scan de la page.
Thursday, March 7, 2013 5

6. Pour un texte lisible et clair (1/2)
Basics
Préférer le HTML aux images pour mettre en avant du texte important.
Limiter l’usage des images de fond sur un texte, cela nuit à la lisibilité
• Utiliser des contrastes positifs de couleur (texte foncé sur fond clair) et suffisants, idem pour la luminosité.
Taille de police suffisamment élevée (jamais < à Arial 10pts ou Verdana 9pts pour le corps de
page)
• Utiliser au possible une police sans serif (empatement)
Limiter le nombre de couleurs différentes
Éviter à tout prix les accroches en full majuscules (jamais pour des phrases > 5 mots), et
l’italique (sauf conventions de citation) bien plus difficile à lire que les minuscules (cf. lissage visuel en
hauteur)
Éviter le soulignement à tout prix (cf. erreur latente de l’utilisateur qui le prend pour un lien)
Thursday, March 7, 2013 6

7. Pour un texte lisible et clair (2/2)
Basics
Éviter la justification des textes, préférer la ferrage à gauche pour du texte et à droite pour des
chiffres (dans un tableau par exemple), le centrage et l’alignement à droite du texte compliquent la
lecture et les activités de comparaison.
Un texte / image non cliquable ne peut pas avoir les attributs d’un élément cliquable (bouton
dans un simple bandeau illustratif).
Préférer les phrase courtes (60 – 100 caractères par ligne), concises avec une idée par phrase
dont les mots clés doivent ressortir (graisse)
• Éviter le jargon trop marketing ou technique
• Ne pas hésiter découper les idées sous la forme de listes à puces
• Fournir une version imprimable des textes trop longs.
• Limiter la longueur et la taille des titres et des libellés (Un titre trop gras sera moins lu qu’un titre de niveau 2 plus
fin)
Donner des titres de pages explicites et précis (achoppement parfois avec le SEO vs
bookmarks)
Thursday, March 7, 2013 7

8. Les liens comme clés de la navigation
Lien Vs bouton
Lien = passage d’information || Bouton = lancement d’action (validation d e formulaire / envoi de
données etc …)
Les 3 règles du lien
Avoir un format réservé et constant sur tout le site
Avoir un format différenciant du reste du texte
Avoir un format qui le fasse ressortir de la page
Lien Lien Lien
Bien identifier textuellement et visuellement les liens ancres / visités / externes / internes (flèche vers extérieur
façon Wikipédia) / lien de téléchargement de document (logo .pdf + poids obligatoire) ou de fichier.
Éviter la multiplication des formats de liens et adapter leur niveau de visibilité (contraste / couleur) à leur
importance (lien dans le contenu vs lien du footer)
La taille du lien est importante, plus les mots englobés sont nombreux plus l’accès à l’information sera rapide.
Pas de lien sur 2 lignes.
En cas de picto ou d’un libellé avec fond, la zone cliquable doit bien englober tous les éléments (cf. BTmed).
Cohérence des liens (idem partout sur le site) + respect des balises <alt></title>
Thursday, March 7, 2013 8

9. Des formulaires efficaces (1/3)
Principes directeurs
Réduire au maximum la distance entre le libellé d’un champ et le champ lui-même, placer un curseur devant
(flèche) le champ actif.
Eviter de pré-remplir le champ avec son intitulé (gain de place Vs compréhension de l’action par le visiteur)
Limiter le nombre de champs au strict nécessaire, permettre l’utilisation du TAB
Ne pas présenter un champ s’il n’est pas éditable (Selfcare) ou au pire le griser (POWEO D)
Fournir des aides à la complétion (en permanence comme le format de date attendu, au survol ou dans le champ
avec le souci de l’aide qui disparaît une fois le champ cliqué)
Si limitation de caractère l’indiquer à l’utilisateur (Ajax ou texte) + éviter les astérisques de sécurité
Cases à cocher / boutons radio, les libellés aussi doivent être cliquables
Bannir les boutons « Reset » « Effacer » sauf utilité prouvée et dans ce cas là validation nécessaire.
Hiérarchiser visuellement les actions Ex : [Valider] vs Annuler
Éviter de pré cocher / pré remplir un champ car cela empêche le visiteur de réfléchir à son action
Traitement unique des erreurs post validation
Soigner les messages d’erreur (contextualisation par type d’erreur et modification du fond de ces champs), au
dessus du formulaire, visuellement il doit attirer l’œil.
Thursday, March 7, 2013 9

10. Des formulaires efficaces (2/3)
Thursday, March 7, 2013 10

11. Des formulaires efficaces (3/3)
Thursday, March 7, 2013 11

12. Au « menu » du jour (1/2)
Recommandations
Ne JAMAIS empêcher l’utilisation du bouton « back » du navigateur et entrer en conflit avec les affordances de
base du web (ou alors les justifier auprès de l’utilisateur)
Opter pour des menus en largeur plutôt qu’en profondeur (15 niveau 1 sont mieux que 3 niveaux 1 et 5 niveaux 2
et 7 niveaux 3)
Ne pas compter le nombre de clics (fameuse règle des 3 clics) car ce n’est pas le nombre de clic qui importe
mais le temps au global passé par l’utilisateur pour trouver son information.
Dans un menu déroulant ou verticale, les items du milieu sont – visibles que ceux du haut et de fin de liste.
Au-delà de 12 items dans une liste, si leur importance est égale on opte pour l’ordre alphabétique.
TOUJOURS proposer un moyen rapide de revenir à l’accueil du site (cf logo comme constante)
Ne pas modifier l’apparence d’un menu d’une page à l’autre ni l’ordre des items
Privilégier le GPS de l’internaute = le chemin de fer
Prévoir un état « survolé » sur les items du menu
Éviter les menus déroulants en cascades (merci Windows …)
Thursday, March 7, 2013 12

13. Au « menu » du jour (2/2)
Illustrations
Thursday, March 7, 2013 13

14. One step beyond the website
Bannières
L’IAB (Internet Advertising Bureau) tout comme Google conseille des animations de max 15
secondes
Éviter les boucle infinie
Ne pas déclencher le son automatiquement (idem pour les fichiers médias audio/vidéo et leur
lecture)
En cas d’interstitiel, toujours donner un moyen à l’internaute de fermer la bannière
Éviter les doubles bannières animées (distraction de l’attention de l’internaute) et « effet sapin
Noël »
Les couleurs très vives et le « cliquez ici » banni sur les sites marchent toujours très bien.
Les recommandations pour un site (Fittsizing) ne s’appliquent pas pour une bannière. Exemple :
Cliquez ici
Site
Voir votre promotion
||
Cliquez ici >> Bannière
Thursday, March 7, 2013 14