Cómo diseñar estados vacíos y búsquedas sin resultados
Una lista de proyectos en blanco puede significar que alguien nunca ha creado uno. También puede significar que su búsqueda no encontró coincidencias. Las pantallas pueden contener el mismo rectángulo vacío y necesitar explicaciones y acciones distintas.
La diferencia práctica está en por qué falta el contenido. Una colección realmente vacía suele necesitar una forma de empezar o una explicación de cómo llegan los datos. Una vista sin resultados necesita revisar la consulta, los filtros o el ámbito que han ocultado contenido disponible. Enviar a ambas personas a «Crear un proyecto» puede convertir un problema sencillo de búsqueda en trabajo duplicado.
No encontrar resultados es un tipo de estado vacío. La distinción útil es entre colección vacía y consulta infructuosa: la primera cambia al llegar contenido; la segunda, al cambiar la petición.
Pregunta qué haría aparecer contenido
Antes de escribir un encabezado, completa la frase: aquí aparecería contenido si la persona hiciera ¿qué? La respuesta suele bastar para distinguir una vista vacía útil de una genérica.
Si es «creara su primer proyecto», la pantalla puede explicar qué contiene y ofrecer esa acción. Si es «quitara el filtro Archivado», debería ayudar a cambiarlo. Si es «esperara a que termine una petición», sigue cargando. Si es «recuperara el acceso», un botón de creación puede ser irrelevante o no estar disponible.
La pregunta evita otro error habitual: tomar la ausencia de filas visibles como prueba de que no hay datos. Quizá la vista solo sepa que ningún registro accesible coincide con la petición. El mensaje debe reflejar ese conocimiento, sin afirmar más sobre todo el espacio de trabajo.
El artículo de Nielsen Norman Group sobre estados vacíos explica el valor de comunicar el estado del sistema y facilitar una entrada adecuada a la tarea. También advierte de no mostrar un mensaje sin resultados mientras el contenido aún carga. Es una base útil; la decisión concreta depende de qué sabe la aplicación sobre la colección y la petición actuales.
Power BI explica cómo llega el contenido; NexTag muestra por qué importa la jerarquía
El artículo de NN/G incluye una vista de elementos recientes de Microsoft Power BI que explica cómo llegan: abrir contenido hace que aparezca en Recents. Lo importante es la causalidad. No insinúa que toda la cuenta esté vacía ni que haga falta crear algo nuevo.
Un caso contrario aparece en la investigación de NN/G sobre búsquedas sin resultados. En una página histórica de NexTag, un participante pasó por alto el pequeño mensaje sin coincidencias y miró el contenido más destacado de debajo. El seguimiento ocular no registró fijaciones en el mensaje. Había sugerencias para continuar, pero había perdido la razón para necesitarlas.
La lección no es poner un título gigante en cada vista vacía. El mensaje de Power BI tiene una función local: explicar una vista dentro de un espacio existente. Una página de búsqueda debe interrumpir la expectativa de que el área principal contiene coincidencias. Da al estado protagonismo suficiente para el contexto y facilita después la siguiente acción. Las ilustraciones decorativas y las recomendaciones ajenas pueden romper esa secuencia aunque el texto esté presente.
Elige el estado a partir de hechos, no de un array vacío
Una respuesta de longitud cero no basta para elegir la interfaz. La petición puede estar pendiente, haber fallado, estar restringida o haber terminado correctamente sin datos. En una implementación real, el mensaje debe depender del estado y ámbito de la petición, además de la cantidad de registros visibles.
| Condición conocida | Orientación del mensaje | Acción útil |
|---|---|---|
| Colección confirmada vacía | Explicar qué corresponde aquí | Crear, importar o conectar la fuente necesaria |
| Consulta correcta sin coincidencias | Nombrar la consulta o restricción | Editar la consulta o quitar un filtro relevante |
| Petición en curso | Indicar carga | Normalmente esperar y preservar el contexto |
| Petición fallida | Explicar que no se pudieron cargar los resultados | Reintentar sin descartar la búsqueda |
| Acceso insuficiente | Explicar el límite de acceso permitido | Pedir acceso o elegir un ámbito disponible |
La tabla resulta especialmente útil al revisar transiciones. Introduce una consulta, sustitúyela inmediatamente y deja que las respuestas vuelvan en orden inverso. La vista debe mostrar el estado de la petición activa. Una respuesta vacía antigua no debe borrar un resultado posterior correcto. Es un defecto del flujo de datos; otra ilustración no lo arregla.
Una pregunta práctica es «¿Qué harías ahora?». Enseña la pantalla sin describir primero su estado. Si alguien pulsa Crear porque no encuentra la consulta conservada, revisa los controles de salida. Si espera porque parece inacabada, aclara si el procesamiento ha terminado. Registra la interpretación, no solo si pulsó el botón esperado: un clic correcto por accidente puede ocultar un estado mal entendido.
Escribe según la causa de la ausencia
Primer uso: un comienzo creíble
Una vista de primer uso debe ayudar a entender el objeto que se va a crear. «Aquí no hay nada todavía» reconoce el vacío sin explicar el propósito. «Reúne los briefs, enlaces y notas de revisión de tus proyectos» da una razón más concreta para empezar.
Acompaña la explicación de una acción realmente posible. Si crear un proyecto solo exige un nombre, «Crear proyecto» puede abrir ese primer paso breve. Si hay que conectar un servicio externo, la acción debe nombrar la conexión. Un botón que suena fácil y abre una configuración inesperadamente compleja puede crear un problema justo después de resolver el vacío.
La cantidad de explicación debe responder a la familiaridad probable. Quien abre un espacio por primera vez puede agradecer un ejemplo breve. Quien acaba de borrar voluntariamente la última búsqueda guardada probablemente no necesita una introducción a buscar. Ambas colecciones están vacías, pero las personas no saben lo mismo.
Ten cuidado con los datos de muestra. Las filas de demostración concretan el concepto, pero deben identificarse inequívocamente y no parecer datos propios. Si un proyecto de muestra incluye «Aprobado por el cliente», nadie debería confundirlo con una aprobación real. El estado vacío debe reducir dudas, no sustituirlas por ficción atractiva.
Sin resultados: revisa la petición
«No se encontraron resultados» comunica que la búsqueda terminó, pero no la razón ni cómo seguir. Un mensaje útil conserva la relación entre petición y resultado. En una búsqueda, mantén visible y editable la consulta. En filtros, conserva visibles los activos. Si no, hay que recordar qué se pidió antes de decidir qué cambiar.
Un encabezado claro sería «Ningún proyecto coincide con “autumn launch”». Si la fecha es la restricción probable, puede añadirse «El intervalo actual es del 1 al 7 de octubre». Sigue siendo útil aunque la aplicación no sepa si la falta de coincidencias se debe a la consulta o al intervalo.
Escoge acciones que cambien la condición relevante. «Quitar filtro de fecha» es más preciso que «Empezar de nuevo» cuando solo hay uno. «Borrar todos los filtros» vale si realmente los elimina todos; si mantiene la consulta, debe entenderse la distinción. Reiniciar silenciosamente búsqueda y ámbito de filtrado sorprende a quien solo quería cambiar una cosa.
Las recomendaciones de Nielsen Norman Group para búsquedas sin resultados aconsejan dejar claro el resultado, conservar caminos para continuar y evitar burlarse de la persona. Aplícalas a la tarea real. Una búsqueda de proyectos, un catálogo y una biblioteca jurídica no necesitan las mismas sugerencias ni imágenes.
Si sugieres alternativas, explica qué son. «Proyectos relacionados» no debería parecer el resultado de la consulta fallida. Pon la explicación antes y etiqueta la colección alternativa. No debería hacer falta deducir por qué aparecieron elementos aparentemente irrelevantes tras buscar algo concreto.
Afirma solo lo que el sistema puede establecer
«No existen proyectos» es una afirmación amplia. «Ningún proyecto coincide con estos filtros» es más limitada. «No tienes proyectos visibles en este espacio» expresa otro límite. Elige según la evidencia de la interfaz, no por qué frase cabe mejor en una línea.
Importa en sistemas privados o restringidos. Un resultado vacío no implica necesariamente ausencia de un objeto, sino que quizá no se puede ver. El equipo debe decidir qué puede revelarse y qué salidas son adecuadas. El diseño no debería revelar registros confidenciales solo para concretar un mensaje.
Incluso dejando aparte los permisos, la vista puede tener información incompleta. Los índices pueden actualizarse después de guardar y las importaciones seguir procesándose. Si la aplicación sabe que hay una importación activa, puede indicarlo. Si no, evita inventar una promesa tranquilizadora de que los elementos aparecerán enseguida.
Para el espacio ficticio, define una pequeña regla: una consulta correcta sin coincidencias puede producir «Ningún proyecto coincide»; un total confirmado de cero, «Aún no hay proyectos». Una consulta fallida no produce ninguno. La distinción impide que un fallo de red adopte el tono optimista del primer uso.
Conserva estructura suficiente para facilitar el siguiente paso
Una vista vacía puede ser más tranquila que una lista poblada y mantener los controles útiles. Búsqueda, filtros, título y ámbito explican dónde está la persona. Quitarlos para centrar una ilustración puede embellecer la pantalla y dificultar la recuperación.
En nuestra lista sin resultados, deja la búsqueda en el mismo lugar y el espacio seleccionado visible. Pon la explicación donde estarían los resultados. Así se revisa la petición sin buscar un control que se movió porque cambió el número de coincidencias.
El primer uso tiene más libertad. No hay filas que comparar y puede convenir una introducción mayor. Mantén aun así navegación familiar y título claro. Antes de pulsar, debe entenderse si se crea en un espacio personal o de equipo.
No hagas depender la composición de una sola frase inglesa breve. Prueba nombres largos, traducciones largas y filtros en dos líneas. Los estados vacíos suelen diseñarse en escritorio cómodo y comprimirse después en paneles laterales. Si solo funciona con «No items», no está listo para contenido realista.
Elige la acción útil de menor coste
Una salida debe permitir avanzar sin descartar trabajo innecesariamente. Si se han elegido cuidadosamente espacio, fechas y responsable, borrar todo es un reinicio importante. Puede devolver resultados, pero destruye el contexto que se investigaba.
Ofrece un cambio menor cuando el sistema lo permita. Quitar un filtro puede ayudar más que borrar toda la petición. Ampliar fechas conserva una palabra clave pertinente. Volver a la carpeta superior puede orientar más que enviar al inicio de la aplicación.
No insinúes que la acción menor garantiza éxito. «Quitar el filtro de fecha» describe honestamente una operación. «Mostrar tus proyectos» promete un resultado que quizá la interfaz no sabe que puede dar. Con un recuento previo fiable, el producto puede sugerir algo más firme; sin él, mantén factual la etiqueta.
Crear puede seguir siendo útil sin resultados, pero normalmente como opción secundaria. Quizá se busque un proyecto antes de decidir crearlo. Ofrece el camino sin presentarlo como única salida. Si los duplicados cuestan, considera explicar que se buscó en el espacio actual antes de sugerir un objeto nuevo demasiado pronto.
Recorre la misma página a lo largo del tiempo
La revisión más reveladora es una secuencia breve, no una colección de capturas vacías aisladas. Parte de una lista poblada, aplica un filtro sin coincidencias, quítalo y confirma que vuelve la lista original. Después crea una colección realmente vacía y compara mensaje y acción.
En el espacio ficticio se empieza con seis proyectos. Se selecciona a un responsable sin proyectos durante la semana elegida. El área dice que no hay coincidencias y conserva los controles de responsable y fecha. Quitar la fecha devuelve las coincidencias del periodo ampliado, manteniendo al responsable seleccionado.
Pasa ahora a un espacio nuevo sin proyectos. La misma área presenta para qué sirven y ofrece crear. Borrar filtros no hace falta: no hay ninguno activo y la colección subyacente está vacía. Puede compartir tipografía y espacios con el primer estado sin compartir mensaje.
Son preguntas de implementación además de diseño. Una comparación estática puede especificar lo deseado; la aplicación necesita pruebas de tiempos de respuesta y cambios de estado. Centra la revisión en ese recorrido pequeño, sin ampliarla a un catálogo ajeno de todos los estados posibles.
Adapta el tono a la situación
Una lista personal de favoritos vacía admite un tono ligero y acogedor. Un registro de auditoría vacío durante un incidente necesita calma y precisión. La misma ilustración sonriente y «¡Vamos a empezar!» no sirven igual en ambos.
Piensa en la preocupación probable. Alguien nuevo pregunta «¿Qué va aquí?». Quien busca un archivo conocido, «¿He perdido acceso, elegido mal el lugar o escrito mal el nombre?». Quien revisa trabajo terminado quizá solo necesita confirmar que no queda nada. El tono se elige mejor al explicitar la pregunta.
No felicites solo porque haya cero filas. Una cola vacía puede significar que todo está hecho o que un filtro lo oculta. Celebrar exige una condición positiva confirmada. Si no puede establecerse, una explicación neutra inspira más confianza.
Tampoco te disculpes por un primer uso normal. No hay nada malo en una colección nueva sin registros. Reserva el lenguaje de interrupción para interrupciones reales y trata el vacío ordinario como parte normal del producto.
Haz que las ilustraciones justifiquen su espacio
Una ilustración puede explicar qué aparecerá o distinguir un primer uso de una búsqueda infructuosa. No debería empujar la acción fuera de la primera vista ni convertir la página en un callejón sin salida. Si quitarla aclara el mensaje, revisa la composición en vez de defender el adorno.
En el ejemplo, un dibujo sobrio de una tarjeta de proyecto puede mostrar qué información contiene. La búsqueda sin resultados quizá solo necesita un símbolo pequeño, porque consulta y filtros ya aportan contexto. Ambas pueden compartir familia visual sin usar la misma imagen grande.
Mantén las explicaciones esenciales como texto de interfaz real. La imagen refuerza la relación entre filtro y resultado, pero el texto debe tener sentido sin ella. Importa cuando hay etiquetas minúsculas que se ven nítidas en el diseño y resultan ilegibles al estrecharlo.
Revisa la distinción en OpenDesign
Una vista previa HTML compatible en OpenDesign facilita comparar alternativas. Construye la colección vacía y la búsqueda sin resultados con textos realistas, ajusta textos o estilos manualmente y examina tamaños predefinidos. Los comentarios al chat pueden identificar el mensaje o acción exacta que cambiar.
Para una revisión útil, pide explicar qué pasó y qué harían después. No presentes primero «primer uso» y «vacío filtrado»: estarías regalando la respuesta que el diseño debe comunicar. Si ambas pantallas producen la misma interpretación, aún no se distinguen bastante.
Verifica también las condiciones de datos en la aplicación: consulta activa, ámbito de permisos y reinicio de filtros deben elegir el mensaje revisado.
Una decisión pequeña que evita un malentendido mayor
Antes de aprobar un área vacía, lee el título como una afirmación factual y comprueba que la aplicación sabe bastante para hacerla. Lee la acción principal como una promesa de lo que cambiará y verifica que el control lo cambia realmente.