Bonnes pratiques graphiques
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Bonnes pratiques graphiques

le

  • 6,083 vues

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 ...

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.

Statistiques

Vues

Total des vues
6,083
Vues sur SlideShare
3,693
Vues externes
2,390

Actions

J'aime
16
Téléchargements
210
Commentaires
2

19 Ajouts 2,390

http://romy.tetue.net 1016
http://www.paris-web.fr 684
http://www.inpixelitrust.fr 351
http://www.scoop.it 165
http://blog.flds.fr 52
http://www.blog.flds.fr 41
http://blog.odomia.com 27
https://mj89sp3sau2k7lj1eg3k40hkeppguj6j-a-sites-opensocial.googleusercontent.com 26
https://twitter.com 8
http://tyseo.blogspot.fr 4
http://tyseo.blogspot.de 4
http://feeds.feedburner.com 4
http://localhost 2
http://tyseo.blogspot.com 1
http://www.tyseo.blogspot.com 1
http://127.0.0.1 1
http://www.linkedin.com 1
https://www.linkedin.com 1
https://twimg0-a.akamaihd.net 1
Plus...

Accessibilité

Catégories

Détails de l'import

Uploaded via as Adobe PDF

Droits d'utilisation

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Signalé comme inapproprié Signaler comme inapproprié
Signaler comme inapproprié

Indiquez la raison pour laquelle vous avez signalé cette présentation comme n'étant pas appropriée.

Annuler
  • Full Name Full Name Comment goes here.
    Êtes-vous sûr de vouloir
    Votre message apparaîtra ici
    Processing...
Poster un commentaire
Modifier votre commentaire

Bonnes pratiques graphiques Presentation Transcript

  • 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. 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. 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. 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. 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. 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. • Couleurs et contrastes• Lisibilité typographique• Signalétique des hyperliens• Utilisabilité des formulaires 7 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 8. Contrasteset couleurs 8 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 9. Contrastes et couleurs Source : http://awesome-fontstacks.com/4049 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 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. Source : http://www.pomodorospizza.net
  • 12. Source : http://www.pomodorospizza.netOutil : http://colororacle.cartography.ch
  • 13. Source : http://www.pomodorospizza.netOutil : http://colororacle.cartography.ch
  • 14. Source : http://www.pomodorospizza.netOutil : http://colororacle.cartography.ch
  • 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. 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. 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. 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. 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. Contrastes et couleurs Source : http://www.artskills.net Outil : Colour Contrast Check20 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 21. Contrastes et couleurs Source : http://www.artskills.net Outil : Colour Contrast Check21 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 22. Contrastes et couleurs Source : http://www.artskills.net Outil : Colour Contrast Check22 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 23. Contrastes et couleurs Source : http://www.dondorganes.fr23 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 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. Lisibilitétypographique  25 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 26. Lisibilité typographiqueUN GENDARME TUE 26 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 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. Lisibilité typographique Caractères spéciaux Microsoft Windows Voir : alt-codes.net28 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Lisibilité typographique Source : http://www.nota-bene.org/91638 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 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. 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. 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. 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. 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. 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. 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. Signalétiquedes hyperliens 46 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 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. 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. 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. Hyperliens Source : http://www.info-meningocoque.fr/mentions-legales.html50 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 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. 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. Hyperliens Source : http://www.fr.capgemini.com53 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 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. 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. Hyperliens Prévoir tous les états56 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 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. 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. 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. Utilisabilitédes formulaires 60 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 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. Utilisabilité des formulaires62 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 63. Utilisabilité des formulaires63 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 64. Utilisabilité des formulaires Source : http://www.smashingmagazine.com64 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 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. 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. 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. 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. 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. 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. 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. Utilisabilité des formulaires72 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 73. Utilisabilité des formulaires ?73 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 74. Utilisabilité des formulaires74 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 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. 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. Utilisabilité des formulaires Prévoir tous les cas77 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 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