Como criar um guia de estilo: Comece com uma estrutura de interface do usuário

Perguntas e respostas com o UX Designer da AdRoll sobre por que fizemos e o que aprendemos

Esta postagem no blog é a primeira de uma série que narra a jornada do guia de estilo, desde a criação, para fornecer uma estrutura de interface do usuário madura para nossas equipes e, eventualmente, destilar uma voz e um tom exclusivos para nossos produtos.

Oi! Sou Arya Srinivasan, pesquisadora de UX da AdRoll. Sentei-me com Mason Lee, um designer de UX que trabalha no produto de API de anúncios nativos da AdRoll, para falar sobre seu trabalho no desenvolvimento do guia de estilo da AdRoll.

Arya: Para começar, por que você começou o projeto do guia de estilo? Qual era o problema que precisava ser resolvido?

Mason: O problema era inconsistência no design, tanto em produtos quanto em um único produto. Por exemplo, um botão que deve ter a mesma aparência em todos os lugares, mas na verdade varia de cor, espessura da fonte e estilo da borda.

Os botões têm aparência diferente na simulação de designers individuais e em nossos aplicativos.

O rápido crescimento da AdRoll significava que estávamos focados na velocidade. Agora somos uma empresa maior com vários produtos, portanto, como designer, acredito que é importante enfatizar a consistência na forma como apresentamos nossos produtos: por meio do design.

Para focar no design, primeiro precisamos corrigir as inconsistências existentes. Os designers de UX aqui geralmente se concentram em um ou dois produtos; portanto, para fazer com que nossa equipe pense sobre o design em todos os produtos, montei uma reunião semanal de “UI Smackdown” para discutir as diretrizes de interface do usuário.

Em cada reunião, analisamos as inconsistências de design para decidir sobre um único design. Depois de algumas reuniões, os designers ainda me perguntaram sobre a cor ou o preenchimento corretos, etc. Precisávamos de um documento central com todas as respostas, então construí nosso Framework de interface do usuário no Sketch como um recurso para designers. Sempre que percebemos que há um componente ausente ou queremos incluir um novo componente, discutimos e adicionamos ao arquivo mestre da UI Framework.

Arya: Você mencionou que deseja que o AdRoll seja uma empresa centrada no design - o que você quer dizer com isso?

Mason: quero que o AdRoll coloque o design em primeiro plano para que ele seja um diferencial competitivo - reconhecido pelos clientes como um produto bem projetado que realmente resolve suas necessidades.

Arya: Quais foram seus objetivos imediatos para o guia de estilo? Você tem uma visão de longo prazo para este projeto?

Mason: Meu objetivo a curto prazo é ter consistência entre os designers, padronizando nossos componentes de interface do usuário. Quero que os designers falem o mesmo idioma ao falar sobre design. Por exemplo, em um modal ou suspenso, os engenheiros constroem com base em como o designer sugere. Se os elementos do design forem diferentes entre os designers, os engenheiros farão o mesmo elemento de maneiras diferentes.

Meu objetivo a médio prazo é definir esse estilo em nosso código em "RollUp", a biblioteca interna de componentes de interface do usuário do AdRoll. Se tivermos uma folha de estilos predefinida, tudo que nossos engenheiros precisam fazer é copiá-la. Designers e engenheiros podem falar o mesmo idioma.

Arya: Você teve algum problema ao criar o guia de estilo? Como você os resolveu?

Mason: Um dos maiores obstáculos foi conseguir o apoio de pessoas de equipes de produtos. Para envolver todos, organizei uma reunião com uma lista clara de itens da agenda a serem abordados. Apresentei inconsistências de design, como a variação de menus suspensos entre produtos. O fornecimento de evidências visuais desencadeia conversas e, no final, as pessoas se preocupam com seu produto e desejam consistência.

Outro desafio foi decidir as regras. Ao falar sobre a padronização de um componente, ele deve ser aplicável em qualquer lugar, em qualquer contexto. Você tem que pensar em todos os casos extremos. O componente precisa ser flexível, mas ao mesmo tempo completo o recurso o suficiente para ser facilmente utilizável, consumível e aplicável.

Aqui está um exemplo da flexibilidade do nosso guia de estilo. Como nossa decisão inicial para o preenchimento nesse menu suspenso de segmentação geográfica foi muito grande, revisamos o guia de estilo para explicar esse caso de uso.Antes (esquerda), Depois (direita)

Na verdade, quero chamar mais um desafio! Nomear pode ser difícil. Como eu disse antes, quero que designers e engenheiros falem o mesmo idioma, mas isso precisa ser feito com cuidado. Para algo tão simples como um menu suspenso, na verdade temos várias variações (uma com caixas de seleção, outra com caixas de seleção e um bloco de texto e outra é um menu suspenso padrão). Como nomeamos três listas suspensas diferentes, para que haja uma compreensão universal de qual é qual?

A semântica é desafiadora; nossa nomeação precisa fazer sentido. Usamos algumas ferramentas interessantes de colaboração para obter um consenso ao decidir um nome. Por exemplo, Wake nos ajudou a coletar todas as questões e problemas em aberto, discutir soluções, monitorar as decisões de UI Smackdown e continuar a conversa com a equipe maior do produto por meio de uma integração com o Slack.

Como usamos o Wake para discutir as inconsistências da interface do usuário e colaborar nas regras dos componentes.

Arya: Há algo único na interface do usuário do AdRoll que você deve considerar ao criar o guia de estilo?

Mason: Nosso painel é muito pesado em dados. Além disso, o fluxo de criação da campanha oferece aos anunciantes várias alavancas. Para atender às necessidades de anunciantes menos experientes, pretendemos ter configurações padrão eficazes. Em nossos produtos, os componentes têm funções complexas, mas parecem simples e fáceis de usar.

Arya: Há algumas coisas que você gostaria de saber quando começou a criar o guia de estilo?

Mason: Eu gostaria de ter uma compreensão mais profunda de como todos os nossos produtos funcionam desde o início. Por exemplo, compartilhamos o funcionamento de nossos respectivos produtos em nossa reunião semanal de crítica de design, para que eu saiba como o SendRoll (nosso produto de redirecionamento de e-mail) funciona na superfície, mas não tenho o profundo conhecimento do SendRoll que o designer faz. Penso que a compreensão diferenciada do produto definitivamente ajuda ao trabalhar no guia de estilo, porque entendo melhor todos os possíveis casos de uso.

Arya: Então, qual é a melhor maneira de alcançar esse entendimento comum do processo de um designer e seu produto?

Mason: apesar de estarmos realmente focados no envio de nossos produtos, fazemos um bom trabalho em compartilhar nosso processo de design em nossa reunião semanal de crítica de design. Acho que podemos melhorar o fechamento do ciclo após cada reunião - como o designer incorporou o feedback da reunião? Depois que o produto é enviado e usado por nossos anunciantes, também podemos compartilhar como os anunciantes estão usando os produtos com base nas informações da análise.

Arya: Havia algum recurso a que você se referiu enquanto trabalhava neste projeto?

Mason: Eu li o Atomic Design de Brad Frost, pesquisei on-line e conversei com outros designers de UX no MeetUps. Se você acha que uma empresa em particular pratica um bom design, é bem provável que tenham falado sobre seu guia de estilo em algum lugar on-line.

Arya: Qual é o status do nosso guia de estilo?

Mason: capturei e revisei todos os elementos da interface do usuário que usamos em nossos diferentes produtos e os agrupei em fundações, componentes, padrões e páginas, que servirão como fonte de verdade para nossos designs de interface do usuário.

Você pode conferir os elementos de interface do usuário de base e componente no Dribbble. Se você conhece o Atomic Design, agrupei os níveis de "átomo" e "molécula" no que chamo de "componentes". Por exemplo, combinar o título do formulário e a entrada facilita a outros designers copiarem facilmente um formulário preenchido campo.

Obrigado pela leitura!

Preste atenção nos próximos tópicos à medida que desenvolvemos nosso guia de estilo:

  • Como um UI Framework simplifica a colaboração
  • Desenvolvendo novas folhas de estilo baseadas no UI Framework
  • Como criar um site do Style Guide
  • A jornada para encontrar nossa voz e tom