Jerarquía visual al diseñar con IA: qué va primero

Le pedí tres veces lo mismo a la IA: «Diseña la pantalla de inicio de una app bancaria para celular. Que se vea moderna y limpia». Cada vez en una conversación nueva. Las tres respuestas se parecían tanto que dos repetían el mismo nombre de usuaria, Ana Martínez, y las tres inventaron la misma tarjeta terminada en 4821.

No es que la IA diseñe mal. Diseña el promedio: el saldo grande en una tarjeta de color, cuatro accesos rápidos y los últimos movimientos. Es un patrón razonable, el mismo que usan muchas apps reales. El problema aparece cuando la persona que abre la app necesita otra cosa, como pagar una tarjeta que vence mañana.

En resumen:

• Jerarquía visual: el orden en que se lee una pantalla: qué ves primero, qué después y qué puede esperar.

• Tamaño: pocos niveles, bien distintos, hacen que lo importante se lea primero.

• Contraste: un solo color de acento, reservado para la acción principal.

• Similitud: lo que se ve igual se lee como un grupo; lo urgente tiene que verse distinto.

• Squint test: desenfoca la pantalla y mira qué sigue distinguiéndose.

Este artículo acompaña el segundo episodio de Back to Basics, una serie sobre fundamentos de UX/UI para trabajar con IA. El caso es ficticio: Laura es una usuaria inventada que abre su app del banco porque su tarjeta vence mañana. Las respuestas de la IA son reales y están sin editar. La segunda versión del diseño se hizo con IA a partir de un pedido más completo y después se ajustó con revisión de diseño.

1. El experimento: tres pedidos, casi la misma pantalla

El 8 de noviembre de 2026 pasé el mismo pedido por Claude Opus 5.5 en tres conversaciones nuevas, sin contexto previo. Esto fue lo que coincidió:

• Arriba: un saludo con nombre y el saldo disponible en una tarjeta con degradado morado.

• En medio: cuatro botones redondos del mismo tamaño: enviar, recibir, pagar y más.

• Abajo: los gastos o el presupuesto del mes y los movimientos recientes.

Es una sola herramienta y un solo pedido, así que no prueba que todas las IA hagan lo mismo. Pero muestra algo útil: cuando no le dices qué es lo importante, la IA elige lo más común. Y lo más común no conoce a tu usuario.

2. Qué es la jerarquía visual

Nielsen Norman Group la describe como la forma de organizar los elementos para que se lean por orden de importancia (Visual Hierarchy in UX). Kelley Gordon menciona tres herramientas principales: la escala, el color y el contraste, y la agrupación por cercanía o por regiones comunes.

Antes de usar cualquiera de ellas hay que responder una pregunta que ninguna herramienta resuelve: ¿qué necesita ver primero esta persona, en este momento? Para Laura, la respuesta es el pago que vence. Para otra persona, en un día cualquiera, puede ser el saldo.

3. Tamaño: pocos niveles, bien distintos

Medí los tamaños de letra que se ven en la pantalla de la IA. Después del saldo, que mide 36 px, todo el texto queda entre 11 y 20 px, y varios tamaños van de 1 en 1: 13, 14, 15 y 16 px. A esa distancia el ojo no percibe niveles. Percibe una franja pareja donde todo pesa casi lo mismo.

La misma guía de Nielsen Norman Group recomienda usar pocos tamaños, como máximo tres, y no más de dos elementos grandes por pantalla. En la segunda iteración usamos tres niveles: 32 px para el monto a pagar, 16 px para el saldo y el texto principal, y 12 px para los datos de apoyo. Cada nivel mide la mitad o menos del anterior, y por eso se distingue.

• Grande: lo que la persona vino a resolver.

• Mediano: lo que necesita para decidir.

• Pequeño: el contexto que puede leer después.

4. Contraste: si todo resalta, nada resalta

En la respuesta de la IA, el mismo morado aparece en la tarjeta del saldo, en los iconos de las acciones, en los enlaces y en la pestaña activa. Cuando un color marca cuatro cosas distintas, deja de decir «actúa aquí».

Laws of UX lo explica con el efecto Von Restorff: recordamos mejor lo que se diferencia del resto, pero si destacas demasiadas cosas, compiten entre sí. La regla práctica es reservar el color de acento para la acción principal y dejar lo demás en tonos neutros. Además, el color no debería ser la única señal: el tamaño, el peso y la posición también tienen que apuntar al mismo lugar.

5. Similitud: lo que se ve igual se lee como un grupo

El principio de similitud dice que los elementos que comparten forma, tamaño o color se perciben como relacionados. Los cuatro botones de la IA son iguales, así que se leen como opciones equivalentes. Y está bien mientras lo sean.

El problema aparece cuando una de ellas importa más. Si el pago vence mañana, «Pagar» no puede verse igual que «Más». En la segunda iteración sale del grupo: es el único botón lleno, ocupa todo el ancho y está junto al monto que se va a pagar. Los demás accesos quedan juntos, abajo, donde pueden esperar.

6. Cómo pedírselo a la IA

Estas decisiones no salen solas: hay que escribirlas en el pedido. Este es el que usamos para la segunda iteración:

Diseña la pantalla de inicio de una app bancaria para celular.

Para quién: Laura abre la app porque su tarjeta vence mañana.

Qué va primero: 1. El pago: monto, fecha, total o mínimo y «Pagar». 2. El saldo y cuánto le queda. 3. Lo demás puede esperar. Si no hay pago pendiente, el saldo va primero.

Sistema de diseño: 3 tamaños de letra (grande, mediano y pequeño), espacios parejos y un solo color fuerte: el de «Pagar».

La última frase de «Qué va primero» es la más importante: la jerarquía cambia según el momento de la persona, y eres tú quien define cuándo. Si trabajas con un sistema de diseño, pídele a la IA que use sus estilos en lugar de describirlos uno por uno (lo explico en Sistemas de diseño más allá de Figma).

Un dato para no exagerar: con un pedido intermedio, que solo añadía tres líneas de orden, las tres respuestas de la IA ya pusieron el pago primero y usaron tres tamaños de letra. Aun así se podían mejorar bastante. Por eso la versión que muestro en el carrusel pasó además por una revisión de diseño.

7. Cómo revisarlo: entrecierra los ojos

Para comprobar la jerarquía no necesitas herramientas: entrecierra los ojos, aleja el celular o desenfoca una captura. Nielsen Norman Group lo llama squint test y lo usa para ver qué elementos captan la atención primero.

En la primera respuesta, al desenfocar solo se distingue la tarjeta del saldo. En la segunda se distinguen el monto a pagar y el botón. Es una revisión rápida: mide el peso visual, no cómo leen de verdad las personas, y no reemplaza verlas usar la pantalla.

Si generas la interfaz en código, también puedes automatizar parte de la revisión (más ideas en Prototipos en código: qué validar antes de entregar una interfaz):

• Tamaños: una regla de lint que rechace cualquier tamaño de letra fuera de tu escala, por ejemplo 12, 16 y 32 px.

• Acción principal: una prueba que falle si una pantalla tiene más de un botón principal.

• Vistazo: una captura desenfocada de la pantalla adjunta a cada pull request.

Checklist antes de dar por buena la jerarquía de una pantalla hecha con IA

• ¿Sabes qué necesita ver primero la persona en este momento?

• ¿Hay como máximo tres niveles de tamaño, bien distintos entre sí?

• ¿El color de acento está solo en la acción principal?

• ¿La acción más importante se ve distinta de las demás?

• Al desenfocar la pantalla, ¿lo primero que distingues es lo que la persona vino a hacer?

• ¿Revisaste qué pasa cuando cambia el momento, por ejemplo sin pagos pendientes?

La IA te da el promedio en segundos, y eso ya es mucho. Decidir qué va primero sigue siendo trabajo de diseño. Si quieres repasar los fundamentos del episodio anterior, en UX, UI y usabilidad: diferencias al diseñar con IA explico qué supone la IA cuando el pedido es general.

Abre tu app del banco ahora mismo: ¿lo primero que ves es lo que viniste a hacer? Te leo en LinkedIn.

Fuentes

1. Gordon, K. (2021). Visual Hierarchy in UX: Definition. Nielsen Norman Group.

2. Wang, H.-H. (2023). Squint Test. Video de Nielsen Norman Group.

3. Harley, A. (2020). Similarity Principle in Visual Design. Nielsen Norman Group.

4. Yablonski, J. Von Restorff Effect. Laws of UX.

5. W3C (2023). Understanding Success Criterion 1.4.1: Use of Color. WCAG 2.2.