() translation by (you can also view the original English article)
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, ésta 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.
Aplicar la Maquetación Dividida en un Diseño
Hacer que tu diseño y tu maquetación sea compatible con el patrón en zig-zag en muy sencillo. De hecho, es tan sencillo como dividir tu página en dos mitades iguales. Las mitades iguales funcionan bien porque los puntos finales del zig-zag están más o menos alineados hacia el centro de las mismas. Usar ambos patrones conjuntamente, da muy buenos resultados. Coloca los elementos importantes en las posiciones donde se sitúan los puntos rojos del zig-zag de tu página. Este es el concepto básico que hay tras la maquetación en Split o dividida en dos mitades.
Recientemente, trabajé en una página de aterrizaje de Bienvenida o "Coming Soon". Probé varios tipos de maquetación, pero nada funcionaba bien. Lo intenté todo, Retículas ("Grid"), la Regla de Oro, la Maquetación en F. El momento eureka llegó cuando simplemente dividí la página en dos mitades iguales. ¡La solución fue así de sencilla! Conseguí un aspecto elegante y organizado que me recordó que lo simple no siempre es algo negativo. ¿Has visto el nuevo logo de Microsoft?
La simplicidad es la máxima sofisticación. - Leonardo Da Vinci
Puedes ver como las dos mitades proporcionan una bonita jerarquía visual. Primero, la etiqueta roja de "Coming Soon" en la parte superior queda bien visible. Después, vemos el logotipo. Ahora, siguiendo el patrón en zig-zag mencionado antes, la vista del usuario acaba topándose con el slider de imágenes de la mitad derecha y por último, con el formulario para el envío de emails.
Ahora veamos lo bien que funciona la maquetación dividida en dos mitades en la página del portafolio de un diseñador web. El objetivo de la página de galería de cualquier portafolio es mostrar rápidamente a los potenciales clientes los trabajos. Existen un montón de opciones para presentar un portafolio, ya que la industria está bastante saturada actualmente. ¿Por qué deberían contratarte a ti? Ofrecer una excelente primera impresión podrían aumentar tus posibilidades. Veamos qué podemos hacer al respecto.
La maquetación mostrada en la imagen de arriba está dividida en dos mitades, pero no sigue el patrón en zig-zag que mencioné antes.
Aunque parece una buena distribución y fácil de de seguir con la mirada, se vuelve bastante aburrida después de los dos primeros elementos. Romper este flujo para aumentar el interés visual podría ser una buena idea. No solo eso; sino que cuando intentes escanear la maquetación, tus ojos verán la primera imagen, y después saltarán a al texto del segundo elemento. Como tus visitas no tienen intención de leer en esta primera fase, saltarán a otro punto, ¡o abandonarán definitivamente tu web!
¿Qué pasará si hacen un sencillo cambio como este?
Mucho más interesante, ¿no? Basta cambiar las posiciones que ocupa el texto y la imagen de cada elemento para aumentar el atractivo visual de manera que su monotonía no aburra a los usuarios que visitan la página. También puedes colocar un botón de llamada a la acción que siga este mismo patrón en zig-zag.
El botón "Contact me" ahora tendrá más posibilidades de ser visto, y probablemente lo pulsará un mayor porcentaje de los usuarios que visiten tu web (¿por qué no lo compruebas con un test A/B?).
El diseño es la planificación de la ubicación de los elementos de manera que cumplan un objetivo concreto de la mejor forma posible. - Charles Eames
Ejemplos Reales de la Maquetación Dividida en 2 Mitades
La maquetación dividida ha sido implementada en el nuevo diseño del muro de Facebook. Observa como tu mirada puede seguir y saltar de una publicación a otra con facilidad.
Apple también sigue este patrón de maquetación dividida. Aquí tienes como la página dedicada al iPad Mini, ¿ves cuán fácil es asociar cada imagen con cada característica del iPad? La información se entiende claramente.
Microsoft ha sido reconocido por innovar o abrir muchas nuevas fórmulas en su reciente rebranding. En la imagen inferior puedes comprobar la forma en la que ha usado la maquetación dividida en la página dedicada a su Surface.
Stacey es una muestra minimalista del patrón de maquetación dividido en 2 mitades.
Me encanta la página de inicio de Quora. ¿Existe alguna muestra del patrón dividido más sencilla?
Consumerbarometer.com va un paso más allá mediante el uso de animaciones y variaciones triangulares del patrón en zig-zag.
Resumen
En conclusión, ¿qué hemos aprendido?
- Las personas toman decisiones sobre tu página en menos de tres segundos.
- Para atrapar la atención de tus visitas y para reducir el porcentaje de rebote, deberíamos intentar que nuestras maquetaciones se pudiesen "escanear fácilmente".
- Al dividir el diseño justo por el centro, y colocar los elementos importantes en los ángulos que forma el patrón en zig-zag garantizas que tus visitas recuerden más detalles tras su escaneo.
Este artículo es un amable recordatorio sobre la importancia del empleo de maquetaciones básicas y métodos de diseño fundamentales que nunca deberían ser olvidados. De hecho, si haces un buen uso de estos principios, podrían impulsar tu ratio de conversiones.
