Guía práctica para estados vacíos en SaaS: cómo guiar al usuario al primer resultado
Los estados vacíos deben explicar por qué la pantalla está vacía y ofrecer un único paso claro. Este artículo detalla cómo estructurar mensajes y acciones según la causa del vacío.
Un estado vacío bien pensado no solo informa, sino que impulsa la primera acción del usuario. La clave está en diferenciar las causas: cuenta nueva, búsqueda sin coincidencias o fallo de carga, y adaptar el mensaje y la acción en consecuencia.
Distinguir el motivo del vacío
El primer paso es identificar el origen del vacío. Un nuevo registro, un filtro que oculta todo, o una petición fallida requieren mensajes distintos. Carbon Design System separa tres situaciones principales: first‑use, user‑action y error. Aplicar esta distinción a la lógica de renderizado evita confusiones y mejora la experiencia.
Mensaje y acción para cada caso
- Cuenta nueva: encabezado como "Tus notas de entrevista aparecerán aquí", explicación "Crea una entrevista para guardar sus notas y preguntas de seguimiento", y acción principal "Crear entrevista". El botón debe reflejar lo que sucede.
- Filtro sin coincidencias: conserva la búsqueda actual y ofrece "Limpiar filtro". No redirija al formulario de creación, pues la pregunta es distinta.
- Fallo de carga: informa "No se pudieron cargar las notas" y propone un "Reintentar" si la operación lo permite.
- Permisos insuficientes: explica quién puede conceder acceso y muestra solo los botones que el rol actual puede usar.
Estas son solo plantillas; cada producto debe adaptar las acciones al flujo real.
Probar el flujo completo
Antes de lanzar, simula el recorrido con una cuenta nueva. Haz clic en la acción, completa el formulario mínimo, guarda y vuelve a la lista. Asegúrate de que el nuevo elemento aparezca y sea accesible. Repite cancelando a mitad de camino; la aplicación debe regresar a un estado coherente. Si la operación de guardado falla, la pantalla inicial no puede compensar la pérdida del primer conjunto de notas.
Uso de contenido de muestra
El contenido de muestra solo es útil cuando enseña algo que el vacío no puede. Etiquétalo claramente como "contenido de muestra" y distingue visualmente de trabajo del cliente.
Revisión accesible
Ignora el arte y revisa solo el encabezado, explicación y acción. Comprueba la navegación por teclado, etiquetas largas, ventana estrecha y roles de usuario. Registra si el usuario logra la primera tarea, no solo si pulsa el botón.
Conclusión
Un estado vacío efectivo convierte un espacio vacío en un resultado guardado y recuperable. Al diseñar cada caso, se evita la ambigüedad y se acelera el onboarding. La práctica recomendada es validar el flujo completo, mantener la coherencia de la UI y garantizar que el usuario comprenda el siguiente paso.
