Mascotes para apps de VPN e segurança: protegido vs exposto
Por equipe Charmotion · Atualizado em
O mascote de um app de VPN ou de segurança deve facilitar a leitura do status de proteção sem assustar o usuário. Use loading durante a conexão, uma reação success quando a proteção estiver ativa e um loop attention calmo quando houver exposição, sempre ao lado de um rótulo em texto simples, como Não protegido. Evite vermelho piscando, tremores e movimentos de alarme, que fazem avisos reais parecerem scareware.
Principais pontos
- Há muito tempo as VPNs usam mascotes fofos para fazer uma tecnologia abstrata e intimidadora parecer próxima e inofensiva.
- O rótulo de status carrega o significado; o mascote apenas define o tom e nunca deve substituir o texto.
- Use attention, e não tremores ou piscadas, para os estados de desconexão e de kill switch; comemore apenas quando a proteção for restabelecida.
- Piscadas de luz devem ficar abaixo dos limites do WCAG 2.3.1, e a cor não pode ser o único sinal de status.
Já tem um personagem ou logo? Veja seu personagem em telas reais de app: telas de splash, onboarding, carregamento e estado vazio. É grátis, roda no navegador e não envia nada.
Por que apps de VPN usam mascotes fofos?
Ferramentas de segurança pedem que o usuário confie em algo que ele não consegue ver. Um personagem simpático torna esse pedido mais fácil. Em um ensaio de estudos de mídia de 2017, Juan Llamas-Rodriguez observa que avatares de VPN como o urso do TunnelBear, a toupeira do Mullvad e o camaleão do SlickVPN "sinalizam a proximidade do serviço com o usuário comum e sugerem sua natureza inofensiva" (Flow).
Vale prestar atenção nessa segunda parte. A fofura sugere que algo é inofensivo, o que ajuda quando o produto ainda é desconhecido. Mas isso pode se voltar contra você se o personagem fizer um risco real parecer inofensivo. Um mascote alegre ao lado de "Sua conexão não está protegida" passa uma mensagem contraditória.
Por isso, o trabalho de design em um app de segurança é duplo: usar o personagem para deixar a configuração e o status do dia a dia mais amigáveis, e garantir que ele nunca suavize um alerta que exige uma ação do usuário.
O mesmo raciocínio vale para gerenciadores de senhas, antivírus e telas de segurança da conta. O personagem pode tornar a segurança acessível, mas nunca deve fazer a falta de segurança parecer aceitável.
Quais estados do mascote correspondem a conectando, protegido e exposto?
O estado da conexão já é, por si só, uma pequena máquina de estados, que se encaixa perfeitamente nos loops e nas reações únicas do mascote:
| Evento | Estado | Loop ou reação única | Observações |
|---|---|---|---|
| App aberto | enter, ou intro de abertura uma vez | Reação única | Depois, o loop do status atual |
| Desconectado | idle (0) | Loop | Calmo, com o rótulo "Não protegido" bem visível e um botão Conectar |
| Conectando | loading (5) | Loop | Mostre o servidor ou a localização em texto |
| Conectado | success, depois happy (1) | Reação única, depois loop | Passe logo para um loop com pouco movimento |
| Conexão perdida | attention (9) | Loop | Sem tremer nem piscar em vermelho |
| Kill switch bloqueando o tráfego | attention (9) | Loop | O texto explica que o tráfego foi pausado de propósito |
| Desconectado pelo usuário | exit, depois idle (0) | Reação única, depois loop | Neutro: foi o usuário que escolheu |
| Muito tempo ocioso enquanto protegido | sleeping (8) | Loop | Estado opcional com pouco movimento para widgets |
Não use sad (4) nos estados de desconexão. Estar desprotegido é um status, não uma falha, e um personagem triste pressiona o usuário com culpa em vez de informação.
Um personagem em forma de escudo torna literal a metáfora de "protegido" sem precisar de imagens alarmantes.
Como mostrar o estado desconectado sem espalhar medo?
O objetivo é que o usuário entenda o próprio status e aja a partir dele, não que fique com medo e faça um upgrade. Um padrão calmo funciona melhor:
- Informe o fato. "Não protegido" ou "VPN desligada" em texto simples, perto do topo da tela.
- Ofereça uma única ação. Um só botão Conectar, não uma pilha de ofertas de upgrade.
- Use atenção, não alarme. Um loop attention chama o olhar sem sugerir perigo. Guarde um tratamento visual mais forte para incidentes reais.
- Comemore a retomada, não o medo. A reação success toca quando a proteção volta, então o momento positivo fica ligado à ação do usuário.
Evite padrões que lembram scareware: contagens regressivas, fundos vermelhos pulsando, ícones tremendo e contadores falsos de "ameaças detectadas". Eles ensinam o usuário a desconfiar dos seus alertas, o oposto do que um produto de segurança precisa.
Se o loop attention rodar por mais de cinco segundos junto com outro conteúdo, a WCAG 2.2.2 exige uma forma de pausar, parar ou ocultar a animação (W3C). Passar para uma pose attention estática depois de alguns ciclos é uma forma simples de cumprir a regra.
Como evitar animações de alarme no estilo scareware?
Movimentos com cara de alarme têm dois problemas: corroem a confiança e podem representar um risco de acessibilidade.
No lado da acessibilidade, a WCAG 2.3.1 exige que o conteúdo não pisque mais de três vezes em qualquer período de um segundo, a menos que fique abaixo dos limites gerais e de flash vermelho (W3C). O flash vermelho é citado especificamente porque flashes em vermelho saturado trazem risco extra. Um selo de alerta vermelho pulsando pode não atender a esse critério.
No lado da confiança, movimentos que parecem urgentes devem ficar reservados para eventos que são de fato urgentes e exigem ação. Uma escala prática:
- Status de rotina (conectado, desconectado por escolha): idle ou happy, sem ênfase extra.
- Requer atenção (conexão perdida, kill switch ativo): loop attention, mais texto e uma única ação.
- Incidente real (credenciais encontradas em um vazamento, login suspeito): oculte o mascote ou congele-o; use um alerta padrão com texto claro e passos a seguir.
Repare que o papel do mascote diminui à medida que a gravidade aumenta. Isso é intencional. No topo da escala, o usuário precisa de uma instrução direta, não da reação de um personagem.
Como combinar os estados do mascote com textos e ícones claros?
O mascote é um sinal de apoio. O status precisa estar completo sem ele.
- Texto primeiro. Todo estado tem um rótulo: "Não protegido", "Conectando a Frankfurt", "Protegido", "Tráfego pausado pelo kill switch".
- Não dependa da cor. A WCAG 1.4.1 determina que a cor não pode ser o único meio visual de transmitir uma informação (W3C). Verde e vermelho sozinhos excluem usuários com deficiência na visão de cores; combine-os com texto e ícones distintos.
- Mantenha o sistema de ícones separado. Os ícones de status na barra de ferramentas e nos widgets não devem depender da expressão do mascote.
- Anuncie as mudanças. As mudanças de status devem chegar aos leitores de tela como texto, independentemente da animação.
- Fallback estático. Com o movimento reduzido ativado, mostre uma pose estática que corresponda ao status.
O Charmotion entrega os estados deste guia, incluindo loading, success, attention, idle, sleeping, enter e exit, em um único .riv com um número mood e triggers, além de WebM e MOV com fundo transparente para sites. O modo Motion preserva os pixels exatos de escudos e logos em 3D ou gerados por IA, o que combina com marcas de segurança que já têm uma identidade visual bem acabada. Aegis, um escudo de vidro do conjunto de demonstração do Charmotion, é um exemplo desse tipo de personagem.
O mascote deve aparecer em alertas de violação ou vazamento?
Em geral, não, ou só como uma figura estática. Um aviso de violação ou vazamento pede que o usuário faça algo importante, como trocar uma senha, encerrar uma sessão ou ativar a autenticação de dois fatores. Qualquer coisa que dispute atenção com essas instruções torna o alerta menos eficaz.
Se as diretrizes da sua marca exigem o personagem em todas as telas, use uma pose neutra congelada, posicionada longe dos botões de ação. Não use:
- reações error ou sad, que desviam o foco para os sentimentos do mascote;
- loops attention ao lado das instruções, que competem com elas;
- reações success antes que o usuário tenha de fato concluído os passos recomendados.
Depois que o usuário conclui os passos, uma reação success curta é adequada. Ela confirma que a ação funcionou e liga o momento positivo ao esforço do próprio usuário.
O mesmo princípio vale para todas as categorias sérias: o personagem reage ao que o usuário fez, não à má notícia em si. Veja o tom do mascote por setor para comparar com finanças e saúde.
Como mapear o status de um app de segurança para os estados do mascote
- Liste todos os status. Anote cada status de conexão ou proteção, incluindo desconectado, conectando, conectado, conexão perdida e kill switch.
- Escreva o rótulo de cada um. Dê a cada status um rótulo em texto simples e uma única ação, para que ele fique completo sem o mascote.
- Atribua estados calmos. Use idle para desconectado, loading para conectando, success e depois happy para conectado, e attention para quedas e kill switch.
- Remova movimentos de alarme. Elimine tremores, flashes vermelhos e contagens regressivas, e mantenha qualquer flash abaixo dos limites da WCAG 2.3.1.
- Trate incidentes à parte. Oculte ou congele o mascote em alertas de violação e de login suspeito, e toque success só depois que o usuário concluir a correção.
Perguntas frequentes
Por que tantos apps de VPN usam mascotes fofos?
Personagens fofos fazem uma tecnologia abstrata e um pouco intimidadora parecer acessível. Um ensaio de 2017 da Flow observa que mascotes como o urso do TunnelBear e a toupeira do Mullvad transmitem proximidade e sugerem que o serviço é inofensivo. Combine-os com estados em texto claro para que o personagem nunca substitua o rótulo de status.
Como mostrar "não protegido" sem assustar o usuário?
Use um loop attention calmo e texto simples em vez de flashes vermelhos, tremores ou sons de alarme. Mostre "Não protegido" ao lado de uma única ação clara, como um botão Conectar, e toque uma reação success só quando a proteção for restabelecida. Pause loops longos para cumprir a WCAG 2.2.2.
Um gerenciador de senhas deve ter mascote?
Pode, sim, em onboarding, cofres vazios e confirmações como uma senha salva. Mantenha-o oculto ou estático em alertas de vazamento e avisos de segurança, quando o usuário precisa de passos claros. O personagem deve tornar a segurança acessível, nunca fazer um risco real parecer inofensivo.
Respostas rápidas deste guia
Fontes
- The Cuteness of Tunneling Media, Flow Journal
- Understanding SC 2.2.2: Pause, Stop, Hide, W3C WAI
- Understanding SC 2.3.1: Three Flashes or Below Threshold, W3C WAI
- Understanding SC 1.4.1: Use of Color, W3C WAI
- prefers-reduced-motion, MDN Web Docs