Des expériences utilisateurs harmonieuses grâce au Design System

21 mars 2019

A l’heure où les technologies digitales ne cessent d’évoluer, où de nouvelles expériences utilisateur émergent et où les comportements des consommateurs se transforment en profondeur, l’entreprise fait plus que jamais de la satisfaction client, son leitmotiv et de la simplification du parcours client, son chantier.

Répondre aux besoins et aux nouveaux usages des utilisateurs est devenu une véritable priorité pour les entreprises, qui s’orientent de plus en plus, vers des propositions d’expériences harmonieuses pour leurs utilisateurs. C’est ici qu’entre en jeu, le Design System.

Pour en savoir plus sur cette méthodologie, qui conçoit les produits comme des organismes vivants, nous avons interviewé Thierry Charbonnel, UX/UI Senior Designer.

Qu’est-ce que le Design System ?

Dans l’histoire du design ou de l’architecture, il y a eu de nombreuses variations du concept Design System. Mais le nom est relativement nouveau et son adaptation aux besoins de l’industrie digitale est récente. Library, guidelines, styleguide, visual langage… le Design System s’apparente à une sorte de bibliothèque répertoriant un ensemble d’éléments réutilisables (visuels, composants, …) qui a pour vocation, de servir de référentiels UX et UI pour les designers et les développeurs de produits et services digitaux. C’est à la fois la charte ergonomique et la charte graphique. C’est cet écosystème « cohérent » qui permettra in fine, d’offrir une expérience harmonieuse pour les utilisateurs. Pour une entreprise, il est donc important de savoir comment définir son Design System. Mais il ne faut pas oublier qu’un Design System est avant tout évolutif et il se nourrit des expériences et des compétences des designers et des développeurs qui l’utilisent. Il doit être souple pour pouvoir s’adapter aux résistances et aux évolutions des besoins. Pour moi, la meilleure façon de construire un Design System est d’identifier les ressources existantes au sein de l’entreprise et de définir des premiers objectifs.

Quels sont les objectifs d’un Design System appliqué au digital ?

Un Design System digital doit permettre de concevoir et de déployer plus rapidement, des interfaces utilisateur cohérentes. Pour une banque, les interfaces utilisateur (les écrans) se comptent en centaine de milliers. Ces écrans devant être cohérents et pouvoir évoluer simplement, l’industrialisation de ce processus de conception est indispensable. Elle a pour vocation de garantir la cohérence et la qualité des produits proposés et des expériences associées. Les objectifs constituent la première étape car ils servent de point de départ :  tout ce qui peut, de près ou de loin, les servir peut être inclus dans le Design System digital. Concrètement, pour un designer il s’agit d’identifier les éléments récurrents pouvant y être consignés. Ce qui implique que le concepteur analyse son propre processus de conception, au préalable. Le Design System digital doit rester à l’écoute des besoins des clients.

Quels éléments peuvent être consignés dans un Design System ?

Une fois les objectifs définis, la seconde étape du processus est de déterminer les moyens pour les réaliser. Ces moyens sont généralement des librairies techniques ou graphiques rassemblant différents éléments :

  • Des composants graphiques
  • Des composants modulaires déclinables pour le web et pour le natif
  • Une charte graphique
  • Une police de symboles
  • Une charte éditoriale
  • Une librairie d’iconographies

Comment a été construit le Design System digital 89C3 ?

Pour construire le Design System digital 89C3, nous sommes partis du Design pattern Atomic, définit par Brard Frost. Très structuré et évolué, ce Design pattern est la référence en matière de Design System. Mais, nous l’avons simplifié pour en faciliter l’acceptation et l’appropriation par les intéressés. Nous savions que cette étape de réduction n’était qu’une étape et que tout n’est pas simplifiable. À trop réduire notre modèle, on risquait de rendre notre système simpliste ou trop systématique. Et créer des règles trop simples pouvait aussi devenir un carcan pour la conception.

Que trouvons-nous dans le Design System digital 89C3 ?

Le Design System 89C3 rassemble :

Des éléments fondamentaux :

  • Les couleurs et les logos
  • La typographie
  • Les icônes
  • Les boutons (spécifiques, groupés, cases à cocher…)
  • Les champs de saisie
  • Les curseurs de sélection

Des composants :

  • Les fenêtres modales et les boîtes de dialogue
  • Les tuiles
  • L’autocomplétion et les listes déroulantes
  • Les calendriers
  • Les onglets
  • Les intertitres
  • Les fins de parcours

Des gabarits :

Tous les produits et services n’ont pas le même public. Nos principes ergonomiques et graphiques sont donc organisés par nature de projet (tunnel de souscription, applications de consultation, etc…). Pour chaque nature de projet, des gabarits définissent les principes généraux et les spécificités. Nous pouvons ainsi créer des exceptions sans pour autant remettre en cause les principes généraux. Cette organisation par nature de projet, nous permet aussi de paralléliser les projets plus facilement et simplement. La liste des natures de projet a vocation à progressivement se compléter et s’enrichir.

Le guide :

Nous avons ajouté un guide d’utilisation et d’évangélisation de notre dispositif sous la forme d’un site design.89c3 qui évolue au fur et à mesure. Ce guide est destiné à tous. Très simple et très visuel, il décrit les éléments fondamentaux et les composants, reprend en détail leurs fonctionnements et donne des consignes simples par l’exemple. Les marques y sont également très représentées. Pour mieux définir nos principes, nous avons illustré ce guide d’utilisation avec des exemples « Oui et Non » (Do et Don’t). Les exemples positifs sont aussi importants que les interdits. Ils ont tous deux une valeur pédagogique précise et se complètent. Un interdit en regard d’un exemple positif en dit plus sur le comportement d’un composant qu’un exemple positif seul, ou qu’une longue description. Cette documentation est un vrai travail d’équipe enrichissant qui nous impose d’analyser notre propre méthode de travail et notre démarche individuelle de designer.

Pourquoi avoir créé un Design System 89C3 ?

Dans un premier temps, nous voulions créer de la cohérence. La cohérence visuelle des projets d’une marque est rassurante pour l’utilisateur. Elle inclut les différents projets dans un tout. C’est une vraie valeur pour la marque. Ensuite, nous voulions expliquer et entrer dans le détail. Très sobre, le Design System 89C3 repose principalement sur l’usage de la typographie. Plus un thème est sobre, plus les détails prennent de l’importance. Le Design System 89C3 a vocation à évoluer et s’enrichir en fonction des besoins et attentes des utilisateurs.

Abonnez-vous au Podcast 89C3 :