Diseño web y UX

Diseñar estados vacíos que expliquen cómo continuar

Prepara respuestas útiles cuando una búsqueda o listado no muestra resultados, diferenciando falta de datos, filtros activos y errores de carga.

OVAN Studio3 min de lectura

Una página sin resultados puede significar cosas muy distintas: todavía no hay contenido, los filtros son demasiado restrictivos o la información no se pudo cargar. Si todas esas situaciones muestran un espacio vacío, el visitante no sabe qué hacer. En un catálogo de cursos, no encontrar una fecha no significa necesariamente que el curso haya desaparecido. Diseñar estados vacíos consiste en explicar la situación con precisión y ofrecer una acción coherente. Es una parte del recorrido que conviene preparar antes de que aparezcan las primeras consultas confundidas.

Distinguir ausencia de contenido y fallo

Pide al equipo una lista de los estados que el sistema puede reconocer. Un listado recién creado no tiene los mismos datos que una búsqueda sin coincidencias, y ninguno equivale a un error de conexión. Cada caso necesita un mensaje diferente. Para los cursos, la ausencia de fechas puede explicarse como programación pendiente si eso es lo que el negocio confirmó. Si no se pudo consultar la información, debe indicarse un problema de carga y ofrecer reintento. Evita mostrar no hay cursos cuando simplemente falló una solicitud; esa frase convertiría una limitación técnica en una afirmación comercial incorrecta.

Conservar el contexto de la búsqueda

Muestra qué términos o filtros produjeron el resultado vacío y permite modificarlos. Si el visitante buscó un taller presencial en una fecha específica, puede ser útil quitar la fecha o ampliar modalidad. No elimines automáticamente sus elecciones, porque perderá la posibilidad de entender qué cambió. Una acción clara para limpiar filtros puede coexistir con controles individuales. El mensaje debería sugerir alternativas basadas en lo disponible, sin inventar coincidencias. También revisa el caso de una palabra mal escrita: si el sistema no ofrece corrección, al menos conserva el término visible para que la persona pueda editarlo fácilmente.

Elegir una acción acorde con el estado

En un listado nuevo, la acción puede ser crear el primer elemento; en una búsqueda pública, explorar categorías; ante un fallo, reintentar o contactar. No uses el mismo botón volver al inicio para todas las situaciones. Ese destino suele descartar el contexto que la persona ya construyó. Cuando el mensaje aparece dinámicamente, necesita ser perceptible también para quien usa tecnología de asistencia. MDN explica que las regiones vivas permiten anunciar actualizaciones relevantes. Solicita que el equipo compruebe el anuncio del resultado sin desplazar el foco de manera inesperada ni repetir mensajes innecesarios en cada cambio de filtro.

Incluir estos estados en la revisión de entrega

Prepara ejemplos deliberados: búsqueda imposible, filtros incompatibles, lista sin contenido y fallo simulado en un ambiente seguro. Revisa texto, acciones y recuperación. Después de reintentar, el sistema debe mostrar el estado correcto y no conservar un aviso anterior sobre resultados que ya existen. Pide también comprobar que las ilustraciones decorativas no sustituyen la explicación. Una imagen simpática puede acompañar, pero la persona necesita saber qué ocurrió. Documenta cada estado con su condición de aparición; así, cuando cambie el catálogo o se añadan filtros, será más fácil mantener mensajes fieles al comportamiento real de la aplicación.

DE LA LECTURA A LA ACCIÓN

Para aplicar hoy

  • No confundas falta de resultados con imposibilidad de cargar datos.
  • Conserva términos y filtros para permitir una corrección consciente.
  • Prueba los estados vacíos y su recuperación antes de publicar.

Fuentes y referencias

Documentación para profundizar. Los ejemplos de esta guía son didácticos.

TU PRÓXIMA ETAPA EMPIEZA AQUÍ

Hagamos algo
que importe.

Hablemos de tu idea
info@crea-link.com+506 8675 5212Desde Costa Rica. Para el mundo.