Mascotas para SaaS B2B: onboarding, estados vacíos y 404

¿Dónde encaja una mascota en un producto B2B?

En las pantallas donde el usuario está esperando, empezando o atascado, no donde está trabajando. Un mapa rápido:

Para ver paso a paso cómo conectar los triggers de onboarding y estados vacíos en SwiftUI, Compose, Flutter y la web, consulta cómo agregar una mascota al onboarding y a los estados vacíos. Esta guía cubre las decisiones B2B que lo rodean.

¿Qué hace que un estado vacío con mascota funcione bien?

Las pautas de Nielsen Norman Group para estados vacíos en aplicaciones complejas definen tres funciones: comunicar el estado del sistema, ofrecer pistas de aprendizaje y dar caminos directos a las tareas clave (NN/g). La mascota puede apoyar las tres, pero no puede cumplir ninguna por sí sola.

• Primero, el estado. NN/g advierte contra mostrar "No hay registros" mientras el contenido todavía se está cargando. Muestra el loop de carga hasta que termine la consulta y luego el estado vacío.
• Enseña en una sola frase. "Los proyectos reúnen las tareas de tu equipo. Crea uno o impórtalo desde Jira." El personaje va al lado del texto, no en su lugar.
• Un solo botón principal. El camino directo es el elemento más importante de la pantalla. Colócalo más cerca de la línea de visión que la mascota.
• Adapta la reacción al tipo de vacío. El primer uso recibe una bienvenida (idle o wave). Una lista que el usuario vació recibe una pequeña recompensa (happy). Sin resultados, idle neutral y una forma de ampliar la búsqueda. "Sin permiso" no lleva mascota, solo a quién pedir acceso.

¿Cuándo debería la mascota hacerse a un lado para los usuarios avanzados?

En cuanto una pantalla se vuelve rutinaria. Las pautas de movimiento de Apple dicen que, en general, hay que evitar agregar movimiento a las interacciones de la interfaz que ocurren con frecuencia y que conviene permitir que las personas cancelen el movimiento en lugar de obligarlas a esperarlo (Apple HIG). El Asistente de Office de Microsoft, Clippy, es el ejemplo clásico de un personaje que interrumpía una y otra vez a quienes ya sabían lo que estaban haciendo (Wikipedia).

Un plan de retirada que funciona en la mayoría de los productos B2B:

1. Vincula los estados de onboarding al onboarding. Cuando la lista de configuración se completa o se descarta, sus momentos de mascota desaparecen con ella.
2. Conserva solo los momentos poco frecuentes. Las importaciones completadas, los hitos, los estados vacíos y la página 404 se quedan; las reacciones a cada acción se van.
3. Ofrece un ajuste. Un interruptor "Mostrar mascota" en las preferencias del usuario y un valor predeterminado a nivel de espacio de trabajo para los administradores que quieren un producto más discreto para todos.
4. Respeta la configuración del sistema. Con movimiento reducido activado, muestra imágenes fijas (MDN).

¿Una página 404 debería tener mascota?

Puede tenerla, si la página sigue siendo útil. La plantilla 404 del U.S. Web Design System recomienda evitar los mensajes de error graciosos, tiernos o caprichosos, porque es posible que los usuarios no aprecien el humor cuando intentan llegar a algo importante. También indica que hay que decirles qué pueden hacer a continuación e incluir la navegación principal (digital.gov).

Una página 404 que funciona con mascota:

• un loop tranquilo de sleeping o idle, no una reacción de error ni una broma,
• un título claro como "Página no encontrada" y una línea sobre por qué pudo haber pasado,
• búsqueda, un enlace al panel y la navegación principal,
• un código de estado HTTP 404 real desde el servidor. Google trata una página de error servida con un código de éxito como un soft 404 (Google Search Central).

Mantén esta página ligera: basta con un video pequeño o una imagen fija. No cargues un runtime de animación completo en una página cuya única función es enviar a la gente a otro lugar.

¿Cómo manejo el modo oscuro?

Elige un formato que no lleve su propio fondo o haz una exportación por tema.

• Rive dibuja sobre un canvas transparente, así que un solo .riv funciona en temas claros y oscuros.
• Video con fondo transparente: WebM VP9 con alfa para Chrome, Firefox y Edge, y MOV HEVC con alfa para Safari.
• GIF y MP4 llevan un fondo sólido incorporado. En un tema oscuro, un recuadro claro alrededor del personaje se ve roto. Crea una versión sobre el color de superficie de cada tema y alterna entre ellas con una media query prefers-color-scheme o con la clase de tema de tu app (MDN).

Revisa también el propio personaje sobre fondos oscuros. Los contornos oscuros y los detalles azul marino pueden desaparecer; una tarjeta clara y suave detrás de la mascota es una solución más limpia que cambiarle los colores.

¿Qué presupuesto de rendimiento debería tener la mascota de un SaaS?

La mascota nunca debería ser el motivo por el que una pantalla va lenta.

• Costo del runtime. El runtime web canvas-lite 2.44.0 de Rive pesa unos 373 KB comprimido con brotli, y las versiones canvas y webgl2 pesan más (Rive). Ese costo se paga una sola vez por app, así que conviene más a un producto con muchos momentos de mascota que a una sola página 404.
• Peso del archivo. Un solo .riv contiene todos los estados. En un set real de Charmotion de 17 animaciones, el .riv con todas las animaciones pesaba 40 KB (12 KB con brotli), mientras que los MP4 sumaban 2.6 MB y los WebM con fondo transparente, 6.1 MB.
• Orden de carga. Muestra una imagen fija (poster) en el layout, carga el runtime cuando la página ya sea interactiva y reemplázala por la animación cuando esté lista. Nunca bloquees el onboarding esperando un archivo de animación.
• En la web, nada de GIF. web.dev recomienda reemplazar los GIF animados por video para que la carga sea más rápida (web.dev). Deja los GIF para el email y la documentación.

Charmotion entrega ese .riv con un input numérico mood e inputs de trigger (planes de pago, desde $20/mes), además de WebM y MOV HEVC transparentes para páginas con tema, y MP4 y GIF para emails y documentos de ayuda. Es un personaje en 17 animaciones; no agrega poses nuevas como señalar un botón, así que los tooltips siguen necesitando una flecha.

Preguntas frecuentes

¿Debería un software B2B tener una mascota de marca?

Puede tenerla, si el personaje se limita al onboarding, los estados vacíos y los hitos poco frecuentes, y no aparece en las pantallas de trabajo. Los compradores evalúan las herramientas B2B por su competencia, así que prueba el tono con clientes reales, da a los usuarios una opción para ocultarlo y nunca lo pongas en pantallas de facturación, permisos o seguridad.

¿Cómo permito que los usuarios desactiven la mascota de un SaaS?

Agrega un interruptor Mostrar mascota en las preferencias del usuario y un valor predeterminado del espacio de trabajo que puedan definir los administradores. Cuando esté desactivado, reemplaza cada estado por nada o por un ícono estático pequeño, mantén todo el texto sin cambios y cambia también a imágenes fijas automáticamente cuando la opción de movimiento reducido del sistema esté activada.

¿Una página 404 graciosa perjudica el SEO?

El humor no afecta el posicionamiento; el código de estado sí. El servidor debe devolver HTTP 404 para las páginas que no existen, o Google puede reportar un soft 404. El mayor riesgo de una broma es la usabilidad: digital.gov recomienda mensajes claros, un siguiente paso y la navegación principal en lugar de ocurrencias.

Respuestas rápidas de esta guía

• ¿Cuándo debería la mascota de un SaaS hacerse a un lado para los usuarios avanzados?

Fuentes

• Designing Empty States in Complex Applications: 3 Guidelines, Nielsen Norman Group
• Motion, Apple Human Interface Guidelines
• 404 page template, U.S. Web Design System (digital.gov)
• How HTTP status codes, and network and DNS errors affect Google Search, Google Search Central
• Runtime sizes, Rive
• Replace animated GIFs with video for faster page loads, web.dev
• prefers-color-scheme, MDN Web Docs
• prefers-reduced-motion, MDN Web Docs
• Office Assistant, Wikipedia