jerarquia_visual_web

Nos lo hemos encontrado muchas veces. Webs desorganizadas, caóticas, nada optimizadas para una correcta navegación y lo más importante, nada optimizadas para la venta.

Seguro que piensas que ese tipo de p√°ginas representan un peque√Īo porcentaje del grueso de sites que conviven en Internet, pero lo cierto es que la gran mayor√≠a de p√°ginas actuales presentan este problema.

Si crees que tu p√°gina puede estar dentro de este gran saco, sigue leyendo este post en el que te ayudaremos a organizar tu web para que puedas vender m√°s.

 

¬ŅTe suena el t√©rmino Jerarqu√≠a visual?

La jerarquía visual, aplicada al mundo online, no es más que la organización de los elementos de una página web atendiendo a su grado de importancia. De esta forma, lo más relevante siempre irá situado en el punto más destacado de nuestra web, mientras que lo menos importante se situará en zonas menos visibles.

ejemplo0

 

¬ŅQu√© elementos son importantes en mi p√°gina web?

Lo esencial, llegados a este punto, es tener claro qué elementos son los que debemos destacar dentro de nuestra web. Para ello no hay mejor manera que recurrir a nuestros objetivos.

La cosa es as√≠ de simple. Si uno de los objetivos de nuestra web es conseguir suscriptores para la newsletter, no es l√≥gico que el cajet√≠n de suscripci√≥n est√© situado casi al final de la p√°gina ya que los usuarios no lo ver√°n. Si nuestro objetivo es que los visitantes adquieran nuestros productos en oferta, no es natural que coloquemos dichos productos ocultos en un peque√Īo modulito de nuestra p√°gina.

Evidentemente, nuestro objetivo principal (la venta) debe predominar por encima de los demás, por lo tanto nuestros artículos también deben hacerlo. No hace falta que los destaquemos con luces de neón ni elementos parpadeantes. Si el usuario ha llegado a tu página buscándolos, los encontrará. Simplemente deberemos dejárselos a la vista.

 

La prueba del primer pantallazo

Apr√©ndete muy bien esto: lo primero que ve el usuario cuando entra a tu web, es aproximadamente un tercio de su dise√Īo completo. El cuadro rojo que ves a continuaci√≥n podr√≠a ejemplificar lo que te decimos.

 

 prueba_de_los_768px

 

Ese primer pantallazo se corresponde con una resoluci√≥n de 1024×768 pixeles (hablando siempre de medidas est√°ndar). Con lo cual, dentro de esa zona deberemos situar toda nuestra artiller√≠a pesada: los elementos m√°s importantes y destacados.

Como vemos en el ejemplo: llamadas a la acci√≥n, ofertas, logotipo, titular atractivo, men√ļ, imagen llamativa, etc.

Examina bien tu primer pantallazo y analiza los elementos que ve tu usuario ¬Ņson los que realmente quieres que vea? ¬ŅFalta o sobra alguno?

 

Destacar elementos

Ahora que ya sabemos qué elementos son los que nos interesa resaltar y dónde ubicarlos en nuestra página web, te vamos a decir cómo destacarlos para que sean fácilmente identificables para tus usuarios. Hay bastantes formas de conseguirlo (las detallaremos en próximos posts) pero las más sencillas son estas:

  1. Resaltar el elemento con un color que contraste (pero no desentone) con la paleta crom√°tica de la web.
  2. Aislar el elemento en cuestión de las demás secciones o elementos cercanos.
  3. Incluir personas, animales, personajes, etc. cuyas miradas apunten hacia el citado elemento.
  4. Utilizar flechas que redirijan la mirada hacia el elemento.

 

ESTRUCTURAS QUE NO FUNCIONAN

P√°ginas embutidas

Las páginas embutidas son aquellas en las que los elementos están muy pegados unos con otros. La información principal, la que aparece en la columna central, se ve un tanto comprimida por el contenido que se incluye en los sidebars que la delimitan por los dos extremos laterales. Veamos un ejemplo:

 

compresion

¬ŅQu√© ocurre con estas p√°ginas?

1. Sus m√ļltiples secciones compiten unas con otras en lo que a relevancia se refiere; con lo cual, hay una sobresaturaci√≥n de elementos cosa que puede confundir al usuario y sobretodo, provocar que se pierda entre tanta informaci√≥n.
2. A medida que vamos haciendo scroll, el espacio que ocupan esos sliders laterales va quedándose vacío, por lo tanto, la página queda un poco descompensada o desequilibrada.

 

P√°ginas sobresaturadas

En ocasiones, las empresas se obcecan tanto en destacar sus elementos que llegan a un punto de ‚Äúno retorno‚ÄĚ. Un punto en el que todo resalta y no hay ninguna secuencia l√≥gica que el usuario pueda seguir, con lo cual no hay forma de redirigirle hacia la secci√≥n que queremos.

Deberemos esperar a que, en alg√ļn momento de su navegaci√≥n, pase por all√≠.

ejemplo3

 

ESTRUCTURAS QUE FUNCIONAN

P√°ginas que respiran

Una de las mejores soluciones para evitar la sobresaturación que hemos comentado anteriormente es dejar que nuestros contenidos respiren. Para ello recurriremos al espacio en blanco.

Debemos dejar un espacio de descanso visual para nuestros visitantes. Eso nos ayudará a no agobiarlos y, paralelamente, a reconducir su mirada hacia los puntos que sí nos interesan.

Mira cómo lo hacen los grandes:

ejemplo2

 

¬ŅCu√°l puede ser el “problema” de estas p√°ginas?

El √ļnico problema (si puede llam√°rsele as√≠) que nos encontramos cuando tratamos con este tipo de estructuras “que respiran” es que nuestra p√°gina puede prolongar un poco m√°s su longitud y consecuentemente su “scroll”. Sin embargo, si la lectura y la navegaci√≥n son agradables, ese aumento no implica mayores consecuencias que las de utilizar un poquito m√°s el rat√≥n.

 

P√°ginas con un punto focal definido

De esto entienden mucho las famosas landing pages, observa el siguiente ejemplo y sabr√°s de lo que te hablamos.

landing-page_Restalo

 

En este caso,  la secuencia de elementos por los que pasará la mirada del usuario está más que clara. Titular > formulario > imágenes inferiores.

Esta es una estructura que comulga a la perfecci√≥n con el objetivo de la p√°gina que es conseguir leads o contactos.¬† Y como vemos, el dise√Īo trabaja tambi√©n para su consecuci√≥n.

En primer lugar, la mirada se dirige al atractivo titular ‚ÄúGana un a√Īo de cenas gratis‚ÄĚ. El usuario queda captado desde ese momento y pasa al formulario que es la forma de conseguir la oferta que hemos lanzado.¬† Antes de rellenarlo (porque la gente en Internet es bastante desconfiada) seguir√° inspeccionando el resto de elementos, los cuales, si est√°n presentados de forma atractiva, estructurada y simp√°tica (como la foto de los tenedores) acabar√° cautiv√°ndolo, siendo muy probable que √©ste nos d√© sus datos.

 

ESTRUCTURAS QUE NO SE ADAPTAN

Adiós jerarquía. Hola Responsive

De nada sirve esforzarnos en cuidar la jerarquía visual de nuestra página si, después, cuando un usuario visita nuestra web a través de un dispositivo móvil, esa estructura estratégica desaparece y no se adapta.

Así es como se nos presenta la web del banco Santander en una pantalla de ordenador estándar.

ejemplo4

Y así es como se ve en algunos dispositivos móviles como Iphone y Android.

ejemplo5ejemplo6

 

Como vemos, la estructura se pierde casi por completo, y con ella, nuestros objetivos de venta. Y todo ello por no apostar por un dise√Īo web adaptado.

Por esta raz√≥n volvemos a insistir en la apuesta firme por los dise√Īos Responsive. Quiz√° lo tengas programado como una inversi√≥n a largo plazo, pero la realidad es que el tr√°fico que nos llega desde dispositivos m√≥viles es cada vez mayor y, en esas consultas, generalmente necesitamos dar una respuesta r√°pida y clara a nuestros usuarios.

 

CONCLUSIONES

Recapitulemos todo lo aprendido hasta aquí:

  1. Optar por una jerarquía visual enfocada a la consecución de nuestros objetivos.
  2. Identificar los puntos fuertes o elementos clave de nuestra web.
  3. Colocar dichos elementos en el primer tercio de nuestro dise√Īo.
  4. Destacarlos esos elementos para que sean f√°cilmente identificables.
  5. Seleccionar una estructura web adecuada con la jerarquía visual que precisemos.
  6. Adaptar nuestra estructura y dise√Īo para que sea visible en m√ļltiples dispositivos.

 

 

Y hasta aqu√≠ nuestro post de hoy.Esperamos que te haya servido mucho y que pongas a prueba ¬†tu web para conseguir obtener un dise√Īo y esctructura, ahora s√≠, centrados en tus objetivos y orientados a la venta.

 

Nos vemos en el siguiente post.