El estado vacío es tu producto, no una ocurrencia tardía.

La pantalla más importante de tu producto es la que está vacía. Es la pantalla que la mayoría de los equipos lanzan al final, diseñan menos y luego olvidan que existe.

Abre cualquier aplicación nueva por primera vez. La bandeja de entrada está vacía, la lista de proyectos está vacía, la búsqueda no arroja resultados, acabas de vaciar un tablero. Cinco momentos diferentes, cinco pantallas vacías diferentes, y casi todos los productos las tratan como si fueran el mismo problema.

No son el mismo problema. Son cinco superficies de diseño completamente diferentes, y juntas deciden si alguien sigue usando tu producto o cierra la pestaña sin más.

Por qué el estado vacío es tu verdadera primera impresión

La gente no juzga tu producto por la página de inicio. Lo juzga por la segunda pantalla, la que aparece después de registrarse, aquella donde esperaban algo mágico y se encontraron con una triste ilustración que dice "Aún no hay nada aquí".

Ese momento es toda la presentación, condensada. Le dice al usuario qué es posible, qué hacer a continuación y cuánto has pensado realmente en él. Si lo haces bien, se engancha. Si te equivocas, se va, y por mucho que intentes contactarlo por correo electrónico, no volverá.

Un estado vacío bien diseñado cumple tres funciones a la vez. Explica para qué sirve la función, establece el tono emocional del producto y ofrece al usuario una acción siguiente específica, más sencilla que cerrar la pestaña.

La mayoría de los estados vacíos no hacen nada de esto. Muestran una caricatura amigable, se disculpan por estar vacíos y esperan que el usuario lo entienda por sí mismo. Eso no es diseño, es simplemente encogerse de hombros.

Los cinco tipos de estados vacíos (y por qué requieren diferentes tratamientos)

Tratar todas las pantallas vacías de la misma manera es el error fundamental del diseño de estados vacíos. Aquí están los cinco momentos distintos, ordenados según la frecuencia con la que los equipos cometen errores.

1. Primer estado vacío. El usuario acaba de registrarse, nunca antes ha visto este producto y la pantalla está vacía porque no ha hecho nada. Este es el estado vacío de mayor riesgo en tu producto.

2. Estado cero vacío. El usuario ya ha utilizado el producto, pero un área específica está vacía de forma natural, como un proyecto nuevo, un espacio de trabajo nuevo o una lista recién creada. Conoce el producto, pero desconoce esta parte.

3. Vacío posterior a la limpieza. El usuario vació algo a propósito. Vació su bandeja de entrada, terminó todas sus tareas, archivó todo. Es un momento de logro, no de ausencia.

4. Error vacío. La pantalla está vacía porque algo falló. La obtención de datos se interrumpió, la conexión se cayó o la integración está mal configurada. El usuario cree que el producto no funciona, aunque no sea así.

5. Búsqueda vacía. El usuario escribió una consulta y no obtuvo resultados. Tiene intención de realizar la búsqueda, ha invertido tiempo y esfuerzo, y no se ha devuelto nada. Este es el estado vacío más fácil de solucionar si se gestiona correctamente.

Cada tipo requiere una combinación diferente de explicación, acción y tono. Un estado de primera ejecución debe enseñar, un estado posterior a la limpieza debe celebrar, un estado de búsqueda vacía debe sugerir. Si usas la misma plantilla genérica "Nada aquí" para los cinco, habrás desperdiciado cuatro de ellos.

Comparación: qué debe y qué no debe hacer cada estado vacío

Las diferencias se hacen evidentes al compararlos. Aquí tienes la guía rápida.

| Tipo de vacío | Cuándo aparece | Qué debe hacer | Qué evitar |

|---|---|---|---|

| Primera ejecución | El usuario acaba de registrarse, aún no ha hecho nada | Enseñar la acción principal con datos de ejemplo o una primera tarea guiada | Cara triste más "Comenzar" sin destino |

| Estado cero | Un área específica es nueva, pero el usuario conoce el producto | Sugerir 2 o 3 acciones concretas, insinuar plantillas | Repetir todo el recorrido de incorporación |

| Posterior a la limpieza | El usuario acaba de terminar, archivar o vaciar una lista | Celebrar y luego mostrar la siguiente acción razonable | Actuar como si el usuario hubiera cometido un error |

| Error - vacío | Los datos no se cargaron ni sincronizaron | Indicar claramente el error, ofrecer reintentar, enlazar a una página de estado | Mostrar un estado vacío genérico y fingir que no hay ningún problema |

| Búsqueda - vacío | El usuario escribió una consulta y no obtuvo resultados | Mostrar los resultados de la búsqueda, sugerir consultas relacionadas, ofrecer la opción de crear una nueva | "No se encontraron resultados" sin salida |

Observe que los modos de fallo son prácticamente idénticos en toda la tabla. La mayoría de los productos muestran por defecto el mismo mensaje genérico para cada pantalla vacía, por lo que todos los estados vacíos en la mayoría de las aplicaciones resultan igual de mediocres.

Las cuatro estrategias de diseño que hacen que los estados vacíos funcionen

Hay exactamente cuatro estrategias que puede implementar. La mayoría de los estados vacíos eficaces utilizan dos o tres de ellas en combinación, nunca las cuatro a la vez, ya que esto genera confusión.

1. Datos de ejemplo. Rellenar la pantalla con contenido de ejemplo realista con el que el usuario pueda interactuar, editar o borrar. El panel de control de Stripe, con su botón para "Ver datos de prueba", es el ejemplo perfecto.

2. Acciones sugeridas. Muestra dos o tres pasos específicos a seguir como botones o tarjetas, en lugar de un botón genérico de "Comenzar". Las sugerencias de plantillas de Notion en una página nueva son la mejor opción.

3. Ilustración didáctica. Usa una imagen para mostrar cómo se verá el estado completo, no un dibujo animado triste. Una pequeña vista previa de cómo se ve una bandeja de entrada o un tablero una vez lleno.

4. Texto que define el tono. De tres a doce palabras que establecen la personalidad del producto y le indican al usuario para qué sirve este espacio. El texto de la bandeja de entrada vacía de Linear transmite más la esencia de la marca en una sola línea que la mayoría de las páginas de destino.

La clave está en elegir la combinación adecuada para cada estado. La primera ejecución requiere datos de muestra y acciones sugeridas; la fase posterior a la finalización requiere un texto que defina el tono y quizás una pequeña celebración; la búsqueda vacía requiere sugerencias y una oferta para crear. Adapta la acción al momento.

Productos reales que lo hacen bien (y qué copiar)

La forma más rápida de interiorizar esto es estudiar productos que consideran el estado vacío como un problema de diseño. Un breve recorrido por algunos de los mejores.

Bandeja de entrada vacía de Linear. Linear trata la bandeja de entrada vacía como un pequeño momento de descanso. El texto es sobrio, ligeramente divertido, acorde con la marca, y la imagen es tranquila en lugar de aleccionadora. No hay botón de "Comenzar" porque no es necesario.

Sugerencias de plantilla de Notion. Una nueva página de Notion está técnicamente vacía, pero nunca se siente vacía. El cursor está siempre listo, se muestran sugerencias para los comandos de barra diagonal y aparecen sugerencias de plantillas contextuales. Nunca te encuentras frente a una pantalla en blanco, sino frente a un menú de opciones.

Muro de borradores de Figma. Una nueva cuenta de Figma no muestra una lista de archivos vacía. Muestra el espacio de borradores con archivos de ejemplo, sugerencias para crear un equipo y una ruta clara al primer lienzo. Aprendes a usar el producto observándolo.

Cron, ahora calendario integrado de Notion Calendar. Al finalizar la integración, el calendario muestra tus eventos conectados reales, además de la superposición de atajos de teclado y algunos eventos de ejemplo que demuestran la personalidad del producto. Te familiarizas con él en diez segundos.

Primer lanzamiento de Things 3. Things incluye un proyecto de integración que utiliza el producto para enseñar a usarlo. Cada tarea es una lección. Para cuando revisas el último elemento, ya has usado todas las funciones que necesitas y el estado vacío refleja tu vida real.

Más productos que vale la pena copiar (Granola, Superhuman, Stripe, Replit, ChatGPT)

Algunos más, con preferencia por productos y herramientas de IA más recientes, ya que las tendencias aún se están definiendo.

Primera solicitud de transcripción de Granola. Granola sabe que el momento más incómodo es la primera reunión en la que no tienes nada que transcribir. Por eso, ofrece grabar una breve prueba o importar una transcripción de ejemplo para que veas cómo funciona la IA. Esto elimina el dilema del huevo y la gallina que tendría el producto de otra manera.

Incorporación de Superhuman. Superhuman realiza una llamada de incorporación con un agente real antes de que veas tu bandeja de entrada vacía, pero la primera prueba en la aplicación sigue enseñando con correos electrónicos de ejemplo y un tutorial de atajos de teclado. Cuando usas la aplicación por tu cuenta, el estado vacío se siente como una función.

Panel de control vacío de Stripe. Stripe muestra un panel de control completo con datos de ejemplo al registrarte. Hay un indicador claro de "Visualizando datos de prueba" y, con un solo clic, accedes a tu cuenta real, que está vacía. Ves el destino antes de ver la ruta.

Espacio de trabajo vacío de Replit. Un espacio de trabajo nuevo de Replit no está vacío. Es un editor de código con un archivo de inicio, una consola con un saludo amigable y un botón de ejecución que ya funciona. Puedes escribir código en los primeros diez segundos.

Página de sugerencias en blanco de ChatGPT. El estado vacío de ChatGPT es, como es bien sabido, un solo cuadro de texto, y funciona en cierta medida porque el producto tiene popularidad. Aun así, añade sugerencias de sugerencias en la parte inferior para los nuevos usuarios, que es lo mínimo indispensable. Si no tienes la marca de ChatGPT, no copies el estado vacío de ChatGPT.

Los modos de fallo, identificados y señalados

Los estados vacíos problemáticos siguen un pequeño número de patrones reconocibles. Una vez que los identifiques, deja de distribuirlos.

La ilustración triste. Una mascota amigable con ojos caídos junto a "Aún no hay nada aquí". Resulta simpática en Figma, pero resulta insultante en el producto. El usuario no está triste, simplemente se acaba de registrar.

El botón "Comenzar" que no lleva a ninguna parte. Una gran llamada a la acción que abre un formulario de creación genérico sin contexto, plantilla ni ejemplo. El usuario hace clic, ve un formulario en blanco y ahora el estado vacío se extiende dos pantallas más allá.

El estado sin salida. La búsqueda no devuelve nada, fin de la historia. Sin sugerencias, sin resultados relacionados, sin ofrecer la creación de lo que buscaban. El usuario escribió algo, se le dijo que no, y la conversación terminó.

La pantalla en blanco infinita. Común en productos de IA. Toda la interfaz es un cuadro de texto vacío esperando una indicación. Sin ejemplos, sin valores predeterminados, sin guías. El usuario escribe "hola" y se va.

La matemática de la activación: por qué los primeros 60 segundos son cruciales

Cada producto tiene un momento de activación, la primera vez que el usuario hace lo que le da valor. Enviar el primer mensaje, crear el primer proyecto, importar el primer contacto, generar el primer resultado.

El estado vacío es la pantalla entre el registro y la activación. Cada segundo que el usuario pasa mirando "Aún no hay nada aquí" es un segundo que podría haber dedicado a activar el producto, y la pérdida de usuarios es drástica. Los primeros 60 segundos de una sesión se correlacionan más con la retención que los siguientes 60 minutos juntos.

Por eso, los datos de ejemplo y las acciones sugeridas superan a las pantallas en blanco casi siempre. Redujeron drásticamente el proceso de activación, pasando de "decidir qué hacer, luego averiguar cómo y luego hacerlo" a "hacer clic aquí, ver qué sucede y aprender a usar el producto". Tres pasos en uno.

Si tu tasa de activación es baja, los estados vacíos suelen ser la solución más económica para todo el producto. Más económico que rediseñar la incorporación de usuarios, más económico que los tutoriales, más económico que las secuencias de correo electrónico. Simplemente coloca algo útil en la pantalla.

El enfoque de la IA: diseñar para el vacío infinito

Los productos de IA tienen un problema único con los estados vacíos. La interfaz suele ser un único cuadro de entrada que, en teoría, puede hacer cualquier cosa, lo que significa que prácticamente no puede hacer nada hasta que el usuario sepa qué preguntar. Este es el vacío infinito.

ChatGPT, Claude, generadores de imágenes, Cursor: todas las herramientas de IA se enfrentan a esto. La solución ingenua es un enorme campo de texto en blanco con "Pregúntame lo que quieras". El usuario, ante un sinfín de posibilidades, escribe algo sin importancia, recibe una respuesta genérica y concluye que el producto es mediocre. La solución es la misma que en los productos convencionales, solo que más precisa. Sugerencias que muestran el alcance de las capacidades de la IA, ejemplos de conversaciones o generaciones que demuestran su calidad, y algunas plantillas iniciales que ayudan al usuario a superar el inicio en frío. La estrategia de "grabar una reunión de prueba" de Granola aplicada a cualquier función de tu IA.

Trata el cuadro de texto como una frase que el usuario está terminando, no como una que está empezando. Dale la primera mitad. El espacio en blanco infinito se convierte en un primer paso guiado, y la activación se dispara.

Tono y estado posterior: los estados vacíos con emociones

La mayoría de los equipos se detienen en la primera ejecución. El estado posterior es donde el producto se siente como un compañero de trabajo que se ha dado cuenta.

El tono lo es todo. Los estados vacíos se interpretan en momentos de baja confianza. El usuario es nuevo, está perdido, acaba de terminar algo o ha tenido un error. Un estado vacío sarcástico en una aplicación financiera se siente irrespetuoso, uno formal en una herramienta creativa se siente rígido, y uno alegre en un caso de error se siente obtuso. Redacta el texto del estado vacío con un tono uniforme, con variaciones intencionadas según el contexto.

Después de completar una tarea, merece una pequeña celebración. El usuario acaba de terminar una lista, archivar todo y alcanzar la bandeja de entrada vacía. Things 3 muestra un pequeño mensaje de logro cuando completas todas las tareas. Linear celebra discretamente una cola de triaje vacía. La dopamina es real, y es uno de los pocos momentos en que el producto se alegra genuinamente con el usuario.

No te excedas. Una animación de confeti cada vez que alguien completa cinco tareas se vuelve aburrida para el martes, mientras que un reconocimiento claro y tranquilo, junto con una sugerencia reflexiva de "¿qué sigue?", siempre funciona. Después de la bandeja de entrada vacía, sugiere planificar el día. Después de completar un proyecto, sugiere revisar el siguiente.

Error y búsqueda: los estados vacíos que ganan o pierden confianza

Estos son los dos estados vacíos que más preocupan al usuario, ya que ambos ocurren en medio de una tarea, con la intención del usuario en juego.

El estado de error vacío debe diseñarse para generar confianza. Cuando no se cargan los datos, la mayoría de los productos muestran un estado vacío genérico o un rastreo de pila disfrazado de error. Ambos destruyen la confianza de diferentes maneras. La versión genérica es peor porque el usuario ni siquiera sabe que el producto está fallando; asume que la bandeja de entrada vacía es real y no vuelve.

La mejor estrategia es comunicar el error de forma clara y concisa. Explícale al usuario qué falló, usando sus propias palabras, no las tuyas. Ofrécele la opción de reintentar, enlaza a una página de estado e indica la configuración incorrecta. Un punto a favor si el estado de error vacío hereda la estructura visual del estado con datos, para que el usuario entienda qué le falta.

El estado de búsqueda vacío es el más fácil de solucionar. El usuario escribió algo, sabes exactamente lo que quiere, y mostrar "No se encontraron resultados" con una carita triste es una mala práctica. La versión mínima viable reproduce la consulta y sugiere búsquedas relacionadas. La buena versión ofrece crear lo que se buscó. La versión excelente utiliza la consulta para sugerir una plantilla, una acción o un artículo de ayuda.

La búsqueda vacía de GitHub suele sugerir crear una incidencia con la consulta como título. Notion sugiere crear una página. Linear sugiere reportar un error. La búsqueda vacía es el único lugar donde la opción "Comenzar" resulta útil, ya que el destino es evidente.

Cómo auditar los estados vacíos de tu producto

No puedes solucionar lo que no has catalogado. La mayoría de los equipos se sorprenden de la cantidad de estados vacíos que tienen una vez que los cuentan. Ejecuta esta auditoría en este orden:

Abre todas las páginas de tu producto en una sesión nueva de incógnito, iniciando sesión como un usuario nuevo. Toma capturas de pantalla de todas las pantallas que tengan algún tipo de superficie vacía. Enuméralos en una hoja de cálculo, una fila por pantalla, con columnas para tipo, texto actual, elemento visual actual y acción actual.

Luego, etiqueta cada uno con uno de los cinco tipos: primera ejecución, estado cero, después de borrar, error vacío, búsqueda vacía. Verás que la mayoría de los productos tienen entre diez y treinta estados vacíos, y solo uno o dos se han diseñado intencionalmente.

Para cada uno, hazte tres preguntas: ¿Enseña para qué sirve esta superficie?, ¿Indica una acción específica a continuación?, ¿Es coherente con el resto del producto? Si la respuesta a todas es sí, déjalo como está; si alguna respuesta es no, corrige ese detalle y continúa.

Si quieres que sea una actividad de equipo, reserva 90 minutos e invita al equipo de diseño, al gerente de producto y a un ingeniero que no le guste escribir textos. La agenda es muy sencilla y puedes entregar los resultados la misma semana.

Durante los primeros 30 minutos, realiza la auditoría en equipo, compartiendo una pantalla y revisando cada superficie vacía. Debatan sobre el tipo de cada una. No hay problema si no estás de acuerdo; lo importante es la conversación.

En los próximos 30 minutos, selecciona los tres estados vacíos con mayor tráfico y reescríbelos al instante. Una frase que defina el tono, dos acciones sugeridas y la decisión de si añadir o no datos de ejemplo. Resiste la tentación de perfeccionar los elementos visuales; prioriza el texto.

En los últimos 30 minutos, asigna responsables y fija un plazo de entrega de una semana. No conviertas esto en una iniciativa trimestral. Los estados vacíos son pequeños, concisos y se implementan rápidamente. Publica tres esta semana, tres más la semana que viene y, en un mes, tu gráfico de activación se moverá.

El estado vacío es el lenguaje corporal del producto

Puedes falsificar el sitio web de marketing. Puedes falsificar la página de inicio. Pero no puedes falsificar el estado vacío, porque es el momento en que el producto deja de prometer y empieza a cumplir.

Cuando el usuario llega a una pantalla vacía, todas las decisiones que tomaste quedan al descubierto. ¿Pensaste en él o le enviaste la opción predeterminada? ¿Le enseñó a usar el producto o te disculpaste por estar vacío? ¿Escribiste un texto que suena natural o como el de un mago de 2008?

Trata el estado vacío como la puerta de entrada, no como una nota al pie. Diseñalo primero, no al final. Revísalo mensualmente. Contrata a alguien para que se encargue de él.

La pantalla más ignorada de tu producto es también la que tus usuarios ven con más frecuencia. ¡Haz que valga la pena!