Systèmes de conception sont au sujet des relations

Les systèmes de conception peuvent être incroyablement utiles. Ils fournissent des éléments réutilisables et des directives pour créer une «apparence» cohérente entre les produits. En conséquence, les utilisateurs peuvent utiliser ce qu'ils ont appris d'un produit et l'appliquer à un autre . De même, les équipes peuvent déployer des modèles de navigation ou de révision bien testés, ce qui rend les produits plus fiables . Des systèmes de conception efficaces résolvent les problèmes ennuyeux de manière répétable afin que développeurs et concepteurs puissent se concentrer sur la résolution de nouveaux problèmes.

Pourtant, lorsque quelqu'un utilise le terme «système de conception» lors d'une réunion, je ne suis jamais tout à fait sûr de quelle réaction s'attendre. J'ai constaté de la curiosité et de l'enthousiasme à l'idée d'essayer une nouvelle méthode de travail, mais aussi de la frustration et de l'inquiétude suscitées par l'idée d'un système limitant la créativité des concepteurs. Certains concepteurs soutiennent que les systèmes de conception sapent la créativité ou qu'ils sont des solutions à la recherche d'un problème . Les systèmes de conception peuvent se fragmenter avec le temps ce qui incite les équipes à ne plus les utiliser.

Les systèmes de conception ne disparaissent pas pour autant. Selon un sondage seulement 15% des organisations n'avaient pas de système de conception en 2018, . C'est en baisse de 28% l'année précédente. Certaines équipes utilisent de grands systèmes de conception polyvalents tels que Material Design de Google, tandis que d'autres utilisent des systèmes plus petits et plus personnalisés, tels que REI Cedar et le protocole de Mozilla Protocol .

habiliter les équipes, pas les limiter. Pour que cela se produise, nous devons commencer à penser de manière plus holistique. Un système de conception n’est pas simplement du code, des dessins ou de la documentation. C’est toutes ces choses, plus des relations entre les personnes qui font le système et les personnes qui l’utilisent. Cela inclut non seulement les fichiers CSS et les documents Sketch, mais également la confiance, la communication et la propriété partagée. Il s'avère que tout un domaine d'étude est consacré à l'exploration de tels systèmes.

Une vue d’ensemble

Un article de 1960 intitulé «Systèmes socio-techniques» explorait les interactions entre la technologie, les humains et l’environnement plus vaste dans lequel ils exister. Enid Mumford a expliqué que les chercheurs avaient commencé par étudier comment améliorer les relations entre les gestionnaires et les employés, mais que dans les années 1980, ils cherchaient à rendre le travail plus efficace et plus rentable. En 2011, Gordon Baxter et Ian Sommerville ont écrit que cette recherche contribuait à inspirer la conception centrée sur l'utilisateur et qu'il restait encore beaucoup à faire.

Baxter et Sommerville ont soutenu qu'aujourd'hui, il y a encore tension entre recherche «humaniste», axée sur la qualité de vie des employés, et recherche «managériale», axée sur leur productivité. Ils ont également expliqué qu'il était important de prendre en compte la technologie et les interactions humaines: «La performance du système repose sur l'optimisation conjointe des sous-systèmes techniques et sociaux.»

Je dirais que les systèmes de conception sont socio-techniques. systèmes. Ils impliquent des interactions entre les personnes qui créent le système, les personnes qui créent les produits utilisant le système et les utilisateurs finaux qui interagissent avec ces produits. Ils évoquent également la même tension entre efficacité et humanisme que celle observée par Baxter et Sommerville.

Les systèmes de conception ne sont pas composés uniquement d’images et de codes; ils impliquent des conversations entre concepteurs, développeurs, chefs de produits, PDG et des personnes aléatoires sur GitHub. Ces interactions se produisent dans différents contextes – une entreprise, une communauté open source, une maison – et se produisent au-delà des cultures et des frontières organisationnelles. Construire une équipe peut signifier rassembler des personnes issues de disciplines telles que animation conception sonore visualisation de données haptique et rédaction . Créer un système de conception réussi nécessite une part égale d'expertise technique et de compétences générales.

Et pourtant, parcourez les agrégateurs de conception ou d'ingénierie et vous constaterez probablement que l'accent est mis sur ce «sous-système technique» – code et outils, plutôt que sur les gens et les conversations. Quel outil de création est le meilleur pour garder une trace des jetons de conception? Quelles technologies JavaScript devraient être utilisées pour créer des composants réutilisables – React, des composants Web ou autre chose? Quel est le meilleur outil de compilation?

La réponse à ces questions est, bien sûr, «ça dépend!» Qui concevra, construira et utilisera le système? Quels sont leurs besoins? Quelles sont leurs contraintes? Avec quels outils et technologies sont-ils à l'aise?

Pour répondre à ce type de questions, Baxter et Sommerville recommandent deux types d’activités:

• Activités de sensibilisation et de sensibilisation
  En savoir plus sur les diverses personnes qui créeront et participeront au système, et partager cette information au loin.
• Engagement constructif
  Communiquer entre les rôles, construire des prototypes et prendre en compte les aspects technique et social du système.

Digging In

Au début de 2019, je faisais partie d’une équipe – appelons-les «équipe bleue» – qui construisait un système de conception pour une grande organisation. J'ai animé des discussions informelles avec cette équipe et «Team Green», qui utilisait le système de conception pour créer une application Web. Toutes les deux semaines, nous réunissions tous les développeurs et concepteurs autour d'une table pour discuter de ce que nous construisions et des problèmes que nous essayions de résoudre. Ces discussions étaient nos «activités de sensibilisation et de sensibilisation».

Nous n’avions pas la permission de rendre notre système de conception public, nous avons donc fait la meilleure chose: nous l’avions traitée comme un petit projet à code source ouvert au sein de l’organisation. Nous avons mis le code dans un référentiel auquel les deux équipes pouvaient accéder et demandé des contributions. L'équipe bleue était responsable de l'examen et de l'approbation de ces contributions, mais n'importe qui des deux équipes pouvait contribuer. Team blue était également en train de créer sa propre application et était donc à la fois un utilisateur et un dépositaire du système de conception.

Ces interactions ont aidé les équipes à créer de meilleurs produits, mais elles ont tout aussi bien établi la confiance . entre les équipes. Team blue a appris que les utilisateurs utilisaient le système de manière réfléchie et y construisaient de nouvelles idées intelligentes. Team green a appris que le système était vraiment adapté à leurs besoins et leur permettait de travailler avec ce système plutôt que de s’y opposer. Baxter et Sommerville pourraient appeler ce travail «engagement constructif».

Nous avons constaté que les deux équipes étaient sous pression pour apprendre de nouvelles technologies et livrer rapidement un produit complet. En d'autres termes, ils fonctionnaient déjà sous une charge cognitive assez considérable . En conséquence, les deux équipes ont convenu de s’employer à rendre le système facile à utiliser. Cela signifiait éviter le débat sur les composants Web dans son intégralité, en se concentrant principalement sur CSS, et en veillant à ce que notre documentation soit claire et conviviale.

Rassembler tous les éléments

Les organisations de toutes tailles créent des éléments de conception réutilisables pour aider les équipes à créer des applications plus cohérentes et élégantes. Les besoins et la dynamique des différentes organisations sont exprimés dans leurs systèmes de conception. En voici quelques exemples:

• La conception de matériaux de Google a plusieurs implémentations dans différents cadres et langues. Il est utilisé par de nombreuses personnes à l'intérieur et à l'extérieur de Google. Il dispose donc d'une documentation complète et d'une panoplie d'outils pour les applications de conception.
• Le système Fluent Design System de Microsoft cible quatre plates-formes très différentes. Comme Material, il inclut des boîtes à outils pour les concepteurs UX et une documentation complète.
• Le protocole de Mozilla est implémenté en JavaScript Sass et vanilla. Il met fortement l'accent sur l'internationalisation. Alex Gibson affirme que ce système aide Mozilla «à créer des pages Web sur des marques à un rythme plus rapide avec un travail manuel moins répétitif».
• Le Cedar de REI est construit avec des composants Vue.js et ne peut pas être utilisé avec d'autres frameworks JavaScript. Le cèdre est utilisé principalement par les développeurs internes de REI et est étroitement lié à la marque de la société. Le code du système de conception est open source, mais les polices ne le sont pas .
• Le système de conception Lightning de Salesforce est un [CSS] agnostique basé sur JavaScript . Il peut éventuellement être utilisé avec Lightning Component Framework, qui comprend deux implémentations JavaScript : l'une utilisant des composants Web et l'autre utilisant le cadre propriétaire de Aura de Salesforce.
• PatternFly de Red Hat a été créé pour offrir une expérience utilisateur cohérente sur l'ensemble des produits de la plate-forme cloud de la société ce qui lui confère une densité d'informations relativement élevée et une variété de composants de visualisation de données. L’équipe de PatternFly a récemment basculé de Angular à React après quelques expériences avec des composants Web . PatternFly comprend également une implémentation JavaScript indépendante du HTML et du CSS. (Divulgation complète: je suis un ancien chapeau rouge.)
• Le système de conception du carbone d'IBM propose des implémentations dans JavaScript de React, Vue, Angular et vanilla, ainsi que dans une boîte à outils de conception . pour Sketch. L'équipe Carbon expérimente des composants Web . (Conseil de Jonathan Speek pour retrouver ce référentiel .)

Des systèmes comme ceux-ci sont cohérents et fiables, car des personnes appartenant à des équipes et à des rôles différents ont travaillé ensemble pour les construire. Ces systèmes résolvent de vrais problèmes.

Josh Mateo et Brendon Manwaring expliquent que les concepteurs de Spotify «voient leur rôle en tant que contributeurs essentiels et co-auteurs de un système partagé – un système dont ils sont propriétaires. ”Mina Markham se décrit elle-même comme“ le traducteur entre l'ingénierie et le design ”sur le système de design Pantsuit. Jina Anne explore la dynamique de l'équipe et la recherche des utilisateurs derrière les systèmes de conception: «Alerte spoiler!

Construisons-nous des choses

Maintenant que nous avons passé en revue la recherche et quelques exemples, voyons comment construire un nouveau système de conception. Commencez par parler aux gens. Déterminez qui utilisera et contribuera à votre système de conception. Ces personnes couvriront probablement une variété de disciplines – conception, développement, gestion de produit, affaires, etc. Renseignez-vous sur les besoins et les objectifs des personnes et demandez-leur de partager leurs travaux. Envisagez de planifier une réunion informelle avec des collations, du café ou du thé pour créer une atmosphère accueillante. Établissez une communication régulière avec ces personnes. Cela peut vouloir dire rejoindre une salle de discussion partagée ou planifier des réunions régulières. Gardez le ton décontracté et amical et concentrez-vous sur l’écoute.

Pendant que vous parlez de ce sur quoi vous travaillez, recherchez les problèmes et les objectifs communs. Vous constaterez peut-être que les équipes doivent afficher de grandes quantités de données. Elles recherchent donc des outils pour afficher des tables et générer des rapports. Établissez des priorités pour les solutions à ces problèmes.

Recherchez également des motifs et des variations répétées sur des thèmes similaires. Vous constaterez peut-être que les boutons et les formulaires de connexion ont une apparence légèrement différente d’une équipe à l’autre. Quelle est la signification de ces variations? Quelles variations sont intentionnelles – par exemple, un bouton principal par rapport à un bouton secondaire – et quelles variations sont arrivées par accident? Votre système de conception peut nommer et cataloguer les motifs et les variations intentionnels, tout en éliminant les variations «accidentelles».

L’objectif ici est d’établir une boucle de rétroaction rapide avec les utilisateurs du système de conception. Des retours plus rapides et de plus petites itérations peuvent aider à éviter d'aller trop loin dans la mauvaise direction et à devoir changer radicalement de cap. P.J. Onori appelle ces changements soudains et importants «thrash». Il dit qu’un thrash est bon – c’est un signe que vous apprenez et que vous réagissez au changement – mais trop peut perturber. "Vous ne devriez pas craindre le thrash", dit-il, "mais vous devez savoir quand il est utile et comment contribuer à en atténuer les inconvénients. L'un des meilleurs [ways] pour atténuer les inconvénients du thrash est de commencer petit – avec tout . ”

Envisagez de commencer petit en mettant en place quelques éléments de base:

• Un système de contrôle de version à stockez votre code. GitHub, GitLab et Bitbucket sont d'excellentes options ici. Assurez-vous que tous les utilisateurs du système peuvent accéder au code et proposer des modifications. Si possible, envisagez de rendre le code open source afin de toucher un public le plus large possible.
• Code CSS pour implémenter le système. Utilisez les variables Sass ou propriétés personnalisées CSS pour stocker les «jetons de conception», des valeurs communes telles que les largeurs et les couleurs.
• Un fichier package.json qui définit le mode de création et d'installation des applications. le système de conception.
• Documentation HTML expliquant comment utiliser le système de conception, en utilisant idéalement le propre CSS du système.

La documentation de node-sass pour le framework CSS Bulma décrit brièvement ces étapes. plus de détails. Vous pouvez ignorer l’installation et l’importation de Bulma si vous souhaitez commencer à partir de zéro ou l’inclure si vous souhaitez commencer par quelques notions de base.

Vous avez peut-être remarqué que je ne l’ai pas fait. mentionner quelque chose à propos de JavaScript ici. Vous voudrez peut-être ajouter cet élément éventuellement, mais vous n’en aurez pas besoin pour commencer. Il est facile de s’effondrer à la recherche des meilleurs et des plus récents outils JavaScript. Se perdre dans cette recherche peut en compliquer la tâche. Par exemple, « 5 raisons pour lesquelles les composants Web sont parfaits pour les systèmes de conception » et « Pourquoi je n'utilise pas de composants Web » soulèvent des arguments valables, mais vous seul pouvez décider des outils à utiliser bon pour votre système. Commencer par CSS et HTML vous permet de recueillir des commentaires concrets qui vous aideront à prendre cette décision le moment venu.

Lorsque vous publiez de nouvelles versions du système, mettez à jour le numéro de version de votre système pour indiquer les modifications apportées. Utilisez le versioning sémantique pour indiquer ce qui a changé avec un chiffre du type «1.4.0». Incrémentez le dernier chiffre pour les corrections de bugs, le chiffre du milieu pour les nouvelles fonctionnalités et le premier numéro pour les modifications importantes et gênantes. Continuez à communiquer avec les utilisateurs du système de conception, invitez-les à faire part de vos commentaires et contributions, et apportez de petites améliorations au fur et à mesure. Ce mode de travail collaboratif et itératif peut aider à minimiser les «thrash» et à créer un sentiment de propriété partagée.

Enfin, envisagez de publier votre système de conception sous la forme d'un package sur npm afin que les développeurs puissent l'utiliser en exécutant la commande npm installe votre système de conception . Par défaut, les packages npm sont publics, mais vous pouvez également publier un package privé le publier sur un registre privé ou demander aux développeurs d'installer le package directement à partir d'un système de contrôle de version . L'utilisation d'un référentiel de packages facilitera la découverte et l'installation des mises à jour, mais l'installation directement à partir du contrôle de version peut être une solution simple à court terme pour aider les équipes à démarrer.

Si vous souhaitez en savoir plus sur le côté ingénierie de Katie Sylor-Miller Construire son système de design offre une plongée profonde fantastique. (Divulgation complète: j’ai travaillé avec Katie.)

Wraping Up

Les systèmes de conception sont constitués de code, de conceptions et de documentation, ainsi que de relations, de communication et de confiance mutuelle. En d’autres termes, ce sont des systèmes socio-techniques. Pour construire un système de conception, ne commencez pas par écrire du code et par choisir des outils; commencez par parler aux personnes qui utiliseront le système. Informez-vous sur leurs besoins et leurs contraintes et aidez-les à résoudre leurs problèmes. Lorsque vous prenez des décisions techniques, de conception ou de stratégie, prenez en compte les besoins de ces personnes par rapport à la meilleure façon théorique de faire les choses. Commencez petit, parcourez et communiquez au fur et à mesure. Gardez votre système aussi simple que possible pour minimiser les accidents et invitez les commentaires et les contributions pour créer un sentiment de propriété partagée.

En accordant un poids égal aux considérations techniques et interpersonnelles, nous pouvons obtenir les avantages des systèmes de conception tout en évitant les pièges. Nous pouvons travailler de manière efficace et sans cruauté; nous n’avons pas à choisir l’un sur l’autre. Nous pouvons responsabiliser les équipes plutôt que de les limiter. Les équipes habilitées nous aident finalement à mieux servir nos utilisateurs – ce qui, après tout, explique pourquoi nous sommes ici en premier lieu.

Pour en savoir plus sur SmashingMag:

(ah, il)