Mascotas para apps de VPN y seguridad: protegido vs expuesto
Por el equipo de Charmotion · Actualizado el
La mascota de marca de una app de VPN o de seguridad debería facilitar la lectura del estado de protección sin asustar a los usuarios. Usa loading mientras se conecta, una reacción success cuando está protegido y un loop de attention tranquilo cuando queda expuesto, siempre junto a una etiqueta de texto simple como No protegido. Evita parpadeos en rojo, sacudidas y movimientos tipo alarma, que hacen que las advertencias reales parezcan scareware.
Puntos clave
- Las VPN llevan mucho tiempo usando mascotas tiernas para que una tecnología abstracta e intimidante se sienta cercana e inofensiva.
- La etiqueta de estado transmite el significado; la mascota solo marca el tono y nunca debe reemplazar el texto.
- Usa attention, no sacudidas ni parpadeos, para los estados de desconexión y de kill switch; celebra solo cuando se restablece la protección.
- Los destellos deben mantenerse por debajo de los umbrales de WCAG 2.3.1, y el color no puede ser la única señal de estado.
¿Ya tienes un personaje o logo? Mira tu personaje en pantallas reales de una app: pantallas de splash, onboarding, carga y estado vacío. Es gratis, funciona en tu navegador y no sube nada.
¿Por qué las apps de VPN usan mascotas de marca tiernas?
Las herramientas de seguridad piden a los usuarios que confíen en algo que no pueden ver. Un personaje amigable facilita esa petición. En un ensayo de estudios de medios de 2017, Juan Llamas-Rodriguez señala que avatares de VPN como el oso de TunnelBear, el topo de Mullvad y el camaleón de SlickVPN "transmiten la cercanía del servicio con el usuario común y sugieren su naturaleza inofensiva" (Flow).
Vale la pena fijarse en esa segunda parte. Lo tierno sugiere inofensivo, y eso ayuda cuando el producto es desconocido. Pero también puede jugar en tu contra si el personaje hace que un riesgo real parezca inofensivo. Una mascota alegre junto a "Tu conexión no está protegida" envía un mensaje contradictorio.
Por eso, en una app de seguridad el trabajo de diseño es doble: usar el personaje para que la configuración y el estado diario se sientan amigables, y asegurarte de que nunca suavice una advertencia ante la que el usuario debe actuar.
El mismo criterio se aplica a gestores de contraseñas, antivirus y pantallas de seguridad de la cuenta. El personaje puede hacer que la seguridad se sienta accesible; nunca debe hacer que la inseguridad parezca aceptable.
¿Qué estados de la mascota corresponden a conectando, protegido y expuesto?
El estado de la conexión ya es por sí mismo una pequeña máquina de estados (state machine), que encaja sin problemas con los loops y las reacciones puntuales de la mascota:
| Evento | Estado | Loop o reacción puntual | Notas |
|---|---|---|---|
| App abierta | enter, o la intro de inicio una vez | Reacción puntual | Luego el loop del estado actual |
| Desconectado | idle (0) | Loop | Tranquilo, con una etiqueta clara de "No protegido" y un botón Conectar |
| Conectando | loading (5) | Loop | Muestra el servidor o la ubicación en texto |
| Conectado | success, luego happy (1) | Reacción puntual, luego loop | Pasa rápido a un loop de poco movimiento |
| Conexión perdida | attention (9) | Loop | Sin sacudidas ni destellos rojos |
| Kill switch bloqueando el tráfico | attention (9) | Loop | El texto explica que el tráfico está pausado a propósito |
| Desconexión por el usuario | exit, luego idle (0) | Reacción puntual, luego loop | Neutral; el usuario lo eligió |
| Reposo prolongado mientras está protegido | sleeping (8) | Loop | Estado opcional de poco movimiento para widgets |
No uses sad (4) en los estados de desconexión. Estar sin protección es un estado, no un fracaso, y un personaje triste empuja al usuario con culpa en lugar de información.
Un personaje con forma de escudo vuelve literal la metáfora de "protegido" sin necesidad de imágenes alarmantes.
¿Cómo muestro que está desconectado sin generar miedo?
El objetivo es que los usuarios entiendan su estado y actúen, no que se asusten hasta pagar una mejora. Un patrón tranquilo funciona mejor:
- Expón el hecho. "No protegido" o "VPN desactivada" en texto simple, cerca de la parte superior de la pantalla.
- Ofrece una sola acción. Un único botón Conectar, no una pila de ofertas.
- Usa attention, no alarma. Un loop de attention atrae la mirada sin sugerir peligro. Reserva un tratamiento visual más fuerte para incidentes reales.
- Celebra la recuperación, no el miedo. La reacción success se reproduce cuando vuelve la protección, así el momento positivo queda ligado a la acción del usuario.
Evita patrones que parezcan scareware: cuentas regresivas, fondos rojos que laten, íconos que tiemblan y falsos contadores de "amenazas detectadas". Enseñan a los usuarios a desconfiar de tus alertas, justo lo contrario de lo que necesita un producto de seguridad.
Si el loop de attention dura más de cinco segundos junto a otro contenido, WCAG 2.2.2 exige una forma de pausarlo, detenerlo u ocultarlo (W3C). Pasar a una pose de attention estática después de unos ciclos es una forma sencilla de cumplir.
¿Cómo evito animaciones de alarma al estilo scareware?
El movimiento de alarma tiene dos problemas: erosiona la confianza y puede ser un riesgo de accesibilidad.
En cuanto a accesibilidad, WCAG 2.3.1 exige que el contenido no destelle más de tres veces en cualquier período de un segundo, salvo que se mantenga por debajo de los umbrales de destello general y de destello rojo (W3C). El destello rojo se menciona de forma específica porque los destellos de rojo saturado conllevan un riesgo adicional. Una insignia de advertencia roja que late puede no cumplir este criterio.
En cuanto a confianza, el movimiento que parece urgente debería reservarse para eventos que sean urgentes y requieran acción. Una escala práctica:
- Estado rutinario (conectado, desconectado por decisión propia): reposo (idle) o happy, sin énfasis adicional.
- Requiere atención (conexión perdida, kill switch activo): loop de attention más texto y una acción.
- Incidente real (credenciales encontradas en una filtración, inicio de sesión sospechoso): oculta la mascota o congélala; usa una alerta estándar con texto claro y pasos.
Fíjate en que el papel de la mascota se reduce a medida que aumenta lo que está en juego. Es intencional. En la parte alta de la escala, los usuarios necesitan una instrucción clara, no la reacción de un personaje.
¿Cómo combino los estados de la mascota con texto e íconos claros?
La mascota es una señal de apoyo. El estado debe entenderse por completo sin ella.
- Primero el texto. Cada estado tiene una etiqueta: "No protegido", "Conectando a Fráncfort", "Protegido", "Tráfico pausado por el kill switch".
- No dependas del color. WCAG 1.4.1 establece que el color no debe ser el único medio visual para transmitir información (W3C). El verde y el rojo por sí solos no funcionan para usuarios con deficiencias en la visión del color; combínalos con texto e íconos distintos.
- Mantén separado el sistema de íconos. Los íconos de estado de la barra de herramientas y los widgets no deberían depender de la expresión de la mascota.
- Anuncia los cambios. Los cambios de estado deberían llegar a los lectores de pantalla como texto, independientemente de la animación.
- Alternativa estática. Con movimiento reducido activado, muestra una pose estática que corresponda al estado.
Charmotion entrega los estados de esta guía, incluidos loading, success, attention, idle, sleeping, enter y exit, en un solo .riv con un número mood y triggers, además de WebM y MOV con fondo transparente para sitios web. El modo Motion conserva los píxeles exactos de escudos y logos en 3D o generados con IA, algo ideal para marcas de seguridad que ya tienen un símbolo pulido. Aegis, un escudo de vidrio del set de demostración de Charmotion, es un ejemplo de ese tipo de personaje.
¿Debería aparecer la mascota en alertas de filtraciones o fugas de datos?
En general no, o solo como figura estática. Un aviso de filtración o fuga pide al usuario que haga algo importante, como cambiar una contraseña, revocar una sesión o activar la autenticación de dos factores. Todo lo que compita con esas instrucciones reduce la eficacia de la alerta.
Si las guías de tu marca exigen el personaje en todas las pantallas, usa una pose neutral congelada, lejos de los botones de acción. No uses:
- reacciones error o sad, que desvían la atención hacia los sentimientos de la mascota;
- loops de attention junto a las instrucciones, porque compiten con ellas;
- reacciones success hasta que el usuario haya completado de verdad los pasos recomendados.
Cuando el usuario termina los pasos, una breve reacción success es apropiada. Confirma que la acción funcionó y vincula el momento positivo con el esfuerzo del propio usuario.
El mismo principio se aplica a todas las categorías serias: el personaje reacciona a lo que hizo el usuario, no a la mala noticia en sí. Consulta el tono de la mascota según la industria para ver cómo se compara con finanzas y salud.
Cómo asignar los estados de una app de seguridad a los estados de la mascota
- Enumera cada estado. Anota cada estado de conexión o protección, incluidos desconectado, conectando, conectado, conexión perdida y kill switch.
- Escribe la etiqueta de cada uno. Dale a cada estado una etiqueta de texto simple y una acción, para que se entienda sin la mascota.
- Asigna estados tranquilos. Usa idle para desconectado, loading para conectando, success y luego happy para conectado, y attention para conexiones perdidas y el kill switch.
- Elimina el movimiento de alarma. Quita las sacudidas, los destellos rojos y las cuentas regresivas, y mantén cualquier destello por debajo de los umbrales de WCAG 2.3.1.
- Trata los incidentes por separado. Oculta o congela la mascota en alertas de filtraciones e inicios de sesión sospechosos, y reproduce success solo después de que el usuario complete la solución.
Preguntas frecuentes
¿Por qué tantas apps de VPN usan mascotas tiernas?
Los personajes tiernos hacen que una tecnología abstracta y algo intimidante se sienta accesible. Un ensayo de Flow de 2017 señala que mascotas como el oso de TunnelBear y el topo de Mullvad transmiten cercanía y sugieren que el servicio es inofensivo. Combínalas con estados en texto claros para que el personaje nunca reemplace la etiqueta de estado.
¿Cómo muestro "no protegido" sin asustar a los usuarios?
Usa un loop de attention tranquilo y texto simple en lugar de destellos rojos, sacudidas o sonidos de alarma. Muestra No protegido junto a una acción clara, como un botón Conectar, y reproduce una reacción success solo cuando se restablezca la protección. Pausa los loops largos para cumplir con WCAG 2.2.2.
¿Debería un gestor de contraseñas tener una mascota de marca?
Puede tenerla, para el onboarding, las bóvedas vacías y confirmaciones como una contraseña guardada. Mantenla oculta o estática en alertas de filtraciones y advertencias de seguridad, donde los usuarios necesitan pasos claros. El personaje debe hacer que la seguridad sea accesible, nunca que un riesgo real parezca inofensivo.
Respuestas rápidas de esta guía
Fuentes
- 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