Mascotas virtuales para apps de hábitos: rachas sin culpa

¿Qué estados necesita la mascota de una app de hábitos?

Las apps de hábitos, concentración y estudio con una mascota acompañante funcionan con un pequeño conjunto de eventos que se repiten. Asigna cada uno a un solo estado antes de diseñar nada, para que la mascota reaccione siempre igual y los usuarios aprendan qué significa.

La escala importa más que cualquier animación individual. Un gesto de aprobación por cada check-in, una recompensa por un día completo y una celebración para los hitos hacen que los grandes momentos sigan teniendo sentido en la sexta semana. Si cada check-in recibe el trato de un hito, nada se siente merecido. La guía del coach de fitness usa la misma escala de tres niveles para los entrenamientos.

¿Qué debería hacer la mascota cuando el usuario se salta un día?

Mantenerse amable y hacer que el siguiente paso sea pequeño. El día perdido es el momento más frágil de cualquier producto de hábitos, y hay investigación que explica por qué.

En un artículo de 2023 publicado en el Journal of Consumer Research, Jackie Silverman y Alixandra Barasch comprobaron, a lo largo de siete estudios, que las rachas intactas mostradas en los registros de comportamiento aumentaban la participación posterior de las personas, y que las rachas rotas la reducían. El efecto dependía de cómo el registro mostraba el comportamiento pasado, no del comportamiento en sí, y era más débil cuando las personas podían reparar la racha (Silverman y Barasch). En la nota publicada por la universidad, las investigadoras dicen que los mensajes que recuerdan el tropiezo "normalmente no funcionan" y sugieren ofrecer una meta nueva en su lugar (CU Boulder).

Eso se traduce en estas reglas para la mascota de marca:

• Nada de cara triste ante el tropiezo. Sad (mood 4) junto a "Perdiste tu racha de 40 días" convierte el fallo del usuario en la tristeza de la mascota. Usa idle o wave.
• Nada de textos que generen culpa. "Tu mascota te extrañó" está a un paso del confirmshaming, que usa la culpa para empujar a las personas a actuar (Deceptive Patterns).
• Ofrece una meta nueva y más pequeña. "¿Empiezas una nueva racha de 3 días?" con un wave funciona mejor que un resumen de lo que se perdió.
• Ten cuidado con las reparaciones de pago. Barasch dice que una insignia de racha que los usuarios pagan por restaurar es "totalmente intrascendente", porque ya no refleja un comportamiento real. Las reparaciones gratis y limitadas son una decisión de diseño; venderlas es otra muy distinta.
• No castigues a la mascota. Una mascota que se enferma o se pone triste cuando el usuario falla es una mecánica de culpa con una cara tierna.

¿Cómo debería usar la mascota un temporizador de concentración o estudio?

Durante una sesión de concentración, la mascota debería apartarse. Una app de concentración vende enfoque, y un personaje que no deja de moverse en el borde del campo visual juega en contra.

• Antes de la sesión: attention (9) sobre el botón de inicio, o un wave cuando el usuario abre el temporizador.
• Durante la sesión: una pose fija, o idle con poca presencia. La guía de movimiento de Apple advierte que la animación innecesaria "puede distraer a las personas" y desaconseja añadir movimiento a interacciones que ocurren con frecuencia (Apple HIG).
• Descansos: sleeping (8) se entiende de forma natural como "ahora descansa".
• Sesión completada: una reacción success y luego idle.

Las reglas de accesibilidad apuntan en la misma dirección. Según el criterio 2.2.2 de las WCAG, el contenido en movimiento que empieza automáticamente, dura más de cinco segundos y está junto a otro contenido necesita una forma de pausarlo, detenerlo u ocultarlo (W3C). Una mascota en loop junto a un temporizador de 25 minutos cumple esas condiciones, así que dale un interruptor para ocultarla y una pose fija cuando el movimiento reducido esté activado. Consulta Reduce Motion en SwiftUI para la parte de iOS.

¿Qué puede mostrar una mascota en widgets y notificaciones?

Sobre todo imágenes fijas, con una excepción en las notificaciones de iOS.

• Widgets de iOS. Apple documenta la animación de widgets como transiciones cuando cambian los datos de la línea de tiempo, con "una duración máxima de dos segundos", y sin ninguna animación en Always On (Apple). Un GIF o un video en loop no es una opción. Incluye una imagen fija por estado de ánimo y cambia la imagen cuando cambien la racha o el progreso. La guía de límites de widgets y Live Activities lo explica a fondo.
• Widgets de Android. Los layouts de los widgets se construyen con RemoteViews, que "no admite todos los tipos de layout o de widget de vista" ni vistas personalizadas (Android Developers). Aquí también planifica una imagen fija.
• Notificaciones de iOS. Un adjunto de notificación puede ser un JPEG, GIF o PNG de hasta 10 MB, y Apple indica que una imagen "puede contener una imagen estática o una secuencia de imágenes animada"; los adjuntos de video admiten hasta 50 MB (Apple). En las notificaciones push remotas, una notification service extension descarga el archivo antes de mostrarlo.
• Notificaciones de Android. BigPictureStyle está documentado en torno a un bitmap, así que trata la imagen grande como un fotograma fijo.

Para crear las imágenes fijas, extrae un fotograma de cada clip. Esto se ejecutó con ffmpeg 7.1.1 sobre un MP4 de demostración:

ffmpeg -ss 0.5 -i happy.mp4 -frames:v 1 widget-happy.png

El fotograma del MP4 conserva el fondo sólido del clip. Para obtener un PNG transparente, lee el WebM con fondo transparente usando el decodificador VP9 que conserva el canal alfa: ffmpeg -c:v libvpx-vp9 -ss 0.5 -i happy.webm -frames:v 1 widget-happy.png.

¿Qué archivo va en cada superficie?

Mantén el número de la racha, el nombre del hábito y la siguiente acción en texto en todas las superficies. La mascota marca el tono; las palabras transmiten los datos, para los lectores de pantalla y para quien haya ocultado la mascota.

¿Qué no puede hacer un set de animaciones de un personaje?

Apps de mascotas como Finch construyen toda una progresión alrededor del personaje: Internet Matters describe un pájaro que crece, consigue accesorios y explora lugares nuevos a medida que el usuario gana puntos (Internet Matters). Eso requiere un flujo de trabajo de arte dedicado, con un dibujo nuevo para cada etapa, atuendo y lugar.

Un set de Charmotion es algo distinto y más acotado. Subes una imagen de tu mascota y obtienes 17 animaciones de ese mismo personaje: diez loops (idle, happy, wave, thinking, sad, loading, listening, talking, sleeping y attention), seis reacciones puntuales (success, error, yes, no, enter y exit) y una intro de inicio. Cubre todos los eventos de la tabla anterior. No incluye:

• etapas de crecimiento ni evolución (de bebé a adulto),
• atuendos, sombreros ni accesorios,
• poses nuevas como comer, regar una planta o sostener un libro,
• ciclos de caminata ni desplazamientos entre habitaciones,
• sincronización labial ni una barra de progreso dibujada en el personaje.

Cada set tiene los MP4, el video 9:16 y los GIF, suficientes para widgets, notificaciones y redes sociales, y el .riv para estados en vivo dentro de la app (planes de pago, desde $20/mes). Si el bucle principal de tu app consiste en coleccionar atuendos o hacer evolucionar a la mascota, presupuesta ilustraciones a medida; si consiste en registros diarios y rachas, un set es suficiente.

Preguntas frecuentes

¿La mascota de una app de hábitos debería verse triste cuando se rompe una racha?

No. Una mascota triste junto a una racha perdida convierte el fallo del usuario en culpa, justo cuando es más probable que abandone. Silverman y Barasch comprobaron que las rachas rotas suelen reducir la participación, y las investigadoras recomiendan ofrecer una meta nueva en su lugar. Usa idle o wave con una pequeña invitación a volver a empezar.

¿Un widget de iOS puede reproducir la animación de mi mascota de marca?

No en loop. Apple documenta la animación de widgets como transiciones entre actualizaciones de la línea de tiempo, con un máximo de dos segundos, y ninguna en Always On. Exporta una imagen fija por estado de ánimo y cambia las imágenes cuando cambien los datos. Las notificaciones son distintas: un adjunto de iOS puede ser un GIF animado de hasta 10 MB.

¿Reparar las rachas ayuda a que los usuarios vuelvan?

Pueden suavizar la caída. Silverman y Barasch descubrieron que el efecto negativo de una racha rota era más débil cuando las personas podían repararla. Barasch también advierte que una racha que los usuarios pagan por restaurar ya no refleja un comportamiento real, así que mantén las reparaciones limitadas y honestas en lugar de convertirlas en una venta adicional de pago.

Respuestas rápidas de esta guía

• ¿Qué debería hacer la mascota de una app de hábitos cuando me salto un día?

Fuentes

• On or Off Track: How (Broken) Streaks Affect Consumer Decisions (Silverman and Barasch, 2023), Journal of Consumer Research
• Research on streaks, marketing and tech (Barasch), University of Colorado Boulder, Leeds School of Business
• Confirmshaming, Deceptive Patterns
• Animating data updates in widgets and Live Activities, Apple Developer Documentation
• Create a simple widget, Android Developers
• UNNotificationAttachment, Apple Developer Documentation
• Motion, Apple Human Interface Guidelines
• Understanding SC 2.2.2: Pause, Stop, Hide, W3C WAI
• Finch: a parent's guide to the self-care pet app, Internet Matters