Padronização e consistência em interfaces Whitelabel
Uma história sobre gerar valor levantando discussões sutis sobre design e usabilidade.
Mais assertividade, menos ruídos
Quem projeta interfaces digitais tem sempre em mãos a poderosa cartilha de Nielsen ajudando a direcionar princípios de usabilidade aos fluxos de navegação, componentes, cenários de erro e continuidade para desenhar uma boa experiência, mas muitas vezes esquecemos que interfaces são, essencialmente, plataformas de comunicação.
Comunicar ao público sobre um serviço, um produto ou uma ação exige um trabalho prévio de definir como esse diálogo vai funcionar com o interlocutor: qual vocabulário, quais cores, formas, composições, convenções, qual memória queremos despertar?
Ao definir os meios de carregar essas mensagens, proporcionamos personalidade às interfaces, que vão gerar percepções e reações emocionais, físicas e psicológicas nas pessoas usuárias.
Não temos controle sobre um resultado universal, mas um levantamento feito com responsabilidade pode estabelecer uma personalidade que estimule e direcione as pessoas usuárias para o caminho de uma boa experiência, com menos ruídos, confusões e desistências.
⠀
E como criar personalidade em interfaces whitelabel?
O termo Whitelabel tem origem na música, um movimento que surgiu ilegalmente no final dos anos 1980, onde as gravadoras forneciam faixas de artistas representados para que DJs de hip-hop gravassem versões mixadas e utilizassem em shows para aumentar o alcance das músicas.
Como modelo de negócio, funciona similarmente: como uma “faixa em branco” que pode ser personalizada e customizada com a identidade visual de outra empresa.
O diretor e artista Brian Tornay representou muito bem este conceito com a projeção mapeada desenhada para personalizar a experiência de compra da Nike — uma única estrutura em branco que comporta, com consistência, uma série linguagens distintas:
Em interfaces digitais o comportamento Whitelabel é análogo: necessita de uma estrutura sólida que acomode as diferentes mensagens que as empresas precisam passar sem perder a consistência.
⠀
Uma interface bonita não vai resolver uma solução errada
Importante lembrar que, por mais que a estética e a usabilidade das interfaces sejam coerentes, é necessário projetar com um objetivo bem definido.
O desenvolvimento de funcionalidades caminha com o design, sendo necessário explorar as necessidades das pessoas usuárias para entender o melhor caminho para criar a comunicação com aquele produto.
Por isso é necessário pesquisar, analisar dados e realizar testes para elaborar estratégias que possam consequentemente levar a uma boa experiência de uso.
⠀
Hash: um case desafiador e subjetivo
Quando comecei a atuar como Product Designer na Hash, fiquei alocada na tribo de Whitelabel, onde desenvolvemos produtos voltados para meios de pagamento, incluindo fluxo de aquisição de maquininhas, dashboard responsiva de gerenciamento de vendas e aplicativo mobile de gerenciamento e carteira.
Os processos de design da empresa contam com um design system poderoso e funcional para as interfaces dos terminais (maquininhas) e a comunicação interna e cultural apresenta uma linguagem unificada, modular e escalável, que representa com clareza a empresa, com personalidade gráfica e útil aos propósitos funcionais dos artefatos (Hashverse).
Entretanto, quando tratamos de interfaces whitelabel, essa linguagem se torna atribuída a cada cliente, passando a representar as diferentes verticais que os utilizam, e não havia uma estrutura definida de linguagem e aplicação de componentes para acomodar essas necessidades.
Observando esse contexto, iniciei um trabalho de pesquisa onde identifiquei pontos de conflito e pude abrir discussões para traçar diretrizes de aplicação de artefatos a fim de introduzir a consistência e padronização das interfaces.
⠀
Linguagem e tom de voz
Para contemplar a subjetividade de uma linguagem whitelabel, devemos estar atentos às diversidades sociais, culturais e étnicas, de gênero, alfabetismo, proficiência, dificuldades físicas e adaptação digital, buscando apresentar o conteúdo considerando os contextos, identidades e necessidades de comunicação de quem os consome, da forma mais abrangente possível.
Pensando nisso, facilitei uma dinâmica com o time de design onde discutimos alguns aspectos gerais para uma linguagem agnóstica, simples, abrangente, inclusiva e acessível nas interfaces, tornando-as compreensíveis por pessoas com diferentes graus de instrução e de escolaridade — e neutra, nos comprometendo com um ambiente diverso e inclusivo.
Após alguns testes e entrevistas, começamos a elaborar um manual de linguagem e tom de voz com três tópicos prioritários, com o intuito de expandir as discussões gradualmente, definindo uma iniciativa de linguagem padronizada para todas as interfaces whitelabel, atreladas aos diferentes mercados de atuação.
1. Capitalização
Havia uma inconsistência no uso de caixa baixa em alguns títulos, subtítulos e labels nas interfaces web e mobile.
A prática de brincar com a capitalização proporciona uma leveza visual e equilibrada em determinados contextos, porém dificulta práticas indispensáveis para uma boa usabilidade de interfaces: o reconhecimento em vez de memorização e a consistência e padrões em textos, como podemos observar no exemplo abaixo:
Para contornar essa inconsistência e manter a leveza visual, definimos algumas boas práticas na utilização desse recurso:
- Caixa baixa: funciona bem se utilizada em trilhas de progresso e informações de status;
- Caixa alta e baixa: utilizada nas demais situações: títulos, subtítulos, botões, rótulos, preenchimentos, textos informativos e textos corridos.
2. Mensagens de erro
As palavras utilizadas em interfaces, sobretudo em mensagens de erro, podem ter grande impacto sobre a experiência das pessoas usuárias, podendo transmitir uma conotação negativa, dependendo do público que se quer atingir e do contexto em que estão inseridas.
Encontramos alguns atritos no uso de interjeições e/ou emojis para atenuar ou suavizar a conotação negativa de mensagens de erro em contextos como: erros genéricos, falta de conexão, validações, requisições, transações, entre outros.
Aproveitando a estrutura das mensagens de erro existentes, divididas em título, subtítulo e texto informativo, optamos por definir o objetivo do conteúdo inserido em cada uma das hierarquias tipográficas da seguinte forma:
Onde:
O título é responsável por informar o que aconteceu: definição resumida, clara e objetiva do erro, com um tom de voz agnóstico, que indique a ocorrência do problema.
O subtítulo informa o por que aconteceu: descrição explicativa do erro em poucas palavras, com uma abordagem cuidadosa, leve, gentil e quando possível, bem humorada, que indique a origem do problema, estimule o entendimento e desperte a simpatia das pessoas usuárias, diminuindo possíveis frustrações e desistências.
O texto informativo explica como resolver: auxílio e oferta de alternativas para a recuperação do erro, direcionando a pessoa usuária com links ou informações que diminuam o tempo necessário para a tomada de decisão e garantam o entendimento das alternativas de solução.
3. Textos de botões e links
Expressões genéricas ou muito técnicas como “Clique aqui”, “ok”, “continuar” ou “submeter” em botões e links podem confundir e gerar um impacto negativo na navegação e também no ranking do site ou aplicativo, visto que os mecanismos de busca vão relacionar o texto da expressão escolhida ao conteúdo final.
Por isso é importante que as expressões utilizadas sinalizem claramente qual a ação a ser realizada. Seja o mais específico possível para que a pessoa usuária saiba exatamente o que vai acontecer ao clicar naquele texto.
Em alguns casos, apenas combinar verbos e substantivos para descrever a tarefa pode ser mais efetivo:
Componentes responsivos e escaláveis
Além da comunicação de linguagem, um dos pontos mais conflitantes nas interfaces analisadas estava concentrado na linguagem visual.
Falta de alinhamento, espaçamentos desequilibrados, botões com diferentes formatos e cores, formulários com diferentes comportamentos, falta de contraste, inconsistência de fontes e pesos e aplicação de ícones de diferentes famílias estavam sendo utilizados em produtos similares.
Manter a consistência entre as telas é essencial para se estabelecer uma experiência fluida e um processo de trabalho replicável para outros contextos.
Depois de muitas análises de fluxos, pesquisas e entrevistas com times de desenvolvimento, risco, dados, operações e onboarding, foi possível chegar em alguns padrões que facilitam as melhorias constantes aplicadas aos produtos.
Grids e breakpoints
O primeiro desafio foi adaptar os layouts a um grid bem estabelecido, a fim manter a consistência visual de espaçamentos, alinhamentos, agrupamentos e espaços em branco.
Tendo em vista que o perfil de usuários finais de produtos whitelabel é muito abrangente (e às vezes até desconhecido), é essencial que as interfaces sejam responsivas e atendam a uma grande variedade de dispositivos. A definição de grids e momentos de quebra (breakpoints) funcionam muito bem para atender a essa necessidade.
Botões, links e formulários
Os componentes mais comprometidos com inconsistências visuais e funcionais foram os botões, formulários e links.
Para resolver, fiz um levantamento das aplicações, identifiquei os atributos em comum e desenhei novos componentes, substituindo-os aos poucos no design system.
Ao mesmo tempo, fui checando os contrastes nos tokens de cor whitelabel e também nas aplicações de cada cliente, a fim de estabelecer uma regra de criação de tokens que deve estar sempre inserido nos padrões de contraste e acessibilidade da WCAG.
Sobre tangibilizar pesquisas e desambiguar processos
O papel do designer não se limita a criar e padronizar elementos de interface.
À medida que o mercado amadurece, é visível que o design gera muito valor às operações, processos e estratégias de uma empresa quando funciona como um pilar essencial ao lado de tecnologia e produto.
Empresas como Google, Facebook, Apple e Uber adotam esse modelo de negócio onde designers são envolvidos no início de estratégias e responsáveis por decisões que vão além da estética e usabilidade, gerando insights e questionando soluções através de pesquisas e análise de dados que podem ter um grande impacto nos negócios, influenciando diretamente no engajamento do produto.
Pensando nisso, unimos as frentes de produto, pesquisa e branding no time de design para desenhar a jornada dos diferentes perfis de usuários a transitar pelos produtos e processos da empresa.
Com os objetivos de sintetizar os documentos e processos estabelecidos, identificar fluxos que precisam ser aperfeiçoados, dar visibilidade da experiência que causamos e planejar a escala dos produtos, pudemos tangibilizar diversas dinâmicas e laboratórios de criação para identificar como estamos lidando com as verticais do negócio no ecossistema da empresa e como poderíamos melhorar as operações, os produtos e a comunicação com os interlocutores.
Com esse documento, pudemos definir alguns padrões a serem replicados na criação de artefatos e comunicação, possibilitando escalar processos mantendo as consistências e a premissa de ser customizável.
Foi um processo longo, de muita pesquisa, análise de documentações existentes, entrevistas e mão na massa para mapear fluxos, rotinas, ferramentas, plataformas e rituais e chegamos a um documento vivo, que deve se manter sempre atualizado de acordo com as prioridades de cada etapa de atuação.
É preciso estar atento e forte
Enxergar o design como um agente de oportunidades de gerar leads, entender comportamentos, atender métricas, mapear necessidades, contextos de uso, pontos de dor, falhas na régua de comunicação e na performance dos produtos aumenta nossa responsabilidade e escopo de atuação, mas é preciso estar aberto a pensar nesses assuntos para criar soluções efetivas e boas experiências através de processos ágeis e inteligentes.
Devemos sempre pensar em conceitos de estrutura, colaboração, fluxo de trabalho, ferramentas e design system para que seja possível escalar processos e produtos com padronização e consistência.
Quando estes produtos têm a premissa de ser customizáveis, estes fundamentos devem estar muito claros e sólidos, para que possam ser replicáveis de maneira intuitiva, aplicados em soluções efetivas e proporcionem fundamentalmente uma boa experiência para quem os utiliza.
Não é um caminho fácil e não existem processos engessados!
Como designers, atuamos com o papel de analisar as variáveis, entender objetivos e trabalhar em estratégias que resultem em uma boa solução que gere valor ao propósito que queremos alcançar. :)
Referências e leituras complementares
- O que é Whitelabel
- Linguagem como parte integrante da User Experience
- Guia de acessibilidade da WCAG
- Chegou a hora de designers entenderem mais de negócios
- 10 Heurísicas de Nielsen
- Um guia completo sobre grids para Design Responsivo
- Livro: Leis da Psicologia aplicadas a UX, de Jon Yablonski
