Faites place au Design System !

User Experience

19 juin, 2019

Les systèmes de design, ou Design Systems, ça vous dit quelque chose ? Nous entendons souvent parler d’eux, d’atomic design, et de tout un tas de tendances qui gravitent autour. Il existe même de grandes conférences sur le sujet.

Florissant depuis plusieurs années, les Design Systems se sont fait une place importante dans les Workflows des projets digitaux. Les outils sont de plus en plus adaptés, nous permettant maintenant de concevoir des systèmes de composants et de les partager au plus grand nombre.

Dans un écosystème où les nouvelles tendances prolifèrent et ne perdurent pas forcément, il est légitime de se demander si l’investissement en vaut la chandelle, et si il est pertinent de se lancer.

Aujourd’hui, nous disposons du recul nécessaire pour faire le bilan sur cet outil qu’est le Design System, et sur les avantages qu’il procure.

Quelle est la finalité du Design System ?

Un Design System, tout comme un style guide, est un outil interne et propre à chaque entreprise. C’est un ensemble de documents, d’outils, et de règles utilisés pour élaborer une interface, un référentiel unique. Lorsque le Design System est conçu de manière cohérente et adaptée à un projet, il en devient le centre névralgique. C’est un point de contact pour tous les acteurs du projet, une bibliothèque de références, et bien plus encore. Initialement, ce développement répond à un besoin : il doit s’adapter au monde digital dans lequel nous évoluons, et qui comme vous le savez, est en constante mutation. Les “règles” d’aujourd’hui ou best practices en matière de design et d’expérience vont rapidement être remplacées par d’autres.

L’idée est donc la suivante : pour répondre à cette mutation constante, imaginez pouvoir faire évoluer un produit, ou un site, en s’appuyant sur un outil… Notre fameux Design System.

En gros c’est une style guide ou une librairie Sketch ?

Pas vraiment, voire pas du tout. Le style guide fait partie du Design System mais n’est pas l’unique élément qui le compose.

Depuis des années, les équipes de designers élaborent des styles guides, des bibliothèques de composants, etc… De la même manière, les développeurs, eux, utilisent des outils tels que Bootstrap pour se simplifier la tâche. L’objectif est donc de rassembler tous ces éléments de manière à ce que qu’une équipe puisse apprendre, créer et croître, avec un seul et même outil centralisé : le Design System. Effectivement, ce dernier reprend les principes des styles guides, mais cela va bien au -delà. C’est un guide complet pour la conception de projets. Un ensemble de règles, de principes, de contraintes, et de best practices utilisables par tous au sein d’une même équipe. Pour grossir le trait, il est caractérisé par une bibliothèque d’éléments d’interfaces “prêts à l’emploi”. Ces composants sont implémentés et codés, et permettent à une équipe de concevoir, développer et maintenir la qualité du produit.

visu1 jerome Faites place au Design System !Outil Prime

Ça a l’air simple vu comme ça, mais qu’est-ce qu’on met dedans ?

Vous l’aurez compris, le Design System n’est pas à considérer comme un seul élément. Il englobe tout un ensemble beaucoup plus large, de différents éléments qui le constituent.

Partant de ce principe, nous avons donc à faire non pas à un livrable, mais à une suite de livrables, susceptible d’évoluer en permanence avec les produits et les technologies émergentes. Un Design System peut donc être constitué d’un style guide, de règles de structures, de composants et patterns, et de toutes sortes de ressources que nécessite un projet. Si vous êtes curieux, UX Pin a créé Adele, un référentiel de différents Designs Systems publiques.

L’objectif premier est de faciliter le travail des équipes qui vont l’utiliser. Il faut donc voir les choses sous un angle différent de “qu’est-ce qui le compose ?”, et plutôt orienter la réflexion en se demandant qui, et comment les personnes vont s’en servir. En effet, il n’y a pas une seule et unique manière de concevoir un Design System, il en existe autant que d’équipes qui les utilisent. En se posant les bonnes questions, on peut parvenir à créer un Design System qui colle parfaitement aux objectifs d’une équipe et d’un projet. Par exemple, strict ou plutôt flexible, avec une vocation à évoluer rapidement, mais également, la liberté ou non qu’il laissera aux acteurs du projet etc.

Une méthode de construction fait toutefois l’unanimité : il s’agit de l’Atomic Design. L’objectif de cette méthode conçue par Brad Frost, est de concevoir des systèmes de composants pour être en mesure de s’adapter aux changements rapides. Le nom “Atomic” fait directement référence à la métaphore de la chimie, et évoque l’aspect “vivant” et évolutif de la méthode.

L’atomic design repose sur une méthodologie composée de cinq étapes distinctes directement liées pour créer des Design System d’une manière plus efficace et hiérarchisée. Les cinq étapes sont les suivantes : Atoms, Molecules, Organisms, Templates, Pages. Ce n’est pas un processus linéaire, mais plutôt un modèle qui aide à concevoir des interfaces ou des produits comme un tout cohérent et une collection d’ensembles. Chacune des cinq étapes joue un rôle clé dans la hiérarchie des Design System.

visu2 jerome Faites place au Design System !

Les Atoms

Ils sont la base de la construction et servent de fondation pour mettre en place les blocs d’interface. Ils sont composés d’éléments d’HTML basiques, comme des boutons, des couleurs, de la typographie, des labels, des inputs, et tout autres éléments qui ne peut exister seul sans altérer le fonctionnel.

Les Molecules

Tout comme en chimie, les molécules sont des groupes d’atomes liés qui acquièrent de nouvelles propriétés distinctes. Dans notre Design System, ce sont des groupes d’Atoms simples, fonctionnant ensemble. Par exemple, un titre de formulaire, un champ de recherche et un bouton peuvent être combinés pour créer une molécule de formulaire de recherche.

Les Organisms

Ils sont des composants d’interface utilisateur relativement complexes composés de groupes de Molcules et / ou d’Atoms. Ces Organisms forment des sections distinctes d’une interface. Par exemple, un menu, ou une grille de liste de produits.

Les Templates

À ce niveau, nous oublions les analogies de la chimie, et retournons sur des éléments qui nous parlent un peu plus. Les Templates permettent de structurer le contenu. Ils sont un assemblage de nos organismes. Normalement déjà développés (en code), les Templates permettent de vérifier l’organisation et la hiérarchisation des divers Organisms créés, et de tester leurs comportements.

Les Pages

Ce sont des exemples spécifiques de Templates qui composent ce que sera la page dans sa finalité. À ce stade, tous les placeholders ont été remplacés par du contenu définitif (textes, images, couleurs, pictos, organismes et molécules finalisées…).

En tenant compte de la nature dynamique du contenu, l’Atomic Design permet de créer des systèmes où les composants sont tous spécifiés graphiquement, ce qui est impossible à faire au cas par cas, sur des pages.

Aujourd’hui, nous ne devons donc plus penser en « écrans » ou en « pages » mais en systèmes de composants, et en éléments modulaires. Nous ne concevons plus des pages mais des éléments d’interface qui pourront trouver leur place dans n’importe quels environnements (mobile, desktop,écrans, montres…).

C’est ce qu’a fait Google par exemple avec le Material Design : un ensemble de règles de design destiné à s’appliquer à des interfaces graphiques. Conçu pour s’adapter à différents supports, le Material Design a été utilisé par le géant Américain  pour unifier le style graphique de ses applications et de ses plateformes.

Est-ce vraiment utile ?

Il n’a échappé à personne que la façon dont nous concevons nos interfaces est en train d’évoluer. En agence digitale, il apparaît comme essentiel de remettre régulièrement en question les workflows et les techniques de co-création, pour être toujours plus efficace sans perdre de vue la qualité et la cohérence d’un projet. Il est vrai que la création d’un Design System semble être un investissement, et ça l’est. Cela reste légitime de se demander s’il y a un intérêt à sauter le pas ou non. Il apparaît clairement qu’un tel outil offre une multitude d’avantages lorsqu’il est appliqué.

visu3 jerome Faites place au Design System !

Garder une cohérence globale sur les éléments d’interface

C’est un référentiel unique et universel. Le fait de créer rapidement une Style Guide et de fonctionner par atomes oblige à garder une vraie cohérence et à ne pas dupliquer les éléments graphiques du projet.

Gagner en efficacité

Les systèmes de conception permettent d’économiser du temps et de l’argent. Au lieu de créer des composants à partir de rien, les concepteurs et les développeurs peuvent utiliser des éléments existants et créer de nouvelles pages avec plus d’efficacité et de rapidité. Il n’est donc plus utile lors de la phase de création de décliner tous les écrans, ni tous les points de rupture.

Prendre plus de temps à penser l’expérience

Les éléments visuels étant déjà spécifiés dans le Design System, cela offre de la flexibilité sur la conception d’un site ou d’un produit. Le fait de construire ou designer par le biais d’éléments dissociés permet de se concentrer sur l’essentiel et de se focaliser sur l’expérience.

Faciliter le développement

Le Design System réunit tous les éléments nécessaires pour concevoir toutes les pages du site. Les développeurs pourront facilement modifier les éléments présents à plusieurs endroits. La maintenance et les évolutions sont facilitées grâce un système de partage de versions. Chaque élément étant développé au fil du projet, il est possible de faire plus rapidement des tests en environnement réel.

Une meilleure communication dans les équipes

Ce processus apparaît comme l’unique source de vérité d’un projet lorsqu’il est utilisé. Il permet d’avoir la même logique concernant la conception d’une interface ou son développement (avec un langage commun pour le nom des composants).

Une ouverture aux multi-supports

Une fois bien construit, on peut concevoir aussi bien une interface pour une télévision que pour un smartphone. Grâce à la flexibilité et la modularité qu’apportent les atomes, il est possible de réaliser une même interface sur différents supports tout en gardant une harmonie et une ergonomie adaptée. Même principe pour la densité des contenus qu’une interface peut contenir. Les composants peuvent facilement s’entasser, se dupliquer ou se modifier grâce à des règles de gestion spécifique.

Enfin, que les designers se rassurent, la créativité n’a pas à craindre ce genre de systèmes de conception, bien au contraire… Plutôt que des décliner les pages, le designer pourra prendre plus de temps sur des aspects plus créatifs, comme réfléchir aux comportements animés de ces atoms/molecules, ou comme donner du sens aux différents composants pour qu’ils fonctionnent ensemble, mais aussi suivre les développements afin que le résultat final corresponde à sa vision.
Véritable méthode de travail à intégrer aux workflows, le Design System facilite le travail de tous, et permet de se concentrer sur l’objectif le plus important : imaginer des expériences utilisateur au service des KPIs identifiés en amont du projet.

Outils
Prime
Material Design
Atlassian Design System
Polaris
Carbon
Human Interface Guidelines
Nachos
Grommet

Sources
Medium
Prototypr
Ux Republic
Livre et conférence Brad Frost
Ux Misfit

Laisser un commentaire.