UI : Peut-on encore se passer de Design System ?

17/08/2023
Par Quentin Massonneau

Le design de produit étant une discipline encore récente, elle continue de dessiner ses règles et de normaliser ses pratiques pour assurer l’efficacité et la fiabilité des réalisations. Le design system (ou Système de design), est rapidement devenu un pilier de cet effort de normalisation, notamment en prenant la forme d’une librairie de composants, de styles et de principes de design standardisés pour être réutilisés sur tout le périmètre produit, de façon dynamique et scalable.

Pourtant, cette démarche demande du temps, notamment pour en poser les fondations, et beaucoup d’entreprises et équipes produit laissent encore cette normalisation de côté. Peut-on encore de façon viable imaginer un produit sans design system ?

Direction artistique et UI design

Si le marché du design définit de plus en plus ses propres règles, des fonctions et métiers différents semblent aussi se préciser.

D’un côté du spectre on trouve des graphistes et directeurs artistiques. Ils sont rôdés à la livraison des visuels à partir de chartes graphiques, habitués aux logiciels de création digitale. Ils suivent une approche très itérative. Ce qui va produire rapidement des propositions, des pistes différentes, voire repartir de zéro selon les retours des personnes ciblées. Leur objectif est de poser une identité graphique correspondant aux objectifs d’image de la marque et de son produit.

De l’autre côté de ce spectre se trouvent les puristes du design normalisé. Ce sont les UI designers chevronnés, convertis aux outils de prototypage. Ils décortiquent, décomposent et documentent chaque élément visible du produit. Effectivement, l’UI design (User Interface) intervient sur l’environnement graphique dans lequel évolue l’utilisateur d’un logiciel, d’un site web ou d’une application. Dans cette approche, l’investissement initial en temps et en énergie est élevé. Cela se produit en début de projet, lorsqu’il s’agit de poser les bases d’un design system et tous les composants qui seront réutilisés à différents endroits du produit. Au-delà d’une construction solide, le designer doit donc aussi anticiper les cas d’usage et leur contexte d’utilisation.

Grandir pour et avec le produit

Le design system va se construire à partir d’une direction artistique validée. Il se distingue du simple recueil de règles graphiques. Il montre ses avantages dans son caractère évolutif, dynamique et surtout scalable. En effet, c’est devenu un outil indispensable pour des acteurs proposant une gamme produits qui veulent proposée une expérience harmonisée. Parmi les design systems les plus connus, on retrouve Material.io de Google, Human Interface d’Apple ou encore Fluent de Microsoft. L’État Français s’est aussi penché sur l’harmonisation de l’expérience sur les interfaces officielles et propose dans ce sens le Système de Design de l’Etat.

L’avantage le plus flagrant pour ces environnements produit réside dans la cohérence graphique globale. Le design system assure l’harmonisation des éléments UI sur tout le périmètre fonctionnel. Cela inclut même des marques qui proposent plusieurs produits avec des variations éventuelles de thèmes (suite de produits, groupe possédant plusieurs marques, etc.). Là encore, le rôle d’un design system et de contrôler et répertorier ces variations dans une grande bibliothèque de composants utilisables par les équipes opérationnelles.

Dans ce genre de cas, le périmètre produit a grandi et le design system a accompagné cette croissance. Lorsque de nouvelles fonctionnalités sont proposées, pour répondre à de nouveaux besoins utilisateurs identifiés et/ou des enjeux business, ces ajouts ont pu être réalisés rapidement, par des équipes élargies et disparates, tout en conservant une expérience globale unifiée.

Un approche à taille humaine

Les environnements évoqués jusque-là reflètent notamment les problématiques de mastodontes du web, qui ont des équipes de design nombreuses et des environnements produits très larges. Pour autant, le design system est un outil qui peut s’inscrire dans des stratégies produit à plus petite échelle :

 

  • Efficacité : un design system bien documenté permet à tout designer, interne ou externe, de s’approprier rapidement les codes UI et de livrer des écrans et maquettes appliquant directement l’identité produit. C’est un moyen d’accélérer les réalisations du ou des product designers, ou même d’intégrer de façon fluide des profils externes.

 

  • Valorisation du travail d’UX/UI : une fois que ces bases UI sont posées avec le design system, l’équipe produit et surtout les designers peuvent plus facilement se concentrer sur des considérations stratégiques sur l’expérience produit. Ils passeront moins de temps sur des ajustements de maquettes au pixel près et plus sur la réflexion derrière les cas d’usage spécifiques, la recherche utilisateur, l’optimisation des parcours, etc.

 

  • Itération et amélioration : les phases de test de nouvelles pages ou fonctionnalités peuvent aussi se faire plus rapidement, permettant d’adopter plus facilement une posture innovante, de prototyper plusieurs parcours, de soumettre différentes propositions à des utilisateurs.

 

  • Collaboration : cet outil ne s’adresse pas qu’aux designers. En normalisant les pratiques de design du produit il permet aux parties prenantes internes de s’aligner sur les évolutions et mises à jour. Il permet notamment de poser naturellement un système de gouvernance ergonomique. C’est aussi un moyen pour tout le monde de parler le même langage, ce qui est particulièrement important lors de la passation aux équipes de développement qui vont retranscrire ces éléments UI et donner vie au produit.
Le cycle de vie du produit

Pour reprendre notre dichotomie entre graphisme et UI design, est-ce que tout cela veut dire que l’approche graphique et créative ne trouve pas sa place dans une stratégie produit qui se veut normalisée grâce au design system ?

Pas tout à fait. Elle garde en réalité une place cruciale à la création, lors de la phase de conception initiale du produit. Il est important à ce moment-là de se laisser de la flexibilité. Cela permet de tester des marqueurs identitaires, soumettre différentes pistes graphiques et poser les piliers de la direction artistique.

En revanche, dès que le projet prend de l’ampleur et que la direction artistique est validée avec les utilisateurs, les pratiques plus normalisées de UI design viennent prendre le relais pour fluidifier la déclinaison de cette identité. D’ailleurs, même à cette étape, la créativité garde une place importante dans les missions du designer. Il doit en effet redoubler d’imagination pour trouver des compromis entre les marqueurs identitaires de la direction artistique et les contraintes d’un élément UI qui doit être fonctionnel dans des contextes et cas d’usage potentiellement très différents.

Il revient donc aux équipes produit, avec l’aide de product designers qui adoptent deux postures. L’une créative et l’autre plus technique, de cerner la maturité du produit pour savoir quand faire appel au design system.

Il est difficile pour un produit de grandir sans un socle UI solide. Pour autant il est inutile d’investir en temps et en énergie dans un design system si le produit et sa direction artistique ne sont pas assez mûrs. Il s’agit donc d’identifier le point de rupture entre la phase de conception initiale du produit et son déploiement plus large pour positionner cette approche normalisée dans le cycle de vie du produit.

Quentin Massonneau
Product Designer Senior