Estados de carga, error y vacío:lo que olvida la IA

Los estados de carga, error y vacío son los tres que olvidan las apps creadas con IA: toda pantalla tiene cuatro estados — carga, error, vacío y éxito — y la mayoría de los productos hechos con IA solo gestiona el último. Por eso parecen prototipos. Arregla los tres estados olvidados y tu app pasará al instante a sentirse como algo por lo que la gente pagaría.

Puedo saber en diez segundos si alguien lanzó su app directamente desde una sesión de programación con IA. La abro y veo «Cargando...» como texto plano. Un error tumba la página entera. Las pantallas vacías no muestran más que espacio en blanco. Las funciones funcionan. El producto sigue pareciendo roto.

Los cuatro estados de toda pantalla: estados de carga, error y vacío, más el éxito

Cuando tu app obtiene datos — y casi todas las pantallas lo hacen — pueden pasar cuatro cosas. Los datos están en camino. Algo salió mal. Todavía no hay datos. O los datos llegaron y todo está bien. La mayoría de los creadores diseña solo para el final feliz, porque es el estado que ven mientras construyen. Entonces su app parece rota el 40% del tiempo, porque los usuarios reales pasan tiempo real en los otros tres estados.

Los usuarios juzgan tu producto por el estado en el que están ahora mismo, no por el que diseñaste. La carga tarda entre 2 y 5 segundos en cada página. Los usuarios nuevos siempre aterrizan en una pantalla vacía. Las redes fallan. Si esos momentos se ven mal, tu producto parece poco profesional, por buenas que sean las funciones.

Estados de carga: los esqueletos superan a los spinners

El «Cargando...» en texto plano falla dos veces. Se ve fatal y el diseño da un salto cuando llega el contenido real. La solución es un esqueleto: formas de marcador de posición grises que pulsan suavemente y replican el diseño del contenido que vendrá. Una lista de cinco tarjetas se carga tras cinco siluetas grises de tarjeta. Cuando llegan los datos, encajan en el espacio exacto que reservaba el esqueleto.

Los esqueletos son mi arma secreta. Hacen que la app se sienta 2 veces más rápida aunque no lo sea, porque las personas perciben la espera de otra manera cuando pueden ver la forma de lo que viene. Es psicología de UX, no optimización de rendimiento, y no te cuesta más que una petición a tu IA.

La regla simple: usa un spinner pequeño para acciones rápidas, como pulsar un botón que tarda menos de un segundo, y un esqueleto para todo lo que carga una página o una lista. Construir un esqueleto es una fórmula, no una tarea de diseño: copia el diseño del componente real, sustituye el texto por rectángulos grises y las imágenes por círculos grises, mantén el mismo espaciado y añade una animación de pulso. La IA puede hacerlo de una vez si se lo pides.

Estados de error: útiles, no aterradores

El estado de error por defecto en una app creada con IA es un mensaje técnico crudo o, peor, una página completamente rota. Ambos aterran a los usuarios. Un buen estado de error cumple tres funciones: dice qué ha pasado en lenguaje humano («No hemos podido cargar tus solicitudes»), dice qué hacer a continuación («Comprueba tu conexión e inténtalo de nuevo») y ofrece una vía de recuperación: un botón de reintento, un botón de volver, un enlace de soporte.

Hay una capa más que la mayoría de los creadores se salta: una red de seguridad alrededor de toda la página, de modo que cuando un componente falla muestre una tarjeta educada de «algo ha ido mal» en lugar de arrastrar consigo la pantalla entera. Pídele a tu IA un «error boundary» y obtendrás exactamente eso: un widget que falla ya no mata la página.

No muestres nunca un código de error como titular. No pierdas nunca el trabajo que tenían en curso. Y dales siempre un botón que pulsar: la impotencia es lo que hace que los errores parezcan catastróficos.

El libroThe Solopreneur RevolutionLuis Gonçalves sobre cómo crear un negocio de solopreneur con IA sin dejar tu empleo.Consigue el libro →

Estados vacíos: convierte un callejón sin salida en un siguiente paso

El estado vacío es el más descuidado de los tres y el más valioso. Todo usuario nuevo empieza en una pantalla vacía. Si esa pantalla está en blanco, asume que el producto está roto y se va. Si le da la bienvenida y le señala la siguiente acción, se convierte en onboarding.

Un buen estado vacío tiene tres partes: un elemento visual claro que represente lo que falta, un título útil que explique qué viviría aquí («Aún no hay solicitudes») y un siguiente paso («Comparte tu enlace de solicitud»). El tono importa: «Empieza» invita, «Aquí no hay nada» desinfla.

Los estados vacíos también deben cambiar según el contexto. Una búsqueda sin resultados merece «Nada coincide con tu búsqueda: prueba con otras palabras» y un botón para borrar los filtros. Un usuario nuevo merece una bienvenida y una indicación de su primera acción. Mismo mecanismo, distinto mensaje, y cada uno convierte un momento de confusión en un momento de guía.

Cómo lograr que la IA construya los cuatro estados, siempre

Aquí está la parte que lo hace práctico para un fundador no técnico: no necesitas construir nada de esto a mano. Necesitas exigirlo. Cuando le pides a la IA una pantalla nueva, la mayoría describe solo el estado de éxito, y eso es todo lo que obtiene. En su lugar, detalla los estados en la petición:

Crea la pantalla de lista de solicitudes. Carga: muestra un esqueleto con cinco tarjetas de marcador de posición. Error: muestra un mensaje amable con un botón de reintento. Vacío: muestra un mensaje útil y un botón para crear la primera solicitud. Éxito: muestra los datos. Sigue el mismo patrón que las pantallas existentes.

Cinco líneas extra. La IA genera los cuatro estados automáticamente y, una vez que una pantalla tiene el patrón, puedes señalarla como referencia para todas las siguientes. Esta es la habilidad central de construir con IA: tú fijas el estándar y la IA lo implementa. Los estados que todos olvidan solo se olvidan porque nadie los pidió.

Gestionar los tres estados olvidados es la mitad de lo que hace que una app parezca real. La otra mitad es la coherencia: que cada pantalla parezca pertenecer al mismo producto. Eso es un sistema, no un talento, y es exactamente lo que te dan los design tokens y una biblioteca de componentes.

12 semanasTu carrera corporativa nunca fue el planSolicita plaza en el Solopreneur Accelerator.Solicitar ahora →

Preguntas frecuentes

¿Qué son los estados de carga, error y vacío?

Son las tres situaciones en las que puede estar toda pantalla además de «todo funcionó»: los datos aún están llegando, algo falló o todavía no hay datos. Los usuarios se topan con las tres constantemente — en cada carga de página, en cada fallo de red, en cada primera visita —, así que un producto que solo diseña el estado de éxito parece roto durante una gran parte del tiempo.

¿Las pantallas esqueleto hacen que una app parezca de verdad más rápida?

Sí: la velocidad percibida mejora aunque la real no lo haga. Los marcadores con la forma del contenido hacen que la espera se sienta aproximadamente 2 veces más corta que con un spinner genérico, porque los usuarios ven la forma de lo que viene y el diseño no da saltos cuando llega.

¿Qué hace bueno a un estado vacío?

Tres cosas: un elemento visual que muestre lo que falta, un título que explique qué aparecería aquí y un botón que lleve a la siguiente acción. Los mejores estados vacíos hacen también de onboarding: todo usuario nuevo empieza en uno, así que trátalo como tu felpudo de bienvenida, no como un callejón sin salida.

¿La IA añadirá estos estados automáticamente?

Solo si se lo pides. La IA construye lo que describes y la mayoría describe solo el camino feliz. Añade cuatro líneas a cada petición de pantalla — carga, error, vacío, éxito — y señala una pantalla bien construida como patrón. A partir de entonces, cada pantalla nueva llegará con los cuatro estados.