Estados vacíos como oportunidad de onboarding
La mayoría de los productos tratan los estados vacíos como placeholders — cajas grises y "No se encontraron elementos." Para usuarios nuevos, vacío es el estado por defecto. Los estados vacíos son oportunidades de onboarding: la primera ocasión de explicar valor, guiar la acción y mostrar cómo se ve el éxito.
El usuario completó el registro. El dashboard cargó. Un panel blanco. "Aún no hay proyectos." Sin prioridad de botón, sin ejemplo, sin explicación de qué desbloquea un proyecto. Hizo clic en otro lado y no volvió. El estado vacío se diseñó como ausencia de datos — no como el momento de estados vacíos onboarding que en realidad era.
Toda cuenta nueva llega a vacío: lista de proyectos vacía, bandeja vacía, informe vacío, lista de integraciones vacía. Para usuarios experimentados, vacío significa "nada coincide con tu filtro." Para usuarios nuevos, vacío significa "este producto quizá no es para mí." El mismo componente de UI sirve a ambas audiencias. La mayoría de los equipos diseña solo para el caso de filtro y pierde activación en la primera sesión.
Los estados vacíos no son errores. Son la superficie de onboarding de mayor intención — el usuario llegó, el shell cargó, la atención está en el área de contenido. Desperdiciar esa superficie es un problema de conversión disfrazado de detalle de diseño visual.
Tres audiencias de estados vacíos requieren tres tratamientos
| Audiencia | Contexto | Objetivo | Patrón incorrecto |
|---|---|---|---|
| Primera vez | Nunca creó contenido | Activar — primera acción exitosa | Solo "Sin datos" |
| Limpiado | Eliminó o completó todo | Reenganchar o confirmar éxito | Igual que primera vez |
| Filtrado | Búsqueda/filtro devolvió cero | Refinar consulta o limpiar filtros | Copy de onboarding |
Colapsar los tres en un solo string es el fallo habitual. El vacío de primera vez necesita CTA principal, encuadre de valor y datos de muestra opcionales. El vacío filtrado necesita "limpiar filtros" y contexto de consulta. El vacío limpiado puede celebrar la finalización y sugerir el siguiente paso.
El primer estado vacío no es un lienzo en blanco. Es la frase de apertura del producto.
Anatomía de un estado vacío que activa
Los estados vacíos fuertes comparten cinco elementos:
1. Contexto — para qué sirve esta área
Una frase que vincula la pantalla con el resultado del usuario. No el nombre del feature — el job-to-be-done. "Los proyectos organizan los entregables de tu equipo" supera a "Proyectos."
2. Acción principal — un siguiente paso obvio
Un solo CTA de alto contraste. "Crea tu primer proyecto" y no una fila de botones con el mismo peso. Las acciones secundarias visualmente subordinadas.
3. Prueba — cómo se ve lleno
Ilustración, captura de pantalla o muestra interactiva del estado poblado. Reduce la brecha de imaginación. Opcional: datos demo sembrados con etiquetado claro de "muestra."
4. Divulgación progresiva — no abrumar
Enlace a ayuda o checklist para quien necesite más. No seis párrafos inline.
5. Accesibilidad
El estado vacío no es decorativo. Jerarquía de encabezados, orden de foco del CTA, texto para screen reader que transmita propósito — no "vacío" como único anuncio.
La alineación con catálogos de capacidades del design system ayuda: el estado vacío como patrón documentado con variantes (primera vez, filtrado, adyacente a error) evita que cada squad invente cajas grises.
Patrones que convierten vs patrones que estancan
Convierten
- CTA + propuesta de valor de una línea + visual del estado de éxito
- Checklist vacío: "3 de 5 pasos de configuración" con enlaces — progreso, no vacío
- Ruta de importación prominente: "Conectar fuente de datos" cuando vacío es esperado hasta la integración
- Copy según rol: el admin ve "invitar equipo"; el miembro ve "pedir al admin que cree proyecto"
Estancan
- "No se encontraron elementos" pasivo sin acción
- Múltiples CTAs compitiendo con el mismo peso
- Humor sin dirección — memorable, no activador
- Skeleton que nunca resuelve en guía
- Estado vacío oculto detrás de onboarding modal que el usuario descarta
El vacío filtrado merece tratamiento explícito: mostrar filtros activos, ofrecer "Limpiar todos los filtros," sugerir consulta más amplia. No mostrar onboarding de primera vez cuando el usuario ya tiene datos en otro lugar.
Estados vacíos en productos complejos
Tablas y dashboards. Fila de tabla vacía con CTA inline supera al chrome de tabla vacía. Los encabezados de columna siguen enseñando estructura. Fila de muestra (etiquetada) muestra la forma esperada de los datos.
Productos colaborativos. Workspace compartido vacío: distinguir "no has añadido" vs "el equipo no ha añadido" — CTAs distintos (crear vs invitar vs solicitar acceso).
Productos asíncronos. Bandeja vacía: explicar qué aparecerá y cómo disparar el primer evento. "Cuando un cliente envíe un formulario, las respuestas aparecen aquí" + enlace al constructor de formularios.
Features de pago. Estado vacío de upsell: mostrar valor del estado lleno, acotar la acción con claridad — no vacío falso que parece roto en el plan gratuito.
Medir click-through del CTA del estado vacío y activación downstream (¿completaron la acción que el estado vacío promovía?). Hacer A/B test de copy y assets de prueba — los estados vacíos tienen mucho tráfico para usuarios nuevos.
¿Cómo deben diseñar los equipos estados vacíos para onboarding?
Estas decisiones evitan callejones sin salida de talla única.
¿Deben los estados vacíos usar ilustraciones?
Cuando aclaran el resultado — sí. Decoración genérica sin valor informativo añade carga sin lift de activación. Preferir captura o diagrama simplificado de la UI poblada sobre arte abstracto.
¿Cuándo son apropiados los datos de muestra?
Cuando el modelo de datos es complejo y la brecha de imaginación es alta. Etiquetar con claridad: "Proyecto de muestra — eliminar cuando quieras." Evitar datos de muestra que se rompan en la primera acción real o confundan los informes.
¿Cómo se relacionan los estados vacíos con modales y tours de producto?
Los modales interrumpen; los estados vacíos están en contexto. Usar el estado vacío para la guía de primera acción principal; reservar tours para orientación entre superficies. Nunca exigir completar el tour para ver el CTA en el estado vacío.
Un argumento habitual va en la dirección opuesta
La visión contraria sostiene que los estados vacíos deben mantenerse mínimos — que los usuarios son inteligentes, el desorden los insulta y los buenos productos no necesitan guía.
El minimalismo funciona para usuarios avanzados que vuelven a un filtro limpiado. Los usuarios nuevos no son avanzados el día uno. La contención significa un CTA y una línea de contexto — no cero guía. El insulto es un panel en blanco que desperdicia su atención, no una invitación clara a actuar.
La guía escala hacia abajo: tras la primera creación exitosa, la variante del estado vacío cambia a patrón compacto para vacíos posteriores.
Lo que importa recordar
- Los estados vacíos son onboarding de primera pantalla para la mayoría de usuarios nuevos — diseñar para activación, no para ausencia.
- Segmentar vacíos de primera vez, filtrados y limpiados — copy y CTAs distintos.
- Una acción principal, contexto de valor de una línea, prueba visual del estado de éxito.
- Medir click-through del CTA y completación de la acción promovida.
- El vacío filtrado necesita contexto de filtros, no onboarding desde cero.
- Documentar variantes de estado vacío en el design system para consistencia.
Conclusión
Vacío es el estado por defecto de toda cuenta nueva. Tratarlo como placeholder garantiza una experiencia placeholder — los usuarios se van antes de que aparezca el valor. Estados vacíos como oportunidad de onboarding significa que cada pantalla sin datos responda: ¿para qué sirve esto?, ¿qué debo hacer ahora?, ¿cómo se ve lo bueno?
Auditar las cinco superficies vacías de mayor tráfico del producto. Si alguna muestra solo "Aún no hay datos," es deuda de activación con arreglo conocido.