Cómo dirigir los ojos de los usuarios a un sitio web

25

Hay un principio común en la fotografía de que una foto debe atraer la atención del espectador. Esto se logra con frecuencia con una línea que atraviesa la foto. Reconocer cómo el observador escaneará su foto a menudo es útil para componer una toma y la forma en que los ojos del espectador escanean la foto a veces puede incluso cambiar el significado de la foto.

¿Qué se puede hacer en el diseño web para dirigir los ojos del usuario a través del sitio en la dirección que desee sin que el usuario tenga que buscar las partes correctas de la página?

Por ejemplo, es posible que desee que el usuario vea el logotipo y luego una breve descripción del sitio y luego un artículo. Además de colocar estos elementos en una columna vertical con uno debajo del siguiente y eliminar todos los demás elementos de la página, ¿cómo dirigiría los ojos del usuario de uno a otro?

website-design design-principles Computarizado
fuente
77
Quizás te interese "Eyetracking Web Usabilidad" (2009) por Nielsen & Pernice: useit.com/eyetracking
Jari Keinänen
2
@koiyu fui y encontré el artículo "F" y estaba a punto de publicarlo cuando me di cuenta de que ya lo había hecho. No puedo enfatizar lo suficiente lo importante que es este hábito de lectura. Los grandes diseños se alinean con este flujo, y los diseños pobres van en contra de él.
zzzzBov
1
Estoy un poco en contra del seguimiento ocular. No porque no sea útil, sino porque ya en cualquier proyecto en el que quería hacer una prueba de usabilidad simple, la filosofía del jefe y la compañía era hacer todo lo más barato posible y lo más rápido posible. Realmente no creo que, en la mayoría de las situaciones, pueda convencer a comprar un sistema de seguimiento ocular, y pueda personalizar los datos correctamente sin la instrucción adecuada del comportamiento / psicología humana.
Littlemad

Respuestas:

8

Todo es cuestión de equilibrio entre tamaño, color y alineación. Con experiencia sabrá qué y cuándo usar esos trucos para atraer la atención. Afortunadamente en el sitio web podemos rastrear esta atención y hay muchos estudios científicos sobre este tema, por ejemplo, hay buenos datos en el sitio web de Jakob Nielsen .

Sobre el seguimiento ocular Quiero decir que, por una cuestión de presupuesto, y en realidad nadie pagará un dispositivo de seguimiento ocular, ni siquiera lo usará. (Ya es difícil convencer a su jefe en la oficina para que haga algunas horas de pruebas de usabilidad en cualquier etapa del proyecto ...) Personalmente prefiero hacer pruebas de usabilidad con personas reales para juzgar mi composición de diseño web. Incluso si esto significa tomar un amigo de una persona de mi familia y ponerlo en frente de la pantalla haciendo preguntas o mirando su comportamiento.

El seguimiento ocular no le dice si el usuario que está mirando comprende lo que es o no. Si están frustrados dudando o simplemente admirando la composición gráfica.

Un gran libro que puede ayudarlo en esto es Rocket Surgery Made Easy de Steve Krug

Littlemad
fuente
5

Como koiyu mencionó en el comentario, el seguimiento de los ojos es lo que debes buscar . Puede crear diseños con la intención de guiar a los usuarios a lo largo de un camino, pero la única forma de saber realmente si está logrando sus objetivos es hacer un estudio de seguimiento ocular.

Dicho esto, puede encontrar mi respuesta útil para la pregunta, ¿Cómo llamar la atención sobre un área específica de un diseño? No es exactamente la misma pregunta, pero está cerca.

Más recursos de seguimiento ocular:

Servicios de seguimiento ocular:

Virtuosi Media
fuente
0

Puedo pensar en dos formas simples de dirigir los ojos de los usuarios a un sitio web:

  1. Use una numeración obvia en los elementos de su página. Puede ver esto en muchas páginas de inicio del sitio, o puede consultar este archivo PDF desde un sitio web financiero (aunque creo que no es realmente un gran ejemplo).
  2. Use flechas para dirigir la atención de su usuario. Esto puede ser algo así como un diagrama de flujo. Sin embargo, no puedo pensar en ningún ejemplo en línea en este momento.
Gan
fuente
La web no es un medio estático. Las flechas no guían a las personas. Debe guiarlos con diferentes tamaños y colores en un sistema ponderado.
dkuntz2
No entiendo. ¿Podría elaborar más sobre "las flechas no guían a las personas" y "guiarlas con diferentes tamaños y colores en un sistema ponderado"?
Gan