01 / THEORY
Una interfaz no puede hacer que todo tenga la misma importancia.
Cuando todos los elementos compiten visualmente por la atención, el usuario necesita invertir más esfuerzo para entender qué debe mirar, qué debe comparar y cuál es el siguiente paso.
La jerarquía visual convierte una página en una secuencia comprensible.
02 / BEHAVIOUR
Antes de decidir comprar, una persona necesita construir rápidamente una respuesta a varias preguntas:
- ¿Qué es?
- ¿Es lo que estoy buscando?
- ¿Cuánto cuesta?
- ¿Puedo confiar?
- ¿Qué tengo que hacer ahora?
La interfaz debe ayudar a responder esas preguntas en el orden adecuado.
03 / UX
En una página de producto podemos establecer una jerarquía básica:
- Producto.
- Propuesta de valor.
- Precio.
- Disponibilidad.
- Evidencias de confianza.
- Acción principal.
- Información secundaria.
No significa que todos los productos deban utilizar exactamente la misma estructura.
Significa que la arquitectura debe responder a la lógica de decisión del usuario.
04 / UI
La jerarquía se construye mediante contraste, escala, posición, espacio y repetición.
Por ejemplo:
- tamaño tipográfico
- peso
- posición
- espacio negativo
- color
- agrupación
- alineación
El objetivo no es decorar.
El objetivo es controlar la atención.
05 / ECOMMERCE
En ecommerce podemos encontrar errores habituales:
- un banner compitiendo con el producto
- demasiadas llamadas a la acción
- descuentos visualmente más importantes que el producto
- información crítica demasiado abajo
- elementos secundarios ocupando más espacio que la decisión principal
La consecuencia puede ser una experiencia difícil de interpretar.
06 / IMPLEMENTATION
La jerarquía visual también debe reflejarse en el código.
Una estructura semántica clara ayuda a mantener la relación entre contenido, diseño y comportamiento.
En una implementación de ecommerce podemos trabajar con:
- componentes reutilizables
- design tokens
- estados
- responsive layouts
- contenido progresivo
- componentes específicos para mobile
07 / MEASUREMENT
Una hipótesis de jerarquía debe poder comprobarse.
Podemos observar:
- interacción con la llamada a la acción
- desplazamiento
- interacción con información secundaria
- selección de variantes
- abandono
- conversión
La pregunta no es:
¿Se ve bonito?
La pregunta es:
¿Ayuda al usuario a entender qué hacer?