Mascotas para apps de delivery de comida: del estado del pedido al estado de ánimo
Por el equipo de Charmotion · Actualizado el
Asigna a cada estado del pedido un solo estado de la mascota: pedido realizado, una reacción de éxito; en preparación, un loop de carga; repartidor llegando, attention; entregado, éxito; y cancelado, un loop triste breve o un reposo (idle) tranquilo junto a los detalles del reembolso. Anímala en la app, adjunta GIF a las notificaciones push clave y usa imágenes estáticas pequeñas en las Live Activities.
Puntos clave
- Un estado del pedido, un estado de la mascota; la hora estimada de llegada y los datos siempre van en texto.
- Las Live Activities duran hasta ocho horas, se actualizan con un máximo de 4 KB de datos y necesitan imágenes que no superen el tamaño de presentación, así que usa imágenes estáticas pequeñas.
- Las Live Updates de Android incluyen el seguimiento de entregas de comida como uso adecuado y no permiten RemoteViews personalizadas.
- Los adjuntos push de iOS aceptan GIF de hasta 10 MB; resérvalos para pedido realizado, llegando y entregado.
- Un set de personaje no incluye mapa, ruta, paseo en scooter ni ciclo de caminata; la interfaz de seguimiento sigue siendo tuya.
¿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.
¿Qué estado de la mascota corresponde a cada estado del pedido?
| Estado del pedido | Estado | Texto al lado |
|---|---|---|
| Explorando, canasta vacía | idle (0) o wave (2) | Restaurantes cercanos |
| Pedido realizado | success, luego idle (0) | Número de pedido, hora estimada |
| Restaurante aceptó | yes | "El restaurante ya tiene tu pedido" |
| En preparación | loading (5) | Hora estimada, actualizada |
| Recogido, en camino | loading (5) o happy (1) | Nombre del repartidor, hora estimada |
| Llegando, repartidor cerca | attention (9) | "Llega en 2 min" |
| Entregado | success, luego happy (1) | Hora de entrega, califica el pedido |
| Retrasado | idle (0) | Nueva hora estimada y el motivo, si se conoce |
| Cancelado | sad (4) una vez, o idle (0) | Monto y plazo del reembolso |
| Escribiendo una reseña | listening (6) | Ninguno |
| Restaurantes cerrados por la noche | sleeping (8) | Hora de apertura |
En el código, mantén la correspondencia en un solo lugar para que todas las superficies coincidan. Un .riv de Charmotion recibe un número mood para los loops y triggers para las reacciones puntuales (inputs de Rive):
const MOOD = { idle: 0, happy: 1, wave: 2, sad: 4, loading: 5, listening: 6, sleeping: 8, attention: 9 };
const BY_STATUS = {
placed: { fire: "success", mood: MOOD.idle },
accepted: { fire: "yes", mood: MOOD.loading },
preparing: { mood: MOOD.loading },
arriving: { mood: MOOD.attention },
delivered: { fire: "success", mood: MOOD.happy },
delayed: { mood: MOOD.idle },
cancelled: { mood: MOOD.sad },
};
function showStatus(status) {
const step = BY_STATUS[status];
const inputs = rive.stateMachineInputs("CharacterStateMachine");
if (step.fire) inputs.find((i) => i.name === step.fire)?.fire();
const mood = inputs.find((i) => i.name === "mood");
if (mood) mood.value = step.mood;
}¿Qué tan juguetona puede ser una mascota de delivery?
Juguetona al principio y al final, tranquila en medio. Pedido realizado y entregado son buenos momentos para una reacción. Los retrasos, las cancelaciones, los productos faltantes y los reembolsos no lo son.
- Retrasos: idle con una nueva hora estimada. Nada de bromas sobre la demora ni caras tristes; un usuario con hambre que espera más no quiere saber de los sentimientos de la app.
- Cancelaciones: si tu marca tiene un tono ligero, un loop triste breve junto a los detalles del reembolso es aceptable, porque la pérdida es compartida y el siguiente paso está claro. Si tu marca es más sobria, usa idle.
- Productos faltantes o equivocados: sin mascota en el formulario de soporte. Texto simple y una solución rápida.
- Nunca culpes. No dejes que el personaje insinúe que la culpa es del repartidor o del restaurante. Las pautas de NN/g sobre mensajes de error también desaconsejan el humor y las culpas en los errores (NN/g).
¿Puede aparecer la mascota en Live Activities y Live Updates?
Sí, como imágenes estáticas pequeñas que cambian con el estado, no como una animación en loop.
Live Activities de iOS. La documentación de Apple indica que una Live Activity puede estar activa hasta ocho horas, que los datos estáticos y dinámicos juntos no pueden superar 4 KB y que los recursos de imagen no deben ser más grandes que el tamaño de presentación; de lo contrario, el sistema podría no iniciarla (Apple). El sistema solo anima los cambios de contenido, durante un máximo de dos segundos (Apple). Por eso:
- incluye un PNG pequeño por estado de ánimo en la extensión del widget,
- envía solo la cadena del estado en la actualización y elige la imagen localmente,
- deja que la transición de imagen del sistema sea la "animación" cuando cambie el estado.
Live Updates de Android. Las pautas de Android incluyen el "seguimiento activo de entregas de comida" como uso adecuado, exigen estilos como ProgressStyle e indican que la notificación no debe tener una vista de contenido personalizada (Android Developers). El ícono del indicador de seguimiento se puede actualizar dinámicamente, lo que lo convierte en un lugar natural para una pequeña imagen estática de la mascota.
La guía de límites de Live Activities y widgets profundiza en tamaños y soluciones alternativas.
¿Cómo agrego la mascota a las notificaciones push?
En iOS, una notification service extension descarga la imagen y la adjunta antes de mostrar la notificación. Los adjuntos pueden ser JPEG, GIF o PNG de hasta 10 MB, o video de hasta 50 MB (Apple). En Android, BigPictureStyle está documentado en torno a un bitmap, así que envía una imagen estática (Android Developers).
- Elige tres momentos. Pedido realizado, llegando y entregado. Una imagen en cada cambio de estado es ruido.
- Primero el texto. El título y el cuerpo deben decirlo todo; muchos usuarios nunca expanden la notificación.
- Que sea liviano. Un GIF corto carga rápido con mala señal en la puerta de casa.
¿Qué archivo va en cada superficie?
| Superficie | Archivo |
|---|---|
| Pantalla de seguimiento del pedido | Rive .riv controlado por el estado, o un MP4 por estado |
| Live Activity, Live Update, widget | Imágenes PNG estáticas pequeñas, una por estado de ánimo |
| Push de iOS | GIF adjunto |
| Correo de recibo | GIF con la pose de éxito primero |
| Redes sociales y anuncios | Video 9:16 |
Crea imágenes estáticas a partir de cualquier clip con ffmpeg, por ejemplo ffmpeg -ss 0.5 -i arriving.mp4 -frames:v 1 arriving.png, y luego escálalas al tamaño de presentación.
¿Qué no puede hacer un set de mascota de marca para el seguimiento de pedidos?
Un set de Charmotion anima a tu personaje de 17 maneras: diez loops, entre ellos loading, attention, happy, sad y sleeping; seis reacciones puntuales, entre ellas success y yes; y una intro de inicio. Eso cubre todos los estados anteriores. No incluye:
- un mapa, una ruta ni un punto en movimiento,
- al personaje montado en un scooter o una bicicleta, caminando o cargando una bolsa,
- una barra de progreso ni una cuenta regresiva de la hora estimada de llegada dibujada dentro de la animación,
- atuendos como un uniforme de repartidor.
Coloca el personaje junto a tu propio componente de progreso y tu mapa, no dentro de ellos. Cada set cubre MP4, 9:16 y GIF para notificaciones push, email y redes sociales, además del .riv y el video transparente para el seguimiento dentro de la app (planes de pago, desde $20/mes).
Preguntas frecuentes
¿La mascota de una app de delivery debería verse triste cuando un pedido se retrasa?
No. Usa un estado de reposo (idle) tranquilo con la nueva hora estimada en texto. Un cliente con hambre que espera más no necesita los sentimientos de la app, y las bromas sobre el retraso suelen salir mal. Reserva sad, si es que lo usas, para una cancelación mostrada junto a información clara sobre el reembolso.
¿Puedo poner una mascota animada en una Live Activity de iOS?
No como loop. Las Live Activities solo animan los cambios de contenido, durante un máximo de dos segundos, limitan los datos de actualización a 4 KB y requieren imágenes no más grandes que el tamaño de presentación. Incluye una imagen estática pequeña por estado de ánimo en la extensión del widget y cambia la imagen cuando cambie el estado del pedido.
¿Qué actualizaciones del pedido merecen una imagen en la notificación push?
Pedido realizado, repartidor llegando y pedido entregado. Son los momentos en que la gente mira el teléfono. Adjunta una imagen a esas tres y deja las demás actualizaciones solo con texto, para que la mascota siga siendo una señal y no ruido. El texto de la notificación debe entenderse sin la imagen.
Respuestas rápidas de esta guía
Fuentes
- Displaying live data with Live Activities, Apple Developer Documentation
- Animating data updates in widgets and Live Activities, Apple Developer Documentation
- Live updates, Android Developers
- UNNotificationAttachment, Apple Developer Documentation
- NotificationCompat.BigPictureStyle, Android Developers
- Error-Message Guidelines, Nielsen Norman Group
- Inputs (web runtime), Rive
Guías relacionadas
- Animación de mascota para el checkout: pagos, pedidos y correos
- Límites de animación en Live Activities, Dynamic Island y widgets
- Estados de animación de mascota de marca: Loading, Success, Error
- Cómo agregar una animación de carga a una app o un sitio web
- Cómo crear una mascota de marca animada para tu app
- Tono de la mascota de marca por sector: matriz de estados