Como diseñadores web, seguimos muchos paradigmas de diseño y principios de maquetación: retículas, consistencia vertical, Maquetación en F, Maquetación en M, la regla de los tercios, la Regla de Oro, etc. Prestar atención a estos principios tendrá como resultado un diseño visualmente atractivo y funcional – revisemos la maquetación consistente en dividir la página en dos mitades idénticas o «Split Layout».
Aunque a priori es posible que esta solución parezca un poco simple y obvia, ésta básica maquetación puede ser muy eficaz. Nuestros ojos siguen un movimiento en zig-zag mientras escanean una página. Si la vista sigue una línea recta horizontal – como sucede en la maquetación en Z, el usuario logrará concentrarse mejor en el contenido, o al menos lo intentará. Dado que el 90% del tráfico web que llega a tu página no presta atención a sus detalles, crear un diseño fácilmente «escaneable» merecerá definitivamente la pena.
Los movimientos de los ojos y el zig-zag
Los estudios de seguimiento de la mirada llevados a cabo por Yahoo! llegan a las siguientes conclusiones:
- La gente escanea las secciones principales de una página para determinar de qué va y si quieren permanecer en ella por más tiempo.
- Toman una decisión sobre la página en tan solo tres segundos.
- Si finalmente deciden permanecer en ella, prestarán más atención al contenido situado en la parte superior de la pantalla.
Los usuarios de la web siempre andan con prisa. Tienen otras muchas cosas que hacer, y lo último que deberías esperar es que permanezcan en tu sitio web simplemente para apreciar su belleza y estética. Aunque un buen diseño es algo de gran importancia, no es suficiente para persuadir a los visitantes para que inicien una determinada acción, por ejemplo, pulsar un botón «Comprar ahora» o «Descubre más».
No podemos culparles por ello. ¿Recuerdas las ocasiones en las que tú has querido buscar algo? Te abalanzas sobre el primer resultado de Google y después echas un vistazo rápido y general, es decir, haces un escaneo a través de la página. La mayoría de las veces, hasta te desplazas hasta el final de la página sin prestar demasiada atención. Tras esta fase, si decides que merece la pena invertir más tiempo en la página, te deslizas de nuevo a la parte superior y entonces sí te tomás un verdadero esfuerzo en leer prestando atención.
¿Cuál es el objetivo de este escaneo inicial? Captar la máxima información preliminar posible sobre la página en un primer vistazo. Si nosotros logramos de alguna manera «codificar» el patrón de este escaneo, seríamos capaces de atraer la atención de un mayor número de usuarios. Tras observar los mapas de calor o «heatmaps» de distintos sitios web, he realizado un esquema de la tendencia habitual.
Habrás podido observar los puntos rojos sin esfuerzo. Puede resultar contradictorio, ya que desde nuestra experiencia, nuestros ojos deberían seguir sin esfuerzo las líneas rectas en lugar de aquellas que forman ángulos, puesto que leemos siguiendo líneas horizontales. Pero recuerda que me estoy refiriendo a la fase inicial de escaneo, no a la fase en la que prestas atención a cada detalle de la página.
Siempre que no estés prestando mucha atención, esta será la tendencia natural en la trayectoria que sigue tu mirada, el zig-zag. A menos que existan elementos que tengan un mayor contraste y peso que atraigan tu atención, lo más probable es que sigas este patrón. También habrás notado que este patrón es similar al de la maquetación en F y que los usuarios se toman una pausa momentánea en las zonas donde están situados los puntos rojos.
Estos puntos de pausa momentánea son las zonas en las que nuestros cerebros realizarán una «captura». En la maquetación en zig-zag con elementos que contienen elementos importantes de información en las «zonas de pausa», el cerebro absorbe de forma natural más detalles, ya que asocia cada punto final del zig-zag como una entidad independiente.
El diseño no solo se ocupa de la apariencia y la sensación transmitida por el contenido. El diseño es cómo algo funciona.
Steve Jobs
Podrías, por ejemplo, utilizar esta característica de la maquetación dividida para organizar de forma más eficaz la presentación de los trabajos en tu portafolio, o las principales características de tu producto o servicio, de forma que tus visitas lo vean y asimilen rápidamente. Esto en consecuencia les animará a permanecer por más tiempo en tu sitio web, y por tanto les convencerá a llevar a cabo una acción. ¿El resultado? Mejores ratios de conversión para ti y mejor experiencia de usuario para ellos.
Lo que te queda por leer:
- Aplicar la maquetación dividida en un diseño
- Ejemplos reales de la maquetación dividida en 2 mitades
Deja una respuesta