Krypton Solid

Cómo el escaneo ocular afecta la jerarquía visual en el diseño de UX

Cómo el escaneo ocular afecta la jerarquía visual en el diseño de UX

Si bien milenios de arte, desde jarrones griegos hasta capillas italianas, han dado forma a nuestra comprensión de lo que es la belleza, la tecnología relativamente reciente detrás del seguimiento ocular está agregando una nueva dinámica a la forma en que percibimos visualmente el mundo. Más concretamente, esta nueva y emocionante ciencia nos está ayudando a comprender mejor, y diseñar mejor, los sitios web que son tanto efectivos como estéticos.

El diseño web (como arte visual) sigue muchas de las mismas reglas que las formas de arte más tradicionales. En este artículo describiremos brevemente la importancia de la organización visual y luego explicaremos cómo los hallazgos del seguimiento ocular pueden mejorar el diseño de las interfaces web.

Creando organización visual

No es de extrañar que la apariencia de un sitio web afecte su éxito, pero es importante señalar las razones. En su papel Comunicarse con la jerarquía visual, Luke Wroblewski, autor y director senior de diseño de producto en Yahoo !, explica que la presentación visual de una interfaz web es esencial para:

Guia

Una interfaz bien hecha puede guiar a los usuarios de una acción a la siguiente sin sentirse dominante. Independientemente de lo que piense de sus prácticas comerciales, no hay duda de que Uber es un ejemplo de un sitio web increíblemente fluido pero estructurado. Las propuestas de valor están en la parte superior del pergamino, seguidas de un divertido control deslizante para aprender sobre las diferentes opciones de automóviles, y terminando con el siguiente paso lógico de encontrar atracciones en su ciudad.

Comunicación

Al hacer coincidir piezas de información que de otro modo serían diferentes, la interfaz de usuario puede formar enlaces en la mente del usuario, comunicando mensajes sin decir nada. Mira el popular sitio web de diseño Abduzeedo: las categorías generales están en la parte superior, el contenido destacado en el medio y las categorías detalladas en el pie de página.

abduzeedo

Creando impacto emocional

No cometa el error de pensar que su sitio web es simplemente una herramienta mecanizada. Los sitios web tienen el potencial de establecer conexiones emocionales y, si los suyos no lo hacen, los de sus competidores lo harán. De hecho, las personas pueden ser más propensas a perdonar las deficiencias de su interfaz si produce una respuesta emocional. MailChimp es un ejemplo perfecto de un sitio con una interfaz que es utilizable, alegre y realmente divertida de usar.

mailchimp

El ojo humano predecible

A veces, parece que tus ojos tienen mente propia. Años de evolución nos han dado el instinto para detectar objetos y movimientos que consideramos importantes, ya sea el paseo sexy de alguien por la calle o un osito de peluche que anuncia miel. Si bien el peso relativo que damos a lo que es importante puede variar de una persona a otra, la única constante son los mecanismos en los que se comportan. A gran escala, la mayoría de las personas siguen las mismas tendencias cuando ven una página web.

De estas tendencias, hay dos que discutiremos en detalle. En un artículo sobre principios visuales, Alex Bigman, escritor de diseño de 99Designs, muestra cómo, para las culturas que leen de izquierda a derecha, estos dos patrones son los más comunes, y más útiles, al diseñar el diseño de un sitio web.

El primero, el patrón F, se usa principalmente para texto (pero se puede adaptar para otros propósitos). El segundo, el patrón Z, se puede utilizar para cualquier diseño visual. Explicaremos los diferentes pros y contras de cada uno a continuación.

Patrón F

El patrón F es la tendencia visual que surge en páginas que están muy cargadas de texto, generalmente blogs, fuentes de noticias, artículos, etc.

Cuando se enfrentan a un bloque de palabras, la mayoría de los lectores primero escanearán una línea vertical en el lado izquierdo del texto, generalmente buscando palabras clave o puntos de interés en las oraciones iniciales del párrafo. Finalmente, el lector encuentra algo que le gusta y comienza a leer normalmente, formando líneas horizontales. El resultado final es algo que se parece a las letras. F o mi.

Jakob Nielson del Nielson Norman Group llevó a cabo un estudio de legibilidad basado en 232 usuarios que escanearon miles de sitios web. De su investigación, registró lo que él cree que son las implicaciones prácticas del patrón F:

  • Los usuarios rara vez leerán cada palabra de su texto.
  • Los dos primeros párrafos son los más importantes y deben contener su gancho.
  • Comience párrafos, subtítulos y viñetas con palabras clave atractivas.

Como siempre, la esquina superior izquierda es la más importante, ya que es donde comienzan todas las culturas de lectura de izquierda a derecha. El usuario generalmente leerá horizontalmente en el encabezado, por lo que este es un buen lugar para una barra de navegación y / o una llamada a la acción. Luego, el usuario escanea verticalmente por el lado izquierdo, hasta que encuentra contenido que le interesa. Finalmente, el usuario termina en el lado derecho de la página, un gran lugar con un llamado a la acción o un anuncio. No dejes que la barra lateral abrume el contenido.

Pero el F-Pattern no es una plantilla; en realidad, no es una práctica exacta, sino más bien una guía suelta compilada a partir de las tendencias de la mayoría de los usuarios. Tenga esto en cuenta porque el patrón F pierde su eficacia después de las filas superiores de la F.

Kickstarter usa un diseño de tarjeta para mostrar proyectos de características y no volverse visualmente aburrido después de los primeros 500 píxeles.

Por otro lado, iZettle adopta un enfoque más convencional del F-Pattern en su página de inicio. Sin embargo, logran evitar una apariencia de plantilla superponiendo la copia principal («Haga crecer su negocio con iZettle») y la llamada a la acción en una imagen de fondo grande. Consideraríamos esto como el mínimo indispensable para adaptar este patrón de lectura al diseño de su interfaz.

izettle

Patrón Z

Además, el patrón Z es el patrón más simple y universal, utilizado popularmente en cualquier página web que se base en texto. El lector primero escanea horizontalmente en la parte superior, se lanza hacia abajo y de regreso al lado izquierdo, luego escanea horizontalmente nuevamente en la parte inferior.

Es importante entender el versátil patrón en Z, ya que aborda los requisitos básicos del sitio web, como la jerarquía, la marca y las llamadas a la acción. Su belleza radica en su simplicidad y un diseño ideal para sitios centrados en un llamado a la acción. Sin embargo, para contenido más complejo o excesivo, el patrón Z puede ser también sencillo.

¿Crees que el patrón Z es adecuado para tu página? A continuación, se muestran algunas prácticas recomendadas para optimizar los beneficios:

  • Fondo – Mantenga el fondo donde pertenece: en segundo plano. No quieres distraer a tu lector.
  • Punto 1 – Como punto de partida, generalmente es aquí donde desea colocar su logotipo.
  • Punto # 2 – Si bien el llamado a la acción principal debería aparecer más tarde, este es un buen lugar para un llamado a la acción secundario, puntuando una barra de navegación horizontal. (Un buen control deslizante de imagen o gráfico ayudará a separar la parte superior e inferior de la página, alentando al lector a permanecer en la ruta predecible del patrón Z).
  • Punto # 3 – Este es un buen lugar para llamar la atención por otros enlaces, o alternativamente para llevar la vista del usuario al objetivo final: Punto # 4.
  • Punto # 4 – Como «línea de meta», este es el lugar perfecto para su principal llamado a la acción.

Lo primero que querrás hacer es priorizar los elementos de tu página por ti mismo para que conozcas los más importantes y los menos importantes. A partir de ahí, es solo una simple cuestión de asignarlos a los «puntos calientes» apropiados.

Además, el patrón en Z puede repetirse y extenderse por toda la página. Solo eche un vistazo a cómo Evernote zigzaguea hacia abajo a través de llamadas a la acción y puntos de venta.

evernote

DropBox adopta un enfoque visualmente más simple para este patrón en zig-zag al eliminar las imágenes de fondo. En cambio, se incorpora más funcionalidad en el diseño, ya que una llamada a la acción de «Más información» ayuda a conectar cada sección del patrón sinuoso a medida que su ojo avanza por la página. Esto también ayuda a los lectores informados a hacer clic en la siguiente página relevante sin necesidad de leer toda la copia primero.

dropbox

Vista en previsión

Un gran diseño de interfaz debe ser como una mano invisible que guía a los lectores a la velocidad del pensamiento. La conclusión importante de las tendencias F-Pattern y Z-Pattern es que puede colocar su contenido más importante donde el lector «se topará» con él de forma natural, en lugar de tratar de obligarlo a mirarlo.

La sutileza es una gran ventaja para cualquier diseño de página, y estos patrones pueden marcar la diferencia entre sugerir algo a su lector o empujarlo por su garganta.

Imagen destacada, usos imagen del ojo humano a través de Shutterstock.

Deja un comentario