Jerarquía visual en el diseño web: un marco práctico con ejemplos.

La jerarquía visual en el diseño web consiste en la secuenciación deliberada de la atención en una página. Se decide qué se lee primero, qué se lee después y qué se lee solo si el visitante permanece en ella. La página guía la mirada a través de esa secuencia de forma intencionada, o bien desvía la atención hacia el elemento más llamativo, perdiendo así la oportunidad de lectura que el negocio necesitaba.

Cinco elementos clave construyen la jerarquía: tamaño, grosor, espacio, contraste y movimiento. Cualquier otra técnica es una combinación de estos cinco. La mayoría de las páginas aciertan en dos y fallan en tres, por lo que suelen parecer recargadas sin ser leídas. La solución no reside en más diseño, sino en priorizar estos elementos según la ruta de lectura que el negocio realmente necesita, y luego ajustarlos en función de esa ruta.

Este artículo presenta la versión operativa de dicha solución. Las cinco palancas, seis páginas de destino reales de Linear, Vercel, Stripe, Figma, Arc y Apple con los cambios de jerarquía que están implementando actualmente, tres análisis comparativos (antes y después) que muestran errores comunes y su solución, y una lista de verificación de auditoría de Figma que puedes ejecutar en cualquier archivo en veinte minutos antes de enviarlo al equipo de desarrollo.

Jerarquía visual: la definición práctica

La jerarquía visual es el orden en que un usuario lee una página. No se refiere al orden en que aparecen los elementos en el DOM, ni al orden en que se ubican en la cuadrícula de diseño, sino al orden en que la vista los percibe.

Una jerarquía sólida implica que la vista se centra primero en el mensaje principal, luego en el secundario y, por último, en el contenido de apoyo, siempre en ese orden exacto. Una jerarquía débil provoca que la vista divague, rebote entre elementos que compiten entre sí, se detenga en un enlace del pie de página antes que en el titular, y el visitante abandone la página sin que esta haya cumplido su función.

La función varía según la página. Un elemento destacado de la página de inicio necesita que la vista se detenga en una propuesta de valor y luego en una llamada a la acción (CTA). Una página de precios necesita que la vista se detenga en el plan recomendado, luego en el plan más económico y, finalmente, en las preguntas frecuentes (FAQ). Una entrada de blog necesita que la vista se detenga en el titular, luego en el título y, finalmente, en el primer párrafo. La configuración de los elementos jerárquicos cambia según la función. El hecho de que exista una jerarquía no cambia.

Aquí es donde la mayoría de los artículos sobre el tema se detienen. Definen la jerarquía y se dan por vencidos. El trabajo real no consiste en definirla, sino en elegir qué función cumple cada elemento en una página específica.

Los cinco elementos que construyen la jerarquía

Tamaño, grosor, espacio, contraste y movimiento son las únicas herramientas necesarias. Todo lo demás es una combinación de estos cinco.

El tamaño es la escala relativa de un elemento en comparación con todo lo que lo rodea. El peso visual determina la apariencia de un elemento, controlado por el grosor de la fuente, el grosor del trazo, la densidad del relleno o la masa visual. El espacio visual se refiere al espacio que rodea a un elemento, la forma negativa que le permite respirar y percibirse como principal. El contraste visual es la diferencia de color, valor o saturación entre un elemento y su fondo. El movimiento visual determina si el elemento se anima al aparecer o responde a la interacción, y cómo lo hace.

Cada decisión jerárquica implica ajustar uno o más de estos cinco parámetros. El titular es más grande que el texto principal: esto es el tamaño. La llamada a la acción (CTA) tiene un grosor de fuente elevado: esto es el peso visual. El elemento principal tiene un 80 % de espacio en blanco: esto es el espacio visual. La CTA es de color naranja brillante sobre un fondo oscuro: esto es el contraste visual. El titular se anima ligeramente antes que el texto principal: esto es el movimiento visual.

El error más común en las páginas web es aplicar los cinco parámetros visuales a la vez a cada elemento. Todo es grande, todo está en negrita, todo tiene espacio a su alrededor, todo tiene alto contraste, todo se mueve. La jerarquía visual desaparece en el momento en que todos los elementos tienen el mismo rango. La clave está en elegir qué palancas representan cada elemento y estar dispuesto a dejar algunas palancas neutrales.

Una regla útil: cada elemento de una página debe posicionarse en un máximo de dos palancas. El titular principal es grande y de alto contraste. Listo. La llamada a la acción es gruesa y de alto contraste. Listo. El texto de apoyo es neutral en todas las palancas. Listo. La página ahora tiene una secuencia visual fácil de seguir.

El tamaño determina la primera lectura

El elemento más grande de la página es lo primero que ve el ojo, por lo que debe ser lo que la empresa desea que se lea primero.

La mayoría de los equipos lo saben en teoría, pero lo ignoran en la práctica. Hacen que el logotipo sea el elemento más grande porque el equipo de marca lo pidió. Hacen que la navegación sea el elemento más grande porque tiene la mayor cantidad de enlaces y necesita espacio para ellos. Hacen que la imagen principal sea el elemento más grande porque el fotógrafo cobró mucho por ella. Ninguna de estas decisiones refleja lo que el visitante necesita leer primero.

La solución no es sutil. El titular principal, la propuesta de valor o la llamada a la acción principal, según la página, es el elemento más grande por un margen considerable. No solo un poco más grande, sino visiblemente más grande. Lo suficientemente grande como para que ningún otro elemento en la primera página compita por captar la atención.

Linear hace esto en su página de características. El titular es enorme, el texto de apoyo es pequeño, la navegación es pequeña, el logotipo es pequeño. Hay un solo elemento que reclama la primera lectura, y la vista se posa en él antes de que la página termine de cargarse. Compárese con una página de inicio típica de SaaS, donde el titular, la navegación y la ilustración principal tienen aproximadamente el mismo tamaño. La vista se divide, la lectura se interrumpe.

El tamaño también es relativo. Un titular de 48 píxeles en una página donde el texto principal tiene 16 píxeles es impactante. Un titular de 48 píxeles en una página donde el texto principal tiene 28 píxeles no lo es. La proporción es lo que determina el posicionamiento, no el número absoluto. Procure una proporción de texto principal a texto de al menos 2,5x, e idealmente de 3x o superior, en el elemento principal de cualquier página de destino.

El grosor separa el texto principal del secundario

El grosor es el segundo filtro, y es donde la mayoría de las páginas fallan silenciosamente al tratar la negrita como decoración en lugar de como un sistema de jerarquía.

La negrita es una herramienta de jerarquía. Indica al lector que este elemento tiene mayor prioridad que los elementos con grosor normal que lo acompañan. En el momento en que una página tiene texto en negrita en tres párrafos diferentes, todos con una importancia similar, la señal de jerarquía se desmorona. La negrita se convierte en textura, no en jerarquía. El lector deja de confiar en ella.

Utilice el grosor como un sistema de jerarquía estricto. Grosor máximo para el elemento más importante de la página. Grosor ligeramente menor para el elemento secundario. Grosor normal para el texto de apoyo. No utilice negrita dentro del texto principal a menos que la frase en negrita sea realmente más importante que la oración circundante, lo cual es raro.

Stripe lo hace con disciplina. Observa cualquier página de destino de Stripe. El titular principal es llamativo. El texto de apoyo es normal. Casi no hay párrafos en negrita dentro del cuerpo del texto. La página se lee en el orden que Stripe desea, y el peso visual hace la mayor parte del trabajo sin resultar estridente.

El peso visual va más allá de la tipografía. El botón de llamada a la acción (CTA) tiene un mayor peso visual que los elementos circundantes, logrado mediante el color de relleno, el grosor del borde o la sombra. Un nivel de precios destacado tiene un mayor peso visual que los niveles circundantes, logrado mediante un fondo de tarjeta más oscuro o un borde más grueso. El principio es el mismo: mayor peso visual equivale a mayor relevancia.

Un error común: los diseñadores recurren a la negrita dentro de los párrafos para "resaltar" frases clave. La mayoría de estos resaltados no otorgan mayor relevancia, sino que son un énfasis forzado. Elimínalos y el texto se lee con mayor claridad, y las frases en negrita realmente importantes recuperan su relevancia.

El espacio: la palanca infrautilizada

El espacio en blanco no está vacío, sino que es la forma negativa que otorga importancia a cada elemento.

El espacio clasifica los elementos según su aislamiento. El elemento con más espacio vacío a su alrededor se percibe como el más importante, independientemente de su tamaño o grosor. Un titular pequeño en el centro de una página casi vacía se percibe como principal. Un titular grande, apretujado junto a un menú de navegación, un logotipo y una ilustración principal, se percibe como uno de cuatro elementos que compiten entre sí.

Las páginas de producto de Apple son un ejemplo a seguir. La imagen principal en la página de producto de iPhone suele ser una sola fotografía con un breve pie de foto debajo, rodeada de un espacio en blanco. El elemento que ocupa más espacio es el que capta la atención, y Apple lo consigue siempre en todas sus páginas. El producto es lo principal, todo lo demás es secundario, y el espacio es la clave.

La mayoría de las páginas se niegan a dejar espacio en blanco. Siempre hay un logo de testimonio más que incluir, una característica más que mencionar, una llamada a la acción secundaria más que colocar. Cada adición afecta la jerarquía. El elemento que acaparaba la atención por sí solo ahora compite con la nueva adición, y la señal de posicionamiento se debilita.

La clave está en dejar la mayor parte del espacio en blanco. El elemento principal de una página de destino debería tener al menos un sesenta por ciento de espacio vacío, idealmente un setenta por ciento o más, con el mensaje principal ocupando un claro espacio visual en el centro o a la izquierda de ese espacio. Si el elemento principal se ve incómodo con tanto espacio, el equipo aún no ha confiado en esta estrategia.

El espacio también influye dentro de los elementos. La altura de línea del texto principal, el espaciado entre secciones, el relleno dentro de las tarjetas, el espacio entre un titular y su texto de apoyo. Cada uno de estos elementos es una palanca de espacio, y cada uno de ellos posiciona el elemento en relación con su entorno. Una altura de línea ajustada con un relleno de sección amplio indica al lector que este párrafo es una unidad, mientras que la siguiente sección es otra. El interlineado amplio con un espaciado de sección ajustado indica a la vista que todo es un muro de texto continuo, lo que dificulta encontrar la información relevante.

El contraste obliga a la vista a comprometerse

El contraste es lo que transforma una página legible en una página irresistible.

El contraste opera en tres ejes. El contraste de valor es la diferencia de luminosidad entre un elemento y su fondo, el factor clave que impulsa contraste de color accesible y que controla directamente la legibilidad. El contraste de color es la diferencia de tonalidad entre un elemento y su entorno, el factor que hace que un CTA destaque sobre el resto de la página. El contraste de saturación es la diferencia entre colores vivos y apagados, el factor que resalta un elemento de acento sobre una paleta desaturada.

El CTA principal de Stripe es un único color de alta saturación sobre una página de baja saturación. La vista lo encuentra al instante porque es el único elemento saturado en toda la pantalla. Linear hace lo mismo con un único botón violeta brillante sobre una página casi monocromática. Ninguno de estos botones de llamada a la acción es el elemento más grande ni el más pesado. Captan la atención porque son el elemento con mayor contraste de la página, sin más.

Un error común: páginas con cinco o seis colores saturados que compiten por la atención. Un botón de llamada a la acción verde, un estado de error rojo, un enlace azul, un resaltado naranja, un acento rosa en la ilustración principal. Cada color busca llamar la atención, y la vista se cansa de intentar priorizarlos. Elige un color de acento, úsalo para una sola función (normalmente el botón de llamada a la acción principal) y desatura el resto.

El contraste también tiene un umbral mínimo. Un texto gris sobre un fondo gris ligeramente más oscuro resulta poco atractivo visualmente y perjudica la accesibilidad. Busca una relación de contraste de al menos 7:1 en el texto y de 4,5:1 en los elementos de la interfaz de usuario. Por debajo de estos umbrales, el contraste deja de crear jerarquía y empieza a generar fatiga visual.

El movimiento completa la secuencia

El movimiento es el último recurso, y el que más se usa incorrectamente, ya que la mayoría de los equipos lo consideran un elemento decorativo cuando en realidad es una señal direccional.

El ojo está programado para seguir el movimiento. Cualquier elemento animado se convierte brevemente en el elemento de mayor prioridad en la página, independientemente de su tamaño, grosor, espacio o contraste. Esto representa un gran poder para un recurso, por lo que el movimiento es el más fácil de usar mal. Una página donde cada elemento aparece gradualmente, se desliza hacia arriba y pulsa al pasar el cursor por encima es una página donde el movimiento es constante, lo que significa que el movimiento ha dejado de priorizar nada.

Utilice el movimiento con moderación y solo en el elemento de mayor prioridad. El titular principal aparece con una animación. El botón de llamada a la acción (CTA) tiene un estado al pasar el cursor por encima. El texto de apoyo es estático. La vista se posa primero en el titular porque es el elemento que se movió, luego en el CTA cuando el cursor se acerca, y se mantiene la ruta de lectura.

La página de inicio de Vercel utiliza el movimiento como principal herramienta jerárquica. El elemento principal se anima con una secuencia deliberada: primero el titular, luego el texto de apoyo, después la llamada a la acción (CTA), y el resto de la página permanece prácticamente estático hasta que el usuario se desplaza. El movimiento es la secuencia. Cuando el visitante termina la animación del elemento principal, ha leído la página en el orden que Vercel deseaba.

Una restricción útil: limitar el movimiento a un elemento por ventana gráfica, además de los estados de interacción (pasar el ratón por encima, enfocar, activo) en una única CTA principal. Si se animan varios elementos simultáneamente, el movimiento no clasifica, sino que decora, y la página se percibe dispersa sin guiar la mirada hacia ningún punto específico. El movimiento como herramienta de clasificación también se integra de forma natural con la filosofía de principios de diseño de movimiento, donde cada animación responde a una pregunta en lugar de simplemente rellenar tiempo.

Seis páginas de destino reales, comentadas

La estructura solo importa si se mantiene en contacto con las páginas publicadas, así que aquí hay seis que están en producción actualmente.

Cada análisis es breve y conciso. Explica qué hace la página en cada palanca, dónde tiene éxito y dónde pierde oportunidades. Ninguna es perfecta. Todas superan el estándar de las páginas de destino SaaS, lo que las hace dignas de estudio.

Linear, jerarquía como compresión

Linear presenta una de las jerarquías más limpias de la web, ya que cada palanca cumple una función específica.

Tamaño: titular principal con un tamaño aproximado de 4 veces el del texto principal. Grosor: un grosor elevado en el titular, normal en el resto. Espacio: un titular principal con un 70 % de espacio en blanco, sin ilustraciones que compitan con el texto. Contraste: una llamada a la acción (CTA) violeta brillante sobre una página casi monocromática. Movimiento: un efecto de aparición gradual en el titular principal, sin animación en la parte inferior de la página.

La vista se posa en el titular, lee el texto complementario, encuentra la CTA y lee el resto de la página solo si el visitante permanece en ella. Cada palanca está calibrada. Cada elección está orientada a una única ruta de lectura.

Donde Linear pierde valor. La cuadrícula de características debajo del encabezado se vuelve más densa que el propio encabezado, y la señal de jerarquía se debilita ligeramente cuando la vista se desvía más allá del pliegue. Reducir la proporción de tamaño en esa cuadrícula extendería la jerarquía del encabezado más abajo en la página.

Vercel, jerarquía como movimiento

Vercel utiliza el movimiento como su principal palanca jerárquica, y funciona porque las otras cuatro son deliberadamente sutiles.

Tamaño: el encabezado es grande, pero no enorme. Grosor: normal, no excesivo. Espacio: generoso, no excesivo. Contraste: bajo, principalmente en escala de grises hasta la llamada a la acción. Movimiento: dominante. El encabezado se anima en una secuencia deliberada que construye el orden de lectura a través del movimiento, y el resto de la página recompensa el desplazamiento con animaciones de revelación en la cuadrícula bento inferior.

La apuesta funciona porque las otras palancas son lo suficientemente moderadas como para permitir que el movimiento haga el trabajo. Si el elemento principal fuera grande, pesado y de alto contraste, el movimiento resultaría frenético. Dado que el estado estático transmite calma, el movimiento se percibe como una coreografía, no como un caos.

Aquí es donde Vercel falla. La sincronización de la animación en la carga inicial puede resultar demasiado agresiva para los usuarios con preferencias de movimiento reducido. Una opción de reserva más agresiva para este público protegería la jerarquía sin sacrificar la coreografía para los demás.

Stripe, la jerarquía como contención

La jerarquía de Stripe es prácticamente imperceptible, lo que representa la máxima expresión de la técnica.

Tamaño: las proporciones son claras, pero no dramáticas. Grosor: un grosor considerable en el titular, normal en el resto. Espacio: generoso. Contraste: bajo en toda la página, con un color principal de alta saturación para el botón de llamada a la acción (CTA). Movimiento: casi inexistente, salvo un ligero efecto al pasar el cursor sobre el botón de llamada a la acción.

La disciplina de Stripe es la de la moderación. Podrían potenciar cada elemento, pero optan por no hacerlo. El resultado es una página que se lee en el orden deseado por Stripe sin que parezca forzada. La jerarquía se percibe, no se ve.

Donde Stripe pierde dinero: algunas páginas de producto sobrecargan la sección principal con ejemplos de código, ilustraciones y texto de apoyo simultáneos, lo que debilita la primera lectura. Si la sección principal se redujera a un solo titular y una llamada a la acción, y se colocara el ejemplo de código en la segunda ventana, se restablecería la prioridad.

Figma, jerarquía como densidad

Figma concentra más información en la sección principal que casi cualquier otra página de la competencia, manteniendo la ruta de lectura despejada.

Tamaño: titular grande sobre un fondo más pequeño, con elementos de la interfaz de usuario del producto aún más reducidos. Peso: titular grueso, fondo normal, superposiciones de interfaz de usuario ligeras. Espacio: menor que en Linear o Stripe, mayor que en la mayoría de las plataformas SaaS similares. Contraste: alto en el titular sobre fondo oscuro, menor en los elementos circundantes. Movimiento: sutil en la vista previa del producto, nulo en el titular.

El elemento principal de Figma funciona porque las proporciones de tamaño y peso son lo suficientemente agresivas como para captar la atención incluso con más contenido compitiendo por la visibilidad. Una menor influencia en estos dos aspectos haría que el titular perdiera protagonismo. Gracias a que las proporciones se mantienen, la página tolera una mayor densidad de lo habitual sin romper la jerarquía.

Donde Figma falla: la navegación se vuelve visualmente recargada con múltiples elementos de navegación principales, navegación secundaria, un botón de contacto y un botón de inicio de sesión. Reducir todo esto a una sola llamada a la acción principal en la navegación disminuiría la visibilidad del elemento principal.

Arc, la jerarquía como rebeldía

Arc rompe deliberadamente con las convenciones de tamaño y peso, y la jerarquía sigue funcionando gracias al contraste y el movimiento.

Tamaño: discreto. Peso: ligero. Espacio: variable, a veces ajustado. Contraste: alto en toda la página, con múltiples colores saturados. Movimiento: intenso, con paralaje, revelaciones al desplazarse e ilustraciones animadas.

El elemento principal de Arc es un contraejemplo a la fórmula estándar. El titular no es el elemento más grande ni el más pesado, y la mirada no necesariamente se posa en él primero. La página funciona porque Arc es una incógnita, el visitante llega con curiosidad, y el movimiento y el contraste guían la mirada a través de una secuencia que no necesita la jerarquía tradicional para funcionar.

Esta es la excepción que demuestra la validez del marco. Arc puede romper las reglas porque la marca ha obtenido permiso para ello mediante el posicionamiento, las expectativas de la audiencia y la disposición de los visitantes a desplazarse y explorar. La mayoría de las marcas no han obtenido ese permiso y no deberían asumir que lo han hecho.

Donde Arc falla. El elemento principal con mucho movimiento puede confundir a los visitantes primerizos que no saben qué es Arc. Un elemento de lectura inicial más claro sobre el movimiento ayudaría a los nuevos usuarios sin alienar a la audiencia que ya confía en la marca.

Apple, la jerarquía como escenario

Las páginas de producto de Apple son un ejemplo magistral de jerarquía basada en el desplazamiento, donde el espacio y el movimiento son protagonistas.

Tamaño: imágenes de producto enormes, tipografía casi a escala de valla publicitaria en los eslóganes clave, pequeña en el resto. Peso: ligero, en general. Espacio: enorme, a menudo el ochenta por ciento o más de cualquier área visible. Contraste: intencional, a menudo con una fotografía principal sobre un fondo casi negro. Movimiento: activado por el desplazamiento, donde cada sección se revela a medida que el visitante avanza por la página.

Apple considera todo el desplazamiento como la jerarquía. Cada sección requiere una sola lectura. El visitante recorre una secuencia coreografiada previamente por la página. Al finalizar la página, Apple ha contado una historia completa en el orden que Apple deseaba.

¿Dónde falla Apple? Las páginas de productos pueden ser lentas en dispositivos de gama baja, y la coreografía del movimiento se degrada con conexiones lentas, lo que puede aplanar la jerarquía para los visitantes que no llegan a ver las revelaciones. Una alternativa más agresiva para ancho de banda bajo protegería la ruta de lectura para la cola larga.

¿Quieres un sitio donde cada página tenga una ruta de lectura deliberada y no aleatoria? Contratar Brainy. UXBrainy ofrece auditorías de jerarquía y desarrollo completo de sistemas de diseño; AppBrainy ofrece diseño de interfaz de usuario para equipos que buscan aplicar la misma disciplina a una aplicación en funcionamiento.

Tres análisis comparativos

Conocer los factores clave es una cosa, corregir una página real es otra. Por eso, aquí presentamos tres errores comunes de jerarquía y su solución exacta.

Primero: El elemento principal con cinco elementos que compiten entre sí. Un elemento principal típico de una página SaaS tiene un titular, una descripción, una llamada a la acción principal, una secundaria, una franja con el logotipo del cliente y una ilustración principal, todo en la primera página. Cada elemento acapara la atención, pero ninguno destaca. Solución: elige el elemento más importante (normalmente el titular y la llamada a la acción principal), reserva la primera página con solo estos dos elementos y desplaza el resto hacia abajo. El elemento principal ahora capta la atención de inmediato.

Segundo: La página que lo pone todo en negrita. Texto en negrita en el titular, frases en negrita en tres párrafos, subtítulos en negrita, llamadas a la acción en negrita, testimonios en negrita. El factor de peso ha dejado de ser relevante. Corrección: elimina el texto en negrita de los párrafos interiores, a menos que la frase en negrita sea realmente más importante que la oración circundante. Vuelve a aplicar la negrita al elemento más grueso de cada sección. El control de peso vuelve a funcionar como un sistema de clasificación en lugar de una textura.

Tercero. La página con cinco colores de acento: llamadas a la acción (CTA) verdes, estados de error rojos, enlaces azules, resaltados naranjas e ilustraciones principales rosas. El control de contraste ha dejado de ser eficaz y ha comenzado a cansar. Corrección: elige un color de acento para la CTA principal, reduce la saturación de todo lo demás a escala de grises o a versiones atenuadas del color de la marca, y acepta que "verse colorido" no es lo mismo que "posicionarse bien". Ahora la página posiciona la CTA correctamente y la marca transmite mayor confianza.

Cada corrección no implica un rediseño. Cada corrección consiste en eliminar elementos que compiten entre sí hasta que los controles funcionen correctamente. La mayoría de los problemas de jerarquía son problemas de sustracción disfrazados de problemas de diseño.

Lista de verificación de auditoría de Figma de veinte minutos

Ejecute esta lista de verificación en cualquier archivo de trabajo antes de entregarlo y detectará los errores de jerarquía que se envían a producción.

1. Prueba de visión entrecerrada. Mire con atención la mesa de trabajo hasta que los detalles se difuminen. ¿Hay algún elemento que destaque claramente? Si no, el elemento principal tiene un problema de tamaño o grosor.

2. Prueba de primera lectura. Cubra la página, descúbrala durante un segundo y vuelva a cubrirla. ¿Qué leyó? Si no era el mensaje principal, ajuste el tamaño y el contraste de ese elemento.

3. Relación de escala tipográfica. Compare el título principal con el texto del cuerpo. Si la relación es inferior a 2,5x, el tamaño es insuficiente.

4. Inventario de grosor. Cuente los elementos en negrita en la página. Si hay más de tres por ventana gráfica, el grosor es decorativo, no prioritario.

5. Conteo de saturación. Cuente los colores de acento saturados en la página. Si hay más de dos, el contraste resulta fatigante, no prioritario. 6. Relación de espacio en blanco. Calcula el espacio vacío en la ventana gráfica principal. Si es inferior al 60%, el espaciado está demasiado bajo.

6. Inventario de movimiento. Cuenta los elementos que se animan al cargar la página por primera vez. Si hay más de dos, el movimiento ha dejado de ser relevante.

7. Contraste del CTA. Comprueba el color del CTA principal con respecto a su fondo. Si la relación de contraste es inferior a 4,5:1, corrígela antes de la publicación.

8. Contraste del texto principal. Comprueba el texto principal con respecto a su fondo. Si la relación es inferior a 7:1, la página tiene problemas de legibilidad.

9. Interlineado. Comprueba el interlineado del texto principal. Si es inferior a 1,5 veces el tamaño de la fuente, la página se lee como una pared.

10. Relleno de sección. Comprueba el espaciado entre las secciones principales. Si las secciones se superponen, el espaciado no separa correctamente las unidades.

11. Prueba de reducción para móviles. Abre el archivo con el ancho de un móvil. ¿Se mantiene la jerarquía visual o el titular se reduce al mismo tamaño que el texto principal? Si ocurre lo segundo, es necesario ajustar la escala tipográfica para dispositivos móviles.

Una página que supera estas doce comprobaciones tiene una jerarquía funcional. No será perfecta, pero tampoco resultará desastrosa, y la ruta de lectura que la empresa necesita será visible para el visitante desde el primer segundo.

Preguntas frecuentes

¿Qué es la jerarquía visual en el diseño web?

La jerarquía visual en el diseño web es la secuenciación deliberada de la atención en una página para que el visitante lea primero el mensaje principal, luego el secundario y, por último, el contenido de apoyo, en ese orden exacto. Se basa en cinco elementos clave: tamaño, grosor, espacio, contraste y movimiento. Una jerarquía sólida significa que la vista se centra automáticamente en el elemento principal. Una jerarquía débil significa que la vista se dispersa entre elementos que compiten entre sí y la página no logra transmitir su mensaje principal.

¿Cómo se crea la jerarquía visual en un sitio web?

Seleccione el elemento de cada página que la empresa desea que se lea primero y, a continuación, aplique dos de las cinco palancas (tamaño, grosor, espacio, contraste y movimiento) con fuerza a ese elemento, manteniendo las demás sin modificar. Repita el proceso con el elemento secundario, aplicando una palanca ligeramente menos. Deje el contenido de apoyo sin modificar en ninguna de las palancas. El resultado es una página donde la ruta de lectura es visible sin esfuerzo, que es lo que exige una buena página de destino.

¿Cuáles son los principios de jerarquía visual más importantes?

Las cinco palancas son tamaño, grosor, espacio, contraste y movimiento. El tamaño determina la primera lectura al hacer que el elemento más importante sea el más grande. El grosor separa lo principal de lo secundario reservando un mayor grosor para el elemento de mayor rango. El espacio jerarquiza por aislamiento, dando al elemento más importante el mayor espacio vacío. El contraste impulsa la interacción al ser el elemento con mayor saturación o valor en la página. El movimiento completa la secuencia al ser el único elemento animado, utilizado con moderación. Las cinco deben funcionar en combinación, no de forma aislada.

¿Por qué es importante la jerarquía visual en las páginas de destino?

Las páginas de destino tienen una única función: transmitir un solo mensaje e incitar a una sola acción. Sin jerarquía, la atención del visitante se divide entre elementos que compiten entre sí, el mensaje se fragmenta y la acción no se produce. Con jerarquía, el visitante lee la propuesta de valor, encuentra la llamada a la acción (CTA) y realiza la conversión en el orden previsto por la página. Cada punto porcentual de aumento en la conversión de una página de destino depende de la claridad con la que la página organiza sus propios elementos, que es precisamente lo que buscan las buenas principios de diseño de páginas de destino.

¿Cuál es la diferencia entre jerarquía visual y arquitectura de la información?

La jerarquía visual se refiere a cómo el ojo lee una página o pantalla. La arquitectura de la información se refiere a cómo se organizan el contenido y la navegación en todo el sitio. La jerarquía es local a una ventana gráfica, mientras que la arquitectura de la información es global a la experiencia. Un sitio con buena arquitectura de la información puede tener páginas con mala jerarquía, y viceversa. Ambas son importantes y constituyen disciplinas distintas que deben diseñarse cuidadosamente.

El patrón que la mayoría de las páginas pasan por alto

Una página con una jerarquía sólida no es una página con muchas opciones de diseño, sino una página donde cada opción de diseño contribuye a una única ruta de lectura.

El error que cometen la mayoría de los equipos es tratar la jerarquía como una cuestión estilística. Creen que una jerarquía sólida implica más audacia, más color, más animación, más interés visual. Lo contrario es más cierto. Una jerarquía sólida suele ser sustractiva. Implica la voluntad de dejar la mayor parte del área visible prácticamente vacía, de aplicar énfasis a un solo elemento por sección, de restringir la paleta de acento a un único color saturado y de limitar el movimiento a un elemento por pliegue. El resultado es una página que se lee en un orden deliberado sin que parezca diseñada a propósito.

Las marcas que implementan una jerarquía sólida (Linear, Stripe, Apple) han interiorizado este principio. Las marcas que implementan jerarquías débiles suelen caer en la trampa de la acumulación, donde cada revisión trimestral introduce un nuevo elemento en el encabezado, una nueva frase en negrita en el cuerpo del texto, un nuevo color de acento en el botón de llamada a la acción, y el efecto acumulativo anula la ruta de lectura original. La solución rara vez es un rediseño. La solución es una auditoría, una revisión exhaustiva y volver a la disciplina de ajustar cada elemento con un solo propósito a la vez.

Si tu equipo publica páginas con una ruta de lectura poco clara, donde cada elemento compite por la atención y donde las conversiones no aumentan independientemente de las pruebas A/B, el problema subyacente casi siempre es un problema de jerarquía. Los elementos se están utilizando incorrectamente. Los elementos compiten entre sí. Los elementos intentan abarcar demasiado a la vez. Simplifica la página a cinco parámetros independientes: tamaño, grosor, espaciado, contraste y dinamismo, ajusta cada uno según la ruta de lectura que necesita el negocio, y la página volverá a funcionar.

Si buscas un sitio donde cada página tenga una ruta de lectura definida y una jerarquía que funcione correctamente en cualquier tamaño de pantalla, visita contratar Brainy. UXBrainy ofrece auditorías de jerarquía, sistemas de diseño y proyectos completos de diseño web con la jerarquía integrada en las especificaciones. AppBrainy ofrece interfaces de usuario de productos con la misma rigurosidad aplicada a las superficies de usuario de los productos. El marco de trabajo que se muestra en esta página es el que utilizamos en cada proyecto, en cada página, antes de su lanzamiento.