Share
Como diseñadores web, seguimos una gran cantidad de paradigmas de diseño y principios de diseño: cuadrículas, consistencia vertical, F-Layout, Z-Layout, regla de los tercios, Golden Ratio, etc. Prestar atención a estos principios producirá un diseño visualmente atractivo y funcional. Ahora veamos la división simple de una página en dos mitades iguales..
Si bien esto puede parecer un poco tonto y obvio al principio, este diseño fundamental puede ser muy efectivo. Nuestros ojos tienden a seguir un movimiento en zig-zag mientras hojean una página. Si el ojo sigue una línea recta horizontal, como en la disposición Z, él / ella se está concentrando (o está intentando). Dado que el 90% del tráfico web que llega a su sitio no presta una atención detallada a su página, el hecho de que su diseño sea "skim friendly" definitivamente valdrá la pena.
De los estudios de rastreo ocular de Yahoo !:
Los usuarios de la web siempre tienen prisa. Tienen otras cosas que hacer, y quedarse atrás para apreciar la belleza y la estética de su sitio web es lo último que puede esperar que hagan. A pesar de que un buen diseño es de gran importancia, no inspira completamente a un visitante a tomar medidas: hacer clic en el botón "Comprar ahora" o "Saber más".
No podemos culparlos. ¿Alguna vez recuerdas cuando querías buscar algo? Usted se apresura al primer resultado de búsqueda en Google y luego se "apodera" rápidamente, o más bien hojea la página general. La mayoría de las veces, incluso se desplaza hasta el final sin prestar mucha atención. Después de esta fase, si decides que la página vale tu tiempo, regresas a la parte superior y luego tomas el esfuerzo real para leer y prestar atención..
¿Cuál es el propósito del skimming inicial? Para obtener la máxima información que puede obtener sobre la página a primera vista. Si de alguna manera 'codificamos' este patrón de skimming, deberíamos poder captar la atención de más visitantes. A partir de observaciones en mapas de calor de varios sitios, he hecho una tendencia común.
Notarás que puedes mirar las manchas rojas sin esfuerzo. Extrañamente, por nuestra experiencia, podemos decir que nuestros ojos deberían seguir fácilmente las líneas rectas en lugar de las angulosas, ya que leemos en líneas rectas. Tenga en cuenta que estoy hablando de la fase inicial de skimming, no de la parte en la que presta atención a cada detalle del sitio.
Cuando no prestas mucha atención, esta es la tendencia natural de tus ojos: el zig-zag. A menos que haya elementos que tengan mayor contraste y peso que te gritan, es probable que sigas el patrón anterior. También notará que este patrón es similar al diseño F y que los puntos rojos son donde los usuarios hacen una pausa momentánea.
Estos puntos de pausa momentánea son donde el cerebro toma una instantánea. En un diseño en zig-zag con elementos que contienen información importante en los "puntos de pausa", el cerebro naturalmente absorbe más detalles, ya que asocia cada punto final en zig-zag como entidades separadas.
El diseño no es solo lo que parece y se siente. El diseño es como funciona. -Steve Jobs
Podría (por ejemplo) utilizar esta función del diseño Half Split para ubicar de manera efectiva las vistas previas de su cartera de trabajo, o las características importantes de su producto o servicio, para que los visitantes se den cuenta rápidamente. En última instancia, esto los alienta a permanecer más tiempo en su sitio y, por lo tanto, los convence para que realicen acciones. ¿El resultado? Mejores tasas de conversión para usted y una mejor experiencia de usuario para ellos.
Hacer su diseño y diseño "compatible con zig-zag" es muy simple. De hecho, ¡es tan fácil como dividir tu página en dos mitades iguales! Las mitades iguales funcionan bien porque los puntos finales de Zig-Zag están alineados más o menos hacia el centro de estas mitades. Usados en superposición, van bien juntos. Coloque elementos de importancia en las posiciones de punto final rojo del Zig-Zag de su página. Este es el concepto básico detrás de Half Split o 1/2-Layout.
Recientemente, estaba trabajando en una página de inicio "Próximamente". Experimenté con varios diseños, pero nada funcionó bien. Lo intenté todo: cuadrículas, proporción de oro, diseño de F. El momento de Eureka llegó cuando simplemente dividí la página en dos partes iguales. La solución fue tan simple como eso! Se veía elegante y ordenado y me recordó el hecho importante de que simple no es necesariamente malo. ¿Has visto el nuevo logo de Microsoft??
Simplicidad es la máxima sofisticación. -Leonardo da Vinci
Puedes ver cómo las mitades dan una bonita jerarquía visual. Primero, se nota la cinta roja "Próximamente" en la parte superior. A continuación, se ve el logo. Ahora, siguiendo el Zig-Zag que mencioné anteriormente, el visitante termina mirando el control deslizante Imagen en la mitad derecha y, finalmente, el formulario de envío de correo electrónico..
Ahora veamos qué tan bien funciona el diseño dividido para una página de cartera de un diseñador web. El objetivo de una página de Galería en un Portafolio es mostrar rápidamente a los clientes potenciales un cuerpo de trabajo. Hay un montón de opciones para ellos, ya que esta industria está bastante saturada en este momento. ¿Por qué deberían pagarte? Hacer una buena primera impresión podría inclinar la balanza en tu dirección. Veamos que podemos hacer al respecto..
El diseño anterior se divide en dos mitades, pero no sigue el principio de 'zig-zag' que mencioné anteriormente.
Si bien parece ser un buen diseño y fácil para los ojos, se vuelve bastante aburrido después de los dos primeros elementos. Romper el flujo para aumentar el interés visual ayudará. No solo eso; pero cuando intenta hojear el diseño anterior, sus ojos deberían ver la primera imagen y luego saltar al texto del segundo elemento. Dado que sus visitantes no tienen intenciones de leer en esta fase, saltan a algún otro punto o abandonan su sitio por completo.!
¿Qué tal si hicieras un cambio simple como este??
Mucho más interesante, ¿verdad? Simplemente intercambiar las posiciones del texto y la imagen de cada elemento aumenta el interés visual para que la consistencia no haga que el visitante se sienta aburrido. También puede colocar un botón de llamada a la acción siguiendo el patrón de Zig-Zag.
El botón "Contácteme" ahora tendrá una mayor posibilidad de que lo noten y hagan clic en más de sus visitantes (¿por qué no realizar una prueba A / B para verificar esto?)
El diseño es un plan para organizar los elementos de la mejor manera para lograr un propósito particular. -Charles Eames
El diseño dividido ha entrado en el centro de atención con el nuevo diseño de la línea de tiempo de Facebook. Observe cómo sus ojos "fluyen" fácilmente de una publicación a otra.
Apple también sigue el diseño dividido. Aquí está la página del iPad mini. ¿Ves lo fácil que es asociar cada imagen con características separadas del iPad mini? Se siente bien.
A Microsoft se le ha atribuido la posibilidad de allanar muchas nuevas formas con su reciente cambio de marca, aquí, siguiendo un diseño dividido en su página de información de Surface.
Stacey es una representación minimalista de la 1/2-Layout.
Me encanta la página de inicio de Quora. ¿Se puede demostrar un diseño dividido más simple??
Consumerbarometer.com lo lleva al siguiente nivel con animaciones y una variación triangular del Zig-Zag.
Así que, qué hemos aprendido?
Este artículo es solo un suave recordatorio de que el uso de diseños básicos y los métodos de diseño fundamentales nunca deben olvidarse. De hecho, puede aumentar sus tasas de conversión, si se usa correctamente.
Accentsconagua