0
Petit florilège de             bonnes         pratiques    graphiques                 pour améliorerl’ergonomique et l’acc...
De quoidispose-t-on ?                 Amis créas, à quelles guidelines vous fiez-vous ?                 http://romy.tetue....
Ressources existantes                      Les 12 règles de                    lergonomie web    Le livre Ergonomie web : ...
Ressources existantes                    Bonnes pratiques    Voir en ligne : https://checklists.opquast.com/fr/opquastv2?q...
Ressources existantes                            Référentiel                         Accessiweb 2.1    Voir en ligne : htt...
Ressources existantes                                    Notice                              daccessibilité               ...
•   Couleurs et contrastes•   Lisibilité typographique•   Signalétique des hyperliens•   Utilisabilité des formulaires    ...
Contrasteset couleurs         8    Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Contrastes et couleurs    Source : http://awesome-fontstacks.com/4049   Bonnes pratiques graphiques — Romy Duhem-Verdière ...
Contrastes et couleurs                                          10 %                     de la population                 ...
Source : http://www.pomodorospizza.net
Source : http://www.pomodorospizza.netOutil : http://colororacle.cartography.ch
Source : http://www.pomodorospizza.netOutil : http://colororacle.cartography.ch
Source : http://www.pomodorospizza.netOutil : http://colororacle.cartography.ch
Contrastes et couleurs     Source : information routière Google Maps     http://humeursmondialisees.blogspot.fr/2012/11/le...
Contrastes et couleurs                                 L’information                                   ne doit pas        ...
Contrastes et couleurs     Test d’Ishihara : http://www.declic.ph/depistage.asp?iddepistage=2117   Bonnes pratiques graphi...
Contrastes et couleurs     Source : http://wiki.accede-web.com/notices/graphique-ergonomique/     assurer-la-comprehension...
Contrastes et couleurs                               L’information                                 ne doit pas            ...
Contrastes et couleurs     Source : http://www.artskills.net     Outil : Colour Contrast Check20   Bonnes pratiques graphi...
Contrastes et couleurs     Source : http://www.artskills.net     Outil : Colour Contrast Check21   Bonnes pratiques graphi...
Contrastes et couleurs     Source : http://www.artskills.net     Outil : Colour Contrast Check22   Bonnes pratiques graphi...
Contrastes et couleurs     Source : http://www.dondorganes.fr23   Bonnes pratiques graphiques — Romy Duhem-Verdière — Pari...
Contrastes et couleurs                                     Proposer une                                       alternative ...
Lisibilitétypographique               25   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Lisibilité typographiqueUN GENDARME TUE              26   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Lisibilité typographique                                                  Accentuer                                       ...
Lisibilité typographique                                      Caractères                                       spéciaux   ...
Lisibilité typographiqueLE BAOBAB AFRICAIN EST UN ARBRE À LALONGÉVITÉ EXCEPTIONNELLE, SURTOUTPRÉSENT AU SENEGAL. DUNE CROI...
Lisibilité typographiqueLe baobab africain est un arbre à lalongévité exceptionnelle, surtout présent                     ...
Lisibilité typographique                                          Préférer                                        une font...
Lisibilité typographique                                                                                          Prévoir ...
Lisibilité typographique                                                                            Prévoir une           ...
Lisibilité typographique                                                       Prévoir une1           2   3               ...
Lisibilité typographique                                                                Laisser                           ...
Lisibilité typographique16px/    16px/ 1.5      1.5                                                                      L...
Lisibilité typographique                                 Pouvoir                          zoomer le texte                 ...
Lisibilité typographique     Source : http://www.nota-bene.org/91638   Bonnes pratiques graphiques — Romy Duhem-Verdière —...
Lisibilité typographique                              Ne pas justifier                                           Critère A...
Lisibilité typographique                                                  Augmenter                                       ...
Lisibilité typographique                                                          60 à 80                                 ...
Lisibilité typographique                                                          Laisser                  25 % à         ...
Lisibilité typographique                                    Aérer                                facilite la              ...
Lisibilité typographique                                    Aérer                                facilite la              ...
Lisibilité typographique     Web Design is 95% Typography : http://informationarchitects.net/blog/the-     web-is-all-abou...
Signalétiquedes hyperliens            46   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Hyperliens                                        Le contraste                                            suffit-il ?     ...
Hyperliens       Combien identifiez-vous       de liens sur cette page ?     Source : http://www.bouygues.com/developpemen...
Hyperliens                                     Rendre                             évident ce qui                          ...
Hyperliens     Source : http://www.info-meningocoque.fr/mentions-legales.html50   Bonnes pratiques graphiques — Romy Duhem...
Hyperliens                             Avertir du                         comportement                                    ...
Hyperliens                             Avertir du                         comportement                               Bonne...
Hyperliens     Source : http://www.fr.capgemini.com53   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Hyperliens                      Intitulé explicite                     pour chaque lien                                   ...
Hyperliens                              Liens explicites                               hors contexte                      ...
Hyperliens                                        Prévoir                                 tous les états56   Bonnes pratiq...
Hyperliens                                        Prévoir                                 tous les états                  ...
Hyperliens                                  Signaler                        la prise de focus                             ...
Hyperliens                                            Prévoir                                     tous les états     Signa...
Utilisabilitédes formulaires                60   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Utilisabilité des formulairesComment utiliser ce… formulaire ?                                 Source : http://plumka.com/...
Utilisabilité des formulaires62   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Utilisabilité des formulaires63   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Utilisabilité des formulaires     Source : http://www.smashingmagazine.com64   Bonnes pratiques graphiques — Romy Duhem-Ve...
Utilisabilité des formulaires               ?     Source : http://www.centraleparis-2015.fr/fr-fr/votre-avis/donnez-votre-...
Utilisabilité des formulaires     Source : http://www.centraleparis-2015.fr/fr-fr/votre-avis/donnez-votre-     avis.html66...
Utilisabilité des formulaires                                             CAPTCHA                                         ...
Utilisabilité des formulaires     Source : http://www.centraleparis-2015.fr/fr-fr/votre-avis/donnez-votre-     avis.html68...
Utilisabilité des formulaires     Les champs rouges sont obligatoires (2007) : http://www.blog-     accessibilite.com/blog...
Utilisabilité des formulaires     Les champs rouges sont obligatoires (2007) : http://www.blog-     accessibilite.com/blog...
Utilisabilité des formulaires                                     Signaler les                                         cha...
Utilisabilité des formulaires72   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Utilisabilité des formulaires          ?73   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Utilisabilité des formulaires74   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Utilisabilité des formulaires     Source : http://www.ratp.fr/itineraires/fr/ratp/recherche-avancee75   Bonnes pratiques g...
Utilisabilité des formulaires                                           Signaler                                         l...
Utilisabilité des formulaires                                           Prévoir                                      tous ...
Merci !               Merci à Didier Lebouc, à Delphine Malassigne,               et à Jonathan Pansiot, Hugues Moreno    ...
Prochain SlideShare
Chargement dans... 5
×

Bonnes pratiques graphiques

6,750

Published on

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.

Published in: Technologies
2 commentaires
16 mentions J'aime
Statistiques
Remarques
Aucun téléchargement
Vues
Total des vues
6,750
Sur Slideshare
0
À partir des ajouts
0
Nombre d'ajouts
13
Actions
Partages
0
Téléchargements
230
Commentaires
2
J'aime
16
Ajouts 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×