LE DESIGN SYSTEM, PLUS QU’UNE LIBRAIRIE DE COMPOSANTS

Ils s’appellent Vitamin, Saphir, Cobalt, Classify ou encore Oxygen… Ce sont tous des noms de Design System, chacun appartenant à une entreprise. Et ils permettent aux équipes d’UX design de créer des expériences utilisateurs cohérentes. 

 

Mais c’est quoi au juste un design system ?

Un ensemble de ressources servant à concevoir tous produits ou services digitaux d’une entreprise de manière homogène, accessible par tous, sur une plateforme unique.

Pour faire simple, un design system c’est une sorte de bibliothèque en ligne, qui consigne toutes les règles design mises en place en interne (ensemble de guidelines et de ressources utilisées par les product designers, les UX writers et les brand & visual designers), pour garantir l’homogénéité des parcours et des interfaces.

Le Design system comprend généralement des éléments relatifs :

  • à la marque (ex : charte graphique, logo, icônes, illustrations…) 
  • au produit (ex : les règles concernant tous les composants
Organisation du contenu d’un design system – Audrey HACQ

Le successeur de la charte graphique ?

Le Design System remplace en un sens la fameuse « la charte graphique », qui avait pour défaut d’être figée dans le temps, difficilement mise à jour, parfois adaptée à seulement quelques supports spécifiques et souvent rédigée « par » et « pour » des designers/graphistes.

« Pour moi, le Design System est le descendant direct de la charte graphique, mais il a gagné en maturité et tend de plus en plus à s’intégrer dans le workflow des équipes. Les outils sont également de plus en plus adaptés et nous permettent maintenant de concevoir des systèmes de composants et de les partager au plus grand nombre. » (Audrey Hacq, Product Deisgn Director).

 

Factoriser grâce au design system

Généralement le Design System prend la forme d’un site web à partir duquel on va pouvoir accéder aux différentes ressources. Plus qu’une librairie de composants, c’est « un point de contact unique qui regroupe tous les éléments qui vont permettre aux différents acteurs d’un projet de le concevoir, de et le faire évoluer » (Audrey Hacq).

Les objectifs de ces Design System sont :

  • Concevoir plus rapidement grâce à des directives standard et des composants d’interface utilisateur prêts à l’emploi.
  • Développer plus rapidement grâce à des styles et des composants de code bien définis.
  • Livrer un meilleur produit avec une expérience utilisateur belle et cohérente.
  • Améliorer la collaboration entre les concepteurs, les développeurs et les chefs de produit.

verbatim 2 AL

Une interface dédiée au contenu

De plus en plus, les designers commencent à intégrer dans cette bibliothèque toutes les directives qui ont trait au contenu (pas que la microcopie donc) : les guidelines de la marque, le tone of voice, les règles grammaticales, les do et don’t… Une interface dont les contributeurs sont en grande majorité les équipes de rédaction UX.
Il est important que l’UX writer documente sa stratégie de contenus pour participer à une démarche de co-conception et montrer l’impact du writing.

do dont 1

Pour être efficace et adopté par tous, le Design System doit être :

  • Évolutif : il est constamment alimenté par de nouvelles ressources
  • Mis à jour : les éléments réutilisables sont mis à jour automatiquement à travers les différentes plateformes
  • Réutilisable : c’est le principe même du Design System, il s’appuie dans sa création aux règles générales de l’UX et de l’ergonomie IHM pour qu’il soit réutilisable et adaptable
  • Adaptable : les éléments présents dans un Design System doivent être adaptables pour une utilisation sur les différents supports et interfaces (objets connectés, PC, Smartphone, web, etc.). 

Ce « content system », une mine d’informations (si tant est qu’on la consulte) pour toutes les personnes qui travaillent sur le contenu, qu’elles soient UX ou pas.

Chez Doctolib, le Design system / Content System s’appelle Oxygen et est open-source ! Autrement dit tout le monde peut le consulter, sans même faire partie de l’entreprise. Et il est très bien documenté.

Ces directives ne sont pas seulement un ensemble de règles. Elles sont faites pour aider les équipes à simplifier (par le biais de l’écriture) des problèmes complexes en éléments faciles à comprendre.
On y retrouve les caractéristiques du ton et de la voix, des informations sur les différentes audiences de Doctolib, on y apprend comment construire un produit accessible…
On retrouve aussi et surtout une somme d’indications grammaticales et des mécanismes d’écriture (ex : sous quel format écrire la date…), le tout dans différentes langues.

verbatim 8 SI

Plus généralement, le Content System aide les rédacteurs de contenus à comprendre comment penser stratégiquement au langage des produits et leur rappelle de donner la priorité aux besoins de l’utilisateur.

Ces directives sont un outil important car elles sont aussi un moyen de créer :

  • Une source de vérité pour les normes de rédaction des produits,
  • une ressource partagée par tous ceux qui écrivent, éditent ou réfléchissent au contenu des produits,
  • une partie intégrante de notre système de conception et de notre marque,
  • un outil pour rationaliser la production et promouvoir la cohérence.

 

Adopte ton design system

Le problème majeur des guidelines, comme toutes les règles en général, réside dans son adoption (ou plutôt non-adoption). Le fait est que les guides de style représentent un ensemble de règles, ce n’est donc pas un outil très pédagogique a priori.

Conséquence : souvent, les seules personnes qui lisent et utilisent les guides de style sont celles qui les ont créés. Car la plupart des gens n’aiment pas ou ne comprennent pas les guides de style, ce qu’ils contiennent, comment les utiliser, pourquoi ils existent… Pour la plupart des gens, ces règles sont étranges, oppressantes, arbitraires et peu claires.

Les UX writers, considérés en quelque sorte comme les gardiens des règles d’écriture, vont devoir trouver des moyens créatifs pour que l’adoption soit totale.

Sources :

https://audreyhacq.medium.com/tout-savoir-sur-les-syst%C3%A8mes-de-design-1b6400c9a1b3

https://www.ausy.fr/fr/actualites-techniques/design-system

https://lagrandeourse.design/blog/ui-design-et-da/design-system/