Little Glossary · Marca y producto
Estado vacío (empty state)
Un estado vacío es lo que muestra una interfaz cuando una pantalla no tiene contenido que enseñar: un panel sin datos el primer día, una búsqueda sin resultados o una bandeja ya revisada.
Tipos de estado vacío
- Primer uso: el usuario aún no ha creado nada. Es el más importante para la activación.
- Vaciado por el usuario: ha completado todas sus tareas o lo ha archivado todo. Merece una confirmación positiva.
- Sin resultados: una búsqueda o un filtro no devuelve nada.
- Error o falta de permisos: el contenido existe, pero no puede mostrarse.
Qué debe hacer un buen estado vacío
- Explicar qué irá ahí y para qué sirve esa pantalla.
- Decir por qué está vacía: ¿falta conectar una fuente?, ¿el filtro es demasiado estricto?
- Ofrecer el siguiente paso con una acción clara: crear el primer proyecto, importar datos, invitar al equipo, quitar filtros.
- Mostrar cómo se verá con datos de ejemplo o una ilustración del resultado, si ayuda a entenderlo.
Ejemplos de texto
- En lugar de «No hay informes»: «Aún no tienes informes. Conecta tu cuenta de anuncios y generaremos el primero».
- En una búsqueda: «No hay resultados para “facturas marzo”. Prueba con menos filtros o busca por cliente».
Errores frecuentes
- Dejar la pantalla en blanco, que parece un fallo de carga.
- Usar el mismo mensaje para todos los tipos de vacío.
- Llenarla de ilustraciones decorativas y olvidar la acción.
- Diseñarlos al final, cuando ya no queda tiempo. Deberían formar parte del design system como cualquier otro componente.
Términos relacionados
Fuentes
- Nielsen Norman Group, Designing Empty States in Complex Applications: 3 Guidelines.
En Little diseñamos y desarrollamos para empresas B2B Tech por una cuota mensual. Ver cómo funciona →