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