En corto: La jerarquía visual no comienza con tamaños, colores o componentes. Comienza con la tarea, el estado de la interfaz y la evidencia disponible.
En una revisión de diseño se propone aumentar el tamaño de un título, mover una alerta o destacar un botón. Cuando se pregunta por qué, la respuesta suele ser: “así se ve mejor” o “para que llame más la atención”.
El problema no es utilizar criterio visual. El problema aparece cuando no puede explicarse qué necesita percibir la persona, por qué debe percibirlo antes que otros elementos y cómo se comprobará la decisión.
A continuación se presenta un método para convertir evidencia de uso, reglas del proceso, riesgos e hipótesis en decisiones sobre orden, agrupación, peso y ubicación.
El método sigue esta cadena:
Evidencia → necesidad de percepción → prioridad → tratamiento visual → comprobación.
Al finalizar será posible analizar una pantalla saturada, establecer qué necesita percibirse primero, justificar cada cambio y producir un rediseño de baja fidelidad acompañado por una tabla “elemento–prioridad–evidencia–tratamiento”.
El problema de “hacer que algo destaque”
Cuando una pantalla contiene demasiada información, la solución inmediata suele ser aumentar el contraste de los elementos considerados importantes.
Se agregan títulos más grandes, tarjetas, colores, bordes, íconos y botones destacados. El resultado puede verse más elaborado, pero no necesariamente establece un orden comprensible.
Si todo intenta llamar la atención, la persona todavía debe descubrir:
- Qué está ocurriendo.
- Qué necesita revisar.
- Si existe algún problema.
- Qué puede hacer a continuación.
La jerarquía visual debe hacer reconocible ese recorrido. Para conseguirlo, no basta con decidir qué elemento será más llamativo. Es necesario explicar qué función cumple dentro de la tarea.
¿Qué puede sostener una decisión de jerarquía?
No toda justificación tiene el mismo nivel de certeza. Conviene distinguir cuatro fuentes:
- Comportamiento observado: errores, dudas, omisiones o recorridos identificados durante una prueba.
- Datos de uso: frecuencia de consulta, clics, errores registrados o funciones poco utilizadas.
- Reglas y riesgos: condiciones del proceso, restricciones o consecuencias de una acción incorrecta.
- Hipótesis de diseño: posibles mejoras que todavía necesitan comprobarse.
Una regla puede demostrar que una alerta es crítica, pero no que su representación actual sea comprensible. Una prueba puede demostrar que la alerta pasa inadvertida, pero no que aumentar su tamaño sea la única solución.
La evidencia identifica qué necesita cambiar. El tratamiento visual sigue siendo una hipótesis hasta comprobarlo.
Método para decidir la jerarquía visual
Paso 1. Definir la tarea, la decisión y el estado
Antes de mover elementos debe completarse esta frase:
En esta pantalla, la persona necesita __________ para poder __________.
Por ejemplo:
En esta pantalla, la persona necesita revisar las inconsistencias de una solicitud para decidir si puede enviarse a firma.
Después se identifica:
- Qué activa la tarea.
- Qué decisión debe tomarse.
- Qué puede impedir continuar.
- Qué resultado indica que la tarea terminó.
El estado es importante porque la jerarquía puede cambiar. Mientras existan inconsistencias, la acción prioritaria puede ser “Solicitar corrección”. Cuando se resuelven, “Enviar a firma” adquiere mayor relevancia.
Paso 2. Registrar la evidencia disponible
Se enlistan los elementos presentes en la pantalla y se documenta qué se conoce sobre ellos.
Para cada elemento se responde:
- ¿Se ha observado algún problema relacionado?
- ¿Con qué frecuencia se utiliza?
- ¿Existe una regla que condicione su uso?
- ¿Qué ocurre si pasa inadvertido?
- ¿La decisión cuenta con evidencia o es una hipótesis?
No es necesario detener el diseño hasta contar con una investigación completa. Si falta información puede continuarse, siempre que la decisión quede registrada como hipótesis pendiente de comprobación.
Paso 3. Convertir la evidencia en prioridad
Cada elemento se evalúa mediante tres criterios:
| Criterio | Pregunta |
|---|---|
| Momento | ¿Se necesita ahora, después o sólo en una excepción? |
| Riesgo | ¿Qué ocurre si no se observa o se interpreta incorrectamente? |
| Frecuencia | ¿Se utiliza siempre, algunas veces o en casos poco comunes? |
A partir de estos criterios se asigna una prioridad:
- Alta: necesaria para comprender el estado, evitar un error o tomar la decisión actual.
- Media: apoya la tarea, pero no necesita percibirse primero.
- Baja: complementaria, histórica o de uso ocasional.
Los criterios no deben sumarse de forma mecánica. Una alerta poco frecuente puede tener prioridad alta si ignorarla produce una consecuencia grave. Un dato consultado constantemente puede ocupar menos espacio si se reconoce e interpreta con facilidad.
Paso 4. Traducir la prioridad a un tratamiento visual
La prioridad determina qué necesita atención. El tratamiento visual establece cómo facilitarla.
| Necesidad | Tratamiento que puede explorarse |
|---|---|
| Percibirse antes de comenzar | Orden y posición |
| Relacionarse con otro elemento | Proximidad y agrupación |
| Diferenciarse dentro de un grupo | Peso tipográfico, contraste o espacio |
| Aparecer bajo una condición | Revelado progresivo o estado contextual |
| Impedir una acción | Bloqueo visible y mecanismo de recuperación |
| Consultarse ocasionalmente | Sección expandible o vista secundaria |
Conviene trabajar primero con orden, posición, agrupación y espacio. El color y el tamaño pueden reforzar la jerarquía, pero difícilmente corrigen una estructura contradictoria.
Si una alerta se relaciona con un dato específico, colocarla únicamente al inicio puede dificultar la corrección. Puede utilizarse un resumen para detectar el bloqueo y una indicación junto al dato afectado para resolverlo.
La agrupación ayuda a reconocer qué elementos pertenecen a la misma tarea. La jerarquía determina cuál de esos grupos necesita aparecer primero y cuánto peso debe recibir.
Paso 5. Comprobar el recorrido
Antes de producir una interfaz de alta fidelidad pueden realizarse tres comprobaciones.
Exposición breve
Mostrar la pantalla durante cinco segundos y preguntar:
- ¿Qué se está revisando?
- ¿Existe algún problema?
- ¿Qué parece más importante?
Esta comprobación permite reconocer qué adquiere mayor atención, pero no demuestra que la tarea pueda completarse.
Primera acción
Presentar un escenario y preguntar dónde se comenzaría. Esto permite verificar si el punto de entrada coincide con la tarea esperada.
Ejecución de la tarea
Solicitar que se complete la revisión y observar:
- Qué se consulta primero.
- Qué pasa inadvertido.
- Dónde aparecen dudas.
- Si se intenta continuar con información incompleta.
La evidencia obtenida permitirá conservar, modificar o descartar el tratamiento propuesto.
Ejemplo: una pantalla de validación previa a firma
Para aplicar el método se utilizará un caso didáctico.
Una pantalla contiene datos de la solicitud, alertas, vista previa del documento, archivos, comentarios, historial y acciones para corregir o enviar a firma.
La evidencia disponible indica:
- Las alertas se detectan después de revisar el documento.
- Se intenta continuar antes de resolver algunas inconsistencias.
- Una regla impide enviar solicitudes con bloqueos.
- El historial se consulta principalmente cuando debe investigarse un cambio.
La tarea se define así:
“Revisar la información crítica y resolver los bloqueos para decidir si la solicitud puede enviarse a firma.“
Las decisiones pueden documentarse de la siguiente manera:
| Elemento | Prioridad | Evidencia | Tratamiento |
|---|---|---|---|
| Estado de la solicitud | Alta | Determina qué acciones están disponibles | Visible junto al identificador |
| Alertas críticas | Alta | Se detectan tarde y bloquean el envío | Resumen antes del documento y señalamiento junto al dato afectado |
| Datos por validar | Alta | Permiten localizar y resolver inconsistencias | Agrupados según la decisión que debe tomarse |
| Vista previa del documento | Media al comenzar; alta después de resolver bloqueos | Forma parte de la revisión, pero no resuelve las inconsistencias iniciales | Disponible sin convertirse en el primer foco |
| Enviar a firma | Condicional | No puede utilizarse mientras existan bloqueos | Adquiere prominencia cuando se cumplen las condiciones |
| Historial y comentarios | Baja | Se consultan en situaciones específicas | Sección disponible bajo demanda |
La solución no consiste solamente en hacer más grandes las alertas. Se modifica el recorrido esperado:
- Reconocer la solicitud y su estado.
- Detectar los bloqueos.
- Relacionar cada alerta con el dato afectado.
- Resolver o solicitar la corrección.
- Revisar el documento.
- Enviar a firma cuando corresponda.
Si “Enviar a firma” permanece deshabilitado, debe explicarse por qué no está disponible y qué falta para habilitarlo. También puede conservarse visible para anticipar el resultado final, siempre que no compita con la acción necesaria en el estado actual.
Ejercicio práctico: rediseñar una pantalla saturada
Seleccionar una pantalla con demasiada información o con varias acciones que compiten por atención. Si no se cuenta con una, puede utilizarse el caso anterior.
Paso 1. Definir la tarea
Completar:
En esta pantalla, la persona necesita __________ para poder __________.
Paso 2. Construir la tabla
Seleccionar entre ocho y doce elementos y registrar:
- Elemento.
- Prioridad.
- Evidencia.
- Tratamiento visual.
Cuando no exista evidencia suficiente, debe escribirse “hipótesis” y especificar qué necesita comprobarse.
Paso 3. Rediseñar en baja fidelidad
El rediseño debe mostrar:
- Qué se percibe primero.
- Qué elementos necesitan relacionarse.
- Qué información puede consultarse después.
- Qué acción corresponde al estado actual.
- Qué ocurre cuando existe un bloqueo.
No se requieren colores finales, íconos detallados ni componentes terminados. El objetivo es comprobar el orden antes de trabajar la apariencia.
Paso 4. Comprobar la propuesta
Mostrar la pantalla y preguntar:
- ¿Qué está ocurriendo?
- ¿Existe algo que impida continuar?
- ¿Qué se haría primero?
Si las respuestas no corresponden con la tarea definida, debe revisarse la jerarquía.
Entregable
El ejercicio debe producir:
- Un rediseño de baja fidelidad.
- Una tabla “elemento–prioridad–evidencia–tratamiento”.
- Al menos una hipótesis pendiente de comprobación.
Lista de comprobación
Antes de cerrar el rediseño:
- ¿La tarea principal puede expresarse en una frase?
- ¿Se reconoce rápidamente el estado actual?
- ¿La información crítica aparece antes de la acción que afecta?
- ¿Los elementos relacionados se perciben como un grupo?
- ¿La acción destacada corresponde al estado actual?
- ¿Las funciones poco frecuentes dejan de competir?
- ¿Los bloqueos explican cómo resolverlos?
- ¿Cada tratamiento tiene evidencia o está marcado como hipótesis?
- ¿Se comprobó qué se percibe primero y dónde comienza la tarea?
Conclusión
Decidir la jerarquía visual no consiste en elegir qué elemento se verá más atractivo. Consiste en establecer qué necesita comprenderse primero, qué información debe relacionarse y qué acción corresponde al estado actual.
La evidencia ayuda a definir la prioridad. El diseño traduce esa prioridad en orden, agrupación, peso y ubicación. La comprobación permite saber si el tratamiento realmente facilita la tarea.
Así, una decisión deja de justificarse con “se ve mejor” y puede explicarse mediante una pregunta más concreta:
¿Qué evidencia sostiene que esto debe percibirse primero?
