Qué mostrar cuando una interfaz no tiene datos

Hay una pantalla que casi siempre llega tarde al diseño: la que no tiene nada. Sin proyectos, sin resultados, sin permisos o sin conexión, muchos productos enseñan el mismo dibujo simpático y un mensaje que no ayuda demasiado. En UX se suele llamar estado vacío a esta situación. El problema no es el hueco. Es no saber por qué está ahí ni qué hacer después.

Empieza por la causa, no por el dibujo

Antes de abrir Figma, nombra el escenario. ¿Es la primera visita, una búsqueda sin coincidencias, una tarea terminada o un fallo? No son variantes cosméticas. Cada caso pide información y una salida distintas.

Carbon distingue las pantallas sin datos, los resultados de una acción y los problemas del sistema. Puedes consultar su patrón en https://carbondesignsystem.com/patterns/empty-states-pattern . Esa separación evita, por ejemplo, felicitar a alguien por una bandeja vacía cuando en realidad la aplicación no ha podido cargarla.

Escribe la salida antes que el adorno

Atlassian recomienda textos breves y verbos de acción en el botón, porque estas pantallas se escanean más de lo que se leen: https://atlassian.design/foundations/content/designing-messages/empty-state .

Ejemplo propio para una primera visita: Todavía no hay proyectos. Después: Crea el primero para organizar tareas y fechas. Botón: Crear proyecto. Para una búsqueda fallida cambiaríamos el camino: explicaríamos qué término no devolvió resultados y ofreceríamos Limpiar filtros. La interfaz deja de hablar de sí misma y vuelve al trabajo del usuario.

Una acción principal suele bastar

Si colocamos tres botones con el mismo peso, trasladamos la decisión al lector. Conviene elegir la salida más probable y dejar la ayuda como enlace secundario. Si faltan permisos, la acción puede ser pedir acceso. Si hay un fallo temporal, reintentar o consultar el estado del servicio. Si no existe una acción honesta, no inventemos una: a veces basta con confirmar que todo está al día.

La ilustración también es opcional. Úsala si aporta tono o contexto; en paneles pequeños o repetidos, el texto claro suele trabajar mejor que una colección de astronautas perdidos.

Prueba la pantalla dentro del flujo

Haz una matriz mínima con cuatro columnas: causa, mensaje, acción y resultado esperado. Recorre cada fila sin datos reales y comprueba tres cosas: el usuario entiende lo ocurrido, puede continuar y el botón hace exactamente lo que promete.

WCAG 2.2 pide que los mensajes que cambian sin recargar la página puedan anunciarse a las tecnologías de asistencia sin mover el foco: https://www.w3.org/WAI/WCAG22/Understanding/status-messages.html . Diseñar la pantalla incluye su lectura, no solo su aspecto.

Una buena pantalla sin contenido dura poco: explica, orienta y se aparta. Si alguien sale de ella sabiendo cuál es el siguiente paso, ya ha hecho su trabajo.