Création d’un Content Design System
Source image de couverture : dribbble.com
Le Content Design System désigne l’ensemble des documentations, des composants UI et des éléments relatifs au langage de communication de l’entreprise. Ces éléments forment une bibliothèque de composants et un guide de styles partagés avec tous les acteurs du projet.
Le développement ultra-rapide des techniques de conception et de production des dispositifs digitaux place les entreprises dans un environnement ultra agile et fortement concurrentiel. Donc, elles s’orientent vers l’approche de Design System pour accélérer et optimiser leur processus de design.
Dans le but de créer un Design System méthodique, il convient de créer un contenu bien élaboré, en appliquant certaines conventions utiles.
C’est quoi un Content Design System (CDS) ?
Le Content Design System (Content pattern ou modèle de contenu), ressemble à une charte graphique, mais avec un format plus développé qui intègre d’autres éléments à part ceux graphiques. Ces ressources concernent :
- les patterns et les composants graphiques,
- les éléments visuels, tels que les icônes et les images,
- les éléments de branding,
- les règles typographiques,
- les layouts de mise en page,
- le tone of voice adaptant l’identité de l’entreprise.
Ces composants sont écrits dans un langage commun et assimilable par les différents acteurs du projet. L’équipe peut ainsi profiter d’un référentiel UI/UX qui comporte des éléments réutilisables, permettant d’optimiser le processus de conception et de développement d’un dispositif digital (un site web, une application ou un logiciel).
Les ressources de cette bibliothèque de références sont disponibles pour tous les collaborateurs (sur cloud ou en ligne), quelle que soit leur discipline : designers, développeurs web, intégrateurs web, etc. Ces professionnels peuvent y accéder à tout moment, notamment lors de la phase de conception, de maquettage, de test et de production.
L’équipe prenante, même quand elle est grande, peut travailler d’une manière plus agile et donc plus harmonieuse. Ce qui augmente sa capacité à travailler plus vite et plus efficacement, dans une démarche “time to market” rigoureuse.
L’UX Writing au coeur du Content Design System
Le Content Design System vise à créer un modèle de contenu polyvalent qui rassemble plusieurs ressources de différents types et qui sont utilisés par des profils variés. A cet effet, il est indispensable de créer un contenu percutant qui aplanit le processus de Design System et offre une meilleure expérience utilisateur.
Dans cette optique, il convient d’appliquer les bonnes directives de l’UX writing pour produire un Content pattern lisible et facilement compréhensible par les tous les collaborateurs.
L’UX writing désigne un style de rédaction orienté utilisateur qui vise à assurer une interaction intuitive avec l’interface utilisateur à travers un contenu simple, lisible et cohérent. Cette approche doit être adoptée dans le procédé de conception d’un Content Design System, afin de développer un modèle parfaitement accessible à toutes les équipes concernées. Voici quelques consignes à cet effet:
- Éviter le jargon très technique. Par exemple, certains mots techniques utilisés par les développeurs (DOM, GCI, Backlog) ne sont pas compréhensibles pour certains designers et inversement.
- Miser sur la lisibilité et la clarté du contenu. Le Content Design System doit être conçu d’une manière structurée et explicite. A cet effet, il convient de:
- marquer les expressions les plus importantes, en les mettant en gras par exemple.
- utiliser des phrases concises pour documenter ou décrire un pattern ou un composant. Elles doivent être aussi simples afin de permettre une traduction fiable pour des utilisateurs étrangers.
- Utiliser la voix active pour créer un contenu convivial.
- Choisir un ton de voix adapté au type de la documentation à élaborer.
- Suivre une ligne éditoriale bien définie, concernant la ponctuation, la capitalisation, le choix des pronoms, etc.
L’UX writing se manifeste dans la rédaction des textes des messages d’erreur, des descriptions des composants UI, des titres et des sous-titres, etc
Comment créer un Content Design System ?
Créer le guide de style (Style Guide)
Le guide style s’apparente à une charte graphique. Il s’agit d’un UI kit qui offre une documentation minutieuse pour chaque composant UI du dispositif digital : le style typographique, la couleur, la forme d’un bouton, etc.
Voici les principaux caractéristiques d’un style guide :
- La cohérence entre le choix des couleurs, l’iconographie, le ton, la police et tous les autres composants de l’interface est une condition essentielle pour créer une librairie UI consistante.
- La convivialité : le modèle de contenu doit comporter des éléments interactifs qui permettent la création d’une interface utilisateur intuitive et désirable.
- L’accessibilité : le guide de style doit être accessible pour tous les membres de l’équipe prenante. De plus, il doit être flexible pour pouvoir s’adapter aux évolutions du projet (extension du site en ajoutant de nouvelles fonctionnalités), ou réutilisé dans d’autres contextes (comme une refonte par exemple).
Il existe différents outils pour la création de guide de style, comme InVision. C’est un outil de maquettage puissant qui permet de créer des guides styles d’une manière aisée. C’est aussi un outil collaboratif qui assure une coordination étroite entre les membres de l’équipe, en temps réel.
Il est aussi important d’indiquer, si le besoin s’impose, des restrictions pour éviter l’usage de certains éléments, avec des explications détaillées. L’objectif est de créer un style guide plus complet et raffiné.
Concevoir un Design System en Atomic Design
L’Atomic Design est créé par le webdesigner Brad Frost. Il désigne une approche de conception modulaire pour réaliser une conception méticuleuse d’un dispositif digital. Cette approche consiste à décomposer le dispositif en des éléments très granulaires (ou atomes) : boutons, icône, couleur, etc. L’objectif est de créer des composants faciles à utiliser et à réutiliser pour développer des interfaces web homogènes.
L’association des atomes forme des molécules (comme un formulaire de recherche). Le groupe de molécules et/ou d’atomes permet de constituer des organismes (à l’exemple d’une catégorie de produits). Le regroupement de ces derniers donne lieu à des templates qui constituent le squelette d’une page web.
L’approche modulaire permet de constituer d’un système de composants extensible et facilement modifiable. En effet, les membres de l’équipe peuvent le mettre à jour selon leurs besoins et les nouvelles exigences du client.
L’Atomic design repose sur une documentation instructive qui permet de définir, en détail, chaque composant avec un langage commun et compréhensible par tous les utilisateurs. Cela favorise la coordination et la communication entre tous les collaborateurs. Ainsi, l’information sera comprise de la même manière par ces professionnels.
L’élaboration d’un Atomic Workflow bien réfléchi nécessite d’organiser des réunions entre tous les utilisateurs pour se mettre d’accord sur les codes de dénomination et les propositions de mises à jour potentielles qu’ils peuvent effectuer dans le futur.
Il existe un large choix d’outils pour développer facilement un Atomic Workflow cohérent. Par exemple, Sketch constitue un excellent outil pour composer et partager des librairies de composants et des symboles avec un structure parfaitement hiérarchique.
Définir les conventions de dénomination
La dénomination des composants constitue un élément crucial dans la conception d’un Content Design System. Les règles de dénomination doivent être conçues avec la participation et le consentement de tous les utilisateurs. Cela permet de mettre en place des conventions communes et facilement compréhensibles par toute l’équipe.
Le fait d’adopter des conventions de dénomination homogènes et symboliques pour les éléments du Content Design System et pour les noms des fichiers correspondants, facilite considérablement le travail de l’utilisateur. Ces règles aident ce dernier à identifier facilement le type du composant (un atome ou une molécule) et optimiser le processus de conception du Content Design System.
Voici quelques bonne pratiques de dénomination selon Invision App :
- Le nom du composant doit renseigner sur sa catégorie et son rôle, d’une façon générique, claire et significative. Par exemple, pour un bouton primaire de couleur rouge, il convient de le nommer comme suit : button / primary / default. En cas de modification de se couleur, cette dénomination reste valable dans tout le contenu du Design System.
- Utiliser des traits obliques ou des tirets pour séparer les mots qui constituent le nom de l’élément.
- Privilégier les lettres minuscules et éviter les chiffres.
Unifier le vocabulaire utilisé
Il est indispensable d’unifier le vocabulaire utilisé pour constituer le modèle de contenu. Il faut accorder une grande attention aux termes de sens proches, afin d’éviter l’ambiguïté qui peut en résulter.
Les acteurs du projet doivent étudier tous les termes à inclure dans le glossaire du Content pattern et identifier les points de similarité qui les relient. De cette manière, ils peuvent prendre des décisions pertinentes pour définir ces terminologies d’une manière distincte. Pour plus de clarté, ils doivent appuyer leur choix par des exemples illustratifs.
L’utilisation d’un vocabulaire unifié permet d’éviter les malentendus entre les utilisateurs et de construire un glossaire plus cohérent.
Conclusion
Le Content Design System offre une documentation claire des composants et des patterns du Design System. Toute l’équipe prenant est fédérée autour de la conception, la mise à jour et le partage de ce document. Tous les utilisateurs disposent d’une information récente et unique à tout moment. Ce qui assure une collaboration plus efficace entre eux.
Un Content Design System bien élaboré assure la réutilisation de ses éléments pour constituer des composants plus complexes. De plus, c’est un système vivant qui évolue constamment au gré des évolutions technologiques hyperactives.
Par ailleurs, ce modèle de contenu aide à soulever certains problèmes UX qui concernent notamment l’architecture de l’information, les fonctionnalités et le design de l’interface utilisateur.
by 
