Cómo afecta el escaneo de ojos la jerarquía visual en el diseño de UX
Mientras 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 comparativamente reciente detrás del seguimiento de los ojos 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 a diseñar mejor, 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, resumiremos brevemente la importancia de la organización visual, y luego explicaremos cómo los hallazgos del seguimiento visual pueden mejorar el diseño de las interfaces web.
Crear organización visual
No es de sorprender 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 Principal de Diseño de Producto en Yahoo !, explica que la presentación visual de una interfaz web es esencial para:
Dirección
Una interfaz bien hecha puede guiar a los usuarios de una acción a otra sin sentirse dominantes. Independientemente de lo que pienses de sus prácticas comerciales, no hay duda de que Uber es un ejemplo de un sitio web increíblemente suave pero estructurado. Las propuestas de valor se encuentran en la parte superior del rollo, seguidas de un control deslizante divertido para aprender sobre las diferentes opciones de automóviles y finalizar con el siguiente paso lógico para encontrar atracciones en su ciudad.
Comunicación
Al emparejar piezas de información diferentes, la IU 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 presentado en el medio y las categorías detalladas en el pie de página.
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 tuyos no, la voluntad de tus competidores. De hecho, las personas pueden ser más propensas a perdonar las deficiencias de su interfaz si produce un resultado positivo. respuesta emocional . MailChimp es un ejemplo perfecto de un sitio con una interfaz que es utilizable, alegre y realmente divertida de usar.
El ojo humano predecible
A veces, parece que tus ojos tienen sus propias mentes. Años de evolución nos han dado los instintos para detectar objetos y movimientos que consideramos importantes, ya sea que alguien pase por la calle sexy o un oso de peluche que anuncia miel. Si bien el peso relativo que le damos a lo importante puede variar de persona a persona, la única constante son los mecanismos en los que se comportan. A gran escala, la mayoría de las personas sigue las mismas tendencias al ver una página web.
De estas tendencias, hay dos que discutiremos en detalle. En una artículo sobre principios visuales , Alex Bigman, Design Writer para 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 F-Pattern, se usa principalmente para texto (pero se puede adaptar para otros fines). El segundo, el Z-Pattern, se puede usar para cualquier disposición visual. Explicaremos los diferentes pros y contras para cada uno a continuación.
F-Pattern
El patrón F es la tendencia visual que aparece en las páginas que están muy cargadas de texto, generalmente blogs, fuentes de noticias, artículos, etc.
Cuando se enfrentan con un bloque de palabras, la mayoría de los lectores primero escanean 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 E.
Jakob Nielson del Nielson Norman Group realizó un estudio de legibilidad basado en 232 usuarios que escanearon miles de sitios web. De su investigación, grabó lo que cree que son las implicaciones prácticas del F-Pattern:
- Los usuarios raramente leerán cada palabra de su texto.
- Los primeros dos 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 un llamado a la acción. Luego, el usuario escanea verticalmente por el lado izquierdo, hasta que encuentra el 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 publicidad. Simplemente no dejes que la barra lateral desborde el contenido.
Pero el F-Pattern no es una plantilla, realmente 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 F-Pattern pierde su efectividad después de las filas superiores de la F.
Kickstarter utiliza un diseño de tarjeta para mostrar proyectos de características y no ser visualmente aburrido después de los primeros 500 píxeles.
Por otra parte, iZettle adopta un enfoque más convencional para el F-Pattern en su página de inicio. Sin embargo, logran evitar una apariencia de plantilla al superponer la copia principal ("Haga crecer su negocio con iZettle") y el llamado a la acción en una imagen de fondo grande. Consideramos esto el mínimo indispensable para adaptar este patrón de lectura a su diseño de interfaz.
Z-Pattern
Además, Z-Pattern es el patrón más simple y universal, popularmente utilizado en cualquier página web basada en texto. El lector primero escanea horizontalmente en la parte superior, lanza hacia abajo y hacia atrás al lado izquierdo, luego escanea horizontalmente de nuevo en la parte inferior.
Es importante entender el versátil patrón Z , ya que aborda los requisitos principales del sitio web, como la jerarquía, el desarrollo de la marca y las llamadas a la acción. Su belleza radica en su simplicidad y una distribución ideal para los sitios centrados en un llamado a la acción. Sin embargo, para contenido más complejo o excesivo, el Z-Pattern puede ser demasiado simple.
¿Crees que Z-Pattern es el adecuado para tu página? Aquí hay algunas mejores prácticas para optimizar los beneficios:
- Fondo : mantenga el fondo donde pertenece: en el fondo. No quieres distraer a tu lector.
- Punto n. ° 1 : como punto de partida, generalmente es donde desea colocar su logotipo.
- Punto # 2 - Si bien el llamado a la acción principal debería venir más tarde, aquí hay un buen lugar para una llamada a la acción secundaria, que puntúa una barra de navegación horizontal. (Un bonito deslizador gráfico o de imagen ayudará a separar la parte superior e inferior de la página, lo que alentará al lector a permanecer en la ruta predecible del Z-Pattern).
- Punto # 3 : este es un buen lugar para atraer la atención de otros enlaces o, alternativamente, para llevar la vista del usuario al objetivo final: Punto # 4.
- Punto # 4 : como la "línea de llegada", este es el lugar perfecto para su llamado a la acción principal.
Lo primero que debe hacer es priorizar los elementos de su página para que sepa cuáles son los más y menos importantes. A partir de ahí, es simplemente una cuestión de asignarlos a los "puntos calientes" apropiados.
Además, el Z-Pattern puede repetirse y extenderse a lo largo de toda la página. Solo eche un vistazo a cómo Evernote zigzaguea hacia abajo a través de llamados a la acción y puntos de venta.
DropBox adopta un enfoque visualmente más simple de este patrón de zig-zag eliminando cualquier imagen de fondo. En cambio, se ha incorporado más funcionalidad en el diseño, ya que un llamado a la acción "Más información" ayuda a conectar cada sección del patrón de devanado a medida que su ojo se abre paso en 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.
Vista en previsión
Un gran diseño de interfaz debería ser como una mano invisible que guía a los lectores a la velocidad del pensamiento. Lo importante de las tendencias F-Pattern y Z-Pattern es que puedes colocar tu contenido más importante donde el lector "tropezará" 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 tu lector o empujarlo por la garganta.
Imagen destacada, usos imagen del ojo humano a través de Shutterstock.