Ergonomie Web - Une Introduction
Upcoming SlideShare
Loading in...5
×
 

Ergonomie Web - Une Introduction

on

  • 1,228 views

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

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

Statistics

Views

Total Views
1,228
Views on SlideShare
1,207
Embed Views
21

Actions

Likes
1
Downloads
25
Comments
0

1 Embed 21

https://twitter.com 21

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Ergonomie Web - Une Introduction Ergonomie Web - Une Introduction Presentation Transcript

  • KPDP – L’ergonomie web- Avril 2008 - Thursday, March 7, 2013 DOSI Internet
  • 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 ConclusionThursday, March 7, 2013 2
  • 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 à lacré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
  • Introduction (2/2) Idées reçues « Ma grand-mère / Un enfant de 10 ans doit pouvoir ynaviguer » Un site ergonomique n’est pas un site utilisable par les plusnovices 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 lesplus faciles d‘accès pour le pointeur de la souris, attention au trajet dupointeur et de sa longueur. Toute action user nécessite un feedback immédiat, toujoursdemander confirmation sur une action destructrice (annuler / effacer). Attention à ne jamais proposer d’impasse de navigation ettravailler ses 404. Thursday, March 7, 2013 4
  • 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
  • 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 depage) • 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), etl’italique (sauf conventions de citation) bien plus difficile à lire que les minuscules (cf. lissage visuel enhauteur) Éviter le soulignement à tout prix (cf. erreur latente de l’utilisateur qui le prend pour un lien) Thursday, March 7, 2013 6
  • 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 deschiffres (dans un tableau par exemple), le centrage et l’alignement à droite du texte compliquent lalecture et les activités de comparaison. Un texte / image non cliquable ne peut pas avoir les attributs d’un élément cliquable (boutondans un simple bandeau illustratif). Préférer les phrase courtes (60 – 100 caractères par ligne), concises avec une idée par phrasedont 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 vsbookmarks) Thursday, March 7, 2013 7
  • Les liens comme clés de la navigation Lien Vs bouton Lien = passage d’information || Bouton = lancement d’action (validation d e formulaire / envoi dedonné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érieurfaç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) à leurimportance (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
  • 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 champavec 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), audessus du formulaire, visuellement il doit attirer l’œil. Thursday, March 7, 2013 9
  • Des formulaires efficaces (2/3)Thursday, March 7, 2013 10
  • Des formulaires efficaces (3/3)Thursday, March 7, 2013 11
  • 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 debase 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 2et 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 importemais 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
  • Au « menu » du jour (2/2) IllustrationsThursday, March 7, 2013 13
  • One step beyond the website Bannières L’IAB (Internet Advertising Bureau) tout comme Google conseille des animations de max 15secondes Éviter les boucle infinie Ne pas déclencher le son automatiquement (idem pour les fichiers médias audio/vidéo et leurlecture) 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 sapinNoë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