Amis créas, à quelles guidelines vous fiez-vous ?

C’est une question qui me taquine depuis longtemps, puisque j’avais commencé à lister, dès 2007, quelques fondamentaux à garder en mémoire dans la conception d’une maquette de site dans cet article : Memo de la maquette web, qui traite des éléments de l’interface web (hyperliens, textes, formulaires, etc.) en s’appuyant sur quelques consignes de référence en la matière.

Cinq ans après, je vous invite à un atelier pratique sur le même sujet, samedi prochain à Paris Web : Petit florilège de bonnes pratiques graphiques. Pour le préparer, commençons par lister les ressources existantes et voyons celles que vous utilisez.

Quels référentiels pour la conception web ?

Il existe quantité de ressources graphiques sur le Web et je fais confiance à mes amis créas pour savoir où chercher l’inspiration. Rappelons seulement cet article incontournable du designer Douglas Bowman, qui nous partage le cheminement d’une création de design web : Les coulisses d’un design (2003).

Après quoi nous avons été plusieurs à rédiger des conseils à l’intention des graphistes web pour « éviter de se retrouver avec des charniers inexploitables en intégration, chose qui arrive encore un peu trop souvent » :

• Première maquette graphique web : comment faire ?, Romy Têtue, 2008
• Guidelines pour produire des PSD adaptés au web, par Christophe Andrieu, 2010
• Composantes d’un webdesign facile à intégrer, par Darklg, août 2012
• Et surtout : The Photoshop etiquette manifesto for web designers

Mais cela concerne surtout la constitution du livrable, essentiellement PSD, alors qu’il pourrait être HML/CSS/JS, et ne traite pas vraiment la phase de conception. Ce n’est pas suffisant.

Bref, quelles lignes directrices suivre pour pour préserver l’ergonomie et l’accessibilité de l’interface web ? Il existe des documents de référence, des listes de critères et bonnes pratiques, plus ou moins connus.

Commençons par les bonnes pratique qualité :

• Bonnes pratiques design d’Opquast : 34 bonnes pratiques de la qualité web répondant à la requête « design »

Pour l’ergonomie on utilisera :

• Les 12 règles de l’ergonomie web énoncées par Amélie Boucher, dans son livre Ergonomie web, pour des sites web efficaces
• Les principales lois de la Gestalt, avec les lois de proximité, de similitude, de continuité, de destin commun, etc.
• Voir aussi la Charte ergonomique des sites internet publics et son guide d’auto-évaluation.

Pour l’accessibilité, c’est assez simple puisque nous disposons des guidelines du W3C, utilisables sous la forme de plusieurs documents :

• La référence : Web Content Accessibility Guidelines (WCAG) 2.0, ici traduites en français par l’association BrailleNet : WCAG 2.0, qui regroupent des règles classées en 4 principes : perceptible, utilisable, compréhensible et robuste.
• Les 39 tests pour les graphistes et ergonomes du Référentiel Général d’Accessibilité pour les Administrations (RGAA), version 2.2, malheureusement pas maintenu à jour.
• On préférera le plus maniable Référentiel Accessiweb 2.1 mais il n’est pas orienté créa.
• Et depuis cet été, une très chouette notice d’accessibilité pour la conception graphique à l’intention des graphistes et ergonomes, réalisée par AcceDe Web.

Lequel de ces référentiels utilisez-vous ?

Mais tous ces documents, essentiellement textuels, sont peu maniables voire parfaitement assommants. Peu visuels, ils ne me semblent pas adaptés pour les profils créas. Lesquels utilisez-vous réellement ? Vous pouvez répondre en commentant ci-après et en participant au sondage (terminé) dont les résultats sont affichés ci-dessous :

1. Photoshop Etiquette, évidemment !
   42 % (8 votes)
2. Les principes ergo : loi de Fitts, Gestalt, etc.
   37 % (7 votes)
3. Les bonnes pratiques design d’Opquast
   37 % (7 votes)
4. Notice d’accessibilité pour la conception graphique
   21 % (4 votes)
5. Nul besoin de cela !
   16 % (3 votes)
6. Autres : « Emil Ruder », « Et les principes d’UX aussi ! »
   11 % (2 votes)