El diseño de tu sitio web: dónde colocar la información más relevante

Es uno de los quebraderos de cabeza universales en esto de publicar en Internet: dónde pongo la información más relevante para que los usuarios que me visiten hagan click con mayor probabilidad. O dónde coloco la publicidad para maximizar la rentabilidad. No existen, al parecer, fórmulas infalibles, pero sí que existen patrones de diseño que se adaptan a la tendencia natural de la vista, al orden en el que «escaneamos» la pantalla a la búsqueda de información interesante.

Veremos por encima tres de los patrones de diseño más eficientes, pero también veremos cómo no todo es lo que parece, y cómo tan importante como el diseño de la estructura de la página es tan importante como el diseño de los contenidos. La máxima que más interesante me parece es que la vista tiene un recorrido «automático» por diversas partes de un documento más o menos homogéneo, recorrido que podemos dirigir gracias a una jerarquía clara. Veamos.

El patrón Gutenberg

Se trata, básicamente, de un patrón que describe la tendencia de la vista en entornos esencialmente con gran densidad de texto. Es decir, este patrón describe la tendencia natural de lectura, y es el patrón que más respetuoso se muestra con el concepto de «gravedad de lectura»: en qué dirección «cae» nuestra lectura a medida que avanzamos en el texto. Lo interesante realmente es que el patrón sugiere tres zonas donde podemos plantear la información relevante: arriba a la izquierda, el centro y abajo a la derecha. Pero lo sorprendente es que en el momento que introducimos una imagen toda la estructura se viene abajo: es un patrón solo texto, no apto para diseño gráfico (por así llamarlo).

El patrón Z y zig-zag

Evidente desde su definición, el patrón Z de diseño sigue la silueta de esa letra, aunque a veces se le llama «de S invertida» porque el recorrido de la vista es más suave. La sugerencia de este diseño es que la vista pasa también por las zonas débiles del patrón Gutenberg, y está especialmente indicada en textos narrativos. Cuando el patrón se repite se le llama patrón en zig-zag, que no es más que un patrón realista de cómo leemos (una historia, una novela…), recorriendo el texto de izquierda a derecha, luego a la izquierda pero algo más abajo, y vuelta a empezar.

El patrón en F

De nuevo parece evidente cómo será a partir del nombre, pero lo interesante es que este patrón, que se cree propuesto por primera vez por Jacob Nielsen, parece describir la forma en la que las personas leemos online. De hecho, una de las sugerencias principales de este diseño es que las personas no leemos online, sino que escaneamos en busca de información relevante.

Además, la información más importante se sitúa al principio de la estructura, en las primeras líneas (dos o tres), y la información menor en importancia se distribuirá por el lateral izquierdo. Es interesante porque este patrón sale del estudio del movimiento de los ojos al abrir cualquier página web.

La peculiaridad de estos tres patrones de diseño está en que se refieren exclusivamente al contenido relevante. Es decir, dividamos la página en dos tipos de diseño: el diseño visual, la estructura general de columnas, header, barras laterales con información accesoria, footer… y por otro lado la parte del contenido, el meollo del asunto. No debemos dejar de repetir que el contenido es la diferenciación.

La estrategia de contenidos, el enfoque, la originalidad, la diferenciación es algo que nunca pasará a un segundo plano. Es algo que trasciende al SEO, que trasciende al diseño efectista y recargado. En fin, espero que estos tres diseños o patrones canónicos sirvan de guía para enfocar contenidos, para dar más relevancia efectiva al contenido que de verdad es relevante.

Vía | VanSEODesign
Foto | K2_UX

Deja un comentario

Tu dirección de correo electrónico no será publicada.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*