Patrones de diseño de estados vacíos que reducen la confusión y guían a los usuarios hacia el siguiente paso de configuración, con copy, diseño y listas de verificación que puedes aplicar rápido.
Una pantalla en blanco no es neutral. Crea una pausa donde la gente empieza a adivinar qué hacer, si se saltaron un paso o si el producto funciona. Durante la configuración, esa pausa es costosa. Convierte “estoy empezando” en “volveré más tarde”.
Un estado vacío es lo que ve el usuario cuando no hay nada que mostrar todavía porque no ha creado, importado o conectado nada. No es una pantalla de carga, un mensaje de error o una advertencia de permisos. Es el momento justo antes del valor, cuando la app debe ayudar al usuario a llegar a un primer resultado significativo.
Un buen estado vacío tiene un trabajo: mover al usuario a la siguiente acción exitosa con el menor pensamiento posible. “Exitoso” importa. El siguiente paso debe producir un resultado real (un primer proyecto, una fuente de datos conectada, el primer elemento creado), no un formulario sin salida o un tour de producto vago.
Estos momentos aparecen más a menudo de lo que los equipos esperan: primer inicio tras registro, un workspace nuevo, una pestaña de funcionalidad sin elementos aún (proyectos, clientes, archivos) o una ruta de configuración donde se saltó la importación y no hay nada.
Cuando un estado vacío hace su trabajo, responde tres preguntas con rapidez:
Ejemplo: en Koder.ai, un usuario nuevo puede abrir un workspace fresco y no ver apps aún. Un estado vacío sólido dice claramente que no se ha creado nada, ofrece una acción obvia como “Crea tu primera app” y añade una pequeña nota de seguridad (por ejemplo, que existe la exportación de código y snapshots una vez que empiecen). El objetivo es convertir “nada aquí” en “puedo llegar a un primer resultado funcional”.
Para un usuario primerizo, una pantalla vacía puede parecer que la app se ha detenido o que hicieron algo mal. La mente llena el vacío rápido, y normalmente no en tu favor.
La mayoría de la gente se hace en silencio el mismo conjunto de preguntas:
Las emociones detrás de esas preguntas guían el comportamiento. La incertidumbre hace que la gente dude. El miedo a equivocarse hace que eviten el botón principal. La impaciencia hace que cierren la app si no aparece un siguiente paso claro en unos segundos.
Los estados vacíos para usuarios nuevos y para usuarios avanzados resuelven problemas distintos. Los usuarios nuevos necesitan contexto y seguridad porque no conocen todavía tu vocabulario. Los usuarios que vuelven quieren velocidad: una forma rápida de crear otro elemento, importar datos o repetir una acción familiar.
Los estados vacíos de configuración también difieren de los estados de error y de carga. La carga dice “espera, algo está pasando”. El error dice “algo falló, aquí está por qué”. La configuración dice “aún no hay nada y es normal. Aquí tienes cómo empezar”.
Un ejemplo concreto: si alguien abre un workspace nuevo en Koder.ai y ve una página de Proyectos vacía, no están pensando en características. Preguntan: “¿Empiezo desde un prompt, importo código o elijo una plantilla, y se romperá algo?” Tu estado vacío debe responder eso sin enviarles a la documentación.
Un buen estado vacío no se siente vacío. Actúa como un cartel: “Esto es, y este es el próximo clic”.
Una estructura que funciona en la mayoría de flujos de configuración tiene tres partes:
Mantén la explicación ajustada. Si necesitas un párrafo para explicar la pantalla, estás pidiendo al usuario que piense demasiado. Apunta a 1 o 2 frases cortas con palabras sencillas como “Añade tu primer proyecto” o “Crea tu primer workspace”.
Luego haz que el siguiente paso sea obvio con un solo botón primario. Si muestras tres botones iguales, le pides al usuario que elija un camino antes de entender la página. Si debes ofrecer alternativas (importar, plantilla, saltar), mantenlas visualmente más discretas que la acción principal.
Usa la línea de tranquilidad para eliminar miedos comunes: equivocarse, perder tiempo o necesitar habilidades técnicas. Pequeñas pistas sobre qué ocurre después y qué se puede deshacer ayudan más que explicaciones largas.
Ejemplo de copy para una pantalla de “Proyectos” para primerizos:
Título: Empieza tu primer proyecto
Explicación: Los proyectos contienen la configuración y los lanzamientos de tu app.
Acción primaria: Crear proyecto
Tranquilidad: Toma unos 2 minutos. Puedes renombrarlo en cualquier momento.
Si tu producto soporta varias formas de empezar (construir desde chat, importar o usar plantilla, como herramientas tipo Koder.ai), mantiene “Crear” como predeterminado y coloca “Importar” y “Usar una plantilla” como acciones secundarias debajo.
Los estados vacíos fallan cuando el copy habla de características en lugar de lo que obtiene el usuario. Tus palabras deben responder rápido: ¿qué es esta pantalla? ¿por qué debería hacer algo aquí? ¿qué debo hacer a continuación?
Una fórmula simple para titulares es Resultado + objeto. Nombra el resultado y la cosa que crearán, no el nombre interno de la funcionalidad.
Para el cuerpo, usa qué es + por qué importa en una o dos frases:
"Los clientes son las personas a las que vendes. Añade uno ahora para poder enviar una factura y rastrear pagos."
Los CTAs deben empezar con un verbo claro e incluir un sustantivo específico. Evita botones vagos como “Comenzar” cuando hay múltiples caminos.
Añade microcopy justo al lado de la elección que parezca riesgosa. Pequeñas tranquilizaciones a menudo hacen más que explicaciones largas:
Si tu producto genera contenido para el usuario (como Koder.ai), fija expectativas para que la gente sepa que no está comprometiéndose con una versión final: “Crearemos un primer borrador. Podrás revisarlo y editarlo antes de desplegar.”
Un buen estado vacío debería leerse como un cartel, no como un póster. El diseño necesita un orden claro para que la gente pueda mirar una vez, entender y actuar.
Usa una jerarquía simple que coincida con cómo escanean los ojos una página: titular, una frase corta, un CTA primario y luego una acción secundaria más discreta (importar, plantilla, saltar).
Mantén el botón primario cerca del mensaje. Si el usuario tiene que leer, desplazarse y luego decidir, a menudo se detiene. Un patrón común es un bloque compacto (titular + cuerpo + CTA), con más espacio en blanco entre ese bloque y el resto (navegación, pie, paneles laterales).
Los iconos y pequeñas ilustraciones pueden ayudar a escanear, pero solo si añaden significado. Un icono de carpeta junto a “Sin proyectos aún” es útil. Una mascota aleatoria normalmente no lo es. Si usas una ilustración, mantenla pequeña y colócala encima del titular para que no compita con el CTA.
Uno de los patrones más sólidos es mostrar una pequeña vista previa del éxito: una tarjeta de ejemplo, una fila de tabla demo o una baldosa de ejemplo desvanecida. En una herramienta como Koder.ai, la pantalla vacía de “Apps” podría mostrar una tarjeta de app de muestra (nombre, estado, última actualización) para que los usuarios entiendan instantáneamente qué van a crear.
Cuando alguien llega a una pantalla vacía, normalmente quiere una de tres cosas: empezar desde cero, traer datos o avanzar rápido con un punto de partida. Los buenos estados vacíos dejan claras esas rutas sin obligar al usuario a estudiar el producto.
Prioriza “Crear” cuando la primera victoria real es hacer algo nuevo: un proyecto, un workspace, una página o el primer registro. Esto funciona mejor cuando el usuario puede terminar rápido y la acción es reversible.
Si la creación lleva más tiempo, divídela en un paso inicial más pequeño (por ejemplo, “Crear un borrador”) para que puedan avanzar sin sentirse comprometidos.
Prioriza “Importar” cuando la mayoría de usuarios nuevos llegan con un sistema, archivo o cuenta que conectar. El estado vacío debe decir qué soporta la importación y qué obtienen después (por ejemplo, campos mapeados y elementos creados).
Una forma práctica de elegir el CTA principal es usar el contexto. Si el usuario viene de contenido de migración, destaca Importar. Si hizo clic en un botón “nuevo proyecto”, destaca Crear. Si la configuración es compleja, destaca Plantilla.
Prioriza las plantillas cuando tu producto tiene puntos de partida comunes y los usuarios quieren adaptar, no diseñar. Nombra las plantillas por resultado (“Pipeline de ventas”, “Planificador semanal”), no por características.
Una opción segura “Probar con datos de ejemplo” reduce el miedo. Deja claro que se puede borrar. Para un constructor centrado en chat como Koder.ai, un proyecto de muestra puede mostrar la forma de una app funcional antes de que el usuario escriba su propio prompt.
Las pantallas vacías no son neutrales. Las mejores hacen que la siguiente acción exitosa se sienta obvia, segura y rápida.
Ejemplo: si alguien abre un CRM nuevo y ve la pestaña “Contactos” vacía, la victoria más rápida es “Añade tu primer contacto”. Limítalo a nombre + email, ofrece “Importar CSV” como alternativa y tranquilízales diciendo que podrán actualizar campos después.
La mayoría de los estados vacíos “atascados” fallan por una razón: hacen que el siguiente paso se sienta riesgoso o confuso.
Si muestras tres botones que parecen igual de importantes, los usuarios dudan. Elige una acción principal y una secundaria. Pon todo lo demás detrás de un discreto “Más opciones”.
“Dashboards potentes, roles flexibles, ajustes avanzados” no dice a la gente qué hacer ahora. Cámbialo por el siguiente resultado que obtendrán al clicar.
Ejemplos:
Los formularios largos en un estado vacío se sienten a compromiso. Si necesitas detalles, gánatelos después. Empieza con el paso más pequeño que produzca algo visible.
En lugar de pedir nombre, tamaño de empresa, rol y objetivos antes de que cargue nada, pide solo “Nombre del proyecto” y haz lo demás opcional una vez que exista la primera pantalla.
El humor está bien, pero no donde el usuario necesita claridad. “Nada que ver aquí” desperdicia el momento. Di exactamente qué pasará tras el clic y qué no pasará.
Algunos usuarios no pueden crear desde cero. Ofrece una ruta de respaldo real: importar, plantilla o probar con datos de ejemplo. Por ejemplo, si alguien usa Koder.ai y no tiene una idea lista, “Empezar con una app de ejemplo” puede llevarlos a una pantalla funcional sin escribir una especificación completa.
Un nuevo usuario debe entender qué es la pantalla, por qué importa y qué hacer a continuación en unos cinco segundos.
La tranquilidad convierte la vacilación en acción. Añade una línea cerca del CTA que reduzca el miedo, como “Puedes cambiar esto después” o “Nada se publica hasta que confirmes”. Manténla calmada y específica.
Una prueba simple: pide a un compañero que mire la pantalla cinco segundos y luego te diga qué cree que pasará si clican el botón principal. Si no pueden responder, ajusta el copy o la jerarquía.
Si estás construyendo flujos de configuración en un constructor centrado en chat como Koder.ai, la misma lista aplica. El estado vacío debe invitar a una acción exitosa: empezar desde una plantilla, importar datos o generar una primera versión funcional que puedan editar con seguridad.
Un fundador en solitario se registra en Koder.ai y abre un workspace nuevo. Llega a una pantalla de Proyectos con cero apps y sin idea de qué es “bueno” todavía.
En lugar de una tabla en blanco, el estado vacío muestra una promesa corta, un siguiente paso claro y una nota de seguridad. Aquí tienes un ejemplo del copy y CTA (trata las estimaciones de tiempo como marcadores que debes validar):
Your workspace is empty.
Create your first app in 5 minutes. Start with a template or describe what you want in plain English.
[Create your first app]
Secondary: Import existing code | Browse templates
Note: You can export the source code anytime.
Tras clicar Create your first app, la siguiente pantalla pregunta una sola cosa simple: “¿Qué estás construyendo?” con un único campo y 2 prompts de ejemplo (como “CRM para una agencia pequeña” o “Página de aterrizaje con registro”). Mantén el camino estrecho: un campo obvio, un botón obvio.
La segunda pantalla puede ser una revisión rápida del plan (funcionalidades, páginas, datos), seguida de un paso de construcción y una vista previa funcional. El primer momento de éxito es cuando el usuario puede hacer una acción real en esa vista previa, como añadir un registro o enviar una prueba de registro.
Una vez que hay datos, los usuarios que vuelven no deberían ver el mismo estado vacío otra vez. La pantalla de Proyectos puede cambiar a una vista de “apps recientes” con una acción rápida prominente (por ejemplo, Nueva app) y acciones más pequeñas (como Snapshots o Deploy) según lo que hicieron la vez anterior.
Para saber si tu estado vacío funciona, sigue algunos números:
Elige un flujo de configuración para mejorar esta semana. Escoge el que tenga mayor abandono o el que los usuarios nuevos ven primero. Reescribe su estado vacío para que responda tres preguntas rápido: ¿qué es esto? ¿por qué debería hacerlo ahora? ¿cuál es el siguiente clic?
Mantén el cambio pequeño. No estás rediseñando el onboarding. Estás haciendo que la primera acción exitosa sea obvia.
Un plan simple de una semana:
Tras lograr una victoria, estandariza. Crea un patrón interno corto para estados vacíos: espaciado, estilo de titulares, reglas de iconos/ilustraciones y una disposición consistente de CTAs. Cuando los equipos siguen la misma estructura, los usuarios la aprenden una vez y avanzan más rápido en todos lados.
Si estás construyendo una app nueva y quieres prototipar pasos de configuración rápidamente, Koder.ai (koder.ai) puede ayudarte a redactar un flujo en Planning Mode y generar la primera versión para probar, luego iterar según dónde la gente realmente duda.
Un estado vacío es lo que ven los usuarios cuando no hay nada que mostrar porque no han creado, importado o conectado nada todavía. Debe explicar para qué sirve la pantalla y señalar la siguiente acción que llevará al usuario a un resultado exitoso, en lugar de dejarlo adivinar.
Una pantalla de carga dice “espera, algo está ocurriendo”, y un estado de error dice “algo falló, aquí está la razón”. Un estado vacío de configuración dice “aún no hay nada aquí y es normal”, y luego guía al usuario para crear, importar o empezar desde una plantilla hasta lograr un primer resultado real.
Apunta a responder tres cosas rápido: qué es esta pantalla, por qué está vacía y qué hacer a continuación. Si los usuarios no pueden entender eso en pocos segundos, es más probable que duden, piensen que hicieron algo mal o se vayan.
Usa una estructura sencilla: una explicación corta de para qué sirve el área, una acción primaria obvia y una línea de tranquilidad que reduzca el miedo o el esfuerzo. Mantén el texto breve para que el usuario no tenga que leer un párrafo para saber qué hacer.
Por defecto, una sola acción primaria que coincida con el siguiente paso más común, y todo lo demás claramente secundario. Si muestras varios botones con igual peso, la gente suele paralizarse porque no sabe qué camino es el “correcto”.
Prioriza “Crear” cuando empezar desde cero es la forma más rápida de obtener una victoria visible (por ejemplo, un primer proyecto o registro). Prioriza “Importar” cuando la mayoría de usuarios llegan con datos existentes, y prioriza “Plantilla” cuando la velocidad y un punto de partida probado importan más que el control total.
Escribe titulares como resultado + objeto, por ejemplo “Crea tu primer proyecto”, en lugar de etiquetas de características como “Proyectos”. En el cuerpo, añade una frase que diga qué sucede después del clic para que los usuarios puedan predecir el resultado.
Coloca el titular, una frase corta y el botón principal en un bloque compacto con jerarquía visual clara. Mantén las acciones secundarias más discretas y cerca, y evita empujar el botón principal hacia abajo donde el usuario tenga que desplazarse o buscarlo.
Incluye una nota de seguridad breve junto a la acción, como “Puedes cambiar esto después” o “Nada se publica hasta que confirmes”. En herramientas como Koder.ai también ayuda mencionar acciones reversibles como snapshots/rollback o la posibilidad de exportar el código fuente una vez que empiecen a crear.
Mide cuántas veces los usuarios ven la pantalla vacía, hacen clic en el CTA primario y completan el hito que se espera. Observa también el tiempo hasta la primera victoria y la caída entre el estado vacío y el siguiente paso: un estado vacío puede recibir clics y aun así fallar en producir resultados.