5 raisons de créer un guide de style au lieu des traditionnelles maquettes graphiques

par
   

La création d'un guide de style Web est une approche émergente qui pourrait permettre de maximiser le temps des ergonomes et des designers graphiques Web. Par conséquent, cette approche a le potentiel d'améliorer la qualité des réalisations et de réduire leur coût.

Qu'est-ce qu'un guide de style Web?

Un guide de style est un document qui montre tous les éléments d'interface composant un site ou une application Web. Un guide de style Web devrait informer sur :

1. La typographie
C'est-à-dire tout ce qui concerne :

  • les polices;
  • la taille des caractères;
  • l'interlignage;
  • les polices alternatives pour les navigateurs plus anciens.
2. Les couleurs
Ou plus précisément la palette de couleurs à utiliser pour le corps du texte, les liens, les titres, les boutons, les boîtes et le fond d'écran.
3. La grille
L'esthétisme de la grille dans laquelle sont positionnés les contenus provient entre autres de l'espacement vertical et horizontal entre les blocs et des artéfacts utilisés comme séparateur.
4. Iconographie
Les icônes (ou leur absence) constituent un élément très important du langage visuel d'un site et en particulier celui d'une application. C'est pourquoi toutes les icônes devraient être choisies ou créées d'avance.
5. Interactions
C'est-à-dire toutes les variations graphiques qui se manifestent lors de l'interaction, comme l'apparence des boutons en fonction de leurs états ou les animations, par exemple lors de l'ajout à un panier d'achat.
6. Photos, illustrations et logo
En d'autres mots, le style du traitement photo, les marges autour des images, et les règles de rognage.

Partant des besoins du site déterminés par l'ergonome, un tel guide de style devient la référence pour construire toutes les pages du site.

Le passage du flambeau entre l'ergonomie et le design graphique

L'approche courante

Traditionnellement, l'ergonome web produit des maquettes en fil de fer (wireframes) qui sont ensuite réinterprétées par un designer graphique Web. Souvent, le designer va jusqu'à produire sa propre version de chacune des maquettes ergonomiques.

Je ne pense pas que cette approche soit une bonne utilisation du talent des designers, car il s'agit d'un surplus de travail qui n'a pas nécessairement raison d'être.

L'approche alternative : créer un guide de style Web en une seule page

Extrait d'un guide de style

Puisant l'inspiration dans son moodboard, et en fonction des besoins visibles dans les maquettes ergonomiques, le designer crée le langage visuel du site.

Ce guide de style peut prendre la forme d'une maquette qui montre tous les éléments disposés sur une seul page. Cette approche a été décrite il y a quelques mois par Paul Robert Lloyd.

Avantages de la création d'un guide de style au lieu des maquettes graphiques

L'adoption de cette approche pourrait amener les avantages suivants :

1. Moins de maquettes = plus de création

En évitant au designer du travail répétitif, celui-ci aurait plus de temps pour effectuer un travail de création plus poussé.

2. Plus complet

Un guide de style devrait être complet, c'est-à-dire, couvrir toutes les possibilités de façon exhaustive, ce qui n'est pas généralement pas le cas des maquettes graphiques. Lors de l'intégration, tout imprévu sera souvent improvisé ce qui, au bout du compte, affecte négativement la qualité de la réalisation.

3. Réduire la résistance aux changements en cours de projet

Lorsqu'un élément est répété plusieurs fois dans un document, on a moins tendance à vouloir changer son apparence. Or, contrairement aux maquettes graphiques, le guide de style ne se répète pas. Il est donc vraisemblable que l'utilisation d'un guide de style pourrait réduire la résistance aux changements, qui peut être l'un des pires ennemis à la réussite d'un projet.

4. S'assurer que les informations présentes sur les maquettes ergonomiques sont utilisées par les intégrateurs

Les maquettes ergonomiques contiennent de nombreuses informations cruciales, par exemple les éléments cliquables. Par expérience, je constate que ces informations ne se rendent pas toujours jusqu'aux intégrateurs.

Dans l'approche proposée, l'absence de maquettes graphiques pourrait faire en sorte que les maquettes ergonomiques restent la référence technique pour les intégrateurs, qui n'auraient dans ce cas pas le choix de s'y référer. Le travail de l'ergonome peut alors rester la référence tout au long de la production du site.

5. Faciliter le travail des intégrateurs

Un guide de style rassemble tous les éléments d'interface du site, incluant les spécifications techniques, ce qui facilite la vie aux intégrateurs. Un intégrateur peut alors créer une page HTML/CSS avec tous les éléments directement et ensuite comparer cette page à l'originale.

En résumé

La production d'un guide de style permettrait d'éviter le chevauchement entre le travail de l'ergonome et celui du designer graphique. En augmentant la productivité de ces deux ressources clés, il est vraisemblable qu'on puisse produire de meilleurs sites et applications, à moindre coût.

Qu'en pensez-vous?

Designers, ergonomes, intégrateurs, artisans du Web, qu'en pensez-vous? Avez-vous déjà réalisé un projet avec cette approche? Si oui, est-ce que l'expérience a été un succès?

Références

La BBC a également développé un guide de style, qui prend la forme d'un site.

De plus, il existe un site qui répertorie les sites de la BBC qui ont adopté ce langage ergonomique et visuel.

COMMENTAIRES

  1. Alexandre Gosselin

    Très intéressant Étienne ce billet. En effet, je crois qu’on doit tout de même associer 1 ou 2 maquettes de base pour faciliter la compréhension et surtout le validation du client.
    Tout de même, un guide comme celui-ci, bien construit, permettra de bien préparer le projet en amont adéquate et optimisé pour l’étape de production. Très efficace pour tout le monde.

    J’ai hâte de l’appliquer ! Merci beaucoup.

    Répondre
  2. Etienne

    @Jean : D’abord, merci!

    Je suis tout à faire d’accord avec vous sur la nécessité d’une collaboration étroite entre ergonome et designer. C’est d’ailleurs dans cet esprit qu’on fait la plupart du temps des maquettes en basse résolution, pour laisser plus de latitude au designer.

    Par ailleurs la première phase de maquettage sert à illustrer la stratégie et à permettre aux fournisseurs potentiels de faire une évaluation réaliste du projet pour un appel d’offres.
    Mais d’autres itérations sont ensuite nécessaire c’est certain, celles-là en collaboration avec le designer et les intégrateurs.

    Répondre
  3. Jean

    « Traditionnellement, l’ergonome web produit des maquettes en fil de fer (wireframes) qui sont ensuite réinterprétées par un designer graphique Web. »

    Je n’aime pas cette méthode qui met mal à l’aise à la fois le designer (souvent réduit à « colorier » les wireframes) et l’ergonome (qui voit une grosse partie de sa réflexion balayée par l’interprétation de ses wireframes par le designer).

    Je préfère que l’ergonome commence avec des esquisses à la main créées de pair avec le designer, qu’ensuite le DA/designer ébauche une direction artistique, puis que l’ergonome crée ses wireframes à partir de ces designs préliminaires : ainsi tous les éléments sont présents et à la bonne place.

    Résultat : les intégrateurs ne sont pas confrontés à un énorme fossé entre wireframes et maquettes graphiques, et c’est là justement que le guide de style devient un outil puissant et efficace.

    À noter qu’il est alors nécessaire que l’ergonome et le DA/designer s’impliquent pendant la phase d’intégration pour s’assurer que les pages intégrées respectent bien leur vision.

    En tout cas : excellent article que je vais recommander autour de moi! Merci Étienne!

    Répondre
  4. Etienne

    Merci beaucoup pour vos commentaires.

    @Audrey
    J’imagine que tu fais référence au fait que le client pourrait avoir plus de difficulté à imaginer des pages qui n’ont pas de version graphique?

    Peut-être, mais je crois que le client y gagne globalement car le designer aura plus de temps pour se consacrer aux détails. Et comme il s’agit de vases communicants, l’ergonome devrait avoir plus de temps pour maquetter toutes les pages d’un site, ce qui n’est souvent pas le cas. Autrement dit, le résultat final sera meilleur.

    Par ailleurs, il ne faut pas oublier qu’une maquette graphique réalisée dans Photoshop n’est pas nécessairement représentative de ce qu’on va obtenir en HTML. Avec des sites adaptatifs (responsive), il y a de nombreuses mises en page possibles, donc une version graphique d’une page n’est qu’une possibilité parmi tant d’autres.

    En résumé, l’idée est d’optimiser le temps de tout le monde et d’avoir le plus tôt possible une version HTML des pages, qu’on pourra améliorer en mode itératif en impliquant le client le plus possible.

    Répondre
  5. Rosta

    En effet, billet très intéressant! Je mettrai en place cet outil à l’occasion de mon prochain projet.
    C’est un gain de temps pour toutes les parties prenantes (designer, intégrateur etc.). Merci!

    Répondre
  6. Audrey Marcotte

    Superbe billet, concis et efficace ! Une approche pertinente pour toute entreprise qui cherche à sauver du temps.
    La question demeure : où situer le client dans tout ça ?
    Certaines pistes ont été lancées, mais est-ce que quelqu’un a réellement tenté l’expérience et aurait l’amabilité de nous en faire part ?

    Répondre
  7. Josée

    Je suis d’accord avec Karine. Une maquette graphique reste nécessaire pour établir, ressentir, globaliser le look du site ou de la page. De plus le cilent voudra voir le résultat avant de payer ses employés des heures à implémenter des éléments sans savoir ce que sera l’image finale! C’est comme un casse-tête… auriez-vous le goût de vous embarquer dans un 1000 morceaux sans avoir vu l’image sur la boîte?

    :)

    Répondre
  8. Etienne

    Merci pour les commentaires!

    J’aimerais ajouter que rien n’interdit de réaliser tout de même une ou deux maquettes graphiques. L’idée est surtout d’éviter de faire une version graphique de chacune des maquettes ergonomiques.

    Pour ce qui est du contenu, je pense que l’idéal est de l’avoir en main à l’étape des maquettes ergonomiques. Ce n’est pas beaucoup plus long de l’intégrer et cela permet de réaliser des mises en page plus réalistes, en plus d’alimenter la réflexion davantage.

    Répondre
  9. Karine Samson

    C’est vraiment une approche qui gagne à être mise en place! Cependant comme Sébastien MEDARD l’indique il faut considérer que « les concepteurs [sont] les utilisateurs finaux. »
    Certains clients qui n’ont pas l’habitude du Web seront tout de même rassurés de voir une maquette graphique représentant spécifiquement leurs besoins et intégrant leur contenu.

    Répondre
  10. Sébastien MEDARD

    Bonjour, par expérience, si on souhaite que le guide de style soit respecté par les concepteurs, il est important de considérer ce document comme un outil à part entière, c’est à dire en considérant les concepteurs comme les utilisateurs finaux. De ce fait, il me parait important de les intégrér au plus tôt dans la démarche de conception de ces guidelines. Une étude de leurs besoins spécifiques me parait être la première des étapes à réaliser. Cela peut se traduire notamment en rassemblant les bonnes pratiques en matière de codage, en identifiant les gaps entre le code réalisé et ce que l’on attend en termes de design, et faire bosser les concepteurs spécifiquement sur ces problèmes, pour aboutir à des guidelines qui ne soient pas seulement visuelles mais permettent aux concepteurs, même stagiaires……. de pouvoir appliquer les guidelines avec le code nécessaire. On peut même imaginer, grâce à cette démarche que j’ai mise en oeuvre dans le domaine de l’édition de logiciels, que les développeurs créent des classes d’objets qui intègrent déjà ces contraintes. Cette démarche (initiée au départ par la constatation de la non conformité au guidelines) a permis au final une meilleure adéquation du résultat avec les contraintes, et de diminuer réellement, de façon mesurable, les temps de développement des IHMs.

    Répondre

Laisser un commentaire

XHTML: Balises autorisées <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>