Empty states: el primer vacío también se diseña
Un empty state es la pantalla que se muestra cuando no hay datos. Aprende los tipos (primer uso, sin resultados, sin datos), qué decir y qué acción ofrecer.
¿Qué es y por qué se diseña?
Carbon describe los empty states como situaciones que ocurren cuando no hay datos para mostrar, a menudo durante el primer uso o cuando el contenido fue eliminado o no está disponible (Carbon: Empty states pattern). Es decir, es un estado normal del producto, no un error.
Un problema frecuente es diseñar la pantalla con datos y dejar el vacío para el final. El resultado es una tabla sin filas, sin encabezado que explique nada y sin botón. Para la persona que llega por primera vez, esa pantalla es lo primero que ve del producto. Por eso conviene tratar el primer vacío como parte del onboarding: es el momento en que la persona aprende qué hace el producto y qué tiene que hacer para empezar, sin necesidad de leer un manual.
Un vacío bien diseñado también evita que la persona piense que algo falló. Si no hay datos, lo dice; si la búsqueda no encontró nada, lo dice y ofrece cambiar el criterio.
¿Qué tipos de vacío existen?
Carbon agrupa los vacíos básicos en tres categorías que conviene separar en el diseño:
| Tipo | Cuándo aparece | Qué necesita |
|---|---|---|
| Sin datos (primer uso) | La cuenta es nueva y aún no hay contenido | Explicar qué aparecerá y cómo crearlo |
| Acción del usuario | Búsqueda sin resultados, o tarea terminada | Confirmar, y ofrecer cambiar el filtro o volver |
| Gestión de errores | Permisos, fallo del sistema o configuración pendiente | Un camino para salir, sin callejones sin salida |
Carbon también menciona alternativas para el primer uso: documentación integrada, onboarding y contenido de muestra. Es importante no confundir el primero con el de «sin resultados»: el primero invita a empezar, el segundo sugiere ajustar la búsqueda.
¿Qué debe comunicar?
El NN/g propone tres pautas prácticas (NN/g: Designing Empty States in Complex Applications):
- Comunica el estado del sistema. Un panel en blanco deja al usuario sin saber si todavía carga, si falló o si no hay nada. Un mensaje como «No hay registros para el rango de fechas seleccionado» evita esa duda.
- Da pistas de aprendizaje. Explica qué mostrará el área y cómo llenarla. El artículo afirma que este enfoque suele funcionar mejor que los tutoriales forzados al primer uso.
- Ofrece caminos directos. Un botón «Crear» o un enlace a la documentación lleva al usuario a la tarea que llena el espacio.
El mismo artículo afirma que dejar un espacio totalmente vacío genera confusión sobre si el sistema funciona y, en última instancia, reduce la confianza del usuario.
¿Cómo escribir el mensaje?
Carbon sugiere escribir el título como una afirmación positiva. Su ejemplo: «Empieza agregando activos de datos» (“Start by adding data assets”), en lugar de «No tienes activos de datos». Además pide mantener las palabras al mínimo, evitar términos propios del producto que la persona aún no conoce y no cubrir varias opciones en un mismo estado: si hay varias cosas posibles, elige la más importante.
Esto conecta directamente con el microcopy de tu interfaz: en un empty state, cada palabra compite con el espacio que debería guiar. Si el mensaje es de error, revisa también cómo escribir mensajes de error.
¿Cuándo usar ilustración?
Carbon la considera opcional y recomienda que se relacione con la situación. Si el espacio es limitado, usa solo texto. Un dibujo bonito que no explica nada solo ocupa lugar. Y si la pantalla es de búsqueda, quizá necesitas más bien UX de búsqueda, porque el problema no es la falta de contenido sino la falta de un camino para encontrarlo.
Ejemplo
Ejemplo ilustrativo: una app de gestión de proyectos muestra en la lista de proyectos un espacio en blanco con la palabra «Vacío». Al rediseñarla, el título pasa a ser «Crea tu primer proyecto para ver tus tareas aquí», con un botón primario «Nuevo proyecto» y un enlace secundario a una guía corta. Si el usuario filtra por un cliente que no tiene proyectos, el mensaje cambia a «Ningún proyecto coincide con este cliente» con el botón «Quitar filtro». Son dos vacíos distintos, con dos acciones distintas.
Carbon añade un detalle de layout: el empty state reemplaza el elemento que normalmente se mostraría. En una tabla vacía, reemplaza la tabla completa, con sus encabezados y su pie, para que los lectores de pantalla no lean una tabla vacía antes del mensaje.
Errores comunes
- Mostrar una tabla vacía con encabezados y sin explicación.
- Usar la misma pantalla para «primer uso» y «sin resultados».
- Poner tres botones primarios en el mismo estado.
- Hacer sentir al usuario que rompió algo cuando en realidad no hay datos todavía.
- Dejar la pantalla de error sin una salida: un callejón sin salida es peor que un vacío.
- Agregar una ilustración que no tiene relación con la tarea.
Qué puedes hacer mañana
- Recorre tu producto con una cuenta nueva y anota cada pantalla que aparece vacía.
- Para cada una, escribe el título como afirmación positiva y elige una acción principal.
- Separa en tu diseño el estado de primer uso del de sin resultados, aunque por ahora compartan el mismo componente.