Tom do mascote por setor: uma matriz de estados

Quão lúdico um mascote deve ser em cada setor?

O nível certo de descontração depende do que o usuário pode perder em cada tela. Onde um erro custa dinheiro, saúde ou segurança, o usuário quer competência antes de tudo. Quando o produto é um jogo, uma aula ou um treino, a personalidade faz parte do valor.

Pesquisas sobre tom confirmam essa divisão. Em um estudo do Nielsen Norman Group, um site de banco mais conversacional foi avaliado como mais amigável, um pouco mais confiável e com mais chance de ser recomendado do que um formal, enquanto um site de seguradora bem-humorado foi descrito como "íntimo demais" e perdeu credibilidade. A NN/g também constatou que 52% da variação nas notas de atratividade era explicada pela confiabilidade (NN/g).

Cada linha tem seu próprio guia: fintech, infantil e educação, chatbots de saúde, VPN e segurança e fitness.

Quais humores são proibidos em finanças, saúde e segurança?

Nenhum estado é proibido por completo. O que não pode é um estado na tela errada. Três padrões causam a maior parte do estrago:

• Sad diante da perda do usuário. Um personagem triste ou chorando ao lado de um cartão recusado, de um resultado de exame ruim ou de um aviso de violação transforma o problema do usuário em sentimento do mascote. Use um idle neutro ou esconda o personagem.
• Comemoração perto de risco. Um success com cara de confete em uma operação, na aprovação de um empréstimo ou em um banner de "você está protegido" pode soar como pressão ou promessa exagerada. Mantenha o success curto e objetivo.
• Movimento urgente em avisos. Tremer, pular ou piscar faz um aviso parecer scareware. Um loop attention calmo ao lado de um texto claro é suficiente.

O loop sad (mood 4 em um conjunto padrão de dez loops) ainda tem utilidade: uma tela de "nenhum resultado" divertida em um jogo ou um carrinho vazio descontraído. Em categorias sérias, reserve-o para momentos de baixo risco e não pessoais, ou deixe-o totalmente fora do produto.

O mesmo cuidado vale para o texto. A NN/g desaconselha humor em mensagens de erro, porque ele perde a graça quando o usuário vê o erro com frequência, e também frases que culpam o usuário (NN/g).

Como os estados de erro e de sucesso mudam conforme o setor?

Success e error são as duas reações únicas que todo app dispara com mais frequência, e são as que trazem mais risco de tom. Um bom hábito é defini-las por setor antes de criar qualquer animação.

Repare que, em categorias sérias, a coluna de erro raramente usa a própria animação error. Uma reação de erro com cara de desenho animado chateado funciona em um jogo; em um banco, pode parecer leviana. Se você mantiver essa animação, confira se ela passa a ideia de "algo deu errado" e não de "ops".

Como escrever diretrizes de movimento para um mascote?

Diretrizes de movimento são um documento interno curto que diz a designers, engenheiros e redatores qual estado vai em cada lugar. Sem ele, cada equipe escolhe a animação que parece mais divertida, e o mascote acaba aparecendo nos momentos errados.

Uma diretriz funcional cabe em uma página e responde a quatro perguntas:

1. Onde o mascote pode aparecer? Liste as telas de forma explícita e liste também as telas em que ele nunca deve aparecer (textos legais, consentimento, alertas críticos).
2. Qual estado acompanha cada evento? Uma tabela, uma linha por evento, com o estado, se ele fica em loop ou toca uma vez e para qual estado ele volta.
3. Que texto acompanha cada estado? O mascote define o tom; o texto carrega o significado. Escreva o texto primeiro.
4. O que acontece com movimento reduzido? Defina a pose estática de cada estado.

Revise a diretriz sempre que um novo recurso adicionar uma tela. A falha mais comum não é uma animação ruim, e sim uma animação boa reaproveitada em uma tela que ninguém planejou, como um loop de comemoração que acaba em uma confirmação de reembolso.

Se o mascote também aparece no marketing, mantenha um conjunto de regras separado e mais flexível para anúncios e posts em redes sociais. Pesquisas de publicidade sobre personagens de marca, como as da System1, tratam desse contexto, e não do comportamento dentro do app.

Como as regras de acessibilidade se aplicam a cada setor?

Os requisitos de acessibilidade não mudam conforme o setor. Três regras valem para todo mascote:

• Pausar, parar, ocultar. Pelo WCAG 2.2.2, um conteúdo em movimento que começa automaticamente, dura mais de cinco segundos e aparece junto de outro conteúdo precisa de um jeito de ser pausado, parado ou ocultado (W3C). Um estado idle ou attention em loop ao lado de um formulário se enquadra nisso.
• Movimento reduzido. prefers-reduced-motion indica que o usuário pediu ao sistema para minimizar movimentos não essenciais (MDN). Mostre uma pose estática no lugar e mantenha o status em texto inalterado.
• Não é o único sinal. A expressão do mascote não pode ser a única forma de comunicar um status. Combine cada estado com texto e não dependa só da cor.

Essas regras importam mais justamente onde o tom é mais delicado. Um usuário que acabou de receber uma má notícia, ou que tem um distúrbio vestibular, nunca deveria precisar assistir a um personagem pulando para descobrir o que aconteceu.

Para detalhes de implementação, veja animação acessível e movimento reduzido.

Um único mascote dá conta de momentos descontraídos e sérios?

Sim, se o conjunto de estados for amplo o bastante para incluir estados discretos. Um mascote que só sabe pular e comemorar vai acabar em telas sérias com a expressão errada. Um que também tem loops calmos de idle, thinking, listening e sleeping pode ficar na tela sem chamar atenção para si.

Uma divisão prática para um único personagem:

• Loops discretos para telas sérias: idle, thinking, listening, sleeping.
• Loops expressivos para telas de baixo risco: happy, wave, talking.
• Loops de sinalização: loading e attention, sempre com texto.
• Reações: success, error, yes, no, enter e exit, todas curtas.

O conjunto padrão do Charmotion segue essa estrutura: você envia um personagem, mascote ou logo e recebe 17 animações em poucos minutos, com dez loops selecionados por um número mood (0–9), seis triggers de reação única e uma intro de abertura, em um único .riv, além de MP4, GIF e vídeo transparente em todos os planos pagos. As decisões de tom deste guia continuam sendo suas; o arquivo só deixa todos os estados disponíveis.

Para ver a lista completa de estados e para que serve cada um, leia estados de animação de mascote.

Como escrever diretrizes de movimento de mascote adequadas ao seu setor

1. Avalie o risco de cada tela. Liste todas as telas em que o mascote poderia aparecer e classifique cada uma como de risco baixo, médio ou alto, com base no que o usuário pode perder ali.
2. Exclua as telas de alto risco. Tire o mascote de textos legais, fluxos de consentimento e alertas críticos, ou limite-o a uma pose estática ou a um attention calmo.
3. Associe eventos a estados. Escreva uma linha da tabela por evento, com o estado, se ele fica em loop ou toca uma vez e o loop para o qual ele volta.
4. Escreva o texto primeiro. Escreva o texto de cada estado para que a mensagem fique completa sem o personagem e depois escolha o movimento que combina com ela.
5. Defina poses para movimento reduzido. Escolha uma pose estática para cada estado e adicione um controle de pausa para loops com mais de cinco segundos.

Perguntas frequentes

Quais setores devem evitar mascotes?

Nenhum precisa evitá-los por completo, mas finanças, saúde e segurança devem usá-los com moderação e longe de más notícias, avisos e textos jurídicos. A NN/g descobriu que um tom bem-humorado prejudicou a credibilidade de uma seguradora, então teste o tom com cuidado em qualquer categoria em que a confiança define a decisão de usar o produto.

Um mascote deve aparecer triste alguma vez?

Só em momentos de baixo risco e não pessoais, como um estado vazio divertido em um jogo. Evite uma cara triste diante de uma perda do próprio usuário, como um pagamento recusado ou um resultado ruim, e nunca use isso para fazer o usuário se sentir culpado e ficar ou reativar lembretes.

Um mascote é um problema de acessibilidade?

Não, se for bem implementado. Dê à animação em loop um controle de pausa ou parada, conforme o WCAG 2.2.2, mostre uma pose estática quando o movimento reduzido estiver ativado e garanta que todo status exibido pelo mascote também apareça em texto que leitores de tela possam anunciar.

Respostas rápidas deste guia

• Quão divertido um mascote deve ser em cada setor?

Fontes

• The Impact of Tone of Voice on Users' Brand Perception, Nielsen Norman Group
• Error-Message Guidelines, Nielsen Norman Group
• Understanding SC 2.2.2: Pause, Stop, Hide, W3C WAI
• prefers-reduced-motion, MDN Web Docs
• Celebrities v. fluent devices: how recurring brand characters drive lasting consumer connections, Advertising Week