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.