Criando um guia de estilo de interface do usuário para melhor UX

Ouça a versão em áudio deste artigo

Garanta um design de produto coeso e uma experiência do usuário

Em 1976, Johnny Cash lançou One Piece at a Time , uma música que conta a história de um trabalhador de Detroit que passa vinte anos coletando peças de Cadillac roubadas da linha de montagem.

Infelizmente, quando o trabalhador começa a construir seu Cadillac pirata, ele descobre que muitas peças são incompatíveis porque os principais recursos de design mudaram ao longo dos anos. Com um pouco de ingenuidade, o carro personalizado vem junto, mas é uma mistura feia que inspira ridículo onde quer que vá.

O back-end parecia meio engraçado também
Mas nós juntamos e quando terminamos
Bem, foi aí que percebemos que tínhamos apenas uma barbatana caudal.

Designers e desenvolvedores das experiências digitais atuais enfrentam um desafio semelhante. A passagem do tempo é um inimigo formidável capaz de causar estragos na continuidade dos produtos digitais. Com o tempo, os membros da equipe vêm e vão, as tendências evoluem e os recursos mudam. Além disso, o ritmo acelerado de nosso cenário digital moderno significa que a inovação de produtos ocorre em trimestres, não em anos.

Se uma equipe de negócios ou de design não tiver um registro compartilhado que documente a aparência pretendida de um produto, surgirão inconsistências visuais e experimentais, os usuários ficarão frustrados e a reputação da marca será afetada.

Guias de estilo de interface do usuário são uma ferramenta de design e desenvolvimento que traz coesão à interface e à experiência do usuário de um produto digital. Em sua essência, eles:

• Registre todos os elementos de design e interações que ocorrem em um produto
• Liste componentes cruciais da interface do usuário, como botões, tipografia, cor, menus de navegação etc.
• Documente componentes importantes de UX, como estados de foco, preenchimentos suspensos, animações etc.
• Contêm elementos ativos e snippets de código para os desenvolvedores referenciarem e usarem

Antes de examinarmos mais de perto como montar um Guia de Estilo de IU de nível especializado, é importante entender que não existe uma abordagem única para todos. O valor dos guias de estilo vai além das grandes marcas com grandes equipes de produtos. Empresas de médio a pequeno porte que buscam uma experiência digital consistente também se beneficiam quando os Guias de estilo de interface do usuário são feitos sob medida para suas necessidades específicas.

Inclua esses componentes cruciais de design nos guias de estilo da interface do usuário

Os designers familiarizados com as diretrizes de identidade da marca não devem ter problemas para fazer a transição para os Guias de estilo de interface do usuário porque há ampla sobreposição com muitos dos componentes de design cruciais que devem ser incluídos.

Dica profissional: documente apenas componentes de design relevantes. Informações irrelevantes tornam os Guias de estilo de interface do usuário inchados e difíceis de trabalhar.

Esquema de Tipografia

A tipografia é um dos elementos de design de interface mais comuns, portanto, não basta apenas listar os nomes das fontes usadas em um produto. Devem ser fornecidas instruções claras para títulos, legendas, títulos (H1, H2, H3), corpo de texto e legendas.

Além disso, tamanhos de fonte devem ser fornecidos, pesos indicados e estilos definidos. A altura da linha e o kerning também são necessários, e é uma boa ideia escolher uma fonte a ser usada quando surgirem circunstâncias especiais.

Layouts responsivos

Quando os produtos digitais são projetados em torno de sistemas de grade responsivos, os Guias de estilo de interface do usuário devem abordar os layouts de interface em todos os tamanhos de tela. Isso significa incluir notas e exemplos de espaçamento, preenchimento e posicionamento. Também é útil mostrar sobreposições do sistema de grade do produto em relação a diferentes tamanhos de tela.

O grande objetivo aqui é fornecer contexto suficiente para evitar a necessidade de designs de tela únicos. Com o tempo, eles se somam e prejudicam a coesão de um produto digital.

Paleta de cores

Uma das maneiras mais rápidas de destruir uma interface é o uso inconsistente de cores, portanto, as combinações de cores precisam ser claramente definidas. Listar cores e seus valores (HEX, UIColor) é um bom começo, mas pares específicos e exemplos de uso também devem ser fornecidos.

Se o Guia de estilo da interface do usuário estiver fazendo referência a um conjunto de diretrizes de identidade de marca, verifique se um esquema secundário de cores de destaque mais claras está disponível. Se não, crie o seu próprio e documento. Uma seleção de valores de cinza também é útil.

Botões

Quase todas as interfaces incluem botões, portanto, reserve um tempo para documentar seus tamanhos, estilos, cores, posicionamento, espaçamento e elementos tipográficos. Se vários botões forem usados ​​em contextos diferentes, deixe isso claro também.

Componentes de interface do usuário adicionais que podem ser necessários

• Iconografia
• Dicas de ferramentas e popovers
• Modais
• Elementos do formulário
• Tabelas de dados
• Menus de navegação
• Gráficos e visualizações de dados
• Abas
• Interruptores de liga-desliga
• Diálogos
• Listas de grade de conteúdo
• Listas verticais
• Barras de ferramentas
• Seletores de data e hora
• Carregando indicadores
• Caixas de seleção
• Alertas
• Menus suspensos
• Controles deslizantes
• Steppers
• Paginação

Organizar e contextualizar as instruções de design

Além dos componentes de interface do usuário obrigatórios, há vários recursos práticos que facilitam a consulta, navegação e implementação dos Guias de estilo de interface do usuário para empresas e equipes de design.

Índice

Um índice bem organizado e claramente marcado é uma maneira simples de ajudar todos a encontrar rapidamente o que está dentro do documento.

Notas de contexto

É impossível prever todas as decisões de design problemáticas que podem surgir ao longo da vida útil de um produto, portanto, articular a lógica do design por trás dos componentes de interface do usuário usados ​​com frequência pode facilitar a resolução de cenários imprevistos.

Por exemplo:

“Em sua essência, nosso produto é mostrar as melhores imagens de arquitetura de todo o mundo. Por esse motivo, o layout de nossa interface prioriza imagens grandes e chamativas em vez de texto. Sempre que possível, faça das imagens o foco do nosso produto.”

Instruções de Espaçamento e Posicionamento

O espaçamento e o posicionamento geralmente são abordados na seção 'Layouts responsivos'. Dependendo da complexidade do produto digital, as instruções podem consistir em “regras gerais” ou ser bastante granulares.

Faça e não faça

Muitas vezes, pode ser útil definir claramente o que fazer e o que não fazer no design. Por exemplo:

• “ Use a versão de marca de palavra branca do logotipo da nossa empresa no rodapé da interface.”
• “ Não use versões de cores alternativas da marca da nossa empresa em fundos pretos.”

O que fazer e o que não fazer evita o debate e economiza tempo de design e desenvolvimento, mas é sempre melhor fornecer uma nota de contexto como esta:

“Esta lista de O que fazer e o que não fazer cobre uma ampla gama de importantes decisões de design, mas não leva em consideração todos os possíveis usos indevidos dos elementos de design do nosso produto. Com isso em mente, use o melhor julgamento quando surgir a incerteza e faça escolhas que reflitam com precisão a aparência geral do nosso produto.”

Elementos ao vivo e trechos de código

As diretrizes de identidade da marca geralmente são documentos estáticos, mas os Guias de estilo da interface do usuário incluem elementos dinâmicos que funcionam como no produto final - o que significa que os botões se comportam como botões, os menus suspensos na verdade são suspensos e as animações são animadas.

Os snippets de código permitem que os desenvolvedores copiem e colem rapidamente o código dos elementos ativos no back-end de um produto.

Torne os guias de estilo de interface do usuário facilmente acessíveis para equipes de design

Agora que entendemos como criar um guia de estilo e os componentes e recursos incluídos em um Guia de estilo de interface do usuário, mudamos nossa atenção para o compartilhamento e a comunicação. Mais especificamente, quais são as opções para alojar os Guias de estilo da interface do usuário?

Tradicionalmente, os Guias de estilo de interface do usuário existiam como páginas da web. Isso fornece aos designers e desenvolvedores acesso fácil e permite que os elementos de design funcionem como no produto.

Mais recentemente, surgiram várias plataformas baseadas em nuvem, permitindo que as equipes projetem, prototipem e testem produtos de forma colaborativa. Essas mesmas plataformas também são capazes de abrigar guias de estilo de interface do usuário e permitir que os membros da equipe troquem feedback e ideias contínuos.

Vamos ver como algumas dessas plataformas descrevem sua abordagem aos Guias de estilo de interface do usuário.

Figma

“Crie sistemas de design com componentes de interface do usuário vinculados que toda a equipe possa usar. Receba atualizações quando forem feitas alterações em componentes compartilhados”

Estágio

“Bibliotecas como sempre deveriam ter sido: Cores, Propriedades e Elementos... até mesmo tempo de transição — tudo em um componente agora. Edite no local - tudo é um mestre. Substitua tudo o que você não precisa, por instância.”

InVision

“Todos os componentes de marca e UX – incluindo documentação de uso – são gerenciados em um único local. As alterações são sincronizadas com toda a equipe e os designers podem alternar para a versão mais recente ou reverter as atualizações a qualquer momento.”

Material.io

“Crie seu próprio tema Material e crie uma biblioteca de símbolos de marca aplicando alterações de estilo à cor, forma e tipografia. Compartilhe, carregue e apresente iterações de design na Galeria. Em seguida, use o modo de inspeção para acessar a documentação do desenvolvedor.”

Os guias de estilo da interface do usuário devem ser fáceis de usar

Ao montar guias de estilo de interface do usuário, a comunicação não pode ser tida como garantida. As equipes de produto são formadas por pessoas de diferentes disciplinas, origens culturais e experiências profissionais. Use esses princípios para garantir clareza e facilidade de uso.

Layouts simples

Os Guias de estilo de interface do usuário exigem layouts de tela limpos e organizados. Cada tela deve ser bem organizada, claramente rotulada e altamente legível. Não há benefício em sobrecarregar as telas com informações visuais, portanto, procure arranjos que sejam mínimos e espaçosos.

Instruções Concisas

Mantenha as instruções curtas e doces. Evite parágrafos longos e use marcadores. Sempre que possível, demonstre com recursos visuais em vez de palavras.

Cenários de Uso Informativo

Quer saber quando usar esse estilo de controle deslizante sobre aquele? 'Cenários de uso' resolvem esse tipo de confusão. Novamente, os visuais são mais fortes do que as palavras aqui, portanto, forneça exemplos que demonstrem claramente o cenário e o caminho a seguir.

Históricos de versões relevantes

Os produtos digitais são atualizados com frequência. À medida que as equipes de produto procuram refinar cada detalhe da interface, é importante manter um registro contínuo de como os componentes de design evoluíram. Use a discrição aqui—para pequenas empresas e equipes de produtos, manter uma extensa biblioteca de históricos de versões pode ser impraticável.

Os guias de estilo de interface do usuário são um recurso valioso e uma ferramenta de design poderosa

As equipes contemporâneas de design e desenvolvimento valorizam a eficiência e a colaboração multidisciplinar, como evidenciado pelos sistemas de linguagem de design promovidos por grandes marcas como MailChimp, Google e Salesforce.

Os sistemas de linguagem de design permitem que diversas equipes que trabalham em produtos digitais sofisticados se comuniquem usando uma linguagem visual padronizada. Os guias de estilo de interface do usuário são integrados à estrutura dos sistemas de linguagem de design e servem como uma ferramenta confiável para iteração rápida e experiências digitais consistentes.

Ao mesmo tempo, o design não é uma atividade reservada apenas às grandes empresas. Uma gama diversificada de equipes de produtos e projetos digitais podem se beneficiar de guias de estilo de interface do usuário bem construídos, mas os recursos (financeiros, tempo e talento) variam de empresa para empresa.

Por esse motivo, os Guias de estilo de interface do usuário são mais úteis quando são adaptados às necessidades de empresas individuais e equipes de design. O objetivo mais alto de todo Guia de estilo de interface do usuário é um equilíbrio entre clareza e praticidade que leva a experiências de usuário consistentemente agradáveis.

Leia mais no Blog Toptal Design:

• Estilos de fonte para Web e design de impressão
• Design Responsivo - Melhores Práticas e Considerações
• Por que as startups precisam de um guia de estilo
• Práticas recomendadas de usabilidade e design de ícones
• Use sua inspiração - um guia para quadros de humor