Ir al contenido
charmotion
Empieza ahora

Animación de mascota para el checkout: pagos, pedidos y correos

Por el equipo de Charmotion · Actualizado el

Ilustración de portada de la guía: Animación de mascota de marca en el checkout: pagos, pedidos y correos, con personajes de demostración de Charmotion

En el checkout, una mascota solo debe confirmar lo que ya pasó: un loop de carga mientras se procesa el pago, una reacción de éxito cuando se confirma el pedido y un texto tranquilo, sin reacción del personaje, cuando un pago falla. Nunca hagas esperar a los compradores por una animación, mantenla lejos de los campos de pago y usa un GIF con un primer fotograma que tenga sentido por sí solo en los emails de confirmación.

Puntos clave

  • Según Baymard, el 18% de los compradores en EE. UU. abandonó un pedido porque el checkout era demasiado largo o complicado, así que la animación nunca debe sumar tiempo.
  • Un pago fallido tiene que ver con dinero: nada de rebote de error ni cara triste, sino un mensaje de rechazo genérico y un siguiente paso claro, como sugiere la documentación de Stripe.
  • Las extensiones de UI del checkout de Shopify se ejecutan en un sandbox y solo con los componentes de Shopify, así que un runtime de animación personalizado no puede ejecutarse dentro del checkout.
  • Can I email indica que Outlook para Windows de 2007 a 2019 no anima los GIF, así que el primer fotograma debe decir "pedido confirmado" por sí solo.
  • El seguimiento del pedido encaja sin problema: en proceso con loading, en reparto con attention y entregado con success.

¿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 corresponde a cada evento del checkout y del pedido?

EventoEstadoDónde
Carrito vacíosleeping (8) o idle (0) más "Seguir comprando"Página del carrito
Agregado al carritoyesPequeña, cerca del ícono del carrito
Código de descuento aplicadoyesJunto al nuevo total
Pago en procesoloading (5)Junto al botón Pagar desactivado
Verificación bancaria (3-D Secure)NingunoLa pantalla del banco necesita toda la atención
Pedido confirmadosuccess, luego happy (1)Página de confirmación, email
Pago fallidoNinguno, o idle en imagen fijaCheckout
Pedido enviado, en repartoattention (9)Email, push, página del pedido
EntregadosuccessEmail, push
Devolución solicitada, reembolso emitidoidle (0) y luego yes al emitir el reembolsoPágina del pedido
loading: mood 5, se repite en loop mientras el trabajo está en curso.

Cada fila tiene un texto que funciona por sí solo: el monto, el número de pedido, la fecha de entrega. La mascota confirma el tono; nunca transmite los datos. Eso importa para los lectores de pantalla y para quien pase de largo el personaje al hacer scroll.

¿Cómo evito que la animación haga más lento el checkout?

Trata la velocidad del checkout como un límite estricto. En la encuesta de Baymard Institute, el 18% de los compradores online de EE. UU. había abandonado un pedido en el último trimestre por un "proceso de checkout demasiado largo o complicado" (Baymard). La guía de movimiento de Apple plantea lo mismo a nivel de interacción: "no hagas que las personas esperen a que termine una animación para poder hacer algo" (Apple HIG).

  • Nunca condiciones nada a la animación. La página de confirmación muestra los detalles del pedido de inmediato; la reacción de éxito se reproduce al mismo tiempo, no antes.
  • Carga significa carga. Inicia el loop cuando empieza la solicitud de pago y detenlo cuando llega la respuesta. Sin tiempo mínimo de reproducción.
  • Carga al final. Descarga el runtime y los archivos de animación después de que el formulario de pago sea interactivo, con una imagen fija (poster) en su lugar.
  • Mantente fuera del formulario. Ningún personaje junto a los campos de la tarjeta, el autocompletado de la dirección ni el texto del botón Pagar.

Para el timing de los loaders en general, consulta cómo agregar una animación de carga.

¿Cómo debe comportarse la mascota cuando falla un pago?

No debería reaccionar en absoluto. Un pago rechazado puede resultar vergonzoso o preocupante, y un sobresalto de error o una cara triste lo hacen sentir como un regaño. Oculta el personaje o déjalo quieto, y deja que un texto tranquilo haga el trabajo.

La documentación de Stripe ayuda con el texto. Señala que los emisores de tarjetas clasifican la mayoría de los rechazos como genéricos y que, por motivos de privacidad y seguridad, solo hablan de los detalles con sus titulares (Stripe). Para algunos códigos, como el de una tarjeta reportada como perdida, Stripe indica que el motivo específico "no debe comunicarse al cliente" y que debe presentarse como un rechazo genérico (Stripe).

Una buena pantalla de pago fallido:

  • dice claramente que el pago no se procesó,
  • conserva el carrito y los datos ingresados,
  • ofrece otro método de pago y sugiere contactar al banco,
  • evita culpar al comprador, algo que NN/g también recomienda para los mensajes de error en general (NN/g).

No prometas "no se te hizo ningún cargo" a menos que tu proveedor de pagos lo confirme; las autorizaciones pueden aparecer como pendientes en el estado de cuenta.

¿Puedo poner una mascota dentro de Shopify o de un checkout alojado?

Por lo general, no dentro del paso de pago en sí. Las extensiones de UI del checkout de Shopify "se ejecutan en un sandbox aislado, separado de la página de checkout", dentro de un Web Worker sin acceso al DOM, y están "limitadas a componentes de UI y API específicos que expone la plataforma" (Shopify). Un runtime de Rive o Lottie no puede ejecutarse ahí.

Dónde sí puedes agregarla:

  • Páginas del tema: producto, carrito y panel lateral (drawer), mediante una sección personalizada. Agregar animación a Shopify explica cómo usar video, Rive y GIF en temas.
  • Extensiones de checkout y de la página de agradecimiento: el componente de imagen de Shopify acepta una URL de imagen; antes de depender de ello, conviene probar en la vista previa de tu tienda si un GIF animado se reproduce ahí.
  • Emails y la página de estado del pedido: en la siguiente sección.

Los checkouts alojados de los proveedores de pago suelen ofrecer ajustes de marca, como logo y colores, en lugar de animaciones personalizadas, así que mantén la mascota en tus propias páginas alrededor de ellos.

¿Cómo animo los emails de confirmación de pedido y de envío?

Usa un GIF y diseña pensando en los clientes de correo que no lo reproducen. Can I email indica que Outlook para Windows de 2007 a 2019 no admite GIF animados, y señala que Outlook con una cuenta de Office 365 reproduce la animación tres veces, luego se detiene y muestra un botón de reproducción (Can I email). Gmail y Apple Mail sí reproducen GIF.

  • El primer fotograma transmite el mensaje. Para un pedido confirmado, empieza con la pose de éxito, no con un fotograma neutro previo.
  • Corto y liviano. Una reacción de éxito dura unos segundos; un GIF de 480 px mostrado a aproximadamente la mitad de ese ancho se ve nítido en pantallas de alta densidad.
  • Texto alternativo. "Pedido confirmado" o el nombre y la pose de la mascota, para que el correo siga teniendo sentido con las imágenes desactivadas.
  • Alójalo. Referencia el GIF desde tu CDN o desde el almacenamiento de archivos de tu tienda con una etiqueta de imagen en la plantilla.

Las notificaciones push siguen la misma idea. En iOS, un adjunto puede ser un GIF de hasta 10 MB (Apple); envía uno cuando el pedido se despacha y cuando se entrega, no en cada cambio de estado.

¿Qué archivo va en cada parte de un stack de e-commerce?

SuperficieArchivo
Páginas de producto, carrito y confirmaciónRive .riv (dispara el trigger success en la confirmación), o WebM con fondo transparente más MOV HEVC
Correos de pedido y envíoGIF con un primer fotograma que tenga sentido
Notificaciones push de iOSGIF adjunto
Anuncios, Reels, TikTokVideo 9:16, MP4 cuadrado
Movimiento reducido activadoUna pose estática con el mismo texto

Charmotion crea esto a partir de una imagen de tu mascota o logo: 17 animaciones, incluidas loading, success, attention, happy y sleeping, con MP4, video 9:16, GIF, el .riv y WebM y MOV transparentes (planes de pago, desde $20/mes). Lo que no hace: poses sosteniendo tus productos, un personaje que carga una caja o conduce una camioneta de reparto, ciclos de caminata ni una barra de progreso. La interfaz de seguimiento del pedido sigue siendo tu propio componente, con el personaje al lado.

Preguntas frecuentes

¿Una página de checkout debe mostrar una animación de carga durante el pago?

Sí, mientras la solicitud de pago realmente está en curso, junto a un botón Pagar desactivado y una etiqueta de texto breve. Iníciala cuando empiece la solicitud, detenla en cuanto llegue la respuesta y nunca agregues un tiempo mínimo de reproducción. Baymard relaciona los checkouts largos y complicados con los pedidos abandonados.

¿Puedo usar un GIF animado en los correos de confirmación de pedido de Shopify?

Sí. Aloja el GIF y referéncialo con una etiqueta de imagen en la plantilla de notificación; luego haz un pedido de prueba. Diseña el primer fotograma para que diga por sí solo que el pedido está confirmado, porque Outlook para Windows, de 2007 a 2019, muestra solo ese fotograma.

¿Debe celebrar la mascota antes de que se confirme el pago?

No. Reproduce la reacción de éxito solo después de que tu servidor confirme el pedido, nunca cuando el comprador toca Pagar. Celebrar antes de tiempo y luego mostrar un rechazo es peor que no tener animación. Muestra loading durante la solicitud, success después de la confirmación y nada si falla.

Respuestas rápidas de esta guía

Fuentes

Guías relacionadas