Cómo orientar a un agente antes de rediseñar una pantalla

Pedirle a un agente que «mejore» una pantalla deja sin responder lo más importante: mejorar para qué. Si no lo dices, el agente decide, y lo más fácil de cambiar suele ser la apariencia: colores, sombras, una animación. La pantalla queda más bonita y el problema que te trajo sigue ahí.

Conviene seguir otro orden: primero una situación de uso, después referencias que resuelvan ese mismo trabajo, luego unas pocas decisiones de estructura y, al final, una prueba con contenido difícil. Así el agente sabe qué tiene que resolver y tú sabes cuándo terminó.

Empieza por una situación de uso

Imagina la bandeja de mensajes de un equipo de atención. Una persona la abre a primera hora y tiene que responder lo pendiente. Necesita ver qué conversación lleva más tiempo esperando, entender qué pide el cliente y contestar.

Esa escena convierte «mejorar» en preguntas que se pueden revisar:

• ¿Las conversaciones pendientes se distinguen de las atendidas?
• ¿Se ve el último mensaje sin abrir cada una?
• ¿Responder obliga a salir de la lista y perder el lugar?

Un cambio de colores puede dejar las tres sin resolver. Por eso la situación entra en el encargo desde el principio y vuelve en la prueba final.

Pide referencias que hagan el mismo trabajo

Pide al agente que recorra varias herramientas de ese tipo: otras bandejas, gestores de soporte, clientes de correo. Una portada llamativa puede inspirar un estilo, pero no explica cómo se ordena el trabajo de todos los días.

De cada referencia interesa anotar las decisiones:

• qué se muestra primero;
• cómo se agrupan los elementos;
• dónde ocurre la acción principal;
• qué pasa después del primer clic.

En la bandeja, una referencia puede resolver bien el filtro por estado; otra, la vista previa del último mensaje; otra, la respuesta junto a la lista. No hace falta elegir una ganadora. Hace falta entender cada decisión y ver si encaja en tu caso.

Anota también lo que no conviene copiar. Una herramienta pensada para diez conversaciones al día puede mostrar detalles que se vuelven ruido cuando hay doscientas. Que dos pantallas se parezcan no significa que sirvan para el mismo uso.

Parte de lo que el producto ya tiene

Antes de inventar componentes, el agente tiene que ver las pantallas que ya existen: cómo usa el producto el color, el espacio, los campos, los botones y las palabras.

Si en todo el producto la acción se llama «Responder», un botón nuevo que diga «Gestionar interacción» obliga a la persona a traducir. Si los formularios usan un tipo de campo y la pantalla nueva trae otro sin motivo, también suma esfuerzo.

Ser consistente no impide mejorar. Te ayuda a gastar los cambios donde de verdad resuelven algo.

Fija cuatro decisiones antes de dibujar

Con la situación, las referencias y el sistema existente ya puedes decidir la estructura. Para la bandeja podrían ser estas:

1. Prioridad: lo que espera respuesta aparece antes que lo atendido.
2. Información: cada fila muestra nombre, último mensaje y tiempo de espera.
3. Acción: se responde sin perder el lugar en la lista.
4. Densidad: caben suficientes filas para comparar, sin recortar los mensajes hasta volverlos ilegibles.

El encargo cabe en una frase: diseña una bandeja que ayude a encontrar y responder lo pendiente, con los componentes que ya existen y estas cuatro decisiones.

Añade datos de prueba con forma real. No necesitas conversaciones de clientes: bastan nombres y mensajes inventados con longitudes, estados y combinaciones parecidas a las que el producto tendrá que soportar.

Prueba el recorrido con contenido incómodo

Cuando la pantalla funcione con el caso fácil, ponla en aprietos. Usa un mensaje muy largo, un nombre que no cabe en una línea y suficientes conversaciones para tener que desplazarte. Responde una y mira dónde queda. Cambia un filtro y vuelve.

Revisa también los vacíos. «Todavía no hay conversaciones» y «Ninguna coincide con este filtro» son situaciones distintas, y en cada una la persona necesita saber qué hacer a continuación.

Fíjate si la pantalla necesita un texto que explique cómo usarla. Si hace falta un párrafo de instrucciones, suele ser señal de que la estructura todavía no está resuelta.

Repite la prueba en el teléfono y en el escritorio. En el teléfono, que todo se lea y que los controles se puedan tocar. En el escritorio, que el espacio extra conserve contexto útil en lugar de estirar la versión móvil.

Cierra con una sola comprobación

La revisión termina con una prueba que puedes observar: con los datos de prueba, una persona encuentra la conversación que más espera, entiende qué necesita y la responde sin perder su lugar en la lista, en el teléfono y en el escritorio. Si lo consigue, el rediseño cumplió. Si se atasca, ya sabes dónde seguir.

Guarda el caso que probaste y lo que viste. La próxima revisión podrá partir de ese resultado.

Anthropic comparte prácticas para orientar el diseño de interfaces con Claude en Improving frontend design through Skills. El recorrido y el ejemplo de este artículo son una propuesta propia.