SlideShare une entreprise Scribd logo
Petit florilège de

             bonnes
         pratiques
    graphiques
                 pour améliorer
l’ergonomique et l’accessibilité
      de vos conceptions web




            par Romy Duhem-Verdière
                Atelier Paris Web 2012
De quoi
dispose-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
Ressources existantes




                      Les 12 règles de
                    l'ergonomie web




    Le livre Ergonomie web : http://ergonomie-sites-web.com
3   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Ressources existantes




                    Bonnes pratiques




    Voir en ligne : https://checklists.opquast.com/fr/opquastv2?q=design
4   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Ressources existantes




                            Référentiel
                         Accessiweb 2.1




    Voir en ligne : http://www.accessiweb.org/index.php/accessiweb_2.1_liste_generale
5   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Ressources existantes




                                    Notice
                              d'accessibilité
                                    pour la
                                conception
                                 graphique




    Voir en ligne : http://wiki.accede-web.com/notices/graphique-
    ergonomique

6   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
•   Couleurs et contrastes


•   Lisibilité typographique


•   Signalétique des hyperliens


•   Utilisabilité des formulaires




                                    7   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Contrastes
et couleurs




         8    Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Contrastes et couleurs




    Source : http://awesome-fontstacks.com/404
9   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Contrastes et couleurs




                                          10 %
                     de la population
                            masculine
                      est daltonienne




     Source : http://www.coloradd.net/why.asp
10   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Source : http://www.pomodorospizza.net
Source : http://www.pomodorospizza.net
Outil : http://colororacle.cartography.ch
Source : http://www.pomodorospizza.net
Outil : http://colororacle.cartography.ch
Source : http://www.pomodorospizza.net
Outil : http://colororacle.cartography.ch
Contrastes et couleurs




     Source : information routière Google Maps
     http://humeursmondialisees.blogspot.fr/2012/11/les-sites-dinformation-trafic-co.html

15   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
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.html

16   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Contrastes et couleurs




     Test d’Ishihara : http://www.declic.ph/depistage.asp?iddepistage=21

17   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Contrastes et couleurs




     Source : http://wiki.accede-web.com/notices/graphique-ergonomique/
     assurer-la-comprehension-de-l-information-meme-en-l-absence-de-couleurs

18   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
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-couleurs

19   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Contrastes et couleurs




     Source : http://www.artskills.net
     Outil : Colour Contrast Check
20   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Contrastes et couleurs




     Source : http://www.artskills.net
     Outil : Colour Contrast Check
21   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Contrastes et couleurs




     Source : http://www.artskills.net
     Outil : Colour Contrast Check
22   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Contrastes et couleurs




     Source : http://www.dondorganes.fr

23   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Contrastes et couleurs




                                     Proposer une
                                       alternative
                                       contrastée




     Source : http://www.dondorganes.fr/?rgaa=1

     Assurer un contraste suffisant entre les contenus et l'arrière-plan
     ou proposer une alternative contrastée

24   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Lisibilité
typographique 




              25   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Lisibilité typographique




UN GENDARME TUE




              26   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Lisibilité typographique




                                                  Accentuer
                                              les majuscules
UN 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
Lisibilité typographique




                                      Caractères
                                       spéciaux
                                        Microsoft Windows




     Voir : alt-codes.net

28   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Lisibilité typographique




LE BAOBAB AFRICAIN EST UN ARBRE À LA
LONGÉVITÉ EXCEPTIONNELLE, SURTOUT
PRÉSENT AU SENEGAL. D'UNE CROISSANCE
LENTE, ON TROUVE DES SPÉCIMENS QUI
SERAIENT ÂGÉS DE PRÈS DE 2000 ANS. EN
FAIT, CES ARBRES NE PRODUISENT PAS DE
CERNES TOUS LES ANS DU FAIT DES
SÉCHERESSES RÉCURRENTES QUI TOUCHENT
LA SAVANE AFRICAINE, IL EST DONC
DIFFICILE DE DÉTERMINER LEUR ÂGE PAR DES
MÉTHODES DE DENDROCHRONOLOGIE.




                                     29   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Lisibilité typographique




Le baobab africain est un arbre à la
longévité exceptionnelle, surtout présent                                          Éviter les
au Sénégal. D’une croissance lente, on                                            majuscules
trouve des spécimens qui seraient âgés de                                                  pas plus de
près de 2000 ans. En fait, ces arbres ne                                               5 mots successifs
produisent pas de cernes tous les dans du                                                en majuscules

fait des sécheresses récurrentes qui
touchent la savane africaine. Il est donc
difficile de déterminer leur âge par des
mé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
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-11px

31   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Lisibilité typographique




                                                                                          Prévoir
                                                                                      des polices
                                                                                   de substitution




font-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
Lisibilité typographique




                                                                            Prévoir une
                                                                         « Font Stack »
                                                                             complète

font-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
Lisibilité typographique




                                                       Prévoir une
1           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
Lisibilité typographique




                                                                Laisser
                                                               le texte

16px   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
Lisibilité typographique

16px/    16px/
 1.5      1.5




                                                                      Laisser
                                                                     le texte
                                                             100 %
16px/    16px/

                                                     à
20px      1.5




1.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
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-typographie
37   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Lisibilité typographique




     Source : http://www.nota-bene.org/916
38   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
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=818

39   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
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
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
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
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
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
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
Signalétique
des hyperliens




            46   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
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.html

47   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
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
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/913
49   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Hyperliens




     Source : http://www.info-meningocoque.fr/mentions-legales.html
50   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Hyperliens




                             Avertir du
                         comportement
                                        + Critère Accessiweb 2.1 No 6.3 [Or]




51   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
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
Hyperliens




     Source : http://www.fr.capgemini.com
53   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
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-
     lien

54   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
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
Hyperliens




                                        Prévoir
                                 tous les états




56   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
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
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
Hyperliens




                                            Prévoir
                                     tous les états




     Signaler le focus améliore la navigation : http://romy.tetue.net/678

59   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Utilisabilité
des formulaires




                60   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Utilisabilité des formulaires




Comment utiliser ce… formulaire ?

                                 Source : http://plumka.com/html/fr/index.asp

                            61   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Utilisabilité des formulaires




62   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Utilisabilité des formulaires




63   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Utilisabilité des formulaires




     Source : http://www.smashingmagazine.com

64   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Utilisabilité des formulaires




               ?




     Source : http://www.centraleparis-2015.fr/fr-fr/votre-avis/donnez-votre-
     avis.html

65   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Utilisabilité des formulaires




     Source : http://www.centraleparis-2015.fr/fr-fr/votre-avis/donnez-votre-
     avis.html

66   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
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.html

67   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Utilisabilité des formulaires




     Source : http://www.centraleparis-2015.fr/fr-fr/votre-avis/donnez-votre-
     avis.html

68   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Utilisabilité des formulaires




     Les champs rouges sont obligatoires (2007) : http://www.blog-
     accessibilite.com/blog/2007/01/10/155-boursorama-les-champs-rouges-
     sont-obligatoires
69   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Utilisabilité des formulaires




     Les champs rouges sont obligatoires (2007) : http://www.blog-
     accessibilite.com/blog/2007/01/10/155-boursorama-les-champs-rouges-
     sont-obligatoires
70   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
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
Utilisabilité des formulaires




72   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 formulaires




74   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Utilisabilité des formulaires




     Source : http://www.ratp.fr/itineraires/fr/ratp/recherche-avancee


75   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Utilisabilité des formulaires




                                           Signaler
                                         les erreurs
                                        de manière
                                         pertinente




     Source : http://www.ratp.fr/itineraires/fr/ratp/recherche-avancee


76   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
Utilisabilité des formulaires




                                           Prévoir
                                      tous les cas




77   Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
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
                 @tetue




Voir en ligne : http://romy.tetue.net/930
Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012

Contenu connexe

En vedette

7 regles pour dessiner un logo parfait - Design de logo (partie 1)
7 regles pour dessiner un logo parfait - Design de logo (partie 1)7 regles pour dessiner un logo parfait - Design de logo (partie 1)
7 regles pour dessiner un logo parfait - Design de logo (partie 1)
Oolong Media
 
La mécanique de l'idée / concept créatif / ian gilbert
La mécanique de l'idée / concept créatif / ian gilbertLa mécanique de l'idée / concept créatif / ian gilbert
La mécanique de l'idée / concept créatif / ian gilbert
IANTERNAUTE
 
Les 10 tendances du digital en santé
Les 10 tendances du digital en santéLes 10 tendances du digital en santé
Les 10 tendances du digital en santé
Interaction Healthcare
 
Travail collaboratif à distance
Travail collaboratif à distanceTravail collaboratif à distance
Travail collaboratif à distance
Isabelle Gonon
 
Le guide pratique de la creation de logo
Le guide pratique de la creation de logoLe guide pratique de la creation de logo
Le guide pratique de la creation de logo
Vincent Pereira
 
Tailles de texte
Tailles de texteTailles de texte
Tailles de texte
Benjamin Belle
 
La chaîne graphique illustrée
La chaîne graphique illustréeLa chaîne graphique illustrée
La chaîne graphique illustréePierre Chassany
 
Pierre Bacot Consulting General Capabilities 2016
Pierre Bacot Consulting General Capabilities 2016Pierre Bacot Consulting General Capabilities 2016
Pierre Bacot Consulting General Capabilities 2016
Pierre Bacot
 
Aspectos generales al escribir un ensayo
Aspectos generales al escribir un ensayoAspectos generales al escribir un ensayo
Aspectos generales al escribir un ensayo
Sandy Morales Alarcón
 
Initiation à la pao
Initiation à la paoInitiation à la pao
Initiation à la pao
Noémie Toledano
 
Typographie pour le Web
Typographie pour le WebTypographie pour le Web
Typographie pour le Web
StrasWeb
 
Guide de bonne pratique PAO
Guide de bonne pratique PAOGuide de bonne pratique PAO
Guide de bonne pratique PAO
IPEDIS - Accessibilité numérique
 
Logos quiz- marketing logos
Logos quiz- marketing logosLogos quiz- marketing logos
Logos quiz- marketing logos
Kiran Shetty
 
10 commandements pour mener un projet digital dans la pharma
10 commandements pour mener un projet digital dans la pharma10 commandements pour mener un projet digital dans la pharma
10 commandements pour mener un projet digital dans la pharma
hcsmeufr
 
Quiz 2 - Communication Skills & Conflict Management
Quiz 2 - Communication Skills & Conflict ManagementQuiz 2 - Communication Skills & Conflict Management
Quiz 2 - Communication Skills & Conflict Management
worksteadc
 
4 stratégies pour réinventer la pharmacie
4 stratégies pour réinventer la pharmacie4 stratégies pour réinventer la pharmacie
4 stratégies pour réinventer la pharmacie
Sophie Gillardeau
 
[FW Invest Janvier 2017] Près de 200 millions d’euros levés par des entrepris...
[FW Invest Janvier 2017] Près de 200 millions d’euros levés par des entrepris...[FW Invest Janvier 2017] Près de 200 millions d’euros levés par des entrepris...
[FW Invest Janvier 2017] Près de 200 millions d’euros levés par des entrepris...
FrenchWeb.fr
 

En vedette (20)

7 regles pour dessiner un logo parfait - Design de logo (partie 1)
7 regles pour dessiner un logo parfait - Design de logo (partie 1)7 regles pour dessiner un logo parfait - Design de logo (partie 1)
7 regles pour dessiner un logo parfait - Design de logo (partie 1)
 
La mécanique de l'idée / concept créatif / ian gilbert
La mécanique de l'idée / concept créatif / ian gilbertLa mécanique de l'idée / concept créatif / ian gilbert
La mécanique de l'idée / concept créatif / ian gilbert
 
Les 10 tendances du digital en santé
Les 10 tendances du digital en santéLes 10 tendances du digital en santé
Les 10 tendances du digital en santé
 
Travail collaboratif à distance
Travail collaboratif à distanceTravail collaboratif à distance
Travail collaboratif à distance
 
Le guide pratique de la creation de logo
Le guide pratique de la creation de logoLe guide pratique de la creation de logo
Le guide pratique de la creation de logo
 
Tailles de texte
Tailles de texteTailles de texte
Tailles de texte
 
1 slide profile
1 slide profile1 slide profile
1 slide profile
 
Badinter3
Badinter3Badinter3
Badinter3
 
La chaîne graphique illustrée
La chaîne graphique illustréeLa chaîne graphique illustrée
La chaîne graphique illustrée
 
Pierre Bacot Consulting General Capabilities 2016
Pierre Bacot Consulting General Capabilities 2016Pierre Bacot Consulting General Capabilities 2016
Pierre Bacot Consulting General Capabilities 2016
 
Aspectos generales al escribir un ensayo
Aspectos generales al escribir un ensayoAspectos generales al escribir un ensayo
Aspectos generales al escribir un ensayo
 
Initiation à la pao
Initiation à la paoInitiation à la pao
Initiation à la pao
 
Typographie pour le Web
Typographie pour le WebTypographie pour le Web
Typographie pour le Web
 
Guide de bonne pratique PAO
Guide de bonne pratique PAOGuide de bonne pratique PAO
Guide de bonne pratique PAO
 
Logos quiz- marketing logos
Logos quiz- marketing logosLogos quiz- marketing logos
Logos quiz- marketing logos
 
10 commandements pour mener un projet digital dans la pharma
10 commandements pour mener un projet digital dans la pharma10 commandements pour mener un projet digital dans la pharma
10 commandements pour mener un projet digital dans la pharma
 
U7 la couleur
U7   la couleurU7   la couleur
U7 la couleur
 
Quiz 2 - Communication Skills & Conflict Management
Quiz 2 - Communication Skills & Conflict ManagementQuiz 2 - Communication Skills & Conflict Management
Quiz 2 - Communication Skills & Conflict Management
 
4 stratégies pour réinventer la pharmacie
4 stratégies pour réinventer la pharmacie4 stratégies pour réinventer la pharmacie
4 stratégies pour réinventer la pharmacie
 
[FW Invest Janvier 2017] Près de 200 millions d’euros levés par des entrepris...
[FW Invest Janvier 2017] Près de 200 millions d’euros levés par des entrepris...[FW Invest Janvier 2017] Près de 200 millions d’euros levés par des entrepris...
[FW Invest Janvier 2017] Près de 200 millions d’euros levés par des entrepris...
 

Similaire à Bonnes pratiques graphiques

Bonnes pratiques intégration robuste
Bonnes pratiques intégration robusteBonnes pratiques intégration robuste
Bonnes pratiques intégration robuste
Romy Duhem-Verdière
 
Conduite de projet web elie sloim temesis mopa 20141113
Conduite de projet web elie sloim temesis mopa 20141113Conduite de projet web elie sloim temesis mopa 20141113
Conduite de projet web elie sloim temesis mopa 20141113
MONA
 
Méthode CSS modulaire Daisy
Méthode CSS modulaire DaisyMéthode CSS modulaire Daisy
Méthode CSS modulaire Daisy
Romy Duhem-Verdière
 
Atelier Qualité web / OPQUAST - Cession entreprises - CCI Bordeaux 26 novembr...
Atelier Qualité web / OPQUAST - Cession entreprises - CCI Bordeaux 26 novembr...Atelier Qualité web / OPQUAST - Cession entreprises - CCI Bordeaux 26 novembr...
Atelier Qualité web / OPQUAST - Cession entreprises - CCI Bordeaux 26 novembr...
echangeurba
 
Atelier Qualité web / OPQUAST - Cession entreprises - CCI Bordeaux 26 novembr...
Atelier Qualité web / OPQUAST - Cession entreprises - CCI Bordeaux 26 novembr...Atelier Qualité web / OPQUAST - Cession entreprises - CCI Bordeaux 26 novembr...
Atelier Qualité web / OPQUAST - Cession entreprises - CCI Bordeaux 26 novembr...
polenumerique33
 
Atelier Qualité web / OPQUAST - Cession agences - CCI Bordeaux 26 novembre 2013
Atelier Qualité web / OPQUAST - Cession agences - CCI Bordeaux 26 novembre 2013Atelier Qualité web / OPQUAST - Cession agences - CCI Bordeaux 26 novembre 2013
Atelier Qualité web / OPQUAST - Cession agences - CCI Bordeaux 26 novembre 2013
echangeurba
 
Atelier Qualité web / OPQUAST - Cession agences - CCI Bordeaux 26 novembre 2013
Atelier Qualité web / OPQUAST - Cession agences - CCI Bordeaux 26 novembre 2013Atelier Qualité web / OPQUAST - Cession agences - CCI Bordeaux 26 novembre 2013
Atelier Qualité web / OPQUAST - Cession agences - CCI Bordeaux 26 novembre 2013
polenumerique33
 

Similaire à Bonnes pratiques graphiques (7)

Bonnes pratiques intégration robuste
Bonnes pratiques intégration robusteBonnes pratiques intégration robuste
Bonnes pratiques intégration robuste
 
Conduite de projet web elie sloim temesis mopa 20141113
Conduite de projet web elie sloim temesis mopa 20141113Conduite de projet web elie sloim temesis mopa 20141113
Conduite de projet web elie sloim temesis mopa 20141113
 
Méthode CSS modulaire Daisy
Méthode CSS modulaire DaisyMéthode CSS modulaire Daisy
Méthode CSS modulaire Daisy
 
Atelier Qualité web / OPQUAST - Cession entreprises - CCI Bordeaux 26 novembr...
Atelier Qualité web / OPQUAST - Cession entreprises - CCI Bordeaux 26 novembr...Atelier Qualité web / OPQUAST - Cession entreprises - CCI Bordeaux 26 novembr...
Atelier Qualité web / OPQUAST - Cession entreprises - CCI Bordeaux 26 novembr...
 
Atelier Qualité web / OPQUAST - Cession entreprises - CCI Bordeaux 26 novembr...
Atelier Qualité web / OPQUAST - Cession entreprises - CCI Bordeaux 26 novembr...Atelier Qualité web / OPQUAST - Cession entreprises - CCI Bordeaux 26 novembr...
Atelier Qualité web / OPQUAST - Cession entreprises - CCI Bordeaux 26 novembr...
 
Atelier Qualité web / OPQUAST - Cession agences - CCI Bordeaux 26 novembre 2013
Atelier Qualité web / OPQUAST - Cession agences - CCI Bordeaux 26 novembre 2013Atelier Qualité web / OPQUAST - Cession agences - CCI Bordeaux 26 novembre 2013
Atelier Qualité web / OPQUAST - Cession agences - CCI Bordeaux 26 novembre 2013
 
Atelier Qualité web / OPQUAST - Cession agences - CCI Bordeaux 26 novembre 2013
Atelier Qualité web / OPQUAST - Cession agences - CCI Bordeaux 26 novembre 2013Atelier Qualité web / OPQUAST - Cession agences - CCI Bordeaux 26 novembre 2013
Atelier Qualité web / OPQUAST - Cession agences - CCI Bordeaux 26 novembre 2013
 

Bonnes pratiques graphiques

  • 1. Petit florilège de bonnes pratiques graphiques pour améliorer l’ergonomique et l’accessibilité de vos conceptions web par Romy Duhem-Verdière Atelier Paris Web 2012
  • 2. De quoi dispose-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 l'ergonomie web Le livre Ergonomie web : http://ergonomie-sites-web.com 3 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=design 4 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_generale 5 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 6. Ressources existantes Notice d'accessibilité pour la conception graphique Voir en ligne : http://wiki.accede-web.com/notices/graphique- ergonomique 6 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. Contrastes et couleurs 8 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 9. Contrastes et couleurs Source : http://awesome-fontstacks.com/404 9 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.asp 10 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 12. Source : http://www.pomodorospizza.net Outil : http://colororacle.cartography.ch
  • 13. Source : http://www.pomodorospizza.net Outil : http://colororacle.cartography.ch
  • 14. Source : http://www.pomodorospizza.net Outil : 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.html 15 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.html 16 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 17. Contrastes et couleurs Test d’Ishihara : http://www.declic.ph/depistage.asp?iddepistage=21 17 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-couleurs 18 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-couleurs 19 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 20. Contrastes et couleurs Source : http://www.artskills.net Outil : Colour Contrast Check 20 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 21. Contrastes et couleurs Source : http://www.artskills.net Outil : Colour Contrast Check 21 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 22. Contrastes et couleurs Source : http://www.artskills.net Outil : Colour Contrast Check 22 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 23. Contrastes et couleurs Source : http://www.dondorganes.fr 23 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 l'arrière-plan ou proposer une alternative contrastée 24 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é typographique UN GENDARME TUE 26 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 27. Lisibilité typographique Accentuer les majuscules UN 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.net 28 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 29. Lisibilité typographique LE BAOBAB AFRICAIN EST UN ARBRE À LA LONGÉVITÉ EXCEPTIONNELLE, SURTOUT PRÉSENT AU SENEGAL. D'UNE CROISSANCE LENTE, ON TROUVE DES SPÉCIMENS QUI SERAIENT ÂGÉS DE PRÈS DE 2000 ANS. EN FAIT, CES ARBRES NE PRODUISENT PAS DE CERNES TOUS LES ANS DU FAIT DES SÉCHERESSES RÉCURRENTES QUI TOUCHENT LA SAVANE AFRICAINE, IL EST DONC DIFFICILE DE DÉTERMINER LEUR ÂGE PAR DES MÉTHODES DE DENDROCHRONOLOGIE. 29 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 30. Lisibilité typographique Le baobab africain est un arbre à la longévité exceptionnelle, surtout présent Éviter les au Sénégal. D’une croissance lente, on majuscules trouve des spécimens qui seraient âgés de pas plus de près de 2000 ans. En fait, ces arbres ne 5 mots successifs produisent pas de cernes tous les dans du en majuscules fait des sécheresses récurrentes qui touchent la savane africaine. Il est donc difficile de déterminer leur âge par des mé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-11px 31 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 32. Lisibilité typographique Prévoir des polices de substitution font-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ète font-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 une 1 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 texte 16px 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é typographique 16px/ 16px/ 1.5 1.5 Laisser le texte 100 % 16px/ 16px/ à 20px 1.5 1.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-typographie 37 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 38. Lisibilité typographique Source : http://www.nota-bene.org/916 38 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=818 39 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étique des 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.html 47 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/913 49 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 50. Hyperliens Source : http://www.info-meningocoque.fr/mentions-legales.html 50 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.com 53 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- lien 54 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 états 56 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/678 59 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 formulaires Comment 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 formulaires 62 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 63. Utilisabilité des formulaires 63 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 64. Utilisabilité des formulaires Source : http://www.smashingmagazine.com 64 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.html 65 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.html 66 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.html 67 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.html 68 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-obligatoires 69 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-obligatoires 70 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 formulaires 72 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 formulaires 74 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 75. Utilisabilité des formulaires Source : http://www.ratp.fr/itineraires/fr/ratp/recherche-avancee 75 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-avancee 76 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012
  • 77. Utilisabilité des formulaires Prévoir tous les cas 77 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 @tetue Voir en ligne : http://romy.tetue.net/930 Bonnes pratiques graphiques — Romy Duhem-Verdière — Paris Web 2012