Design system : « une méthode et des outils pour harmoniser la conception des produits »

Proposer des expériences harmonieuses aux utilisateurs fait partie des préoccupations des concepteurs d’applications. Pour répondre à leurs besoins, plusieurs méthodologies peuvent être appliquées et adaptées aux structures qui les adoptent. Lors de la sixième édition de l’événement GEN à Metz, Yohan Founs, senior creative technologist d’Adobe, est venu présenter les intérêts du design system, une méthode intéressante dans un contexte d’accélération des développements.

De l’atomic design au design system : concevoir ses produits comme des organismes vivants

Les principes du design system permettent de répondre aux besoins de l’utilisateur en premier lieu. On l’oublie parfois, mais dans user experience, il y a user. L’autre intérêt, c’est de construire et proposer des éléments d’expérience à l’ensemble des parties prenantes d’un projet, qu’ils soient du côté de la conception (développeurs, intégrateurs) ou de la communication (marketers, chargés d’acquisition…).

Avant toute chose, on doit définir ce qu’est un système. “Il s’agit d’un ensemble d’éléments en interaction concourant à la même finalité”. On doit la formalisation des principes du design system au webdesigner Brad Frost. Il a notamment publié un livre sur l’atomic design, qui constitue l’un des fondements de cette méthodologie. Il s’agit d’une métaphore qui fait le parallèle entre la construction des êtres vivants et la construction des sites web. Les atomes sont des éléments indivisibles, qui s’agglomèrent en molécules, qui s’organisent en organismes. Dans le même esprit, les designers sont invités à concevoir des éléments primaires (boutons,champs, textes) qui pourront s’agglomérer pour devenir des fonctionnalités (réaliser une recherche grâce à trois éléments : un titre, un champ de recherche et un bouton d’action), qui pourront ensuite s’organiser sur un template (un header d’un site constitué d’un logo, d’un menu et d’une fonctionnalité de recherche) puis sur une page. Si la métaphore de l’atome ne vous est pas familière, vous pouvez penser aux notes et aux silences de musique, nécessaires pour réaliser des mélodies, puis des morceaux, puis des albums (nous vous conseillons cet article d’Audrey Hacq).

Ce parallèle entre les organismes vivants et les produits peut avoir un avoir un intérêt fort en phase de conception. Pour bien le comprendre, on peut se représenter le fonctionnement d’un système : il s’agit bien souvent d’un réservoir disposant d’une entrée et d’une sortie et muni de capteurs qui communiquent avec un centre de contrôle, qui joue sur les flux d’entrée et de sortie du réservoir. Les humains fonctionnent ainsi (inutile de faire un dessin). Les sites e-commerce aussi. Ils ne sont que des réservoirs de produits, alimentés par un flux de production. Les ventes réduisent le contenu du réservoir. Des capteurs permettent de prendre son pouls, afin d’augmenter la production s’il est plus vide qu’attendu et d’accélérer les actions marketing si les stocks s’accumulent (promotions…).

Cas d’école : la conception d’un outil de gestion des tâches

Dans le cadre de la conception d’un produit, voici comment ces principes peuvent se matérialiser. Yohan Fouls prend ici l’exemple d’un système de gestion des tâches. On observe d’abord le fonctionnement, côté humain. La mémoire alimente un réservoir, les tâches à effectuer, et on en oublie de temps en temps (flux de sortie). Un outil de gestion des tâches peut permettre de capter les tâches à effectuer et de fermer ce robinet. On analyse alors les flux d’entrée : tâches définies par l’humain, tâches définies par des applications tierces (rappel d’événement…). Les équipes conçoivent à la fois des IHM (entrées/sorties) mais également des éléments invisibles (bases de données, stockage dans le cloud, flux d’information…).

Pour bien comprendre ce que sont les tâches, on analyse le langage humain. On remarque qu’il existe de très nombreuses manières d’évoquer des tâches à effectuer.

• Ce serait bien d’acheter du pain en rentrant.
• N’oublie surtout pas de payer tes impôts !
• Il faut acheter un cadeau à la belle-mère avant dimanche midi…

Cette observation des phrases usuelles permet de repérer les éléments indivisibles qui constituent le fondement des tâches.

• Des verbes d’action : acheter, payer…
• Des objets, des individus : du pain, tes impôts, un cadeau, une belle-mère…
• Une échelle d’importance : surtout, ce serait bien…
• Une notion de temps : en rentrant, avant dimanche midi…

Une tâche, c’est une action représentée par un verbe, qui s’applique à un objet, et provoque un résultat ou une erreur selon qu’elle soit faite ou pas. Ici, des référentiels peuvent nous aider (actions Schema.org) à identifier les différents éléments.

Lorsque ces éléments sont listés, on passe à une phase de conception des gabarits. On priorise l’information et on la simplifie. L’action, l’objet et la date semblent essentiels. “L’importance” l’est beaucoup moins et doit arriver dans un second temps sur l’interface (on peut l’afficher après les autres éléments ou masquer cette information au chargement). On pense également aux valeurs par défaut (exemple : Quand ? Aujourd’hui…) pour aider les utilisateurs à interagir avec l’interface. Avant de passer à la phase de prototypage, on peut regarder du côté de la concurrence pour visualiser les interfaces et les systèmes que les utilisateurs potentiels sont susceptibles de connaître. Lors de la conception des prototypes, on s’intéressera évidemment aux interfaces, mais aussi et surtout aux relations entre les interfaces. “Les liens entre les écrans sont souvent plus importants que les écrans eux-mêmes”.

Un référentiel pour centraliser les éléments de l’UX

À l’issue de la conception des prototypes, les designers peuvent faciliter le partage de leurs créations avec les membres des projets en utilisant des outils permettant d’isoler les éléments constitutifs du design. Dans les faits, le design system va plus loin et se matérialise par un référentiel. Il est composé d’éléments graphiques mais également de règles d’usage partagées avec toutes les parties prenantes des projets. On retrouve ainsi les éléments liés au langage (quel ton, quels mots, quel champ lexical utilise-t-on…), les composants techniques (web, app…) et des mises en scène pour que les utilisateurs du référentiel comprennent les règles grâce à des cas d’usage. On retrouve ce type de référentiel dans un grand nombre d’entreprises tech : Google (Material Design), Apple (Human Interface Guidelines) ou encore IBM (Design Language). Il n’est pas réservé aux développeurs : ces ressources partagées peuvent être utiles aux marketeurs notamment.

Les avantages et les risques du design system

Les avantages du design system sont nets, ils permettent notamment de partir des besoins et du fonctionnement des utilisateurs pour concevoir des produits ; contrairement à d’autres méthodes qui consisteraient à concevoir des fonctionnalités techniques en espérant que les utilisateurs y trouvent un intérêt. Des risques méritent néanmoins d’être mentionnés, car ces méthodes peuvent inquiéter à la fois les designers et les autres membres des projets.

À l’arrivée, les référentiels vont centraliser (notamment) beaucoup d’éléments graphiques de base, que les membres pourront réutiliser en fonction des besoins. Les designers peuvent s’interroger sur cette industrialisation, ne comprenant pas très bien l’avenir de leur rôle. Seront-ils un jour cantonnés à la conception en masse d’éléments de base ? Cette peur peut être atténuée par l’importance des designers dans la conception des expériences, qui va bien au delà de la conception des interfaces (interactions, langage, parcours…).

Cette rationalisation du design peut également faire peser le spectre de l’uniformisation. Les expériences deviennent homogènes, on s’inspire d’autres systèmes généralisés comme ceux de Google ou d’Apple… Toutes les expériences se ressemblent, c’est “pratique” pour les utilisateurs mais on n’a plus de diversité. Pour pallier ce risque qui plane sur les produits, on peut faire intervenir des créatifs juste avant la phase de prototypage pour redonner de l’identité aux expériences, grâce à des éléments différenciants ou des typos adaptées. Coupler cette singularité avec l’homogénéité des UX permet de créer de belles expériences de marque, dont se souviendront vos utilisateurs.