Estados de animación de mascota de marca: Loading, Success, Error

¿Qué estados de mascota cubren la mayoría de los momentos de una app?

Parte de los eventos de tu app, no de una lista de animaciones bonitas. Esta tabla cubre lo que necesitan la mayoría de las apps:

Dos reglas lo mantienen manejable. Solo hay un loop activo a la vez. Las reacciones puntuales se reproducen sobre el loop actual y le devuelven el control al terminar. Así es exactamente como suele conectarse una máquina de estados (state machine) de Rive: un número o enum elige el loop y los triggers disparan las reacciones.

Antes de agregar un estado, pregúntate dónde aparecerá y qué lo dispara. Si no puedes nombrar una pantalla y un evento, déjalo fuera. También conviene listar qué pantallas nunca deberían mostrar la mascota, como la configuración, los formularios de pago y cualquier lugar donde los usuarios necesiten concentrarse. Un personaje en el lugar equivocado cuesta más atención de la que aporta.

¿Cuándo debe la mascota mostrar loading y cuándo thinking?

Usa loading para esperas mecánicas: llamadas de red, cargas, guardado. Usa thinking cuando el producto hace algo que se siente como trabajo en nombre del usuario, como generar texto, analizar una foto o planificar una ruta. La diferencia es de tono. Thinking implica que viene una respuesta.

Los tiempos importan más que la animación en sí. Estas son las pautas de Nielsen Norman Group sobre indicadores de progreso:

• Menos de 1 segundo aproximadamente: no muestres ningún indicador. Un destello de animación parece un fallo.
• Entre 2 y 10 segundos aproximadamente: un indicador en loop, que es donde encaja una mascota en estado loading o thinking.
• Más de 10 segundos: un indicador de porcentaje completado o de pasos, porque un loop por sí solo deja de tranquilizar a las personas.

(NN/g, indicadores de progreso). En la práctica, inicia el estado de carga tras una breve demora para que las respuestas rápidas nunca lo activen. En tareas largas, mantén la mascota, pero agrega una barra de progreso o una línea de estado junto a ella.

Para más consejos sobre tiempos, consulta duración de animaciones y UX de carga.

¿Cómo deben sentirse las reacciones puntuales de éxito y error?

Las reacciones puntuales deben ser breves e inconfundibles. El usuario acaba de hacer algo y quiere una confirmación, no un espectáculo.

• Éxito: un saltito rápido, un asentimiento o una pequeña celebración. Mantenlo proporcional. Guardar un borrador merece un asentimiento; completar una racha de 30 días puede ganarse algo más.
• Error: empático, no cómico. Funciona un gesto de dolor o un encogimiento de hombros. Nunca hagas que la mascota parezca reírse del usuario. Acompáñalo siempre de un mensaje de texto que diga qué salió mal y qué hacer.
• Sí / no: un asentimiento o un movimiento negativo de cabeza para confirmaciones, cuestionarios y elecciones.

Mantén las reacciones breves. Las pautas de movimiento de Material Design sitúan las transiciones móviles típicas en torno a 300 ms y señalan que las duraciones superiores a 400 ms pueden sentirse lentas (Material Design). Una reacción de personaje puede durar más que una transición de interfaz porque transmite emoción, pero debe terminar mucho antes de que el usuario acabe de leer el resultado.

No bloquees la interfaz mientras se reproduce una reacción puntual. El usuario debe poder tocar el siguiente botón de inmediato. Cuando la reacción termina, la mascota vuelve al loop que estaba activo, normalmente el de reposo.

¿Qué debe hacer la mascota en los estados vacíos y el onboarding?

Los estados vacíos son el lugar más común donde una mascota resulta realmente útil. Una bandeja de entrada vacía o una pantalla de "sin resultados" es un momento en el que no hay nada, y un personaje tranquilo lo llena sin añadir ruido. Buenas opciones:

• Un loop de sueño o de reposo lento para "todavía no hay nada aquí".
• Una pose pensativa para "sin resultados", junto a sugerencias para una nueva búsqueda.
• Una pose señalando o pidiendo atención, dirigida al botón que resuelve el estado vacío, como "Agrega tu primer proyecto".

El onboarding se presta a una reacción puntual de entrada o saludo en la primera pantalla, seguida del reposo. Evita repetir el saludo en cada pantalla del flujo. Una vez es una bienvenida; cinco veces es una demora. Si la mascota aparece en cada paso, usa reacciones pequeñas (un asentimiento al completar un paso) en lugar de repetir la entrada.

Cuando el usuario sale del flujo, una reacción puntual de salida puede sacar al personaje de la pantalla con limpieza en lugar de cortarlo a mitad de una pose.

¿Cuándo debe una mascota pedir atención?

Un loop de atención es el estado más potente y el más fácil de usar en exceso. Resérvalo para algo que el usuario realmente querría saber: un mensaje nuevo, una recompensa lista para reclamar, un paso que no ha completado.

Pautas:

• Vincúlalo a una señal real y visible, como una insignia o un banner. La mascota refuerza la señal; no es la única señal.
• Detén el loop en cuanto el usuario abra el elemento o lo descarte.
• No combines la atención con otro movimiento en la misma pantalla.
• Limita cuánto dura. Tras unos pocos ciclos, vuelve al reposo y deja la insignia en su lugar.

Nunca uses la atención para insistir en loop con ventas adicionales. Los usuarios aprenden rápido a ignorar a un personaje que siempre quiere algo, y eso además debilita el estado para los momentos importantes.

¿Cómo conecto los estados de la mascota con los eventos de la app?

Mantén una pequeña función que traduzca el estado de la app al estado de la mascota. El resto de tu código nunca se comunica directamente con la animación.

// mood numbers: 0 idle, 5 loading, 8 sleeping, 9 attention
function mascotMood(app) {
  if (app.isLoading && app.elapsedMs > 800) return 5;
  if (app.unread > 0) return 9;
  if (app.items.length === 0) return 8;
  return 0;
}

// one-shots are triggers, fired on events
onSaveSucceeded(() => mascot.fire("success"));
onSaveFailed(() => mascot.fire("error"));

En Rive, el loop suele seleccionarse con un input numérico y las reacciones con inputs de tipo trigger. Con la API de inputs heredada, asignas el value de un input numérico y llamas a fire() en un trigger (documentación de Rive). Rive ahora recomienda Data Binding (view models) para proyectos nuevos; los archivos existentes basados en inputs siguen funcionando (guía de migración de Rive).

Los archivos de Rive de Charmotion siguen este patrón: un número mood de 0 a 9 elige uno de diez loops, y success, error, yes, no, enter y exit son triggers que vuelven al estado de ánimo actual al terminar. Consulta máquinas de estados de Rive para ver código por framework.

¿Cómo evito que el movimiento de la mascota moleste a los usuarios?

Una mascota que nunca deja de moverse, en el mejor de los casos se ignora y, en el peor, distrae. Incorpora la moderación desde el principio:

• Respeta el movimiento reducido. En la web, comprueba prefers-reduced-motion: reduce (MDN). En SwiftUI, lee accessibilityReduceMotion. Muestra una pose estática en lugar de loops.
• Ofrece pausar o detener. El criterio de éxito 2.2.2 de WCAG 2.2 exige una forma de pausar, detener u ocultar el movimiento que se inicia automáticamente, dura más de cinco segundos y aparece junto a otro contenido, salvo que sea esencial (W3C). Una animación de carga durante la cual no se puede hacer nada puede considerarse esencial.
• Déjala descansar. Tras un período sin interacción, pasa a una pose quieta. Las máquinas de estados de Rive pueden asentarse y dejar de avanzar cuando nada cambia, lo que además ahorra batería (documentación de Rive).
• Sin destellos. Nada debe destellar más de tres veces por segundo.
• Un personaje por pantalla. Dos mascotas animadas compiten por la atención.
• Cuidado con la repetición. Una reacción de éxito que resulta encantadora la primera vez puede volverse irritante la quincuagésima. Para acciones que los usuarios repiten constantemente, usa una reacción más pequeña o ninguna.

Más detalles en animación accesible y movimiento reducido.

Preguntas frecuentes

¿Qué estados de animación necesita la mascota de una app?

La mayoría de las apps necesitan primero reposo (idle), carga, éxito y error. Después, agrega un loop para el estado vacío, como dormir, un saludo para el onboarding y un loop de atención para las notificaciones. Las funciones de chat y voz también necesitan estados de escuchar, pensar y hablar. Agrega cada uno solo donde corresponda a un evento real.

¿Cuál es la diferencia entre un loop y una reacción puntual?

Un loop se repite mientras se cumple una condición, como la carga mientras se ejecuta una solicitud. Una reacción puntual se reproduce una vez en respuesta a un evento, como el éxito después de guardar, y luego devuelve el control al loop que estaba activo antes de empezar.

¿Debo mostrar una animación de carga en solicitudes rápidas?

No. Nielsen Norman Group recomienda no mostrar ningún indicador en esperas de menos de un segundo aproximadamente, porque un destello breve de animación parece un error visual. Retrasa un poco el estado de carga para que las respuestas rápidas nunca lo muestren, y agrega una barra de progreso para esperas de más de diez segundos.

¿Una mascota animada necesita un botón de pausa?

A menudo, sí. Según el criterio 2.2.2 de WCAG 2.2, el movimiento que empieza automáticamente, dura más de cinco segundos y se muestra junto a otro contenido necesita una opción para pausarlo, detenerlo u ocultarlo, salvo que sea esencial. Quedarse en una pose fija después de unos segundos también evita el problema.

Respuestas rápidas de esta guía

• ¿Qué estados debe tener la mascota de una app?
• ¿Cuál es la diferencia entre una animación en loop y una animación puntual?
• ¿Qué incluye un set de animaciones de Charmotion?

Fuentes

• Progress Indicators Make a Slow System Less Insufferable, Nielsen Norman Group
• Duration & easing, Material Design
• Understanding SC 2.2.2: Pause, Stop, Hide, W3C WAI
• prefers-reduced-motion, MDN Web Docs
• accessibilityReduceMotion, Apple Developer Documentation
• State Machines (web runtime), Rive
• Inputs (web runtime), Rive
• Data Binding migration guide, Rive