Primero vinieron las cuevas, luego las tablas de piedra, los papiros y el papel. Con el ordenador se revolucionan los métodos tradicionales y con ello aparece el diseño web, el display de las páginas evoluciona a pasos incontrolables pero hay algo que persiste.
¿Qué es lo que nunca cambia? La jerarquía visual.
¿Cuál es la mejor forma de ordenar la información?
Es una pregunta con la que los diseñadores de todo el mundo se rompen la cabeza a diario y más en un mundo tan saturado como es el de la web.
Aparece el responsive, las páginas, las apps y diferentes formatos a los que nuestra audiencia dirige la atención pero des del marketing online nos interesa crear calls to actions y distintos elementos para persuadir el usuario y guiarlo.
El diseñador tiene que saber ordenar el contenido para que se entienda y se adapte a las tendencias de cada año y estilo. Esto es cada vez más complicado porque la red está llena de textos densos sin descanso para mantener la atención del usuario. Los diseñadores siguen estos principios básicos para guiar al usuario y para que sus ojos recorran la información más importante.
Estos principios de jerarquía visual ayudan a los diseños de apps, páginas, trípticos o lo que sea. Y garantizan una buena experiencia por parte del lector y/o usuario.
1. Pautas de lectura
La mayoría de culturas leen de arriba a abajo y gran parte leen de izquierda a derecha. Aún así la disposición es lo más complicado y es a lo que se enfrentan los expertos en diseño web.
Estudios recientes demuestran que la gente primero hacer una lectura general rápida a modo de scanner para saber si les va a interesar el tema antes de empezar a leer a fondo. Las pautas de lectura rápida o lectura en diagonal acostumbran a ser en formas de F o Z. Esto es la base clave antes de empezar un diseño web, colocar la información más relevante en estas pautas sirve para saber donde situar los call to action y los destacados.
Las pautas en F acostumbran a ser para blogs o prensa. Para páginas con mucho texto. El lector repasa la parte lateral izquierda intentando encontrar palabras clave que le llamen la atención o la separación por tema/apartado
La aplicación de esto es fácil. Hacer listas y colocar títulos en negrita que rompan por parágrafos atrae mucho más la atención.
Las pautas en Z son para otro tipo de plataformas o formatos como anuncios o páginas web. La información no se presenta en párrafos y se tiene que plantear de otro modo. El ojo del lector escanea primero el header, es decir la parte superior de la página donde normalmente se encuentra la información relevante. Luego se va a la esquina contraria en diagonal cruzando toda la página.
Los diseñadores web suelen construir sus páginas a partir de esta pauta de lectura, disponiendo la información más relevante en las esquinas y orientando otra información importante en la parte superior e inferior conectada por una diagonal.
2. Tamaño
Es obvio que la gente lee primero lo más grande. Díle vaguería o inmediatez, es así. El tamaño es capaz de alterar las pautas de lectura en Z así que los diseñadores web tienen un poco de libertad para alterar el comportamiento del usuario.
3. Espacio
Otra técnica para atraer la atención o alterar la lectura del usuario es darle espacio para respirar. Este espacio a la vez nos da juego para usar distintos tamaños y jerarquizar la información relevante sin que quede muy saturado.
Es esencial a la hora de colocar botones e información ya que las tendencias actuales en diseño web acostumbran a no poner mucho texto.
4. Estructura de las tipografías y espacio
Es la parte más complicada en la jerarquía visual del diseño web. Los atributos más importantes de las tipografías son el peso o anchura, el estilo y otras modificaciones como cursiva que también pueden tener un papel influyente.
Las letras o palabras que más destaquemos son las de la información más relevante que conjugadas con el tamaño y el espacio pueden crear un buen efecto visual dinámico y fresco.
5. Color
El color es primordial en el diseño web como os contamos en la psicología del color en programación web.
Otra obviedad: los colores brillantes llaman la atención. Los colores más claros aparecen más distantes que los oscuros. Así que encontrar la combinación entre estas 3 premisas.
Estos son los principios para la jerarquía visual del diseño web. Ten en cuenta que la lectura vertical te condiciona pero a la vez te crea una estructura con la que puedes trabajar siempre.