Comment créer un guide de style: Commencez avec un framework d'interface utilisateur

Questions-réponses avec le concepteur UX d’AdRoll sur les raisons pour lesquelles nous l’avons fait et ce que nous avons appris

Ce billet de blog est le premier d’une série décrivant le parcours du guide de style, de sa création à la fourniture d’un cadre d’interface utilisateur mature à nos équipes, puis à la synthèse d’une voix et d’un ton uniques pour nos produits.

Salut! Je suis Arya Srinivasan, chercheuse UX chez AdRoll. J'ai rencontré Mason Lee, un concepteur UX travaillant sur le produit API d'annonces AdRoll, pour parler de son travail de développement du guide de style d'AdRoll.

Arya: Pour démarrer, pourquoi avez-vous lancé le projet de guide de style? Quel était le problème à résoudre?

Mason: Le problème était une incohérence dans la conception, à la fois d'un produit à l'autre et au sein d'un même produit. Par exemple, un bouton qui doit être identique partout mais dont la couleur, l’épaisseur de la police et le style de la bordure varient.

Les boutons ont une apparence différente dans les simulacres de concepteurs individuels et nos applications.

La croissance rapide d’AdRoll a fait que nous nous sommes concentrés sur la vitesse. Nous sommes maintenant une grande entreprise proposant de nombreux produits. En tant que designer, j’estime qu’il est important pour nous de mettre en avant la cohérence dans la présentation de nos produits: à travers le design.

Pour nous concentrer sur la conception, nous devions d’abord corriger les incohérences existantes. Les concepteurs d'UX ici se concentrent généralement sur un ou deux produits. C'est pourquoi, afin de faire réfléchir notre équipe à la conception de tous les produits, j'ai organisé une réunion hebdomadaire «UI Smackdown» afin de discuter des règles d'utilisation.

Lors de chaque réunion, nous avons examiné les incohérences dans la conception afin de décider d'une conception unique. Après quelques réunions, les concepteurs me demandaient toujours quelle couleur ou quel rembourrage était approprié, etc. Nous avions besoin d'un document central contenant toutes les réponses. J'ai donc construit notre interface utilisateur dans Sketch en tant que ressource pour les concepteurs. Chaque fois que nous réalisons qu’un composant est manquant ou que nous souhaitons inclure un nouveau composant, nous en discutons et nous l’ajoutons au fichier maître de l’interface utilisateur.

Arya: Vous avez indiqué que vous vouliez qu'AdRoll soit une entreprise centrée sur le design. Que voulez-vous dire par là?

Mason: je souhaite qu'AdRoll mette le design à l'avant-plan, de sorte qu'il soit un facteur de différenciation concurrentiel - reconnu par les clients comme un produit bien conçu qui répond réellement à leurs besoins.

Arya: Quels étaient vos objectifs immédiats pour le guide de style? Avez-vous une vision à long terme pour ce projet?

Mason: Mon objectif à court terme est de garantir la cohérence des conceptions entre concepteurs en normalisant nos composants d'interface utilisateur. Je veux que les designers parlent le même langage quand ils parlent de design. Par exemple, dans un modal ou une liste déroulante, les ingénieurs construisent en fonction des suggestions du concepteur. Si les éléments de conception diffèrent d'un concepteur à l'autre, les ingénieurs vont créer le même élément de différentes manières.

Mon objectif à moyen terme est de définir ce style dans notre code dans «RollUp», la bibliothèque de composants d’interface utilisateur interne d’AdRoll. Si nous avons une feuille de style prédéfinie, il suffit à nos ingénieurs de la copier. Les concepteurs et les ingénieurs peuvent parler le même langage.

Arya: Avez-vous rencontré des problèmes lors de la création du guide de style? Comment les avez-vous résolus?

Mason: L'un des plus gros obstacles a été d'obtenir l'adhésion des membres des équipes de produits. Pour faire participer tout le monde, j'ai organisé une réunion avec une liste claire de points à l'ordre du jour à couvrir. J'ai présenté des incohérences dans la conception, telles que des menus déroulants variables entre les produits. Fournir des preuves visuelles déclenche des conversations et, à la fin, les gens se soucient de leur produit et veulent de la cohérence.

Un autre défi a été de décider des règles. Quand on parle de normaliser un composant, il devrait être applicable partout, dans tous les contextes. Vous devez penser à tous les cas. Le composant doit être flexible, mais en même temps suffisamment complet en fonctionnalités pour être facilement utilisable, consommable et applicable.

Voici un exemple de la flexibilité de notre guide de style. Notre décision initiale concernant le remplissage dans cette liste déroulante de géo-ciblage étant trop importante, nous avons donc révisé le guide de style afin de prendre en compte ce cas d'utilisation.Avant (à gauche), Après (à droite)

En fait, je veux lancer un autre défi! Nommer peut être difficile. Comme je l'ai déjà dit, je souhaite que les concepteurs et les ingénieurs parlent le même langage, mais cela doit être fait avec prudence. Pour quelque chose d'aussi simple qu'un menu déroulant, nous avons en réalité plusieurs variantes (une avec des cases à cocher, une autre avec des cases à cocher et un bloc de texte, et l'autre est un menu déroulant standard). Comment nommer trois menus déroulants différents pour qu’il existe une compréhension universelle?

La sémantique est difficile. notre nom doit avoir un sens. Nous avons utilisé des outils de collaboration intéressants pour obtenir un consensus lorsque nous décidons d’un nom. Par exemple, Wake nous a aidés à collecter toutes les questions et problèmes en suspens, à discuter des solutions, à surveiller les décisions de l'interface utilisateur et à poursuivre la conversation avec la plus grande équipe produit via une intégration avec Slack.

Comment nous avons utilisé Wake pour discuter des incohérences de l'interface utilisateur et collaborer sur les règles des composants.

Arya: Y a-t-il quelque chose d’unique dans l’interface utilisateur d’AdRoll que vous deviez prendre en compte lors de la création du guide de style?

Mason: Notre tableau de bord est très chargé en données. En outre, le flux de création de campagne offre aux annonceurs un ensemble de leviers à tirer. Afin de répondre aux besoins des annonceurs moins expérimentés, nous souhaitons disposer de paramètres par défaut efficaces. Dans nos produits, les composants ont des fonctions complexes mais semblent simples et faciles à utiliser.

Arya: Y a-t-il des choses que vous souhaiteriez savoir lorsque vous avez commencé à créer le guide de style?

Mason: J'aurais aimé mieux comprendre le fonctionnement de tous nos produits depuis le début. Par exemple, nous partageons le fonctionnement de nos produits respectifs lors de notre réunion hebdomadaire de critiques de design. Je sais donc comment SendRoll (notre produit de reciblage d’e-mails) fonctionne en surface, mais je n’ai pas la connaissance approfondie de SendRoll que son concepteur sait. Je pense que la compréhension nuancée du produit est certainement utile lors de l’élaboration du guide de rédaction, car j’ai alors une meilleure compréhension de tous les cas d’utilisation potentiels.

Arya: Quel est donc le meilleur moyen de parvenir à cette compréhension commune du processus d’un designer et de son produit?

Mason: Même si nous sommes vraiment concentrés sur l’expédition de nos produits, nous partageons bien notre processus de conception lors de notre réunion hebdomadaire de critique de la conception. Je pense que nous pouvons mieux fermer la boucle après chaque réunion. Comment le concepteur a-t-il intégré les commentaires de la réunion? Une fois que le produit est expédié et utilisé par nos annonceurs, nous pourrions également expliquer comment les annonceurs utilisent les produits en fonction des informations fournies par l'analyse.

Arya: Y a-t-il des ressources que vous avez mentionnées en travaillant sur ce projet?

Mason: J'ai lu Atomic Design de Brad Frost, effectué des recherches en ligne et parlé à d'autres concepteurs d'UX à MeetUps. Si vous pensez qu’une entreprise en particulier utilise un bon design, il est fort probable qu’elle ait parlé de son guide de style quelque part en ligne.

Arya: Quel est le statut de notre guide de style?

Mason: J'ai capturé et revu tous les éléments d'interface utilisateur que nous utilisons dans nos différents produits et les ai regroupés dans des fondations, des composants, des modèles et des pages, qui serviront de source de vérité pour nos conceptions d'interface utilisateur.

Vous pouvez consulter les éléments de base et de l'interface utilisateur des composants sur Dribbble. Si vous connaissez bien Atomic Design, j'ai groupé les niveaux «atome» et «molécule» dans ce que j'appelle des «composants». Par exemple, la combinaison du titre et de l'entrée du formulaire permet aux autres concepteurs de copier facilement un formulaire rempli. champ.

Merci d'avoir lu!

Pendant que nous élaborons notre guide de style, surveillez ces sujets à venir:

  • Comment un framework d'interface utilisateur simplifie la collaboration
  • Développement de nouvelles feuilles de style basées sur le framework UI
  • Comment créer un site Web Guide de style
  • Le voyage pour trouver notre voix et ton