Design system

Design system : Ensemble cohérent de règles, de composants et de ressources partagées qui assure l’homogénéité des écrans et accélère la production.

Ce terme appartient à la famille « Produit et UX ». La page reprend l’essentiel : à quoi ça sert, comment l’écrire, ce qui se passe quand on l’oublie.

Ce que recouvre Design system, concrètement

Dans un projet d’application, Design system sert à trancher : quelles fonctions entrent en version 1, dans quel ordre, et ce qu’on assume de laisser de côté.

Dans la pratique, deux interlocuteurs qui n’ont pas la même définition en tête avancent d’accord pendant des semaines, puis découvrent le désaccord à la livraison.

La traduction en exigences

Un cahier des charges lisible relie « Design system » à un utilisateur nommé et à une action précise : qui fait quoi, depuis quel écran, avec quel résultat visible.

À écrire noir sur blanc, dans le chapitre qui correspond :

• Le parcours principal, décrit du premier lancement à la première action utile.
• Les critères d’acceptation, rédigés de manière à pouvoir être refusés.
• Le nombre d’allers-retours de maquettes inclus dans le prix.
• Le niveau d’accessibilité visé, et les écrans sur lesquels il est vérifié.

Une exigence bien écrite tient en trois lignes et se refuse en une. Si elle ne peut pas être refusée à la recette, elle n’est pas encore écrite.

Pour le cadre général, le guide des prix donne les fourchettes constatées en France et le modèle de cahier des charges la structure qui les rend opposables.

Ce que ça change au moment de la recette

Le contrôle de « Design system » repose sur les critères d’acceptation écrits avant le développement. Sans eux, la recette devient une discussion de goûts.

• Reprendre les critères d’acceptation et les cocher un par un, sans indulgence.
• Utiliser l’application sur un petit écran, d’une seule main.
• Parcourir l’écran principal au lecteur d’écran, au moins une fois.

Un prestataire sérieux propose ces contrôles de lui-même. Quand ce n’est pas le cas, c’est au client de les inscrire au cahier de recette.

Erreurs fréquentes

Sur ce point précis, voici ce qui coûte le plus cher aux porteurs de projet, dans l’ordre où on le rencontre.

• Décrire une fonctionnalité par une intention plutôt que par des écrans et des règles.
• Oublier les cas qui vont mal : liste vide, erreur réseau, droits insuffisants.
• Confondre l’avis de trois collègues et un test auprès de vrais utilisateurs.
• Laisser le back-office hors du cahier des charges, alors qu’il pèse lourd dans le chiffrage.
• Repousser l’arbitrage au sprint suivant, autant de fois qu’il y a de sprints.

Termes liés

Les entrées du glossaire déjà publiées sur des sujets voisins :

• Churn
• MVP
• Onboarding
• Wireframe

Questions fréquentes

Design system : de quoi parle-t-on exactement ?

Ensemble cohérent de règles, de composants et de ressources partagées qui assure l’homogénéité des écrans et accélère la production. Le mot est employé tel quel par les équipes francophones. C’est celui à utiliser dans les échanges avec une agence, y compris quand la traduction française existe.

Comment le vérifier à la recette ?

Avec un critère écrit avant le développement, formulé de façon à pouvoir être refusé. « L’écran doit être agréable » ne se recette pas. « La liste vide affiche tel message et tel bouton » se recette.

Est-ce que ça se retrouve dans le devis ?

Un devis lisible sépare conception, design, développement, tests, publication et suivi. La grille de lecture des devis détaille poste par poste ce qui doit y apparaître.

Toutes les définitions publiées sont rassemblées dans l’index du glossaire, classées de A à Z et par famille.