back to top image
-

#home #News

Le Système Design BPCE

Il y a de nombreuses définitions du « Design System » sur internet.

Je n’ai pas de définition idéale. Pour moi, il y a autant de définitions valables que de « Design System ». Chaque entreprise a ses besoins.

Dans l’histoire du design ou de l’architecture, il y a eu de nombreuses variations du concept « Design System ». Le nom est relativement nouveau et son adaptation aux besoins de l’industrie digitale est récente, mais Le Corbusier se posait déjà la question de la relation entre l’humain et son environnement en définissant le Modulor en 1945.

Pour une entreprise, il est plus important de savoir comment définir son « Design System » que d’adopter un modèle ou un autre.

Un « Design System » est avant tout évolutif et il se nourrit des expériences et des compétences de l’équipe. 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 de définir les premiers objectifs.

Objectifs

Un « Design System Digital » doit permettre de concevoir et de déployer des interfaces utilisateurs cohérentes plus rapidement. Ce processus d’industrialisation a pour objectif de garantir cohérence et qualité. Il doit aussi rester à l’écoute des besoins.

En prenant les objectifs comme point de départ, tout ce qui peut, de près ou de loin, servir les objectifs peut-être inclut dans un « Design System ».

Pour un designer, il s’agit d’identifier les principes récurrents pouvant être consignés. Le concepteur doit donc analyser son propre processus de conception.

Moyens

Les objectifs définis, la seconde étape du processus est de définir les moyens. Les moyens sont généralement des librairies techniques ou graphiques.

  • Une bibliothèque de composant graphique
  • Une bibliothèque de composant modulaire déclinable pour le web et pour le natif
  • Une charte graphique
  • Une police de symboles
  • Une charte éditoriale
  • Une librairie d’iconographie

Les interfaces utilisateurs (écrans) pour une banque se comptent en centaine de milliers. Ces écrans doivent être cohérents et doivent pouvoir évoluer simplement. L’industrialisation de ce processus de conception est donc indispensable.

Évolution et corrections

Comme un logiciel informatique, un « Design System » doit être versionné. Une version correspond a une image fixe qui est valable pour un temps donné et qui vient enrichir ou corriger la version précédente.

Le Design System 89C3

Pour construire le « Design System 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.

 

L’Atomic Design

 

s_9F51204F26F3030E9E4CF4396CF9B7943A6E180A57D62EBF4A6982206D0A7C4A_1526159296771_file
Illustration inspired by Our Friend the Atom (Book, 1956)

Chaque niveau ascendant dans la hiérarchie s’appuie sur des modèles plus simples trouvés dans les niveaux inférieurs. L’allégorie de la physique utilisée par l’« Atomic design » m’a personnellement paru comme particulièrement évocatrice et adaptée.

Le principe d’héritage est un des principaux avantages de ce système.
Il partage et emprunte ce concept à de nombreux frameworks de développement et notamment au framework React de Facebook qui plébiscite cette organisation.

L’Atomic Design définit la relation entre les composants. Il permet de comprendre le fonctionnement des modèles tout en facilitant la création de nouveaux composants.

Les avantages de cette méthode sont nombreux :

  1. Lors de la documentation d’un formulaire, le concepteur n’a pas à décrire les interactions des boutons ou le fonctionnement des zones de texte.
  2. Le formulaire fournit un exemple concret de l’utilisation d’un bouton, la zone de texte et d’un label.
  3. Chaque cas concret devient potentiellement un élément de documentation.

 

L’atome est un concept trop abstrait.

s_9F51204F26F3030E9E4CF4396CF9B7943A6E180A57D62EBF4A6982206D0A7C4A_1526159296777_file
Atomic Design

L’acceptation par les équipes de développement a posé plus de questions que nous l’imaginions, et la taxonomie Atomic n’a pas été comprise instinctivement.

Les équipes de GE’s « Predix Design System » ont rencontré le même problème.
Je ne sais pas si ce questionnement est lié, comme l’évoque Jeff Crossman dans son article sur Medium, à une confusion entre une sémantique empruntée au cours de chimie du lycée et le Web Design, mais l’Atomic Design n’a pas reçu l’accueil que l’on espérait.

Nous devions donc, nous aussi, changer de modèle, mais nous ne voulions pas réinventer la roue. Nous avons donc décidé de simplifier le modèle de l’« Atomic design ».

Simplification

Sous l’impulsion du principe de simplicité, nous avons donc commencé par réduire et simplifier la taxonomie de l’« Atomic Design » définie par Brad Frost, pour ne garder que 3 types sur 5.

Nous avons également supprimé toute référence à la physique/chimie.

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.
Créer des règles trop simples pourrait aussi devenir un carcan pour la conception.

Mais nous savions aussi que cette étape était indispensable et qu’elle permettrait une meilleure acceptation du « Design System ». Cette simplification initiale était vitale et elle nous permettrait de définir progressivement notre propre taxonomie.

 

Taxonomie 89C3

s_9F51204F26F3030E9E4CF4396CF9B7943A6E180A57D62EBF4A6982206D0A7C4A_1526159296784_file

Les éléments fondamentaux

 
  • Couleurs & logos
  • Typographie
  • Icônes
  • Boutons
  • Boutons spécifiques
  • Boutons groupés
  • Boutons radio et cases à cocher
  • Boutons toggles
  • Champs de saisie
  • Curseurs de sélection

Les composants

 
  • Fenêtres modales et boites de dialogue
  • Tuiles
  • Autocomplétion et listes déroulantes
  • Calendrier
  • Onglets
  • Intertitre
  • Fin de parcours

Les gabarits

Tous les produits et les services n’ont pas le même public. Nos principes ergonomiques et graphiques sont donc organisés par nature de projets. Tunnel de souscriptions, applications de consultations, etc. Pour chaque nature de projets, des gabarits définissent les principes généraux et les spécificités.

Cette organisation par nature de projet nous a permis de régler le dilemme de cohérence et de flexibilité. En définissant des règles valables dans un cas précis et n’ayant pas vocation à être transposé systématiquement, on organise notre capacité à créer des exceptions sans pour autant remettre en cause les principes généraux.

Cette organisation par nature nous permet aussi de plus facilement paralléliser les projets.
La liste des natures de projet a vocation à progressivement se compléter et s’enrichir.

Un guide

Comme l’explique dans Jhone Maeda de « the laws of SIMPLICITY » la connaissance, simplifie tout. Nous avons donc ajouté un guide d’utilisation et d’évangélisation de notre dispositif.

s_9F51204F26F3030E9E4CF4396CF9B7943A6E180A57D62EBF4A6982206D0A7C4A_1526159296790_file
The laws of SIMPLICITY LAW 4 by John Maeda « Knowledge makes everything simpler. »

En nous appuyant sur le retour d’expérience de GE, nous avons construit un guide PDF qui a très vite atteint ses limites. Ce guide est devenu site qui évolue maintenant, 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, il reprend en détail leurs fonctionnements et donne des consignes simples par l’exemple.

Cohérence et personnalité
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. C’est la première fonction de ce guide.

Expliquer et entrer dans le détail
Très sobre, notre « Design Sytem » repose principalement sur l’usage de la typographie.
Plus un thème est sobre, plus les détails prennent de l’importance. Les alignements et les espaces rythment le thème. Les fondamentaux sont très détaillés. Les marques y sont très représentées.

Oui et Non
En définissant des exemples Oui et Non (Do et Don’t), on définit mieux nos principes.
Les exemples positifs sont aussi importants que les interdits. Ils ont une valeur pédagogique précise et se complètent.

s_9F51204F26F3030E9E4CF4396CF9B7943A6E180A57D62EBF4A6982206D0A7C4A_1526159296793_file

 

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.

Nous n’avons pas encore trouvé la solution idéale de cette équation qui passera probablement par de nombreuses itérations de notre « Design system », mais nous avons beaucoup appris de ces deux premières versions.

SaveSaveSaveSave

 

Liens

Articles

Design Systems Building Future
https://css-tricks.com/design-systems-building-future/

GE’s Predix Design System
https://medium.com/ge-design/ges-predix-design-system-8236d47b0891

In Search of a Living Design System
https://the-pastry-box-project.net/jina-bolton/2015-march-28

Creating a Design System Language
https://www.webdesignerdepot.com/2016/11/creating-a-design-system-language/

Distilling How We Think About Design Systems
https://publication.design.systems/distilling-how-we-think-about-design-systems-b26432eefef9

How to construct a design system
https://medium.freecodecamp.org/how-to-construct-a-design-system-864adbf2a117

Atomic Design by Brad Frost
http://atomicdesign.bradfrost.com

 

Exemples

Atlassian design system
https://atlassian.design

GE’s Predix Design System
https://www.predix-ui.com/#/home

Carbon Design Kit
http://carbondesignsystem.com

IBM Design Language
https://www.ibm.com/design/language/

Material Design by Google
https://material.io

Nachos is Trello’s design system
https://design.trello.com

Polaris design system by Shopify
https://polaris.shopify.com

SaveSaveSaveSave

Par Thierry Charbonnel

thierry_c_photo

UX/UI Senior Designer chez Autre planète pour 89C3.

Twitter