Ilustrações em UX: Por que se importar com elas no seu produto digital?
Em um tempo não tão distante pesquisamos o mundo de ilustração em UX, vem com a gente conhecer os aprendizados que coletamos com especialistas de mercado. Todo esse aprendizado foi gerado em conjunto com meu parceiro de trabalho na TOTVS Douglas Souza.
🚥 Identidade visual da marca
Existem identidades de uma marca criada pela área de marketing ou agência, porém não respeitam as tendências de ilustração que devem estar nos produtos digitais. A ilustração precisa ter alinhamento com a marca porém precisa também estar atrelada ao que o UX recomenda. Existe uma preocupação para que não deixem claro quem é o criador, deixar genérica para não ser o traço de quem realmente criou e o gosto pessoal aplicado às ilustrações pode ser uma grande barreira.
Um processo de criação que respeite a identidade visual da marca precisa envolver diversas perspectivas: marketing, design, produtos e Design System, se tornando principalmente um trabalho colaborativo.
As ilustrações reforçam o cuidado que a marca tem na experiência do usuário dentro dos produtos digitais, elevando a um outro patamar: o sentimento inconsciente de CUIDADO. Ela precisa estar conectada a diferentes contextos que a marca atua, ela não pode ter uma única maneira de ser lida e precisa comunicar os diferentes contextos.
🚀 Escalabilidade
Possibilitar que qualquer pessoa seja capaz de utilizar as ilustrações a partir do entregável que será produzido.
O processo de ilustração não devem estar atribuído a um único ilustrador. Identifique guardiões e disseminadores também.
Mantenha um grupo colaborativo com atividades que respeitem uma regularidade.
As ilustrações precisam ser componentizáveis: 1) prefira dividir o personagem em cabeça, tronco e pernas; 2) possuir peças de encaixe mais próximas possível de forma geométrica; 3) seguir um grid ou linha de composição; 4) possuir poucos detalhes; 5) estar em posição de frente ou de lado ou composição egípcia, nunca com ponto de fuga ou 3d; 6) crie categorias mais próximas de hero (cena complexa com mais de uma ação), spot hero ou spot (cena simples com uma ação) e spot ou badges (expressão literal do conceito possivelmente um ícone um pouco mais detalhado).
Materiais que precisam estar disponíveis: 1) guia com boas práticas de uso e aplicação das ilustrações e sua categorias; 2) manual com tutorial para replicação das ilustrações com explicações detalhadas; 3) fluxo e processo para criação de novas ilustrações; 4) instruções de como solicitar uma nova ilustração; 5) backlog das ilustrações identificadas; 6) visual guide.
⬆️ Teste de validação
Atualmente existem algumas formas de validar as ilustrações: como design critique com os designers da empresa para coleta dos primeiros feedbacks, na sequência testar com usuários finais. Estes testes podem ser com produtos que estão sendo criados.
Nem todos usuários se atentam a detalhes, assim a expressão do rosto e a postura corporal podem gerar conflito na interpretação da mensagem que a ilustração tenta passar. Por isso, personagens sem rosto foram uma escolha. Em testes iniciais com usuário final, prefira o card sorting com ilustrações que não estão finalizadas, afim de coletar interpretações dos próprios usuários e atrelando aos atributos da marca e/ou illustration system.
Segundo momento é o teste A/B: uma opção com interface normal e outra a interface com ilustração.
Terceiro momento: Incluir ilustrações nos testes de produtos sendo criados e observe como as ilustrações traduzem os sentimentos. Crie uma matriz de sentimentos: tente entender o que o usuário sente. Mostre estilo x aplicações, em uma escala de 1 a 5 para cada palavra dos seus atributos e/ou lista do que queríamos alcançar.
Pode ser aplicado métricas em diversas situações como: medir engajamento, quantos usuários se tornam ativos, medir redução de custos, como ajudam diminuição erros, referências como essas pessoas se agradam com as interfaces.
Tente representar contextos complexos usando metáforas e assim conectar ao storytelling da organização. A ilustração deve ser genérica e que não exija esforço cognitivo dos usuários para interpretar a mensagem.
💎 Design e/ou Ilustração System
As ilustrações precisam ser componentizáveis e possivelmente no Figma / Sketch. Para evitar alteração de proporção, prefira criar tamanhos pré-estabelecidos como: grande, intermediária e reduzida
As ilustrações são parte do design system, são core components e transmitem a mensagem da marca/produto digital.
Comunicar e orientar aos usuários do design system que as ilustrações fazem parte do produto e não podem ser vistas para preencher espaços em branco.
O ponto de ligação entre o design system e o illustration system é o branding.
🧭 Metodologia de criação
Como o illustration system tem pouco material a ser consultado, a metodologia acaba surgindo dentro do próprio time que esta trabalhando nisso.
No início é preciso mapear os cenários, não tenha medo de dedicar tempo necessário à descoberta do conceito da ilustração, pois isso é a base para um excelente sistema.
Abuse dos design critique, chame as pessoas que vão utilizar estas ilustrações assim elas irão se sentir parte do sistema a facilitar a adoção. Além da documentação e entregar um pacote mínimo de ilustrações viáveis.
Fizemos um Meetup no dia 27 de julho para contar um pouco sobre esses aprendizados e você pode conferir agora tudo isso.
Na próximo texto sobre esse assunto vamos abordar como começamos o processo de criação do sistema de ilustração 3.0 da TOTVS.
Um abraço digital e até mais!
