Quand avonsnous besoin d'un système de conception? Une entrevue avec Brad Frost

Les systèmes de conception existent depuis assez longtemps. Nous avons même publié un livre sur les systèmes de conception mais, même s'ils peuvent être difficiles à maintenir, comment savoir quand on en a réellement besoin?

Les systèmes de conception sont une merveille encore outil complexe. Ils nous offrent une base solide sur laquelle nous pouvons nous appuyer pour affronter le paysage numérique de plus en plus diversifié et en évolution rapide. Cependant, comme dans la plupart des domaines dans notre domaine, la partie la plus difficile des systèmes de conception n’est pas des outils de conception ni des structures de code spécifiques;

J'ai eu l'occasion de parler à Brad Frost, auteur du livre Atomic Design qui introduit une méthodologie pour créer et maintenir des systèmes de conception efficaces, et l'un des intervenants. que je suis impatient de faire entrer en scène dans SmashingConf Toronto dans quelques semaines à peine.

Vitaly: Très bien, bonjour à tous et bienvenue de nouveau à l’une de ces interviews. nous parlons à des gens intéressants en coulisse, faisant de la magie, parfois silencieusement, parfois très publiquement, ouvertement, et aujourd'hui, je suis heureux d'avoir avec nous notre seul et unique M. Frosty.

Vitaly: Bonjour, monsieur Brad Frost, comment allons-nous aujourd'hui?

Brad: Bonjour, je vais très bien, merci de m'avoir accueilli Vitaly

Vitaly: Oh, ça me fait plaisir. J’ai hâte de voir et d’explorer certaines des choses que vous allez aborder à Toronto, mais plus précisément, j’ai hâte de voir ce qui se passe dans votre tête maintenant? A quoi pensez-vous en ce moment?

Brad: Oh mon Dieu.

Vitaly: Oui.

Brad: Je pense à, euh, nous faisons un grand système de conception pour un compagnie aérienne, et je corrige donc un [inaudible 00:01:07] excessif et un widget de calendrier de sélecteur de date.

Vitaly: Oh, ça sonne –

Brad: C’est ce que je '

Vitaly: D'accord, cela semble être très amusant.

Brad: Oui, ou quelque chose du genre. ] Vitaly: J'ai entendu des rumeurs, c'est peut-être juste moi, je ne sais pas, mais j'ai entendu des rumeurs selon lesquelles vous êtes impliqué de quelque manière que ce soit dans la conception de systèmes et de conception atomique, alors je me demande. , systèmes de conception, chaque site Web a-t-il vraiment besoin de cela à ce stade de la vie?

Brad: Je le pense généralement, oui. Je veux dire, le degré de formalité autour du système de conception ne correspond probablement pas aux besoins de chaque site Web, mais je pense que chaque site Web pourrait bénéficier des principes d'architecture, de conception et de développement fondés sur des composants. À titre d’exemple, ma femme est bijoutière et ne dispose que d’un site Web de cinq pages. J’ai pu le construire en quatre jours, car je suivais de bons processus de conception et de développement de composants réutilisables. Donc, le premier modèle que je devais créer, je devais évidemment construire tous ces composants en quelque sorte à partir de zéro, mais ensuite, le modèle de la deuxième page, j’ai pu en réutiliser certains et au moment où j’en arrivais au troisième et dernier Cinquième modèle, bon nombre des blocs de construction étaient déjà en place, ce qui a permis à ces derniers de sortir de la chaîne de montage beaucoup plus rapidement.

Brad: Je pense que beaucoup de gens vont en avoir. en contact avec moi et me poser ce genre de questions et dire, bien, je fais ces pages de destination pour une entreprise de marketing et les gens scannent un code QR et aller à ces pages de destination, et ils ont une durée de vie d'un mois au plus ou quelque chose comme ca. C'est comme une sorte de site Web de très courte durée, et ils disent: «Nous aurions pu utiliser un système de conception», et j'ai dit, eh bien oui, vous faites le même type de page encore et encore, et Ainsi, plutôt que de reconstruire ces pages avec un effort de 100% à chaque fois, si vous voulez mettre en place un motif, vous pouvez être aussi intelligent que vous le souhaitez quand il s'agit de les masquer ou de les thématiser ou peu importe et de les rendre esthétiquement uniques.

Brad: Même pour ces choses qui à première vue se sentent très éphémères, ou c'est tout comme une page de destination d'une page, je n'ai sûrement pas besoin d'un système de conception à partir de ça? Oui, en fait, vous pouvez en bénéficier, alors encore une fois, je pense que c’est important. Tout projet pourrait tirer parti d’une conception et d’un développement reposant sur des composants solides. Le tout, "Avez-vous besoin de ce grand site Web glacé (comme un système de conception material.io ou lightning avec un tas de principes de design et une multitude de documents et autres)"? Probablement pas, pour ces sites plus petits, et c’est bien. Mais cela ne signifie pas que vous devriez simplement penser à des choses comme à des écrans individuels ou à des projets individuels.

Vitaly: Alors Brad, encore une chose, quand nous parlons de choses comme encore, les systèmes de conception et ainsi de suite, je pense que les grandes entreprises essaient toujours désespérément de trouver des études de cas, car cette société peut être de préférence notre concurrent, elles construisent un système de conception ou conçoivent un système de conception et elles ont fait de la magie pour elles. Cependant, je ne sais pas s’il existe des données accessibles au public ou des études de cas qui montrent que nous l’avons fait, que notre conversion s’est améliorée, que notre maintenance a été améliorée, que nous construisons plus rapidement, etc. Pensez-vous qu'il y a quelque chose de ce genre ou est-ce encore quelque chose qui reste à découvrir et ensuite vous pourrez voir les avantages d'un système de conception, peut-être des mois, voire des années à l'avance? Est-ce un investissement ou est-ce quelque chose que vous pouvez mesurer efficacement?

Brad: Oui, bonnes questions et les questions relatives aux métriques, il est vraiment difficile de les trouver, des chiffres précis, simplement parce que faites juste une grande refonte où vous avez un site et ensuite vous refaites puis lancez le nouveau site et ensuite vous pouvez consulter Google Analytics et voir quels métriques que vous cherchez, que le poids de la page soit tombé ou le temps passé sur le site a augmenté, ou quels que soient vos paramètres, il est facile de voir ce résultat.

Brad: Évidemment, si vous créez un système de conception, vous devriez toujours pouvoir en voir de ces résultats que de nouveaux projets lancent et sortent dans le monde. Vous devriez voir ces mesures aller dans la bonne direction. Évidemment, c’est un signe que le système de conception fait ce qu’il doit faire, mais il est difficile d’établir des métriques et des études de cas publiques car un grand nombre de métriques permettant de déterminer le succès d’un système de conception fait face à des objectifs internes, n’est-ce pas? Donc, ce n'est pas vraiment comme le site Web public – eh bien, c'est vrai, mais (et encore une fois, vous pouvez suivre cela avec Google Analytics et le reste), mais cela dépend en grande partie de la rapidité des équipes internes.

Brad: À quelle vitesse pouvez-vous obtenir des projets et combien de bugs liés à l'interface utilisateur avez-vous détectés, quels sont vos centres d'assistance clientèle en ce qui concerne les problèmes liés à l'interface utilisateur respectez votre site Web et ce genre de choses, il y a donc beaucoup de métriques qui sont réglées sur le nombre de jitterbugs présents autour de l'interface utilisateur et qui devraient être à la baisse à mesure de l'adoption du système de conception. Ou, par exemple, combien d'appels au service clientèle recevez-vous ou que vous demandez de l'aide pour les tickets de support ("Oh, j'utilise ce navigateur et ce logiciel est défectueux et je ne peux pas le faire.")

Brad: C'est comme si ces choses devraient diminuer avec le temps. Mais comme ces problèmes sont également internes, peu d’entreprises publient ces informations. Il existe quelques exemples, bien qu’ils soient à l’état sauvage, et bon nombre d’entre eux sont résumés dans des articles de blog d’études de cas et autres, mais l’un d’eux qui me vient à l’esprit est le système de conception Westpac. Ils sont gélifiés, leur langage d’expérience global et ils ont des statistiques sur leurs sites Web et des informations sur la manière dont ils ont pu augmenter leur vélocité de 700% ou peu importe. Donc, il y a des choses là-bas, mais une bonne partie – si je ne me trompe pas – tire un peu les chiffres de l'air, comme si on regardait: «Voici ce que nous faisions avant, nous avons pu lancer des projets dans six mois et maintenant avec le système de conception, nous sommes en mesure de les lancer dans six semaines. "Et donc, il suffit de lancer une stratégie de marketing et de dire:" Oh, nous pouvons lancer les choses cinq fois plus vite ", quoi que math fonctionne à. Donc, cela revient à plaire, mais cela correspond généralement aux paramètres que nous souhaitons suivre, car nos employés distribuent rapidement les documents, le code général et la qualité de la conception sont-ils améliorés? Le site présente-t-il moins de problèmes? et sont nos produits, les gens obtiennent des résultats plus rapidement grâce à une expérience utilisateur plus cohérente et cohérente.

Vitaly: Oui, cela a du sens. Je suis curieux cependant, alors quand il s’agit des détails d’un système de conception, c’est très intéressant, car j’ai récemment vu un projet, et c’est aussi quelque chose que j’explorais jadis comme par le passé, mais de temps en temps, on voit des gens utiliser conventions de nommage intéressantes dans leur système de conception. Comme pour trois blogs de tailles différentes, comme le même objet multimédia, ils utiliseraient quelque chose de mémorable plutôt que de fonctionnel. Donc, ils utiliseraient quelque chose comme "ours de maman", "ours de papa", "ours de bébé", mais diriez-vous que, lorsqu'il s'agit de nommer, que préféreriez-vous utiliser, que préféreriez-vous éviter?

Vitaly: Parce que, bien entendu, lorsque vous avez «papa bear», «momma bear», «baby bear», comment vous développez-vous à partir de là si vous avez une quatrième partie de la famille, vous devez nom vraiment pratique pour ce droit? Vaut-il mieux utiliser petit, grand, moyen, comme quels motifs recommanderiez-vous de ne pas nommer des choses, qu'est-ce qui vous convient le mieux?

Brad: Oui, c'est une question difficile que je pense que chaque équipe fait face. La réponse courte est la suivante: utilisez la langue qui convient à l’équipe. Vous ne voulez pas introduire de noms fous et intelligents si une personne a inventé ces noms, et je les ai simplement imposés à tous les autres sans leur implication, je suppose. Et j'ai vu cela arriver avec la conception atomique, qui est une convention de nommage que j'ai créée, mais beaucoup de gens vont prendre cette dénomination et l'adapter ou l'abandonner, ou tout simplement appeler des choses ou les mapper à ce qui est logique pour leurs équipes , comme «Oh, nous appelons ces choses« composants », et nous appelons ces« petites choses »ou« modules »ou autre chose, alors nous allons appeler cela des« éléments », des« modules »et des« composants ». "atomes", "molécules" et "organismes". "

Brad: Et j'aime ça, je pense que c'est vraiment important pour les équipes d'établir un langage qui a du sens avec elles et comment ils pensent déjà et des choses comme ça. Vous ne voulez pas être nouveau, jazzy et inventif si cela n'est pas justifié ou si les gens vont simplement dire: «Attendez, qu'est-ce que c'est encore une maman?». C'est donc important, mais vous parlez aussi de, c'est comme ce qui se passe quand il s'agit de nommer des choses qui pourraient nécessiter de l'espace entre les deux? Donc, des choses comme les tailles de t-shirts. C'est comme, oui, il y a 'petit', 'moyen', 'grand', 'extra grand' ou autre chose, mais si vous avez besoin d'un 'moyen deux' ou d'un 'moyen trois' et d'un 'grand deux' et des choses comme

Brad: Vous finissez donc par coincer ces choses et vous ne vous sentez jamais bien. Mon collègue, Dan Mahr, a récemment parlé de cela en ce qui concerne les tailles de typographie. Un grand nombre de systèmes de conception et de guides de style différents ont tendance à être appelés «de H1» à «H6» pour les différents styles de titre. Mais même cela est un peu trompeur, parce qu’on aime le temps, une rencontre sémantique avec une chose stylistique, qui n’est pas toujours géniale. Mais ensuite, il y a plus de six styles, pas seulement pour les titres de corps, mais certains peuvent aussi être du texte stylisé, des citations en bloc ou des citations de billard. Il a donc exploré cela dans un article récent où il parle de nommage.

Brad: Pour un projet sur lequel nous travaillons actuellement, nous avons essentiellement "typographie préréglée un", "typographie préréglée un", "typographie préréglée quatre", "cinq" et "six", et les premiers sont approximativement mappés en deux tailles et des choses du même genre, mais pour beaucoup d'entre eux, à mesure que le système se développait, et nous disons, Oh, nous avons besoin d'un préréglage supplémentaire, et nous avons besoin de la possibilité d'en ajouter encore plus. , ils sont simplement jetés sur la pile en tant que «typographie préréglée huit», «neuf» et «dix» – et ces noms ne sont pas terriblement intuitifs. Ce n'est pas comme: "Oh, c'est 'bébé ours'" ou autre chose, et "Oh, c'est …" (vous savez, Dan a joué avec les noms de X-men ou autre chose. Vous pourriez être aussi malin que ça. ) Mais en fin de compte, nous avons choisi une convention dans un système qui évolue dans ce sens: "voici ce qui se passe lorsque vous devez ajouter quelque chose de nouveau" et, ce qui est crucial – l'élément crucial de tout cela – est la documentation et la compréhension partagée de ce genre de choses.

Brad: Dans notre guide de style, dans notre site Web de référence pour le système de design, nous avons une page de typographie où nous expliquons, voici ce que 'typographie prédéfinie est le premier' est, et voici quelles sont ses caractéristiques et voici quel usage il devrait être utilisé. Et c'est comme, "Oh, voici 'la typographie préréglée huit'" qui ressemble plus à un kicker, un sourcil vraiment petit, vous savez de quoi je parle, ça dépasse un titre qui pourrait être la catégorie du billet de blog ou peu importe, je ne sais pas, mais c'est un peu stylisé, c'est donc une majuscule, un peu espacé, c'est comme une police plus fine, c'est comme une chose typographique discrète.

Brad: Maintenant, rien de tout cela ne dit "typographie préréglée huit", il vient juste avec l'utilisation, vous devez comprendre, "Oh, ce sont les" styles kicker ". Mais on ne peut pas l'appeler simplement" style kicker "parce que nous utilisez-le réellement pour différentes choses. Nous l'utilisons pour une navigation principale, pour les sourcils ou les kickers au-dessus d'un titre, mais nous l'utilisons également pour un tas d'autres choses, c'est pourquoi je pense qu'il est important d'établir des noms plus agnostiques, plutôt que étroitement associés à ses noms d'usage.

Vitaly: Cela semble logique, bien sûr. J'ai entendu des rumeurs selon lesquelles vous pourriez faire ou couvrir quelque chose dans le sens des systèmes de conception à Toronto? Peut-être que j'ai raison ou peut-être que je me trompe? Peut-être avez-vous même un atelier là-bas – si je ne me trompe pas?

Brad: Oui…

Vitaly: Je me demande donc, pouvez-vous Décrivez brièvement, peut-être dans une minute environ, de quoi vous allez parler, comment va se dérouler la session et comment sera l’atelier?

Brad: Oui . Je suis super excité pour Toronto et l'essentiel de ma session à la conférence sera de se dérouler devant tout le monde, en construisant un système de conception. C'est donc ce que j'appelle un outil d'atelier comme Pattern Lab ou Storybook pour créer un système de conception, les composants ainsi que les écrans que nous construisons à partir de ces composants, comme vivre dans une session. Et c’est pour montrer comment fonctionne ce processus, comment le composant est conduit, ainsi que le processus de conception et de développement et comment nous parcourons cet environnement pour construire de véritables projets pilotes pour le système de conception, ainsi que pour extraire réellement les composants de ces projets.

Brad: C'est donc la session qui me passionne et puis l'atelier est une plongée plus profonde, il y a tellement d'aspects dans une initiative de système de conception, et donc l'atelier est défini de la vente du système de conception à la mise en route du système de conception, en passant par la planification des outils et technologies que nous allons utiliser, quelles méthodologies, quels processus allons-nous utiliser, en lançant un système de conception, l'obtenir dans les produits réels, donc en déployant un système de conception, mais de manière cruciale, peut-être comme l’embout principal, comment pouvons-nous maintenir cela au fil du temps? Comment configurez-vous la structure de votre équipe? Comment configurez-vous votre structure et votre infrastructure technologiques pour prendre en charge un système de conception vivant et respirant? Donc, c’est l’atelier: c’est la soupe aux noix et comment nous construisons et maintenons un système de conception?

Vitaly: Cela semble assez intriguant. Alors peut-être alors juste la dernière question – la dernière question pour vous – et merci beaucoup pour votre temps… Je me demandais si vous aviez appris quelque chose à la dure, des choses que vous ne recommanderiez certainement pas de faire lors de la construction ou de la construction. concevoir, créer ou mettre en place notre système de conception? Quelles sont certaines des dures leçons que vous avez dû apprendre, des choses que vous recommanderiez certainement de ne pas fréquenter?

Brad: Il y en a beaucoup. Je dirais que l'une des choses que j'ai apprises en consultant un groupe de clients est probablement l'une des choses les plus importantes (pièges dans lesquels nous voyons des équipes tomber), c'est qu'elles pensent qu'un système de conception n'est que les composants, et donc je ' Nous avons travaillé avec des équipes pour lesquelles ils ont scindé des équipes entières: «Oh, cette équipe va travailler sur les boutons», «Oh, cette équipe va travailler sur les cartes», et aller travailler à l'étranger »- ça ne marche pas comme ça. Vous ne pouvez pas simplement créer ces choses isolément, puis croiser les doigts et espérer qu'elles se rejoignent pour former une expérience cohérente.

Brad: Notre grande recommandation est la suivante: vous devez commencer par un travail réel. , c’est la raison pour laquelle les projets pilotes sont si importants. C’est comme si vous débutiez avec une chose réelle qui a vraiment besoin d’une construction et que vous l’utilisez ensuite pour créer votre système de conception. Si votre projet pilote est la page d'accueil, vous allez avoir un héros, vous allez avoir des voitures, vous allez avoir un truc pour vous inscrire à la newsletter. Vous devez créer tous ces éléments pour créer la page d'accueil. Ainsi, grâce à la construction de la page d'accueil, vous pouvez extraire ces autres composants. C’est donc mon erreur à éviter est la suivante: ne construisez pas un système de conception de manière isolée. Cela doit être lié aux vrais produits que votre organisation doit fabriquer.

Vitaly: D'accord, c'est logique. Wow, Brad. Je suis impatient de votre session. Je me demandais peut-être que vous ne voudriez pas, je ne sais pas, construire un système de conception pour les horoscopes, ou peut-être pour, je ne sais pas, pour autre chose? Y a-t-il un projet particulier dont vous avez toujours rêvé, peut-être comme pour la NASA, des systèmes de conception pour la NASA?

Brad: Je veux dire que ce serait génial. Je ne sais pas. À mon avis, je n’ai jamais vraiment pensé à cela en tant que client rêvé. Je pense que mon point de mire est celui où la finalité technique et la finalité organisationnelle sont intéressantes. Ils ont des problèmes intéressants à résoudre, alors j'aime travailler avec des clients qui se trouvent à cet endroit et qui se disent: «Oh, nous avons besoin d'aide technique, mais nous avons également besoin de beaucoup d'aide organisationnelle ou culturelle». m être vague ici mais j’adore ce bel endroit entre les deux. Le travail lui-même est bon et je m'amuse beaucoup en tant que développeur Web, mais j'aime aussi beaucoup aider les équipes à établir de meilleurs processus et cultures pour la conception et le développement.

Vitaly: Oui, bien. Écoute Brad, ta curiosité pour les choses, dans les choses, pour voir les choses à fond et les rendre un peu mieux, alors améliorons les choses à Toronto alors.

Brad: J'adorerais .

Vitaly: Très bien, merci. Merci beaucoup d'avoir pris le temps, je suis impatient de vous voir bientôt. Et merci de dire bonjour à Louis également.

Brad: Très bien, merci de m'avoir invité

Vitaly: Bien sûr, avec plaisir! D'accord, à bientôt Brad, merci.

Vitaly: Très bien, merci beaucoup à tous ceux qui se sont joints à nous. Voyons, j'espère en voir certains à Toronto. ainsi que. Ce sera une conférence intéressante avec deux sessions en direct. Et restez à l’écoute, nous aurons plusieurs autres interviews comme celle-ci et, si cela vous intéresse, veuillez nous en informer dans les commentaires ou même poser les questions que nous devrions poser la prochaine fois. Dans cet esprit, signez-vous et à la prochaine fois.

Un rêve!

Créez-vous un système de design en moins d’une heure? C’est fou, mais pas tout à fait impossible.

Nous attendons avec impatience d’accueillir Brad à SmashingConf Toronto 2019 avec une session en direct sur les systèmes de conception de bâtiments. Il montrera comment utiliser Pattern Lab pour créer simultanément des composants frontaux d’un système de conception et plusieurs écrans d’un véritable projet pilote. Nous aimerions vous y voir aussi!

Faites-nous savoir, si cette série d’entrevues vous est utile, et avec qui vous aimeriez nous entretenir, ou quels sujets vous aimeriez que nous couvrions et nous j'y arriverai!

(ra, il)