Ilustração de produto: mais do que enfeite, uma forma de comunicação e empatia
O que é ilustração de produto? Quando usar? Como usar? Por que usar? Como validar?
Empresas como Airbnb, Dropbox, Mailchimp e Shopify têm investido em product illustration (em português: ilustração de produto) para gerar valor, criar empatia e se comunicar. As ilustrações têm uma intenção por trás e não estão lá somente para enfeitar a interface.
Neste artigo busquei explorar algumas dúvidas que tive relacionadas a este assunto. Se você tiver mais informações e quiser contribuir com este artigo, por favor, compartilhe nos comentários.
E se você souber de ilustradores brasileiros atuando no mercado de tecnologia, compartilhe também nos comentários. Adoraria tirar dúvidas e saber mais sobre o ponto de vista deles.
1. O que é ilustração de produto?
Pensando na área de Product Design, a ilustração de produto (product illustration em inglês) é um elemento que serve para adicionar um aspecto humano na experiência do usuário, seja em websites ou aplicativos.
As ilustrações do Google, aquelas atualizadas diariamente na barra de busca, humanizaram o produto e mostraram que existem pessoas trabalhando para o site funcionar:
"Ela apresenta uma identidade ao usuário — que somos todos humanos e que estamos fazendo coisas para você" — Jennifer Hom Ilustradora da Google por 6 anos
O Dropbox usou a ilustração para humanizar seu produto
Michael Jeter, atual líder de ilustração do Dropbox, conta como a ilustração de produto teve um papel importante no desenvolvimento do Dropbox.
Há 10 anos atrás Jon Ying, funcionário que nem se considerava ilustrador, junto com um dos fundadores do Dropbox, apostaram na importância da ilustração para criar conexão, humanizar a marca e traduzir informações complexas sobre o produto, que por si só tinha esse desafio. Salvar arquivos na nuvem, o que é isso? Jon Ying desenhava no papel e com traços simples.
"Jon acreditava que desenhos universais simples estavam conectados em um nível humano e inspirou empatia quando as coisas poderiam não estar funcionando corretamente" — Michael Jeter, Líder de Ilustração do Dropbox
2. Quando usar ilustrações de produto?
A ilustração deve ter um propósito, ser bem sucedida atendendo a uma necessidade. Ela não deve ser apenas um enfeite.
“A ilustração do produto sem um objetivo pode sobrecarregar, ser perturbadora e até irritante. Em vez disso, tenha algo que valha a pena dizer; então diga lindamente.” — Meg Robichaud Líder de Ilustração da Shopify
Sinais de que as ilustrações poderiam ser usadas:
- Usuários estão frustrados ou não sabem o próximo passo;
- Uma feature foi ignorada, mal utilizada ou subutilizada;
- Há muito texto e o texto não está sendo lido ou entendido;
- Existe a necessidade de falar de outra forma com o usuário.
Lugares comuns para usar a ilustração no produto:
- Empty States ou estados vazios: quando não encontrou nenhum resultado, conexão foi perdida, algum erro na página, as informações ainda não foram adicionadas, etc;
- Onboarding: tela de boas vindas, instruções do produto;
- Anúncios ou alertas: conquistas, atualizações, comemorações, momentos especiais;
- Indicadores de progresso: preenchimento do perfil, status de entrega.
3. Como utilizar?
Uma das formas muito aplicadas é através do uso de metáforas.
É muito comum o uso delas no nosso dia a dia e também é algo valorizado nas ilustrações de produto. Essa é uma ótima forma de comunicar ideias abstratas.
A metáfora é um tipo de comparação implícita, sem termo comparativo, estabelecendo uma relação de semelhança, usando termos com significados diferentes do habitual. Por exemplo: A menina é um doce! (fonte)
A líder de ilustração da Shopify vê a habilidade de criar metáforas como um dos principais requisitos para a contratação de um ilustrador para sua equipe:
“…Quero ver que você entende como usar metáforas para fornecer ideias complicadas de maneira agradável e fácil de entender. Nós podemos ensinar o resto. — Líder de ilustração do Shopify”
Ao criar uma ilustração para o produto, pode-se pensar em como seria representar aquela ideia aplicando em outros contextos.
Por exemplo, no momento em que o usuário cria sua loja no Shopify, ele tem a opção de escolher novos aspectos (features) para a loja dele.
O desenho não foi literal. A ilustradora captou um atributo/ideia para transmitir a mensagem e utilizou o sorvete (que seria a loja). Ele poderia ficar melhor se fossem adicionadas novas coberturas (aspectos/features):
O Dropbox utilizou uma metáfora na tela de downgrade do plano. Eles buscaram demonstrar para o usuário como seria ir para um plano com menos espaço.
O aquário representou o espaço que o Dropbox oferece para a pessoa. Fazer um downgrade (escolher um plano inferior) seria como ir para um aquário menor.
4. Por que usar ilustração no produto?
Existem diversos motivos para usar ilustrações no produto. Aqui estão alguns deles:
Para facilitar a absorção e recordação do conteúdo
Nós somos seres visuais e usamos as representações visuais como forma de expressão há milhares de anos. Nosso cérebro tem 30% dos neurônios responsáveis por processar imagens visuais, 8% para o toque e 3% para a audição.
Daniel Kahneman, psicólogo, ganhador do prêmio nobel de economia e autor do livro Thinking Fast and Slow, chamou de Sistema 1 e Sistema 2 dois modelos de pensamentos:
- Sistema 1: aquele que opera de forma automática, rápida, com pouco ou quase sem esforço. Ex.: responder quanto é 2+2 ou entender frases simples.
- Sistema 2: responsável pela atenção em atividades mentalmente trabalhosas, complexas, frequentemente associada às experiências subjetivas de escolha e concentração. Ex.: responder quanto é 17*24. Nesse caso o sistema 1 pede ajuda para o sistema 2, demandando atenção para chegar a um resultado.
Nós operamos 98% do tempo no sistema 1. Essa divisão de trabalho entre o Sistema 1 e o Sistema 2 é algo eficiente, segundo Kahneman, pois elas minimizam esforço e otimizam a perfomance.
Ao olharmos para uma imagem intuitivamente acessamos primeiramente o sistema 1 e dependendo do contexto, podemos a ativar o sistema 2. O suporte visual ajuda na absorção do conteúdo.
A série documental da Netflix Explicando — A Mente (The Mind Explained), utiliza ilustrações/animações para transmitir o conteúdo. Isso torna ele mais atrativo e fácil de ser compreendido.
Outro exemplo do uso do visual para transmitir mensagens é o site da Oribi — ferramenta usada para captar e analisar tráfegos em sites, similar ao Google Analytics, porém, dizem fazer isso de forma mais fácil.
A própria construção do site passa essa mensagem de facilidade de uso. As imagens no site (no estilo de vídeos/gif) representam o que eles fazem e traduzem a informação com poucas ou sem palavras.
Abaixo está uma das imagens do site: o desenvolvedor parece cansado das solicitações do Google Analytics, enquanto a Oribi está tranquila sem precisar do suporte dos desenvolvedores.
Já o uso da imagem de forma não relacionada ou contradizendo o conteúdo pode impactar negativamente na recordação dele, de acordo com o estudo The Effects of Positive and Negative Illustrations On Text Recall.
Os pesquisadores quiseram validar se as ilustrações tinham impacto na recordação do conteúdo e esses foram os resultados:
- 25% das pessoas recordaram o conteúdo quando as ilustrações estavam de acordo com a informação do texto;
- 19% recordaram o conteúdo que não tinha nenhuma ilustração, somente texto;
- 17% recordaram o conteúdo que tinha ilustrações que contradiziam a mensagem escrita do texto.
Para comunicar e expressar
Um exemplo do uso da imagem como forma de comunicação é a camiseta de ícones feita para viajantes. Com 40 ícones representando situações básicas e essenciais para um viajante, ela pode ser usada em países onde a pessoa não domina o idioma. É só apontar para um dos ícones e tentar se comunicar sem a fala.
O Headspace é um dos aplicativos que usa ilustrações/animações para explicar o conteúdo de forma visual e agradável. Algumas ilustrações se utilizam de metáforas que ajudam a comunicar o que está sendo falado.
A ilustração abaixo é de um vídeo do Headspace e o áudio contava como em alguns dias a meditação parece algo fácil. O ilustrador representou essa ideia com um personagem que parece ter habilidades com a bola de basquete, tipo um atleta que domina o assunto.
O áudio comenta que a meditação às vezes pode ser difícil, e neste caso, é representada com uma chuva de bolas de basquete — algo difícil de lidar, imprevisível ou fora de controle.
A ilustração e a animação são elementos que encantam e transmitem uma mensagem de forma atrativa.
Para criar empatia
A ilustração é uma ótima forma de criar empatia e também de mostrar que você se importa. A ilustração de produto serve para espelhar a mente do usuário, levando em consideração seu estado emocional e até mesmo a gravidade do que ele está prestes a fazer.
"Eles podem se esquecer do que você disse, mas nunca vão esquecer como você fez eles se sentirem." — Autor desconhecido
Um exemplo disso é a ilustração no site do Mailchimp (plataforma de automação de marketing e serviço de email marketing).
Quando o usuário está prestes a enviar a newsletter o site mostra uma animação do mascote deles, Freddie, prestes a apertar um botão vermelho, com gotas de suor caindo, mostrando a tensão que pode ser esse momento. Afinal, é possível deletar um post no Twitter ou no Facebook, mas um e-mail não tem volta.
Essa parece uma forma divertida de demonstrar empatia com o sentimento do usuário e ao mesmo tempo convidá-lo à reflexão, lembrando a pessoa de revisar o email antes de enviá-lo.
Acredito que validar esse tipo de animação pode ser importante para entender se o resultado que ela gerou atendia o problema inicial. No caso da animação acima, uma das usuárias disse se sentir mais estressada:
“Oh meu Deus, Mailchimp, eu já estava tão estressada e você está colocando isso na minha frente? Isso me deixa mais estressado!" Usuária do Mailchimp
Depois de finalizar o envio da newsletter eles colocaram uma celebração com um "toca aí!". Simulando algo que poderia acontecer na vida real.
Para influenciar
Na psicologia existe uma técnica chamada Priming que é basicamente como a exposição a uma estímulo pode influenciar nosso comportamento em tarefas subsequentes.
No Google Flights (site para buscar passagens de avião), tem a ilustração de uma paisagem com avião decolando, colaborando para os usuários imaginarem a próxima viagem, aumentando a chance de inconscientemente quererem tomar uma atitude em direção a esse pensamento.
5. Como medir o sucesso das ilustrações?
Depois de entender o estado atual do produto, pensar na intenção da ilustração e quais resultados são esperados com ela, é possível definir quais métricas servirão para medir o sucesso delas.
Não encontrei artigos específicos sobre medir o resultado das ilustrações de produto e nem cases — se tiver algum, compartilhe nos comentários. Abaixo irei explorar algumas formas que acredito ajudarem com isso.
No livro Strategic Writing for UX a autora apresenta algumas métricas para validar a escrita do produto. Imagino que seja possível medir a efetividade das ilustrações seguindo as métricas parecidas usadas para medir a escrita.
Abaixo estão algumas métricas e informações citadas no livro:
Teste A/B
Executar o teste A/B sendo a versão controle uma página ou tela sem a ilustração e a versão de experimento uma página ou tela com ilustração e então medir as seguintes atividades:
Onboarding — medir a média de tempo que uma pessoa nova na plataforma leva para dar os primeiros passos (ex.: fornecer email, ir na página inicial, curtir, comentar, fazer upload ou comprar um item pela primeira vez);
Engajamento (Engajament) — definir o que é valioso para a organização e medir quantas pessoas se tornaram ativas nessa experiência (ex.: número de curtidas);
Completar (Completion) —medir quantas pessoas concluem o comportamento principal (ex: comprar algo). Em alguns casos a conclusão é o mesmo que o engajamento (ex.: curtidas). Outra maneira de pensar sobre a conclusão é o contrário: taxa de abandono (ex.: usuário tinha algo no carrinho mas deixou de comprar);
Retenção (Retention) —se o engajamento puder ser resumido como “pessoas por dia”, a retenção é resumida como “dias por pessoa”. É possível medir se o número de usuários recorrentes aumentou.
Referências (Referrals) — as referências acontecem quando as pessoas que usam a experiência a recomendam para mais pessoas. Medir a taxa de referência quando são feitas alterações em partes que lembram o usuário sobre seus amigos e familiares (ex.: a ilustração foi adicionada no contexto de compartilhamento do produto).
Redução de Custo (Cost) — além de todas a métricas relacionadas ao aumento das métricas positivas da organização, também existem custos reais para serem minimizados. Quando as mudanças na experiência podem aumentar o entendimento e reduzir o número de erros, a organização pode reduzir os custos de determinado comportamento (ex.: pessoas entenderam o que fazer em determinado momento e isso reduziu custos para a empresa).
Reviews, comentários e perguntas
A empresa pode aprender com os reviews deixados no aplicativo e com as menções nas redes sociais. As ilustrações geralmente tem esse poder de se tornarem virais, por isso ela já vem sendo utilizada como estratégia de marketing.
Card sorting
A técnica de card sorting ajuda a entender as expectativas dos usuários e a compreensão deles com os tópicos. Alguns dos benefícios do card sorting:
- Criar estrutura para o site
- Decidir o que colocar na página inicial
- Nomear categorias e navegação
A Youse (plataforma de seguros online) utilizou card sorting para validar suas ilustrações antes de desenhá-las com muitos detalhes. Eles buscaram entender qual era a percepção das pessoas sobre aquelas imagens e fizeram da seguinte forma:
1. Breve bate-papo para conhecer a pessoa;
2. Leram junto com a pessoa o texto que explicava como funcionava a cobertura de seguros;
3. Pediram que escolhessem qual das imagens mais representava o que aquela cobertura fazia;
4. Fizeram perguntas: por que você escolheu essa imagem? O que mais te chamou atenção? Tiraria algo? Acrescentaria algo? Tem alguma imagem que você acha que não faz sentido?
Recomendo a leitura do case para quem quiser saber mais detalhes.
Teste de usabilidade
Algumas métricas para serem analisadas nos testes de usabilidade:
- Facilidade de uso (easy of use): a ilustração facilitou o uso do site/app ou entendimento do conteúdo?
- Complemento da tarefa (task completion): a ilustração ajudou o usuário a concluir uma tarefa?
- Tempo para tomar a ação (time to action): a ilustração ajudou o usuário a tomar uma ação mais rapidamente?
Pesquisas
Uma pesquisa online pode ser enviada para os usuários descreverem o que eles entenderam de determinadas ilustrações, quais sentimentos despertaram e em qual contexto eles acreditam que elas fazem sentido. Dessa forma é possível comparar conceitos das ilustrações e identificar quais são mais bem-sucedidas para transmitir a mensagem desejada.
E através das pesquisas presenciais é possível identificar também as reações da pessoa ao visualizar a ilustração.
Conclusão
Essa é uma área em desenvolvimento e as mudanças em relação às ilustrações têm sido empolgantes. A ilustradora do Slack acredita que estamos apenas arranhando a superfície do potencial que a ilustração pode oferecer à tecnologia, às marcas e experiência do usuário.
Essa comparação das ilustrações do ano de 2015 (à esquerda) e 2018 (à direita) mostram a diferença nos estilos das ilustrações.
Elas saíram de algo mais estruturado e geométrico para algo mais narrativo e colorido, com personages:
As ilustrações de produto em algumas grandes empresas de tecnologia têm sido mais inspiradoras, únicas e intencionais.
Segundo a pesquisa da Dribbble, a área de ilustração foi uma das cinco disciplinas do design citadas por estar em alta atualmente:
À medida que mais gigantes da tecnologia começam a adotar essa forma de arte, vemos a ilustração se tornando uma peça definidora de muitas identidades de marca e, por sua vez, influenciando outras marcas a entrar em ação.
Reconheço que existem outros tópicos que podem ser explorados em relação as ilustrações, tais como: partes técnicas e visuais (estilos, princípios de ilustração, ferramentas para a criação, nível de detalhes, como adaptar para mobile e desktop, criação das bibliotecas de ilustrações, etc.) São muitos assuntos interessantes, porém para esse artigo resolvi focar no que acreditei ser essencial como introdução deste assunto, pensando na experiência do usuário.
Se você souber de cursos ou livros que falem sobre o processo de criação de ilustração para produtos digitais com o olhar de UX, compartilhe nos comentários.
Obrigada por ler! 👏
Algumas referências utilizadas para este artigo:
- How Fast and Slow Thinking Shape Perception and Choice [Excerpt]
- Kahneman Fast and Slow Thinking: System 1 and 2 Explained by SUE
- Values of the Product Illustration
- Meet the Illustrator Diversifying Airbnb’s Image
- Illustrations — Shopify Polaris
- A mini oral history of the Mailchimp high five | Inside Design Blog
- The Vision Thing: Mainly in the Brain
- Illustrating a more human brand (part 1)
- Strategic Writing for UX: Drive Engagement, Conversion, and Retention with Every Word
- Como usamos card sorting para validar nossas ilustrações
- The True Power of Illustrations
- Using Metaphor in Product Illustration
