Skip to main content
LanguageEspañol
Lo esencial4 minutos de lecturaOctubre 2026

¿Qué es un estado vacío en UX?

Respuesta corta

Un estado vacío es lo que muestra una pantalla cuando aún no hay nada que mostrar: una nueva bandeja de entrada, un carrito vacío, una búsqueda sin resultados o una lista borrada por filtros. Un buen estado vacío explica por qué está vacío y proporciona un siguiente paso claro, como crear el primer elemento o cambiar la búsqueda.

Idea clave

  • Tipos: primer uso, borrado por el usuario, sin resultados y error o sin acceso
  • Explica con palabras sencillas por qué la pantalla está vacía.
  • Ofrezca una acción clara que la llene.
  • Mantenga la ilustración y la animación pequeñas y amigables, nunca en el camino de la acción.
  • Escribe una copia diferente para cada tipo de estado vacío.

Las pantallas vacías son fáciles de olvidar porque los diseñadores suelen trabajar con datos de muestra. En el producto real, cada nuevo usuario los conoce primero, por lo que dan forma a la primera impresión más que casi cualquier otra pantalla.

Hay cuatro tipos comunes. Los estados vacíos de primer uso aparecen antes de que la persona haya creado algo. Los estados borrados por el usuario aparecen después de que terminaron o eliminaron todo, como una lista de tareas pendientes vacía. Los estados sin resultados aparecen después de una búsqueda o filtro. Y los estados de error o sin acceso aparecen cuando no se pueden mostrar datos en absoluto.

Cada tipo necesita palabras diferentes. Un estado de primer uso debe explicar para qué sirve la pantalla e invitar a la primera acción: "Aún no hay proyectos. Crea tu primer proyecto". Un estado sin resultados debería ayudar a las personas a recuperarse: mostrar lo que buscaron y ofrecerles borrar los filtros. Un estado despejado puede ser un pequeño momento de recompensa.

Las imágenes son opcionales. Una pequeña ilustración o una animación suave pueden hacer que la pantalla parezca amigable, y un personaje animado puede guiar al usuario primerizo. Manténgalo ligero, asegúrese de que la acción sea lo más visible y no confíe en la imagen para explicar el estado.

Si desea un personaje animado amigable para un estado vacío, ExodeUI, que creamos nosotros, tiene una biblioteca gratuita de mascotas interactivas que se ejecutan como archivos ExodeUI y reaccionan a la entrada.

Preguntas frecuentes

¿Qué debería incluir un estado vacío?

Un título breve, una frase que explique por qué está vacía o para qué sirve la pantalla y una acción clara. Una ilustración es opcional.

¿Qué es un estado cero?

Otro nombre para un estado vacío, generalmente el tipo de primer uso que se muestra antes de que alguien agregue contenido.

¿Cómo se diseña un estado sin resultados?

Repita el término de búsqueda, sugiera correcciones ortográficas o términos más amplios y ofrezca borrar filtros. Nunca dejes a la persona con un área en blanco.

¿Deberían animarse los estados vacíos?

Pueden serlo, si la animación es pequeña, no distrae la atención y respeta la configuración de movimiento reducido. La acción importa más que la animación.

Guías y ejemplos relacionados

Añade un personaje amigable a las pantallas vacías.

Elija entre mascotas interactivas gratuitas que reaccionen al cursor y a los toques, y colóquelas en su aplicación o sitio web.

Explorar mascotas gratis
ExodeUI

EXODEUI DESKTOP

A little space for good ideas.

Choose your platform to get the official ExodeUI installer.

Looking for Intel Mac or other builds? Explore the web studio or check all download options.

Prefer the browser? Try for free in your browser →