Bases et fondamentaux de l'ergonomie d'un site web. (04-2009)
14
Monday, May 16, 2022 KPDP – L’ergonomie web - Avril 2008 - DOSI Internet
Transcript
1. KPDP Lergonomie 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 cls de la navigation Des
formulaires efficaces Au menu du jour One step beyond the website
ConclusionThursday, March 7, 2013 2
3. Introduction (1/2) Ergonomie : Dfinition Lergonomie web est
une discipline dont les rgles permettent dadapter un outil lHomme.
Pour un site Internet cest ladapter sa cible / ses visiteurs, afin
de leur faciliter la navigation, les actions souhaites lacration du
site, ainsi chaque site web est unique. Chaque internaute larrive
sur une page effectue un balayage visuel ou scan, il faut lui
faciliter la lecture en diagonale. Thories fondatrices Gestalt
forme - dbut XXe Proximit (2 lments proches entretiennent des
points communs) Similarit (Le cerveau regroupe les choses qui se
ressemblent) Fitts - 1954 Une cible est dautant plus rapide
atteindre quelle est proche et grande Augmenter la taille et la
surface des lments cliquables Affordances fin 70s Un objet de par
ses caractristiques dtermine son action possible. Chiffre de Miller
et loi de Hick 7 items max + ou moins 2 lments Le temps ncessaire
pour prendre une dcision est proportionnel au nombre et la
complexit des choix proposs. Conventions Wording + emplacement
(panier, accueil, baseline etc ) Thursday, March 7, 2013 3
4. Introduction (2/2) Ides reues Ma grand-mre / Un enfant de 10
ans doit pouvoir ynaviguer Un site ergonomique nest pas un site
utilisable par les plusnovices mais un site adapt ses utilisateurs.
Lergonomie on la fera aprs. La rgle 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 lcran et le centre sont les points lesplus faciles
daccs pour le pointeur de la souris, attention au trajet dupointeur
et de sa longueur. Toute action user ncessite un feedback immdiat,
toujoursdemander confirmation sur une action destructrice (annuler
/ effacer). Attention ne jamais proposer dimpasse de navigation
ettravailler ses 404. Thursday, March 7, 2013 4
5. Organiser une page web Principes de base Supprimer tout ce
qui est inutile Le nombre dlments intgrable de faon 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 spcifique de site de
vidos / photos HQ Hirarchiser linformation et la lecture de la page
Linformation la plus importante dune page doit se dgager
visuellement en premier Bien dgager des zones dans la page (barre
de nav, contenu, promo etc ) Travailler la cohrence 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 daffichage disponible Rsolution dcran
relle 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 gner le principe de
hirarchisation des informations. viter les scroll stopper et autres
espaces vides qui donnent limpression que la page est termine.
Utiliser des templates semi lastiques o seules les colonnes de
contenu bougent en hauteur. Utiliser le blanc pou arer 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 Prfrer le HTML
aux images pour mettre en avant du texte important. Limiter lusage
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
leve (jamais < Arial 10pts ou Verdana 9pts pour le corps depage)
Utiliser au possible une police sans serif (empatement) Limiter le
nombre de couleurs diffrentes viter tout prix les accroches en full
majuscules (jamais pour des phrases > 5 mots), etlitalique (sauf
conventions de citation) bien plus difficile lire que les
minuscules (cf. lissage visuel enhauteur) viter le soulignement
tout prix (cf. erreur latente de lutilisateur 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, prfrer la ferrage gauche pour du texte et
droite pour deschiffres (dans un tableau par exemple), le centrage
et lalignement droite du texte compliquent lalecture et les
activits de comparaison. Un texte / image non cliquable ne peut pas
avoir les attributs dun lment cliquable (boutondans un simple
bandeau illustratif). Prfrer les phrase courtes (60 100 caractres
par ligne), concises avec une ide par phrasedont les mots cls
doivent ressortir (graisse) viter le jargon trop marketing ou
technique Ne pas hsiter dcouper les ides sous la forme de listes
puces Fournir une version imprimable des textes trop longs. Limiter
la longueur et la taille des titres et des libells (Un titre trop
gras sera moins lu quun titre de niveau 2 plus fin) Donner des
titres de pages explicites et prcis (achoppement parfois avec le
SEO vsbookmarks) Thursday, March 7, 2013 7
8. Les liens comme cls de la navigation Lien Vs bouton Lien =
passage dinformation || Bouton = lancement daction (validation d e
formulaire / envoi dedonnes etc ) Les 3 rgles du lien Avoir un
format rserv et constant sur tout le site Avoir un format
diffrenciant 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 / visits / externes / internes
(flche vers extrieurfaon Wikipdia) / lien de tlchargement de
document (logo .pdf + poids obligatoire) ou de fichier. viter la
multiplication des formats de liens et adapter leur niveau de
visibilit (contraste / couleur) leurimportance (lien dans le
contenu vs lien du footer) La taille du lien est importante, plus
les mots englobs sont nombreux plus laccs linformation sera
rapide.Pas de lien sur 2 lignes. En cas de picto ou dun libell avec
fond, la zone cliquable doit bien englober tous les lments (cf.
BTmed). Cohrence des liens (idem partout sur le site) + respect des
balises Thursday, March 7, 2013 8
9. Des formulaires efficaces (1/3) Principes directeurs Rduire
au maximum la distance entre le libell dun champ et le champ
lui-mme, placer un curseur devant(flche) le champ actif. Eviter de
pr-remplir le champ avec son intitul (gain de place Vs comprhension
de laction par le visiteur) Limiter le nombre de champs au strict
ncessaire, permettre lutilisation du TAB Ne pas prsenter un champ
sil nest pas ditable (Selfcare) ou au pire le griser (POWEO D)
Fournir des aides la compltion (en permanence comme le format de
date attendu, au survol ou dans le champavec le souci de laide qui
disparat une fois le champ cliqu) Si limitation de caractre
lindiquer lutilisateur (Ajax ou texte) + viter les astrisques de
scurit Cases cocher / boutons radio, les libells aussi doivent tre
cliquables Bannir les boutons Reset Effacer sauf utilit prouve et
dans ce cas l validation ncessaire. Hirarchiser visuellement les
actions Ex : [Valider] vs Annuler viter de pr cocher / pr remplir
un champ car cela empche le visiteur de rflchir son action
Traitement unique des erreurs post validation Soigner les messages
derreur (contextualisation par type derreur et modification du fond
de ces champs), audessus du formulaire, visuellement il doit
attirer lil. 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 empcher
lutilisation du bouton back du navigateur et entrer en conflit avec
les affordances debase du web (ou alors les justifier auprs de
lutilisateur) Opter pour des menus en largeur plutt quen profondeur
(15 niveau 1 sont mieux que 3 niveaux 1 et 5 niveaux 2et 7 niveaux
3) Ne pas compter le nombre de clics (fameuse rgle des 3 clics) car
ce nest pas le nombre de clic qui importemais le temps au global
pass par lutilisateur pour trouver son information. Dans un menu
droulant 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 lordre alphabtique. TOUJOURS
proposer un moyen rapide de revenir laccueil du site (cf logo comme
constante) Ne pas modifier lapparence dun menu dune page lautre ni
lordre des items Privilgier le GPS de linternaute = le chemin de
fer Prvoir un tat survol sur les items du menu viter les menus
droulants en cascades (merci Windows ) Thursday, March 7, 2013
12
13. Au menu du jour (2/2) IllustrationsThursday, March 7, 2013
13
14. One step beyond the website Bannires LIAB (Internet
Advertising Bureau) tout comme Google conseille des animations de
max 15secondes viter les boucle infinie Ne pas dclencher le son
automatiquement (idem pour les fichiers mdias audio/vido et
leurlecture) En cas dinterstitiel, toujours donner un moyen
linternaute de fermer la bannire viter les doubles bannires animes
(distraction de lattention de linternaute) et effet sapinNol Les
couleurs trs vives et le cliquez ici banni sur les sites marchent
toujours trs bien. Les recommandations pour un site (Fittsizing) ne
sappliquent pas pour une bannire. Exemple : Cliquez ici Site Voir
votre promotion || Cliquez ici >> Bannire Thursday, March 7,
2013 14