Ergonomie & UX

  • View
    896

  • Download
    5

Embed Size (px)

DESCRIPTION

Elments d'introduction l'ergonomie d'un site web partir du livre Ergonomie Web d'Amlie Boucher

Transcript

  • 1. UX : User ExperienceQuelques rgles dergonomie...mercredi 3 septembre 14

2. mercredi 3 septembre 14 3. Introduction etgnralits dusagemercredi 3 septembre 14 4. mercredi 3 septembre 14 5. Diffrents objets que lon peut amliorerdun point de vue ergonomiquemercredi 3 septembre 14 6. Un site webergonomique est unsite utile et utilisablemercredi 3 septembre 14 7. mercredi 3 septembre 14 8. Rgle n1mercredi 3 septembre 14 9. Se mfier des rgles !mercredi 3 septembre 14 10. La rgle des 3 clics ?mercredi 3 septembre 14 11. On oublie...mercredi 3 septembre 14 12. On retient :mercredi 3 septembre 14 13. chaque clic, jeprogresse...mercredi 3 septembre 14 14. On soigne :mercredi 3 septembre 14 15. Le chemin parcouru : fil dAriane oubreadcrumb On met en valeur la localisation delinternaute : o il se trouve dans le site On lui indique le chemin parcourirmercredi 3 septembre 14 16. Exemplemercredi 3 septembre 14 17. 7 clics pour uneinformationmercredi 3 septembre 14 18. La loi de MILLERmercredi 3 septembre 14 19. Kzako?mercredi 3 septembre 14 20. Le nombre magique sept, plus oumoins deux : quelques limites nos capacits de traitement del'information (Miller, 1956)Wikipediamercredi 3 septembre 14 21. Des recherches rcentesdmontrent que la loi du nombremagique sept est fonde sur uneinterprtation errone de l'article deMiller. Le nombre correct denouveaux lments pouvant tenirdans la mmoire courante estprobablement de trois ou quatreWikipdiamercredi 3 septembre 14 22. 5 entres par site auminimum + 2 aumaximummercredi 3 septembre 14 23. Rgle n2mercredi 3 septembre 14 24. Les internautes ne sontpas...mercredi 3 septembre 14 25. mercredi 3 septembre 14 26. Des dbiles...mercredi 3 septembre 14 27. IL ne faut ni...mercredi 3 septembre 14 28. Le sous-estimerniLe sur-estimermercredi 3 septembre 14 29. Les personasmercredi 3 septembre 14 30. Une personne donne,dans un contexte prcismercredi 3 septembre 14 31. mercredi 3 septembre 14 32. Rgle n3mercredi 3 septembre 14 33. La lecture en F, Z ou E ?mercredi 3 septembre 14 34. Cest lapparence dusite qui influe sur leparcours visuel delinternautemercredi 3 septembre 14 35. Rgle n4mercredi 3 septembre 14 36. Les internautes nescrollent pasmercredi 3 septembre 14 37. FAUXmercredi 3 septembre 14 38. On pratiquele cut-off designmercredi 3 septembre 14 39. On organise sa pagemercredi 3 septembre 14 40. La thorie de la Gestaltmercredi 3 septembre 14 41. WTF ?mercredi 3 septembre 14 42. Postulat Notre cerveau analyse le mondeenvironnant comme un ensemble deformes Le Tout est plus que la simple somme deses parties : la conjonction de plusieursformes peut faire merger de nouvellescaractristiquesmercredi 3 septembre 14 43. Notre cerveau regroupe les choses qui sontproches physiquement.proximit visuelle = proximit conceptuellemercredi 3 septembre 14 44. Il faut donc...mercredi 3 septembre 14 45. Rapprocher les objets qui entretiennent unrapport fonctionnel Eloigner ceux qui nont rien en communmercredi 3 septembre 14 46. mercredi 3 septembre 14 47. 1.Bien organiser la pagewebmercredi 3 septembre 14 48. Bien organiser la page web #1 Supprimer tout ce qui est inutile Limiter le poids des pages Crer une hirarchie de lecture claire Prvoir quelques gabarits de pages et sytenir Penser lespace dcran rellementdisponiblemercredi 3 septembre 14 49. Bien organiser la page webLes 3 rsolutions majoritairesmercredi 3 septembre 14 50. Bien organiser la page web #2 Eviter au maximum le scroll horizontal Le scroll vertical ne doit pas altrer lavisibilit des lments critiques quil fautplacer au dessus du seuil de scrollmercredi 3 septembre 14 51. Espace cran exploitablemercredi 3 septembre 14 52. Bien organiser la page web #2 Eviter tout scroll stopper Eviter un design entirement elastique :Etirer seulement les colonnes de contenu Arer la page par des blancs Bien diffrencier les types despaces de lapagemercredi 3 septembre 14 53. Mais aussi dans ledtail...mercredi 3 septembre 14 54. mercredi 3 septembre 14 55. Cest la loi deproximitmercredi 3 septembre 14 56. Mais aussi...mercredi 3 septembre 14 57. La loi de FITTSmercredi 3 septembre 14 58. Le temps quon metpour atteindre unecible est proportionnel la distance laquelleelle se trouve maisaussi sa taille .mercredi 3 septembre 14 59. Les lments cliquablesdoivent tre grosmercredi 3 septembre 14 60. Augmentez la surfacedes lments cliquablesmercredi 3 septembre 14 61. Dcouvrez et appliquezle concept daffordancemercredi 3 septembre 14 62. Les affordances sont lespossibilits dactionssuggres par lescaractristiques dunobjetmercredi 3 septembre 14 63. mercredi 3 septembre 14 64. Optimiser laffordance :Vous pouvez me cliquermercredi 3 septembre 14 65. Optimiser laffordance :Vous pouvez interagiravec moimercredi 3 septembre 14 66. Attention aux faussesaffordancesmercredi 3 septembre 14 67. mercredi 3 septembre 14 68. 2. Des textes lisibles etclairsmercredi 3 septembre 14 69. Des textes lisibles et clairs Prsenter les textes pour faciliter la lecture lcran : Prfrer le HTML aux images pour dutexte ou des informations importantes Limiter lusage dimage de fond pour letextemercredi 3 septembre 14 70. Des textes lisibles et clairs Typographie et couleurs : Une taille de police jamais en dessousdun Arial 10 ou dun Verdana 9 pour le corpsde page Des contrastes positifs : fonc sur clairDes niveaux de luminosit et decontrastes suffisants : outilmercredi 3 septembre 14 71. Limiter le nombre de couleurs diffrentes Prferer les casses mixtes Utiliser les majuscules uniquement pourattirer lattention Limiter lutilisation des majuscules auxphrases trs courtesmercredi 3 septembre 14 72. Augmenter lespace par dfaut entre lescaractres des titres en majuscules Eviter litalique Un texte non cliquable ne doit pas avoirlair cliquable Le format soulign est INTERDIT pourmettre une ide en reliefmercredi 3 septembre 14 73. Des textes lisibles et clairs Gestion des blocs et lignes de texte : Police sans-serif Eviter de justifier Alignement gauche Un nombre de caractres agrable : 60-100 Linterlignage devrait tre denviron 150%du corps du textemercredi 3 septembre 14 74. Des textes lisibles et clairs Ecrire pour le Web : Ecrire pour tre scann Utiliser un langage familier Faire un effort de concision Une ide par paragraphe Faire des phrases courtesmercredi 3 septembre 14 75. Faites ressortir les mots cls avec le boldsans en abuser Rythmez les longs paragraphes Pensez liste puces Fournir un format imprimable pour lelongmercredi 3 septembre 14 76. Des textes lisibles et clairs Titres et libells : aller lessentiel 1 concept = 1 mot Crer une hirarchie de taille de titresTypo : Un titre trop gros sera moins lu quuntitre moyen Limiter la longueur des titres et libells Commencer par les mots-cls Donne aux pages des titres explicites tre le plus prcis possible dans la rdaction.mercredi 3 septembre 14 77. 2. Liens hypertextes :les cls dune navigationrussiemercredi 3 septembre 14 78. Des liens visibles et utiliss bon escient Un format rserv Un format les diffrenciant clairement dutexte non cliquable Un format qui les fasse ressortir de la pageRemarque : Le format bleu soulign nest pasobligatoire mais le changement de couleur et lesoulign sont de bons indices.mercredi 3 septembre 14 79. Liens hypertextes : les cls dune navigation russie Eviter davoir trop de formats de liensdiffrents Adapter le niveau de lisibilt de vos liens leur importance Prvoir un format spcifique du lien ausurvol de la souris Prvoir un format spcial pour les liensdj visitsmercredi 3 septembre 14 80. Liens hypertextes : les cls dune navigation russie Lors de sa rdaction, penser la taille dulien Lorsque le lien est compos dunpictogramme ou dune icne et dun libell,la zone cliquable doit englober tous leslments Eviter quun lien passe sur deux lignesmercredi 3 septembre 14 81. Liens hypertextes : les cls dune navigation russie Diffrencier les liens externes des liensinternes Signaler les liens pointant vers autre chosequune page HTMLmercredi 3 septembre 14 82. 3.Des formulairessimples et efficacesmercredi 3 septembre 14 83. Des lments de formulaire adapts latchemercredi 3 septembre 14 84. Faciliter la prise en main du formulaire Adapter la visibilit des zones de saisie leur importance Pour donner plus de visibilt un champ desaisie, il faut le mettre en blanc sur un fondgris ou de couleur Eviter de remplir tous les champs avec desdonnes pr-rempliesmercredi 3 septembre 14 85. Faciliter la prise en main du formulaire Indiquer ds le dpart que certains champssont obligatoires Accompagner chaque champ obligatoiredun lment graphique ou typographiquespcifique et facilement reprable Supprimer les : en fin de libell En cas de nombreux champs, former desgroupesmercredi 3 septembre 14 86. Faciliter la prise en main du formulaire Aligner les libells gauche si le nombre decaractres sparant le libell le plus long duplus court ne dpasse pas 6 8 caractres. La distance entre le libell et le champ nedoit pas tre trop importantemercredi 3 septembre 14 87. Faciliter la tche de renseignement Ne demander que les donnes strictementncessaires Permettre le passage de champ champgrce la touche TAB Ordonner les champs selon une logiqueattendue Fournir des aides et des lgendesmercredi 3 septembre 14 88. Faciliter la tche de renseignement Si le nombre de caractres accepts estlimit, en informer linternaute Le bouton daction principal doit trevisible : fort visuellement et prs duformulaire Eviter de proposer des fonctionsdannulationmercredi 3 septembre 14 89. Faciliter la tche de renseignement Faire ressortir la ou les actions principalesdu formulairemercredi 3 septembre 14 90. Aider linternaute viter et corrigerses erreurs Indiquer le format de renseignementattendu lextrieur du cha