Six questions sur le Design System, ses avantages et sa mise en œuvre

1 - Qu’est-ce qu’un Design System ?

Un Design System est une démarche qui vise à standardiser les interfaces utilisateurs d’un ensemble d’applications et sites web. Elle se concrétise par une bibliothèque de composants (HTML, CSS, JavaScript, Python ou autres), du plus élémentaire au plus complexe, que l’on structure en les hiérarchisant et en les mettant en relation. Quelques exemples de composants élémentaires : boutons, champs de saisie, cases à cocher. Un composant plus complexe sera un groupe de boutons, un module de recherche, un bandeau d’information, un bloc-article, un accordéon ou encore, un module de gestion du consentement des cookies avec traceurs analytics. Tous ces composants implémentent scrupuleusement la charte graphique et la charte ergonomique définis en amont par les concepteurs d’UI.

2 - Quels sont les avantages d’un design system ?

En utilisant les composants du design system, chaque métier respecte de facto la charte graphique et la charte ergonomique. De plus en évitant de réinventer la roue, le design system est synonyme d’industrialisation, donc de rationalisation des coûts et de maîtrise de la charge. Enfin, si le Design System prend en compte la notion d’éco-conception (composants peu gourmands en ressources, navigation optimisée…), les sites en hériteront naturellement.

3 - Quel rapport entre le Design System et le RGAA ?

Édité par la direction interministérielle du numérique (DINUM), le RGAA (Référentiel général d’amélioration de l’accessibilité) décrit la façon dont les sites et services numériques doivent respecter certains critères d’accessibilité. Il rentre dans des détails comme les contrastes de couleurs pour les malvoyants ou les balises ALT (alternatives textuelles) des images qui, selon le contexte, sont obligatoires ou au contraire proscrites. Un décret spécifie que le RGAA devra être implémenté d’ici à 2025 par la totalité des sites et services de l’État, ainsi que par les entreprises dont le CA excède 250 M€. Le respect du RGAA par un grand nombre de sites et services d’une même organisation rend pratiquement obligatoire son implémentation dans un Design System. Sans cela, les risques et les coûts de développement seraient décuplés.

4 - Comment mettre en œuvre un Design System ?

Synonyme de fortes contraintes techniques et méthodologiques, la mise en œuvre d’un Design System relève de projets de développement ou de refonte souvent lourds. Cet effort initial sera rentabilisé à partir de deux ou trois sites. Les outils de développement mis en œuvre – généralement basés sur un CMS – ne sont pas forcément remis en cause. Dans la plupart des cas, on intègrera manuellement les composants dans les pages du site. Une démarche plus industrielle mais encore balbutiante consistera à développer des extensions du CMS, comme un Page Builder qui permettra d’assembler plus rapidement les composants.

Un projet de Design System est généralement porté par l’équipe Front, qui se dote à cette occasion d’un expert en accessibilité. Il s’agit également de nommer un responsable de la gouvernance, voire une équipe dédiée. Un Design System est en outre par nature collaboratif : tous les métiers et entités de l’organisation participent à sa construction et à son amélioration, en faisant remonter au fil de l’eau leurs remarques et contraintes vers l’équipe qui en pilote le développement et l’évolution, tout en jouant un rôle incitatif. Un site internet sera un bon format pour héberger, élaborer ou partager un design System.

5 - L’État a-t-il déjà mis en place son propre Design System ?

L’État a développé et mis en place en 2020, son propre Design System baptisé DSFR (Design System Français, ou Design System de l’État) et piloté par le Service d’information du gouvernement (SIG). Sa mise en œuvre sur les quelque 15000 sites publics que compte l’État est en cours. Durant ce processus, chaque Ministère utilise les composants du DSFR et remonte des informations vers le SIG. Ces composants sont de deux types. Tout d’abord, des librairies Sketch ou Figma permettent aux concepteurs de concevoir l’UI en respectant les chartes graphiques et ergonomiques. D’autre part, une librairie de composants HTML/CSS/JavaScript permet aux développeurs de réaliser les sites.

6 – Quelle est l’implication d’Almavia CX ?

Grâce à ses compétences en développement de sites web et d’applications mobiles, ainsi qu’en ergonomie et en accessibilité, Almavia CX est amené à mettre en œuvre le DSFR pour plusieurs Ministères, dont celui de la Culture et bientôt celui de l’Éducation. Cette ESN se pose de facto en expert des Design Systems auprès des administrations et autres grandes organisations publiques ou privées. L’accompagnement peut inclure la définition des chartes graphiques et ergonomiques, le développement du Design System et sa mise œuvre sur de multiples sites, voire la mise en place d’une gouvernance.

Sébastien Coutier, Directeur de clientèle chez Almavia CX