Los empty states son el producto
Los empty states no son pulido. Son la superficie de activación, la primera impresión y la pantalla que decide si tu curva de retención se rompe antes de que los usuarios vean datos reales.
La pantalla más importante de tu producto es la que no tiene nada. No el dashboard. No la página de ajustes. La pantalla en la que aterriza el usuario antes de que exista ningún dato. Esa pantalla es todo el producto comprimido en un solo frame, y la mayoría de los equipos la tratan como una ocurrencia tardía.
Los empty states se asignan a quien tenga tiempo. Reciben una ilustración de stock de una persona con una lupa y una frase que dice "Aún no hay nada aquí." Luego el equipo lanza y se pregunta por qué la activación está plana. El empty state no era pulido. Era el producto. Simplemente construiste el equivocado.
El empty state es la superficie de activación
La activación no ocurre en el dashboard. Ocurre en el empty state. Ahí es donde el usuario decide si el producto merece una segunda sesión.
Un usuario nuevo no ve tu roadmap ni tus casos de estudio. Ve una pantalla en blanco con tu logo y una vocecita que pregunta "vale, ¿y ahora qué?". Lo que diga la pantalla a continuación se convierte en el producto. El empty state es el único producto que han usado jamás.
Linear lo entiende. El inbox vacío no dice "No hay issues." Es un lienzo compuesto con precisión, con un atajo de teclado, una siguiente acción clara y la sensación de estar dentro de una herramienta hecha por gente que se preocupa. El empty state es la activación. El dashboard es la recompensa.
Lo que dice cada empty state
Un empty state es el sistema hablando cuando no tiene nada más que decir. Lo que diga se convierte en la marca y en la primera impresión del usuario sobre cómo lo trata este producto.
Un mal empty state se disculpa por no tener datos. Uno bueno asume que el usuario está aquí a propósito y le da el siguiente movimiento. La diferencia es la postura. Uno dice "perdona, aquí no hay nada." El otro dice "así es como esto arranca."
El documento en blanco de Notion es el ejemplo más limpio de la industria. Un prompt suave, una pista del menú slash, foco inmediato del teclado. Sin ilustración, sin pantalla de bienvenida. Escribir es la activación, y el empty state es el producto.
Los cinco arquetipos que los diseñadores siguen haciendo mal
La mayoría de los equipos tratan el "empty state" como un solo problema de diseño. Son cinco. Cada uno aparece en un momento distinto, cumple un papel distinto en la retención y falla por una razón distinta.
1. Cero datos, primera ejecución
La pantalla que ve el usuario la primera vez que abre el producto. Sin proyectos, sin documentos, sin historial. El empty state con más en juego de la app, y normalmente el más descuidado.
El estado de primera apertura de Cursor es una lección. Una sola ventana de editor, un prompt suave, un comando de ejemplo listo para el teclado. Sin tour, sin desfile de tooltips, sin modal de "Bienvenido a Cursor". El usuario ya está dentro del trabajo.
El canvas de archivo nuevo de Figma hace lo mismo en otro registro. Un canvas infinito limpio, una barra de herramientas al alcance, un cursor donde lo dejaste. Compáralo con productos que abren con una checklist de cinco pasos y un muro de "Conecta tu workspace". Uno se siente como una herramienta. El otro se siente como deberes.
2. Cero resultados de un filtro
El usuario acaba de pedir algo específico y tu producto no tiene nada que mostrar. Es un momento de confianza. El empty state tiene que reconocer la búsqueda, validar que se ejecutó y ofrecer un siguiente paso.
Linear muestra el filtro activo, una explicación de una línea y una acción clara de "Clear filters". El dashboard de pagos de Stripe hace lo mismo cuando un rango de fechas no devuelve resultados. La página no desaparece. Explica y luego ofrece.
El modo de fallo es el callejón sin salida: "No se encontraron resultados." Punto. Sin contexto, sin escape. El usuario queda atrapado en un estado que creó el producto, y el producto se niega a ayudarle a salir.
3. Cero permiso
El empty state que nadie diseña y todos lanzan. El usuario aterriza en una pantalla a la que no tiene acceso, y el producto lo castiga por ser curioso. Un 403, una línea de "No tienes permiso", un callejón sin salida.
La versión buena respeta al usuario. Explica quién puede conceder acceso, le da un botón de "Solicitar acceso" a un clic y le dice qué pasa después. Slack lo hace cuando entras a un canal privado sin ser miembro. El empty state convierte un muro en una puerta.
4. Cero conexión
El usuario abrió tu producto y todavía no se ha conectado a nada. Stripe antes de cualquier pago. Vercel antes de cualquier deploy. Un workspace nuevo de Slack antes de que haya canales reales. El mayor riesgo de abandono de la app, porque el usuario mira un producto en blanco y aún no se ha comprometido a llenarlo.
El estado de "aún no hay pagos" de Stripe Atlas es una clase magistral. Sin gráfico vacío con carita triste. Muestra el tipo de actividad que mostrará el dashboard, te empuja hacia tu primera integración y enlaza directo a la API key que necesitas después.
La lista vacía de proyectos de Vercel es lo opuesto a un vacío. Un botón de deploy, una opción de importar, una plantilla de ejemplo en la misma pantalla. El primer deploy es el evento de activación, y el empty state es la pista de despegue.
5. Cero salida de IA
Nuevo, y la mayoría de los productos están fallando en esto. El usuario envió un prompt y el sistema no tiene nada que devolver. El modelo agotó el tiempo, la entrada era insuficiente o una barrera de salida lo bloqueó.
La versión mala dice "Lo sentimos, algo salió mal." La buena es específica. Por qué no volvió nada, qué puede cambiar el usuario, si hay camino de reintento. El flujo de primera grabación de Loom resuelve bien un problema parecido: cuando la grabación no se sube, el empty state explica el fallo y ofrece un reintento inmediato sin perder el archivo. El desglose de diseño de onboarding para productos de IA cubre cómo cambia la forma del onboarding cuando la IA es la superficie central.
Lo que necesita todo empty state
Los buenos comparten cinco elementos. Omite uno y la pantalla vuelve al modo disculpa.
- Contexto. Nombra lo que el usuario está viendo y por qué está vacío. "Aún no hay issues" no basta. "No hay issues en este ciclo. Añade el primero con C." es una pantalla haciendo su trabajo.
- Acción. Una acción principal, una tecla, un botón. Si escribes tres frases diciéndoles qué hacer, el diseño está mal.
- Voz. La voz del sistema cuando no tiene nada más que decir tiene que encajar con el resto de la marca. Un tono estéril de error dentro de un producto amable rompe el hechizo.
- Jerarquía. Título, explicación de una línea, acción principal, enlace secundario opcional. Cuatro elementos con una jerarquía visual real haciendo el trabajo. Cualquier cosa más es ruido.
- Movimiento. Una señal suave de que la pantalla está viva. Un cursor parpadeante, un pulso sutil del CTA, una pequeña flecha animada. Una señal de que el producto está esperando al usuario.
Modos de fallo que matan los empty states
Seis patrones matan más empty states que cualquier otra cosa.
Ilustraciones vagas. Un dibujo con un portapapeles. Un telescopio. Un astronauta flotando. Sustituyen el trabajo que la pantalla debía hacer y señalan que el producto no es lo bastante serio como para escribir copy de verdad.
Estados sin salida. "Aún no hay nada aquí" sin siguiente paso. Un 404 sin escape. Un 403 sin camino hacia el acceso. Cada empty state sin siguiente acción es una fuga en la retención.
Empty states que sermonean. Un párrafo largo explicando qué hace esta sección. El usuario vino a usar el producto, no a leer un tutorial. Si el empty state necesita tres párrafos, lo que falta es que el producto necesite menos explicación, no que la pantalla tenga más.
La trampa del inbox zero. Diseñar la celebración de "todo hecho" antes que el flujo de "primera acción". Superhuman se gana el inbox zero con meses de trabajo real. La mayoría de los productos copian la celebración sin ganársela, y los usuarios se sienten tratados con condescendencia desde el día uno.
La excusa del "aún no hay nada aquí". Tres palabras, sin contexto, sin acción, sin voz. El equivalente en empty states a un diseñador rindiéndose. Si esta cadena sale en tu producto, tu retención ya está rota.
Genérico para todos los arquetipos. Un solo componente reutilizado en primera ejecución, sin resultados, sin permiso y sin conexión. Cada arquetipo tiene apuestas distintas. Un único componente no puede servirlos a todos sin aplanar cada uno.
La auditoría de empty states
Pasa cada empty state por estas siete preguntas. Si no puedes responder todas con un sí claro, la pantalla no está terminada.
- ¿La pantalla le dice al usuario dónde está y por qué está vacía? Una etiqueta, una explicación de una línea, un motivo. Si tiene que adivinar, la pantalla falló antes de cargar.
- ¿Hay exactamente una acción principal? No dos botones compitiendo. Una acción, hecha obvia por jerarquía y contraste, como la hero section de la pantalla que realmente es.
- ¿La voz encaja con el resto del producto? Léela en voz alta junto a una pantalla con datos. Si el tono cambia, el empty state lleva otra marca puesta.
- ¿El siguiente paso se logra con una tecla o un clic? No "ve a ajustes, luego conecta, luego vuelve." Un solo movimiento. Cualquier cosa más larga es trabajo que el empty state debió absorber.
- ¿La pantalla se siente viva, no abandonada? Un cursor, un pulso, un placeholder, una pista. Un blanco estático se siente roto aunque funcione bien.
- ¿La pantalla es específica del arquetipo? Cada arquetipo tiene apuestas y copy distintos. Un componente genérico reutilizado es un mal olor, no un sistema.
- Si el usuario solo ve esta pantalla, ¿vende el producto? Si la respuesta es no, el empty state no cumple su parte, y es la pantalla por la que la mayoría de los usuarios nuevos juzgarán el producto.
Un producto donde todos los empty states pasan estas siete preguntas activa sin esfuerzo. Todo lo demás se acumula sobre pantallas que ya hicieron el trabajo de convencer.
Elige el principio, luego lanza la pantalla
Los empty states no son la capa de pulido, son la capa que carga el peso. El producto que gane en 2026 es aquel cuya primera pantalla, página de cero resultados y dashboard desconectado ya se sienten como el producto al que el usuario se apuntó. El desglose de principios de diseño de landing pages es la versión para páginas de marketing, y el artículo de principios de diseño web cubre cómo el resto del producto lo sigue.
Deja de diseñar primero el dashboard. Empieza por la pantalla que no tiene nada. El dashboard es la recompensa. El empty state es el trato.
Preguntas frecuentes
¿Cuál es la diferencia entre un empty state y un zero state?
Significan lo mismo en la mayoría de los equipos. "Zero state" suele referirse específicamente a escenarios de primera ejecución sin datos. "Empty state" es más amplio y cubre cualquier pantalla donde falta el contenido esperado, incluidos resultados filtrados, muros de permisos y fallos de IA. Los principios son idénticos.
¿Debería todo empty state tener una ilustración?
No. La mayoría no debería. Una ilustración se justifica cuando aporta información, fija un tono que la marca necesita o ancla visualmente una explicación compleja de primera ejecución. Un dibujo simpático con un portapapeles es decoración, no diseño. Si la pantalla funciona sin la ilustración, lánzala sin ella.
¿Cómo se escribe el copy de un empty state?
Dos frases, como máximo. La primera nombra lo que el usuario está viendo y por qué está vacío. La segunda le dice el siguiente movimiento, en voz activa, con un verbo. Corta cada adjetivo y cada disculpa. Léelo en voz alta. Si suena a plantilla de stock, reescríbelo.
Diseña primero la pantalla vacía
La pantalla sin nada es la que lo decide todo. El dashboard y las integraciones se apoyan sobre una primera impresión que quizá no diseñaste a propósito. El costo de acertar con esa pantalla es una semana extra. El costo de fallar es la curva de retención que nadie sabe explicar.
Si quieres un equipo que diseñe los empty states como parte del producto y no como limpieza al final, contrata a Brainy. Lanzamos productos donde la primera pantalla que ve el usuario es la que recuerda.
Want a product where the empty states do the selling instead of the apologizing? Brainy designs first-run flows and zero states as part of the product, not as cleanup.
Get Started
