Hay gente que piensa que para diseñar lo más importante es crear un diseño bonito, unos colores que impacten, un menú increíble, etc. Realmente está comprobado que un usuario que no conoce nuestra web y es la primera vez que entra está una media de 15 segundos, cómo mucho medio o un minuto hasta decidir si se queda o no.

Para que este usuario se quede y no se vaya a otro sitio hemos de “convencerlo” utilizando por lo menos dos técnicas básicas una es no saturar a este de información al inicio de la web (algo de lo que hablaremos en otro momento) y la otra es conocer y aprovecharnos de la ‘L’ visual (no es un nombre técnico).

¿Que es la ‘L’ visual?

La ‘L’ visual es la forma en que un usuario ve la web, el orden por donde empieza a mirar y por donde desplaza su mirada (esto se sabe después de realizar estudios con aparatos de “Eye traking”) podemos observar que en una web que tenga cabecera, cuerpo y pie de página; el usuario normalmente empezará a mirar por la esquina superior izquierda y desplazará su mirada hacia la derecha y hacia abajo (seguramente te estás dando cuenta en este momento que muchos logos se ponen en esa primera esquina) un buen diseñador de webs ha de aprovechar esta ‘L’ y colocar los elementos más importantes en este recorrido como veremos más adelante en este mismo artículo.

También me veo obligado a mencionaros el recorrido visual llamado ‘F’ visual que en mi opinión solo podremos utilizarlo en webs con un formato parecido a los resultados de una búsqueda de google, os dejo un enlace a un artículo de una empresa hablando sobre este tema ya que aquí no lo abordaré.

Ejemplo de una web vista con un aparato de Eye tracking.

¿Cómo aprovechamos esta técnica?

En verdad no podemos seguir una norma siempre igual con esta técnica ya que cada web tendrá unas necesidades diferentes a las que tendremos que adaptarnos pero si intentáramos buscar un estándar sería, en mi opinión, logo en esquina superior izquierda, menú horizontal superior y últimos artículos o noticias verticales en el lado izquierdo; otra sería logo esquina superior izquierda, banner/frase/nota importante en horizontal superior y menú vertical en el lado izquierdo.

Para una mejor comprensión os pondré varios ejemplos de webs que he hecho a clientes y he respetado la técnica:

Ejemplo 1 Xavier Berrocal

En esta web he puesto el logo en la parte superior izquierda, aunque de una forma no muy destacada y luego a la derecha la foto del fotógrafo, con esto he conseguido que las dos primeras cosas que verá la mayoría de la gente serán al dueño de la foto y su logo, esto se ha hecho así ya que los usuarios principales a los que va dirigido esta web es gente que quiere ver fotos de eventos y discotecas con lo cual han llegado a esta web porque conocen el logo o al fotógrafo.
Una vez hemos identificado al fotógrafo encontramos el menú vertical izquierdo que nos llevará a las diferentes opciones.

Ejemplo 2 Freezgroup

En esta web lo que puse en la esquina superior izquierda no es el logo ya que estamos hablando de una radio, lo primero es el reproductor que enciende la radio y los canales de música, y debajo ya encontraremos el logo, aquí pretendo enganchar al usuario por lo que escucha y no tanto por lo que ve, el menú lo encontramos horizontal y de forma vertical un banner de noticias rotatorio y abajo a la izquierda finalizando la ‘L’ las últimas noticias.

Ejemplo 3 Need-U

En este último ejemplo vemos, como en la mayoría de mis diseños, que el logo sigue en la parte superior izquierda y justo debajo un menú horizontal, en este caso encontramos un menú vertical a la derecha, no, no me estoy contradiciendo a todo lo que he dicho con anterioridad, si nos fijamos verticalmente a la izquierda hay un rotador de banners y una serie de noticias de la web con lo cuál una vez ya hemos visto lo más importante del menú horizontal y alguna noticia, es decir ya conocemos la web iremos a este segundo menú vertical donde hay opciones que solo interesan una vez ya conoces la web.

Después de estos ejemplos podemos comprobar que es importante respetar estos cánones de la ‘L’ o la ‘F’ visual pero siempre, adaptaremos los cánones a lo que necesite nuestro diseño web.