Bonnes pratiques graphiques

8 287 vues

Publié le

Quels principes adopter en phase de création graphique pour préserver l’ergonomie et l’accessibilité de l’interface web ? Lisibilité typographique, contrastes, couleurs, signalétique des hyperliens, utilisabilité des formulaires, messages d’erreur etc. Quels exemples suivre ?

Ce petit florilège de bonnes pratiques graphiques pour améliorer l’ergonomie et l’accessibilité web, était proposé en atelier à Paris Web 2012.

Publié dans : Technologie
2 commentaires
18 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
8 287
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3 248
Actions
Partages
0
Téléchargements
251
Commentaires
2
J’aime
18
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Bonnes pratiques graphiques

  1. 1. Petit florilège de bonnes pratiques graphiques pour améliorerl’ergonomique et l’accessibilité de vos conceptions web par Romy Duhem-Verdière Atelier Paris Web 2012
  2. 2. De quoidispose-t-on ? Amis créas, à quelles guidelines vous fiez-vous ? http://romy.tetue.net/921 2 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  3. 3. Ressources existantes Les 12 règles de lergonomie web Le livre Ergonomie web : http://ergonomie-sites-web.com3 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  4. 4. Ressources existantes Bonnes pratiques Voir en ligne : https://checklists.opquast.com/fr/opquastv2?q=design4 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  5. 5. Ressources existantes Référentiel Accessiweb 2.1 Voir en ligne : http://www.accessiweb.org/index.php/accessiweb_2.1_liste_generale5 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  6. 6. Ressources existantes Notice daccessibilité pour la conception graphique Voir en ligne : http://wiki.accede-web.com/notices/graphique- ergonomique6 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  7. 7. • Couleurs et contrastes• Lisibilité typographique• Signalétique des hyperliens• Utilisabilité des formulaires 7 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  8. 8. Contrasteset couleurs 8 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  9. 9. Contrastes et couleurs Source : http://awesome-fontstacks.com/4049 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  10. 10. Contrastes et couleurs 10 % de la population masculine est daltonienne Source : http://www.coloradd.net/why.asp10 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  11. 11. Source : http://www.pomodorospizza.net
  12. 12. Source : http://www.pomodorospizza.netOutil : http://colororacle.cartography.ch
  13. 13. Source : http://www.pomodorospizza.netOutil : http://colororacle.cartography.ch
  14. 14. Source : http://www.pomodorospizza.netOutil : http://colororacle.cartography.ch
  15. 15. Contrastes et couleurs Source : information routière Google Maps http://humeursmondialisees.blogspot.fr/2012/11/les-sites-dinformation-trafic-co.html15 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  16. 16. Contrastes et couleurs L’information ne doit pas être donnée uniquement par la couleur Critère Accessiweb 2.1 No 10.4 [Argent] RGAA 2.2 test 2.1 [A] Source : information routière Apple http://humeursmondialisees.blogspot.fr/2012/11/les-sites-dinformation-trafic-co.html16 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  17. 17. Contrastes et couleurs Test d’Ishihara : http://www.declic.ph/depistage.asp?iddepistage=2117 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  18. 18. Contrastes et couleurs Source : http://wiki.accede-web.com/notices/graphique-ergonomique/ assurer-la-comprehension-de-l-information-meme-en-l-absence-de-couleurs18 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  19. 19. Contrastes et couleurs L’information ne doit pas être donnée uniquement par la couleur Critère Accessiweb 2.1 No 10.4 [Argent] RGAA 2.2 test 2.1 [A] Source : http://wiki.accede-web.com/notices/graphique-ergonomique/ assurer-la-comprehension-de-l-information-meme-en-l-absence-de-couleurs19 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  20. 20. Contrastes et couleurs Source : http://www.artskills.net Outil : Colour Contrast Check20 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  21. 21. Contrastes et couleurs Source : http://www.artskills.net Outil : Colour Contrast Check21 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  22. 22. Contrastes et couleurs Source : http://www.artskills.net Outil : Colour Contrast Check22 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  23. 23. Contrastes et couleurs Source : http://www.dondorganes.fr23 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  24. 24. Contrastes et couleurs Proposer une alternative contrastée Source : http://www.dondorganes.fr/?rgaa=1 Assurer un contraste suffisant entre les contenus et larrière-plan ou proposer une alternative contrastée24 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  25. 25. Lisibilitétypographique  25 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  26. 26. Lisibilité typographiqueUN GENDARME TUE 26 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  27. 27. Lisibilité typographique Accentuer les majusculesUN GENDARME TUÉ Lexique des règles typographiques en usage à l’Imprimerie nationale, page 12 Notice AcceDeWeb No 6.1 WCAG 2.0 No 3.1 Accentuez les lettres capitales et majuscules : http://www.tentatives- accessibles.eu/182-accentuer-les-lettres-majuscules Orthographe et accessibilité : http://www.nota-bene.org/509 27 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  28. 28. Lisibilité typographique Caractères spéciaux Microsoft Windows Voir : alt-codes.net28 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  29. 29. Lisibilité typographiqueLE BAOBAB AFRICAIN EST UN ARBRE À LALONGÉVITÉ EXCEPTIONNELLE, SURTOUTPRÉSENT AU SENEGAL. DUNE CROISSANCELENTE, ON TROUVE DES SPÉCIMENS QUISERAIENT ÂGÉS DE PRÈS DE 2000 ANS. ENFAIT, CES ARBRES NE PRODUISENT PAS DECERNES TOUS LES ANS DU FAIT DESSÉCHERESSES RÉCURRENTES QUI TOUCHENTLA SAVANE AFRICAINE, IL EST DONCDIFFICILE DE DÉTERMINER LEUR ÂGE PAR DESMÉTHODES DE DENDROCHRONOLOGIE. 29 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  30. 30. Lisibilité typographiqueLe baobab africain est un arbre à lalongévité exceptionnelle, surtout présent Éviter lesau Sénégal. D’une croissance lente, on majusculestrouve des spécimens qui seraient âgés de pas plus deprès de 2000 ans. En fait, ces arbres ne 5 mots successifsproduisent pas de cernes tous les dans du en majusculesfait des sécheresses récurrentes quitouchent la savane africaine. Il est doncdifficile de déterminer leur âge par desméthodes de dendrochronologie. Des minuscules sinon rien http://www.graphemes.com/enews/41/41minuscule.html 30 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  31. 31. Lisibilité typographique Préférer une fonte conçue pour l’écran CSS Typography: The Basics http://sixrevisions.com/css/css-typography-01/ Stop Arial 11px ! http://romy.tetue.net/stop-arial-11px31 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  32. 32. Lisibilité typographique Prévoir des polices de substitutionfont-family: StempelGaramondW01-Ital;font-family: StempelGaramondW01-Ital, Garamond, Georgia, serif; Le site Garamond maltraite la typo http://romy.tetue.net/865 32 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  33. 33. Lisibilité typographique Prévoir une « Font Stack » complètefont-family: Book Antiqua, Courier New, Georgia; Source : http://www.gitton.net/fr/1-chroniques-injustes/29-facebook- espace-public-ou-priver-.html ? 33 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  34. 34. Lisibilité typographique Prévoir une1 2 3 « Font Stack » complète et cohérente Arial Revised Font Stack http://www.awayback.com/revised-font-stack/ 34 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  35. 35. Lisibilité typographique Laisser le texte16px 11pt à 100 % Relative readability, by Wilson Miner, 2008 http://wm4.wilsonminer.com/posts/2008/oct/20/relative-readability/ 35 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  36. 36. Lisibilité typographique16px/ 16px/ 1.5 1.5 Laisser le texte 100 %16px/ 16px/ à20px 1.51.6em/ 14pt/ 1.5 21pt Lisibilité des sites web, font-size : 100% – 16px : http://all-for-design.com/web- design/lisibilite-des-sites-web-font-size-100-16px/16px/ 16px/ 36 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  37. 37. Lisibilité typographique Pouvoir zoomer le texte x2 Critère Accessiweb 2.1 No 10.4 [Argent] Test RGAA 2.2 No 7.13 [AA] Source : http://www.voyages-sncf.com/guide/accessibilite Améliorer l’accessibilité par la typographie : http://www.pompage.net/ traduction/ameliorer-l-accessibilite-par-la-typographie37 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  38. 38. Lisibilité typographique Source : http://www.nota-bene.org/91638 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  39. 39. Lisibilité typographique Ne pas justifier Critère Accessiweb 2.1 No 10.9 [Or] Test RGAA 2.2 No 7.12 [AAA] Le texte se justifie-t-il ? http://www.ergologique.com/conseils/conseils.php?id_tip=81839 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  40. 40. Lisibilité typographique Augmenter l’interlignage à 1.5 Critère Accessiweb 2.1 No 10.12 [Or] Test RGAA 2.2 No 7.17 [AAA] WCAG 2.0 No1.4.8 [AAA]1.2 1.5 Source : http://www.lefigaro.fr/international/ 20060906.WWW000000341_bush_prisonniers.html Manifeste pour un interlignage minimum syndical http://css.4design.tl/manifeste-pour-un-interlignage-minimum 40 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  41. 41. Lisibilité typographique 60 à 80 caractères par ligne Critère Accessiweb 2.1 No 10.11 [Or] WCAG 2.0 No1.4.8 [AAA]66 Source : Enlarge your police http://phollow.fr/2012/02/enlarge-your-police 41 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  42. 42. Lisibilité typographique Laisser 25 % à 50 % d’espace « blanc » sur chaque page Aérer l’information : http://www.ergologique.com/conseils/conseils.php?id_tip=17 Webdesign : difficile de vendre du vide, et pourtant… http://blog.axe-net.fr/webdesign-difficile-de-vendre-du-vide/42 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  43. 43. Lisibilité typographique Aérer facilite la compréhension Source : http://www.ojr.org/ojr/stories/070312ruel/43 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  44. 44. Lisibilité typographique Aérer facilite la compréhension Source : http://www.ojr.org/ojr/stories/070312ruel/44 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  45. 45. Lisibilité typographique Web Design is 95% Typography : http://informationarchitects.net/blog/the- web-is-all-about-typography-period/45 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  46. 46. Signalétiquedes hyperliens 46 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  47. 47. Hyperliens Le contraste suffit-il ? Critère Accessiweb 2.1 No 10.6.1 [Bronze] Test RGAA 2.2 No 7.10 [A] Un contraste suffit-il à distinguer un lien ? http://storify.com/tetue/la-couleur-suffit-elle-a-distinguer-un-lien Source : http://www.philippe-donnart.com/Lire-un-pdf-sur-Kindle.html47 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  48. 48. Hyperliens Combien identifiez-vous de liens sur cette page ? Source : http://www.bouygues.com/developpement-durable/axes- strategiques/environnemental/strategie-carbone/48 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  49. 49. Hyperliens Rendre évident ce qui est cliquable Critère Accessiweb 2.1 No 10.6 [Bronze] Test RGAA 2.2 No 7.10 [A] Rendre évident ce qui est cliquable http://www.ergologique.com/conseils/conseils.php?id_tip=10 Soulignez vos hyperliens ! http://romy.tetue.net/91349 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  50. 50. Hyperliens Source : http://www.info-meningocoque.fr/mentions-legales.html50 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  51. 51. Hyperliens Avertir du comportement + Critère Accessiweb 2.1 No 6.3 [Or]51 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  52. 52. Hyperliens Avertir du comportement Bonne pratique Opquast V2 No 120 [Niveau 2] Critère Accessiweb 2.1 No 13.6 [Or]52 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  53. 53. Hyperliens Source : http://www.fr.capgemini.com53 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  54. 54. Hyperliens Intitulé explicite pour chaque lien Critère Accessiweb 2.1 No 6.1 [Bronze] Notice AcceDe Web 4.1.1 Prévoir un intitulé explicite pour chaque lien : http://wiki.accede-web.com/ notices/graphique-ergonomique/prevoir-un-intitule-explicite-pour-chaque- lien54 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  55. 55. Hyperliens Liens explicites hors contexte Critère Accessiweb 2.1 No 6.1 [Bronze] Source : http://www.kiwano.fr/ergonomie-accessibilite-site-crimes-web/55 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  56. 56. Hyperliens Prévoir tous les états56 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  57. 57. Hyperliens Prévoir tous les états Bonne pratique Opquast V2 No 124 [Niveau 2] + Critère Accessiweb 2.1 No 12.12 [Or]57 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  58. 58. Hyperliens Signaler la prise de focus Critère Accessiweb 2.1 No 10.7 [Bronze] Source : http://www.lesintegristes.net/2009/09/13/hover-vs-active/58 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  59. 59. Hyperliens Prévoir tous les états Signaler le focus améliore la navigation : http://romy.tetue.net/67859 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  60. 60. Utilisabilitédes formulaires 60 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  61. 61. Utilisabilité des formulairesComment utiliser ce… formulaire ? Source : http://plumka.com/html/fr/index.asp 61 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  62. 62. Utilisabilité des formulaires62 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  63. 63. Utilisabilité des formulaires63 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  64. 64. Utilisabilité des formulaires Source : http://www.smashingmagazine.com64 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  65. 65. Utilisabilité des formulaires ? Source : http://www.centraleparis-2015.fr/fr-fr/votre-avis/donnez-votre- avis.html65 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  66. 66. Utilisabilité des formulaires Source : http://www.centraleparis-2015.fr/fr-fr/votre-avis/donnez-votre- avis.html66 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  67. 67. Utilisabilité des formulaires CAPTCHA accessible Critères Accessiweb 2.1 No 1.4 et 1.5 [Bronze] Bonnes pratiques Opquast V2 No 87 et 154 [Niveau 2 et 3] Source : http://www.centraleparis-2015.fr/fr-fr/votre-avis/donnez-votre- avis.html67 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  68. 68. Utilisabilité des formulaires Source : http://www.centraleparis-2015.fr/fr-fr/votre-avis/donnez-votre- avis.html68 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  69. 69. Utilisabilité des formulaires Les champs rouges sont obligatoires (2007) : http://www.blog- accessibilite.com/blog/2007/01/10/155-boursorama-les-champs-rouges- sont-obligatoires69 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  70. 70. Utilisabilité des formulaires Les champs rouges sont obligatoires (2007) : http://www.blog- accessibilite.com/blog/2007/01/10/155-boursorama-les-champs-rouges- sont-obligatoires70 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  71. 71. Utilisabilité des formulaires Signaler les champs obligatoires de manière pertinente Critère Accessiweb 2.1 No 11.10 [Bronze]71 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  72. 72. Utilisabilité des formulaires72 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  73. 73. Utilisabilité des formulaires ?73 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  74. 74. Utilisabilité des formulaires74 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  75. 75. Utilisabilité des formulaires Source : http://www.ratp.fr/itineraires/fr/ratp/recherche-avancee75 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  76. 76. Utilisabilité des formulaires Signaler les erreurs de manière pertinente Source : http://www.ratp.fr/itineraires/fr/ratp/recherche-avancee76 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  77. 77. Utilisabilité des formulaires Prévoir tous les cas77 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  78. 78. Merci ! Merci à Didier Lebouc, à Delphine Malassigne, et à Jonathan Pansiot, Hugues Moreno et Morgane Mounier d’Alter Way. Romy Duhem-Verdière http://romy.tetue.net @tetueVoir en ligne : http://romy.tetue.net/930Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012

×