Cases de Sucesso de eventos, Tecnologia em eventos | 13 minutos de leitura

UX invisível – criando experiências para sistemas customizáveis

Saiba como criar experiências incríveis a partir de sistemas customizáveis


A maioria de nós, designers, quando ouve falar em “sistema de design”, já sabe do que se trata ou pelo menos tem uma vaga ideia. Com os produtos digitais cada vez mais em alta, vemos mais e mais gente falando sobre o assunto. E nós também queremos dar nossa contribuição sobre o tema.

Resolvemos escrever esse post não só para relembrar o que é e para o que serve, mas também mostrar que ele pode ser mais complexo do que imaginamos. Vamos trazer você pra dentro da nossa realidade aqui na mobLee e apresentar algumas coisas que aprendemos com o nosso produto e como podem mudar a perspectiva que você tem sobre um sistema de design.

Preparado? Vamos nessa!

O que é um sistema de design?

A primeira coisa que queremos reforçar é: um sistema de design NÃO é simplesmente um guia de estilos. Estilos são apenas uma pequena parte de um sistema. Ele é muito mais do que isso, ele será seu companheiro e melhor amigo para todos os seus projetos.

Quando você cria um sistema de design, você está definindo a cara da sua empresa ou produto. Está definindo também como ele se comporta, com quem ele fala e como ele fala. E, o mais importante de tudo: o que seu usuário deverá esperar ao se deparar com ele.

Tudo isso se manifesta em diferentes níveis. No nível mais básico, temos a tipografia, cores e ícones. Esses darão formas para componentes mais complexos, como botões, tabelas e menus. A partir daí, definimos como eles se comportam em conjunto. É a união desses elementos que vai formar cada parte da sua interface.

Você também irá precisar definir as regras que os seus produtos deverão seguir. Quais são os seus princípios? Qual o tom de voz do seu sistema? É formal, descontraído, animado ou sério? Como seus sistema dará feedbacks aos usuários?

E não para por aí. Como disse nosso querido Nathan Curtis, da Eight Shapes:

Um sistema de design não é um projeto. Ele é um produto, que serve outros produtos.

Nathan Curtis

Eight Shapes

Em outras palavras, ele não acaba quando termina. Você não vai (e não deve) terminar seu sistema de design e contá-lo como um job done, que pode ser guardado na gaveta.

Um sistema de design está em constante evolução. A cada novo projeto você pode se deparar com algo diferente e até então inesperado. Não tem problema. Se não há um componente que atenda às necessidades da tarefa, crie-o. Avalie com a equipe se ele segue os princípios definidos e o incorpore ao sistema. Quando alguém futuramente se deparar com um desafio parecido, já saberá por onde seguir, e tudo isso mantendo o jeitinho do seu produto. Seu sistema estará sempre se adaptando, incorporando novas regras e crescendo junto com seus produtos e empresa.

Pode parecer um pouco complexo e em muitos pontos é. Mas tenha certeza que ao definir um sistema de design, você conseguirá ter muito mais confiança e clareza ao tocar todos os seus outros projetos, de mãos dadas com seu novo melhor amigo. :)

Por que construir um sistema de design?

Com todos os elementos acima citados, você já consegue ter uma ideia básica de quais são os benefícios que um sistema de design pode trazer para sua empresa, certo? De qualquer forma, aqui vai uma explicação de alguns deles:

Consistência

Ao projetar um sistema de design, você garante a consistência da sua interface. Mas também mantém a coerência entre diversos produtos e serviços de sua empresa. Por mais que cada ferramenta tenha funções bem diferentes, a forma como seus usuários interagem com elas se mantém. Tudo que você faz será facilmente reconhecido como parte da sua família de produtos.

Eficiência

Decisões são muito mais rápidas. Seguindo as regras e utilizando os elementos e padrões definidos, tudo já está meio caminho andado. A passagem para o desenvolvimento também é super tranquila, pois todos já sabem quais componentes utilizar. Não é preciso criar longas especificações para cada tela. Você só precisa se preocupar com o que realmente importa: encantar seus usuários e criar a melhor experiência para eles.

Flexibilidade

O sistema de design vai te dar as regras gerais de como seus elementos básicos e o produto como um todo devem se comportar. Isso quer dizer que eu não posso fazer nada diferente do que já está lá? Claro que não. O sistema tem princípios exatamente para isso. Você tem várias peças prontas, que sabem como se encaixar umas com as outras para construir algo novo. É como Lego!

Familiaridade

Para seus usuários, utilizar novas ferramentas será muito mais tranquilo. Eles já conhecem sua plataforma e sabem o que esperar dela. E isso se reflete na equipe que desenvolve o produto também. Sabe aquele seu melhor amigo que completa uma frase sua antes de você? Pois é, quando você pensar que precisa de uma nova interação no produto, todos já saberão qual o caminho seguir.

Depois de toda essa propaganda que fizemos e de todos os benefícios que levantamos, você já deve estar com a mão coçando e louco pra ir fazer ou refazer o seu próprio sistema de design. Mas calma lá! Agora que começa a parte legal!
Vem com a gente, vamos dar uma voltinha pelo universo de design da mobLee!

Produtos whitelabel

Aqui na mobLee, nós trabalhamos fazendo dos nossos produtos, produtos dos outros. Ou seja, a inteligência que nós criamos aqui dentro passa a ser do nosso cliente a partir do momento em que ele nos contrata.

Pra facilitar mais ainda, daremos exemplos. Um de nossos produtos é um aplicativo para eventos. Imagine que você, nesse momento, é um organizador de eventos e está a procura de um app para chamar de seu. Coincidência, não?!

Então você vem falar com a gente. Nós temos um aplicativo pronto, que você pode contratar e começar a usar. Ótimo! Mas, você quer que ele tenha a cara do seu evento, o seu jeitinho, certo?

Para isso, você vai nos pedir para usar a sua marca, as suas cores e até mesmo aquela sua fonte “de estimação”. E nós concordamos 100% com você! É o seu evento e tudo que você usar para se comunicar com os seus visitantes tem que ter a sua identidade também. Nesse momento, o nosso produto vira o seu produto.

É mais ou menos assim que funcionam os produtos whitelabel. Eles estão preparados de forma modular e padronizada, para serem colocados no ar de forma rápida, construídos com a nossa expertise no mercado, mas customizados para atender à sua marca. Assim, o custo de produção é muito menor do que fazer um software sob demanda, e a sua empresa ganha mais um canal para interagir com o seu público.

No entanto, apesar de nosso produto não ser realmente nosso, nós da mobLee também temos o nosso lado da história. Precisamos (e queremos) ter para nós todos aqueles benefícios que se tem quando se trabalha com sistemas de design.
E é aí que entra nosso grande desafio: como definir um sistema de design sem pensar nas cores, nas fontes, nos ícones? Como fazer isso numa plataforma whitelabel?

Como definir padrões em produtos whitelabel

É bem simples, só que não. Você precisará definir tudo, sem definir nada.

Quando se trata de um sistema de design whitelabel, você não pode seguir somente as regras da sua empresa. Nada de estipular as fontes a serem usadas, a voz do produto e muito menos suas cores. Mas você deve saber muito bem a estrutura e o comportamento de cada um dos elementos da sua interface.

Vamos começar falando de tipografia. Sim, para que o usuário final entenda quais os elementos mais importantes da tela e saiba por onde começar, você deve ter bem definidos os títulos, corpos de texto e legendas. Mas o seu cliente deve poder aplicar a fonte que bem entender. Ela passa muito da personalidade do negócio.

Seu trabalho será definir uma hierarquia clara do conteúdo e o peso de cada elemento da interface. Assim, não importa a fonte utilizada, o usuário final sempre vai estar por dentro do que está acontecendo.

imagem de comparação entre fontes

Não pense em um estilo de texto específico, mas sim na proporção entre eles

As cores, que costumam ser suas escolhas mais óbvias, passam a ser uma verdadeira incógnita. O cliente terá uma identidade monocromática? Multicolorida? Um verdadeiro arco-íris? Na verdade, não importa.

Sua responsabilidade aqui é definir a função e a intenção de cada uma das cores que vão ser aplicadas aos elementos da interface. Quais elementos são destaques e deveriam ter um tratamento diferenciado? Quais são os itens que o usuário vai poder manipular? Onde preciso prender a atenção da pessoa que está usando a ferramenta?

É sempre bom lembrar que a cor não pode ser seu único recurso para transmitir a mensagem ao usuário. Pense no caso do cliente cuja única cor da marca é um azul. Você vai marcar um campo preenchido de forma incompleta apenas trocando um azul de seleção pelo mesmo azul de foco? Utilize textos claros e apoio de ícones, por exemplo. Isso também ajuda seus usuários daltônicos a usar sua ferramenta com mais facilidade.

E por fim, garanta que haja contraste. A interface pode ser totalmente escura, ou super clean e aberta. Mas certifique-se que nada se perca, sejam textos, botões, imagens ou ícones. Legibilidade em primeiro lugar!

imagem de comparação de cores

Você não vai poder escolher as cores, mas sim a função de cada uma delas

O uso de imagens também é algo delicado. Quem não acha incrível uma capa de um site com uma fotografia profissional? Seu cliente, porém, pode não ter uma equipe para criar imagens para inserir na interface. Você pode dar essa opção, sem dúvida, mas garanta que a falta desse recurso não vai comprometer o resultado final.

Tome bastante cuidado com o uso de texto sobre as imagens. Mais uma vez você vai ter que garantir a legibilidade desse conteúdo. Isso pode ser feito tanto com máscaras como de forma inteligente, com o texto se adaptando à cor de fundo.

Para isso, deixe bastante claro ao seu cliente qual o propósito da imagem. Você está dando a oportunidade para ele incluir uma imagem de fundo em uma tela? Então explique, garanta que ele não vai incluir texto que possa ser encoberto por outro elemento, por exemplo. Tenha certeza que essa imagem de fundo não vai prejudicar a identificação de botões ou outros componentes que possam vir sobre ela.

Imagens podem ser ainda mais complicadas quando lidamos com produtos que devem se adaptar a diferentes tamanhos de telas. Smartphones estão cada vez mais presentes no nosso dia-a-dia. É bem possível que seu usuário precise fazer algo a caminho do trabalho através do celular. Uma grande imagem de banner pode ficar linda num desktop, mas perder todo o seu significado quando redimensionada para um dispositivo móvel.

imagem de comparação entre uma imagem boa e uma ruim

Não impeça imagens na interface, mas garanta que serão usadas corretamente

Por fim, outro ponto importante é a voz do sistema. Comece com algo neutro. Por mais que sua empresa tenha uma personalidade extrovertida, você não vai poder incluir isto totalmente no produto que vai para o usuário final. Seus clientes tratam os clientes deles de uma forma específica, que pode não casar com o que a sua empresa comunica.

Nenhum texto é definitivo. Por mais que você tenha testado e retestado sua interface e seus textos estejam mais do que aprovados, isso não quer dizer que você cobriu todos os casos. Você deve servir à maioria, mas atingir 100% é quase impossível. Pode ser que apenas um cliente seu utilize um termo diferente para alguma função do produto. Pode ser que ele não venda ingressos, apenas faça credenciamento. Deixe que eles façam essas alterações.

Por causa disso, sua interface deve sempre prever modificações de textos. Jamais crie aquele texto específico para encaixar naquela área vazia. Deixe seus elementos respirarem, eles vão se transformar a cada nova encarnação do produto na mão de um cliente diferente. E o texto é parte do que pode se transformar.

Ter essa flexibilidade também vai ajudar com traduções do seu produto. Espanhol muitas vezes ocupa muito mais espaço que o português. Tenha isso em mente e você vai estar preparado até para expandir internacionalmente!

imagem do Seu conteudo x conteudo do cliente

Não faça as telas para o seu conteúdo, mas sim para o que seu cliente pode inserir

Todas essas coisas vão precisar trabalhar juntas em cada elemento que você identificar que é necessário ser construído para a interface. E a cada tela você deve testar como as mudanças possíveis afetam a interface e conferir que está tudo em equilíbrio.

Teste e reteste.

E teste com conteúdo real. Dos mais diversos tipos. Não estamos projetando para uma galeria do Dribble. Seus clientes não são Lorem Ipsum. Aquele usuário que gosta de escrever tudo em caps lock, você está atendendo ele? E aquele que a identidade visual é toda em tons de cinza, tudo certo?

Com esses cuidados seu produto whitelabel estará no caminho certo. Seus clientes terão a sensação de que a plataforma é plenamente deles. Os usuários deles não verão diferença entre a marca e o produto que estão usando. E você terá a tranquilidade de que novos recursos poderão ser lançados sem nenhuma barreira.

Dicas básicas para não esquecer

Bom, até aqui foi bastante coisa né? Deu pra entender que construir um sistema de design para produtos white label é um belo desafio. E você pode cruzar com muitos outros detalhes. Por isso, pra fechar, vamos repassar algumas dicas básicas pra começar o seu sistema:

  • Previna e antecipe. Não importa a forma como seus clientes incluam o conteúdo, você tem que garantir que esse conteúdo seja entendível e bem apresentado. Você precisa atender seu cliente direto muito bem, mas dando ao usuário final as melhores condições de uso do produto.
  • Seja flexível e adaptável. Deixe que seu cliente transforme a interface, fazendo isso de forma controlada. É difícil atender a todos os casos, então dê ferramentas para que ele possa alterar seu produto para atender suas próprias necessidades.
  • Seus clientes podem usar seu produto para coisas que você nem imaginava. Ser customizável implica também em novos usos. Pode ser que com algumas mudanças de vocabulário, um módulo do seu produto seja usado para algo totalmente diferente. Talvez você encontre ali uma nova oportunidade para expandir suas soluções.
  • Eles podem ter a própria voz. Permita que seus clientes alterem os textos da interface. A forma como cada empresa se comunica com seu público é diferente e você deve permitir que eles também possam manifestar seu próprio discurso.
  • Você só precisa cuidar para que as mensagens sejam transmitidas sempre com clareza. Tenha certeza que onde precisar de uma mensagem de feedback, vai existir uma. E que ela vai estar visível e legível para o usuário. Por mais que seu cliente possa fazer alterações numa determinada área, seu comportamento deve ser compreendido facilmente pelo usuário final.
  • E a última e mais importante dica: O trabalho nunca termina! Não deixe seu sistema desatualizado, lembre que ele é seu melhor amigo e, como tal, vocês devem andar sempre de mãos dadas. Essa é uma amizade pra vida inteira e se você cuidar bem dela, temos certeza que não vai se arrepender!

Gostou do post? Comente o que achou das nossas dicas e compartilhe nas redes sociais! :)

*Este post foi escrito por Ana Signori e Mariana Doria.


Compartilhe esse conteúdo!

Uma caixa de correio representando a caixa de entrada de email

Ei, quer nossos conteúdos direto na sua caixa de entrada?

Mais de 25.000 empresas já recebem os nossos conteúdos gratuitos sobre produção e organização de eventos. Cadastre-se agora, receba também!