Diez diseños originales de estados vacíos para primer uso, búsquedas sin resultados, bandejas vaciadas, errores y falta de permisos, con código editable y un generador de mensajes accesibles.
Un estado vacío es lo que muestra una pantalla cuando todavía no hay nada que listar: una cuenta nueva, una búsqueda sin coincidencias, una bandeja vaciada o una carga fallida. Cada uno necesita una explicación clara y una forma de seguir. Los diez diseños de abajo cubren todos los casos habituales con HTML y CSS editables, además de un generador que escribe marcado accesible.
Los cinco tipos de vacío y lo que debe ofrecer cada uno
Las pantallas vacías son lo primero que ven los usuarios nuevos y el lugar al que llega la gente cuando una búsqueda sale mal, y aun así suelen ser una caja gris que dice Sin datos. Estos ejemplos tratan cada tipo de vacío de forma distinta, porque el mensaje correcto tras una errata no es el correcto el primer día. Cada fragmento es autónomo y usa formas sencillas en lugar de ilustraciones de banco de imágenes.
Es la pantalla o el panel que se muestra cuando una lista, una tabla, un dashboard o una búsqueda no tiene nada que mostrar. Los buenos explican por qué y ofrecen la siguiente acción; los malos muestran espacio en blanco o un simple Sin datos.
Usa un título y un texto reales, no solo una imagen. Marca las ilustraciones decorativas con texto alternativo vacío. Si el mensaje de vacío aparece tras un filtro o una búsqueda sin recargar la página, colócalo dentro de un elemento con role="status", que tiene implícito un aviso live educado, y no muevas el foco hacia él.
Puede ayudar en el primer uso, por ejemplo con un proyecto de demostración que el usuario pueda abrir y borrar. Etiquétalo claramente como ejemplo para que nadie lo confunda con sus propios datos.
Repite el término, di que nada coincidió y sugiere soluciones: revisar la ortografía, quitar un filtro o explorar una categoría. Un botón Quitar filtros de un solo clic es la acción individual más útil.
Un estado vacío significa que de verdad no hay nada que mostrar. Un error significa que puede haber datos pero no se pudieron cargar. Di cuál de los dos es, porque decirle a alguien que no tiene pedidos cuando ha fallado el servidor es alarmante.
Un contorno discontinuo sugiere dónde aparecerá el elemento. El botón está dentro del área vacía para que nadie tenga que buscarlo.
Ofrecer crear o importar respeta a quienes ya tienen sus datos en otro sitio.
Una lista corta con el primer paso marcado convierte un dashboard vacío en un plan.
Una fila de ejemplo claramente marcada muestra cómo se verá la pantalla cuando esté llena.
Repite el término, sugiere soluciones y deja siempre un camino de vuelta a todo.
Mostrar los filtros activos como etiquetas que se pueden quitar señala directamente la causa.
Algunas pantallas vacías son buenas noticias. Basta con una confirmación tranquila; no hace falta botón.
Nombra el problema con honestidad, di que los datos están a salvo si lo están y ofrece reintentar.
Di a quién deben pedírselo y dales un botón que haga la petición.
Mantener los encabezados de columna muestra lo que aparecerá, y una sola fila los abarca con el mensaje.
Las facturas que envíes aparecerán aquí, con su estado y su fecha de vencimiento.
Crear una factura
Generador de estados vacíos
Escribe el título, la frase y el botón, elige el tipo y copia HTML y CSS accesibles. Resultado inicial:
Explicación
Texto del botón
Primer uso
Sin resultados
Error
Vista previa de tu estado vacío
Copiar HTML
Copiar CSS
Empieza gratis · Sin tarjeta de crédito