Cómo diseñar un empty state que active en vez de asustar

Un usuario nuevo termina el alta y llega a una tabla sin filas que dice “Aún no hay elementos”. A veces con un dibujo de una caja vacía.

Esa pantalla es, literalmente, el producto para esa persona en ese momento. Es todo lo que tiene. Y en la mayoría de los productos que audito es la pantalla con menos trabajo de diseño encima, porque se diseñó pensando en cómo se ve llena.

Los tres vacíos que no son lo mismo

Antes de escribir nada, hay que saber cuál de los tres estás resolviendo, porque piden cosas distintas.

El vacío de primer uso. Nunca ha habido nada aquí. Es el importante para la activación y el que hay que trabajar más. Su trabajo es enseñar.

El vacío de resultado. Hay un filtro o una búsqueda que no devuelve nada. Su trabajo es explicar por qué y ofrecer la salida: quitar el filtro, ampliar el rango. Aquí un mensaje motivador queda fuera de lugar.

El vacío de tarea terminada. La bandeja se ha quedado a cero porque la persona ha procesado todo. Su trabajo es confirmar. Es el único de los tres donde celebrar tiene sentido.

Usar el mismo componente para los tres es el error más frecuente, y produce esa sensación rara de un producto que te felicita por no tener datos.

Los cuatro elementos del vacío de primer uso

1. Qué va a aparecer aquí. En los términos de la persona, no en los tuyos. “Aquí verás las facturas que envíes a tus clientes” es mejor que “Listado de documentos”.

2. Por qué le importa. Una frase que conecte esa pantalla con algo que la persona quería conseguir. Es el elemento que más se omite y el que convierte una instrucción en una razón.

3. El primer paso, uno solo. Un botón, no tres. Si de verdad hay tres caminos válidos, elige el que funciona para la mayoría y deja los otros como enlaces secundarios.

4. Cómo se ve lleno. Una vista previa atenuada de la pantalla con datos de ejemplo hace más por la comprensión que tres párrafos. La persona entiende de un vistazo qué está construyendo.

Lo que no funciona

La ilustración sola. Un dibujo bonito y “Nada por aquí todavía”. Ocupa el espacio donde debería estar la instrucción.

El tono gracioso sin contenido. “¡Vaya, esto está más vacío que mi nevera!” No ayuda a nadie a hacer nada, y en un producto de trabajo desgasta rápido.

Los datos de ejemplo mezclados con los reales. Parece buena idea y crea un problema nuevo: la persona no sabe qué es suyo, y su primera tarea con tu producto pasa a ser limpiar. Si quieres enseñar cómo se ve lleno, hazlo como vista previa claramente marcada, no como contenido.

El botón que lleva a otro formulario largo. El vacío te dice “crea tu primer proyecto”, pulsas, y aparecen catorce campos. Has movido la fricción, no la has quitado.

Un ejemplo, antes y después

Un producto de gestión de candidatos, pantalla de vacantes vacía.

Antes: un icono de carpeta, “No hay vacantes”, botón “Nueva vacante”.

Después: “Aquí verás tus procesos abiertos y en qué fase está cada candidato.” Debajo, una línea más pequeña: “La mayoría de equipos empiezan publicando el puesto que tienen más urgente.” Un botón: “Crear mi primera vacante.” Y a la derecha, atenuada, una vista previa de cómo se ve la pantalla con tres procesos en marcha.

El cambio no es de tono, es de trabajo. La primera versión informa de una ausencia. La segunda enseña el producto.

Cómo saber si el tuyo está fallando

La señal en los datos es específica: sesiones cortas el día uno, sin errores y sin reintentos, y silencio después. No hay nada roto. La persona entró, miró y no supo qué hacer.

Si en cambio hay reintentos y vueltas atrás, tu problema no es el estado vacío, es otro. Los siete patrones y sus señales están en los 7 errores de onboarding que matan la activación B2B, y el método para descartar causas, en cómo diagnosticar una tasa de activación baja.

Es de los arreglos más baratos que existen en producto: una pantalla, un texto y una vista previa. Si quieres el mapa completo de por dónde se te van los usuarios antes de decidir qué tocar, eso es una auditoría de producto.