Predix Design System ou l’Atomic Design de GE

Voici un témoignage intéressant de Jeff Crossman de GE, sur lequel je viens de tomber qui explique comment ils ont abandonné l’Atomic design pour s’approprier un système modulaire de conception pour leurs applications.

Ce premier système s’appuyait sur une base de composants d’interface, des modèles d’interaction regroupés en fonction. Elle a fait ses preuves dans une conduite d’adoption de normes de conception par une dizaine de concepteurs et 40 000 développeur répartis dans le monde. Et elle a permis de concevoir des logiciels d’apparence cohérente. Mais cette méthode mise en application dans de grandes structures, est confrontée à la co-habitation de plusieurs équipes de design et développement qui mettent en oeuvre les mêmes méthode de conception et management pour garantir l’homogénéité des produits du groupe. Difficile dans ses conditions, d’avoir une marge de liberté créative.
Ce premier système de conception s’est révélé bien adapté pour les boutons et les zones de texte, mais n’a pas évolué pour répondre à nos besoins en termes de modèles plus complexes, tels que la cartographie ou la visualisation de données. Le besoin constant de modifier et d’étendre ces modèles de conception par application, allait à l’encontre de l’objectif d’un tel système de conception et engageait dans du gaspillage d’énergie. Par ailleurs, fournir un simple kit de pièces n’est pas suffisant, ne donnant pas de directives de conception.

Une approche plus pérenne était nécessaire, l’atomic design devenant difficile a tenir dans une structure telle que GE.

Fort des limites de cette première expérience, GE voulait mettre en place une approche qui mette l’accent sur l’apprentissage et le partage. Il fallait se sortir d’une collection de composants s’appuyant sur des axes théoriques de conception. Ce nouveau système devait démontrer comment les modèles de conception ont été mis en oeuvre dans des produits et de les documenter pour que d’autres concepteurs puissent les utiliser pour des cas spécifiques.
L’objectif avec ce nouveau système de conception est de permettre aux équipes de produits de concentrer leurs efforts sur la résolution des nouveaux besoins des clients, et de leur permettre de partager ces solutions avec le reste de l’entreprise.

ATOMIC DESIGN(AD)

Atomic Design

 

L’Atomic Design* est une manière  d’organiser hiérarchiquement les modèles de conception. Les niveaux hiérarchiques sont :

  • l’atome (niveau de  base) : ce sont des motifs de conception simples, comme un bouton, une zone de texte ou une étiquette.
  • la molécule : c’est une collection d’atome Un formulaire de soumission d’e-mail qui combine le bouton, la zone de texte et l’étiquette dans un modèle plus complexe se trouve au niveau suivant de la hiérarchie (Molécules).
  • l’organismes : il correspondent à l’association de différentes molécules, ou de molécules et d’atomes qui forment un tout cohérent et fonctionnel
  • le template : il correspond à l’organisation des molécules (c’est un pattern)
  • la page :

Chaque niveau ascendant dans la hiérarchie s’appuie sur les modèles plus simples trouvés des niveaux subordonnés . 

Les avantages de cette méthodologie sont doubles. Tout d’abord, lors de la documentation d’un modèle de conception comme un formulaire de soumission d’e-mail, le concepteur n’a pas à réécrire comment les boutons ou les zones de texte fonctionnent. Deuxièmement, le formulaire de soumission d’e-mail fournit une étude de cas réelle sur la façon d’utiliser le bouton, la zone de texte et l’étiquette de manière efficace. Atomic Design facilite l’apprentissage du fonctionnement des modèles dans un système de conception, tout en facilitant la création de contenu pour le système de conception.
 

Adaptation d’AD au contexte GE

Inversion de la hiérarchie

Aujourd’hui, on commence par les éléments principaux de l’interface pour ensuite les assembler en fonction des besoins de chaque page. 

Atomic Design en présentant des Atomes combinées, etc jusqu’à la page, fonctionne bien dans une perspective d’apprentissage pour bien comprendre les niveaux hiérarchiques. GE a trouvé que ce n’était pas bonne clé pour s’engager dans une système de conception.

Une exigence importante que nous avons pour notre nouveau système de conception est d’être une ressource pour l’apprentissage. Nous souhaitons que les concepteurs puissent accéder au site Web du système de conception et non seulement apprendre quels modèles sont disponibles, mais également comment appliquer ces modèles de manière appropriée et significative. Pour ce faire, le concepteur a besoin de contexte – contexte de l’espace problème, ce qu’un utilisateur essaie d’accomplir, et comment les modèles donnés facilitent cet accomplissement. Ce contexte n’existe que sur les niveaux les plus concrets de la conception atomique où les pages et les applications complètes sont documentées. C’est à ces niveaux que nous devons diriger les concepteurs qui cherchent à apprendre à appliquer le système de conception.

Extension de la taxonomie

En plus d’inverser la hiérarchie, nous avons trouvé une valeur pratique en ajoutant deux niveaux d’abstraction: les applications et les principes.

  • Les applications permettent de documenter l’ensemble des informations sur les produits et les activités afin de donner un contexte sur le mode et la raison de l’organisation des pages d’une application.
  • Des principes ont été ajoutés sous les Atomes en tant que référentiel de nos modèles d’interaction généralisés; des modèles tels que comment et pourquoi utiliser des animations ou la manière correcte de tronquer le texte. Ce sont les modèles fondamentaux que les concepteurs doivent connaître et suivre lors de la création de nouveaux modèles, mais qui n’ont pas de code source en eux-mêmes. 

Predix Design System

Predix design System

Applications

C’est le point d’entrée du système de conception. C’est là que nous documentons les différentes applications ou produits construits en utilisant le système de conception. Les applications peuvent être considérées comme des études de cas qui sont ancrées dans la hiérarchie du système de conception. Chaque entrée d’application contient le contexte nécessaire pour comprendre ce que l’application fait, l’espace de problème dans lequel elle se trouve, comment elle répond aux besoins des clients et son organisation unique des fonctionnalités.

Features

Les Features (caractéristiques) sont les interfaces qui, en travaillant ensemble, permettent aux utilisateurs d’accomplir une tâche ou de résoudre un problème. Comme collections de fonctionnalités qui offrent de la valeur à vos utilisateurs et clients, les features ne doivent pas nécessairement être sexy. Une feature pour gérer les comptes utilisateurs et les autorisations ne saisira jamais les titres, mais c’est très important pour la réussite de nombreuses applications d’entreprise. C’est également quelque chose qui devrait être cohérent et réutilisable dans les différentes offres d’applications d’une entreprise.
Par certains côtés, les features s’apparentent à Pages dans l’Atomic Design. En fait, la transition de Pages en features a été le dernier changement que nous avons adopté. Se concentrer sur une caractéristique au lieu d’une page singulière nous permet de fournir plus de contexte sur le comment et le pourquoi un utilisateur d’une application navigue d’un écran à l’autre pour accomplir une tâche.

 

Templates

Le template n’est pas un concept étranger pour les concepteurs ou les développeurs. Il existe pour documenter la disposition et la structure d’une section ou l’intégralité d’une interface. Dans Atomic Design, les modèles sont réservés pour la mise en page d’une page entière. Dans notre système, nous étendons ce rôle juste un peu pour aider à éliminer le besoin du niveau Organismes de l’Atomic Design.

Suppression du niveau Organismes

Il était difficile de déterminer si un motif relevait de la combinaison d’atomes ou de molécules, demandant un niveau trop important d’expertise avec le contenu du système de conception. Nous avons  donc distribué son contenu dans les deux niveaux adjacents. Les patterns qui traitent plus de disposition (en-tête, pieds de page) sont passés dans les templates, tandis que les modèles qui fournissent des interactions plus complexes (visualisations de données) restent au niveau Molecules, même s’ils contiennent eux-mêmes des molécules.

Components

Les components (Molecules in Atomic Design), contiennent les pattern d’interface utilisateur qui se trouvent du côté modérément complexe du spectre. Les modèles pour les champs de recherche, les tableaux de données et les sélecteurs de plage sont des exemples d’éléments que l’on trouve dans les components. Components seront l’un des niveaux les plus utilisés dans la hiérarchie pour les concepteurs et les développeurs d’ou le choix de ce terme familier pour graviter vers eux.

Basics

Les basic (atomes d’Atomic Design) contiennent les modèles de conception les plus simples du spectre. Les contrôles de l’interface utilisateur qui ont une balise html standard sont la forme la plus évidente des basics. A ce niveau, on peu citer : les boutons, les cases à cocher et les liens. Basics, ce sont les plus petites structures d’une interface utilisateur qui ne peuvent plus être décomposées. 

Principles

Les principes, comme son nom l’indique, sont les principes directeurs que les concepteurs doivent référencer et respecter lorsqu’ils créent de nouveaux modèles de design. Les principes sont le niveau fondamental du système de conception et le fondent dans une logique prévisible. Des exemples de principes pourraient être l’utilisation appropriée du défilement infini sur la pagination, ou comment la troncature du texte devrait fonctionner. Les Principes fournissent une continuité philosophique, mais ne fournissent aucun code réel.

En pratique

Au lancement, Predix Design System comprenait des modèles de conception créés et documentés par l’équipe de conception de la plate-forme Predix, ainsi que des modèles fournis par des équipes construisant des produits au-dessus de Predix. Le lancement avec les contributions de plusieurs équipes nous a permis de remplir toute la hiérarchie du système de conception avec du contenu. L’équipe de la plate-forme, en tant que responsable du système de conception, a fourni la plupart des modèles de conception fondamentaux pour les principes, les bases, les composants et les modèles.

L’inclusion de modèles de conception créés par plusieurs équipes de produits a non seulement aidé à remplir la hiérarchie du système de conception, mais elle a également démontré comment nous pouvons atteindre nos objectifs de partage et de réutilisation. Les équipes font maintenant appel à des modèles de conception qui ont été utilisés dans d’autres produits et sont désireuses de partager et de montrer leurs créations au reste de la communauté. Basé sur les réactions depuis le lancement, la communauté Predix au sein de GE est désireux à la fois d’apprendre et de partager de nouveaux modèles de conception.

….

 
Sources

 

Publié dans Billets d'humeur