Hoy vamos a discutir la importancia de dirigir intencionalmente la atención del usuario a las partes de la página que más lo merecen. Discutiremos cómo las personas son propensas a leer una página y cómo podemos doblar esa tendencia a nuestra propia voluntad.
También veremos un producto increíble que le permitirá obtener una instantánea rápida de cómo un usuario típico verá sus diseños para que pueda comenzar a mejorar sus diseños de inmediato.
Predicción de movimientos oculares del usuario
Establecer una jerarquía visual consciente e intencional es algo que estoy discutiendo constantemente en Design Shack. Ser capaz de estructurar una página para que el usuario reciba información sobre cómo desea que sea una clave enorme para ser un diseñador gráfico exitoso.
Cada vez que creas algo, debes analizar constantemente dónde y cómo diriges la atención del usuario. Si descuida este paso, el resultado podría ser que un usuario típico tome una ruta indeseable que haya configurado involuntariamente. Por ejemplo, algo en el pie de página de su sitio podría captar la atención de un usuario por encima de todo lo demás y luego sacarlo de la página, haciendo que la persona pierda la atención y avance con bastante rapidez.
Cuanto más tome decisiones conscientes para considerar la jerarquía visual, mejor se volverá en el manejo de este principio. Aprenderá a tomar instintivamente decisiones que maximizan el mensaje que está tratando de transmitir y alentar la acción cuando sea necesario.
En última instancia, sin embargo, la intuición es una cosa difícil. Simplemente "sentirlo" no siempre es la apuesta más segura, especialmente si este concepto es nuevo para usted. Entonces, ¿cómo puede estar seguro de que su diseño se está viendo de la manera que usted pretende?
Consejo: eres una fuente poco confiable
El primer paso en el proceso de considerar cómo un usuario puede leer su diseño es analizar cómo lo lee usted mismo. Un ejercicio en el que normalmente participo es mirar fuera de mi monitor durante unos segundos para aclarar mi mente y luego mirar hacia atrás en el diseño y dejar que mis ojos vaguen donde quieren. Piense detenidamente qué en el diseño le llama la atención y por qué. Esto le dará una idea decente de qué elementos tenderán a gravitar las personas.
A pesar del hecho de que creo que debe realizar esta tarea repetidamente durante el proceso de diseño para cada proyecto de diseño de página en el que se embarca, la verdad sorprendente es que este experimento está muy comprometido por usted, el diseñador.
Cuando pinto una habitación, solo veo errores
Cuando ves algo que creaste personalmente, casi no tienes oportunidad de verlo de la misma manera que lo hacen los demás. Esto nunca es más evidente para mí que cuando pinto una habitación en mi casa.
Después de que termine con el cuarto, retrocedo y miro alrededor para examinar mi trabajo. Inevitablemente, este es el momento en que me desanimo mucho. Mis ojos no ven una habitación bien pintada, sino que saltan de un lugar a otro, apuntando a los lugares donde sé que cometí los más pequeños errores: ese punto donde la pintura de la pared sangraba ligeramente hasta el techo o donde la moldura Tiene un ligero goteo.
En realidad no es el caso de que sea un pintor horrible, simplemente soy más propenso a ver los pequeños errores porque sé que están ahí. Cuando alguien más entra en la habitación, ve una habitación bien pintada y tendrá que buscar incansablemente para encontrar los errores que no puedo ignorar.
Avancé unas semanas y me he acostumbrado a la habitación pintada. Cuando entro, no miro a mi alrededor y no veo los errores, de hecho, apenas considero la calidad del trabajo o incluso el color de la pintura. En cambio, simplemente hay un cambio sutil en el estado de ánimo o la sensación cuando entro en la habitación. Este es, por supuesto, el objetivo final del proyecto, simplemente no pude experimentarlo correctamente hasta que me separé del trabajo.
Volver a Diseño Web
No temas, en realidad hay un punto en esa larga historia. Al igual que yo con la habitación pintada, no puedes ver y analizar honestamente un diseño mientras lo creas. Incluso si está orgulloso del trabajo y no encuentra ningún defecto en él, sus ojos tenderán a mirar sus componentes favoritos: el logotipo que pasó horas perfeccionando, la textura que está tan orgulloso de haber creado. desde cero o el titular que cuidadosamente creaste con el kerning perfecto de píxeles.
Su participación personal lo convierte en un mal ejemplo de cómo un usuario leerá un diseño. Entonces, ¿cuál es la alternativa entonces?
Métodos de prueba
La mejor manera de ver cómo un usuario típico verá un diseño es poner a algunas personas frente a él. Si trabaja en una oficina, tendrá la tentación de preguntar a las personas que lo rodean, pero los diseñadores en general tienden a ver el diseño de manera diferente, por lo que, a menos que sea su público, aún necesita una opinión externa.
Obviamente, la mejor manera de abordar algo como esto es crear un grupo de enfoque, configurar algún software / hardware de seguimiento ocular y realizar tantas pruebas como sea posible para ver cómo responde la gente al diseño. Luego recopila los datos, los promedia, crea algunos mapas de calor y bam, tiene una imagen perfecta de cómo alguien leerá su diseño.
¿Quieres que haga qué?
Ya puedo ver lo que estás pensando. Esto es un poco ridículo, ¿no? A menos que esté diseñando una nueva página de inicio para una compañía multimillonaria, no hay manera de que tenga el tiempo, presupuesto o recursos para seguir los consejos anteriores en cada proyecto. ¡La mera sugerencia de hacerlo es completamente ridícula!
La buena noticia es que puede lograr resultados similares sin toda la molestia. Debido a que las personas tienden a enfocarse en ciertos elementos, podemos usar el software para predecir con bastante precisión cómo una persona puede leer el diseño. Básicamente, algunas personas inteligentes enseñan a una aplicación cómo ver una página como un ser humano y luego le muestran su diseño a la aplicación para recibir comentarios.
Conoce a Feng-Gui
He estado buscando una solución decente para el seguimiento ocular simulado por un tiempo sin éxito. Luego escuché a Paul Boag mencionar un producto que realmente parecía ser lo que estaba buscando: Feng-Gui.
Feng-Gui permite tiene una impresionante serie de herramientas que están destinadas a ayudarlo a analizar su diseño desde un punto de vista perfectamente objetivo. Si hasta ahora has estado un poco intimidado por toda esta discusión, no te preocupes, estas herramientas son tan fáciles que cualquiera puede usarlas.
Analizando un diseño
Para ver un ejemplo del tipo de información que puede obtener de productos como Feng-Gui, echemos un vistazo a la página de inicio de Apple. Después de todo, si alguien hace esto bien, debería ser el increíble equipo de diseño de Apple. Aquí está la página en su estado actual:
Una vez que tengamos una captura de pantalla, podemos cargar el archivo en el tablero de Feng-Gui que se muestra a continuación. Hay algunos controles básicos para ajustar los parámetros y una herramienta para seleccionar ciertas partes de la imagen y designarlas como "áreas" únicas. La imagen de abajo está lista para comenzar, solo necesitamos presionar el botón "Analizar".
El mapa de calor
Una vez que presionas el botón Analizar, Feng-Gui despega y hace su trabajo. En solo un minuto o dos, tiene algunos recursos extremadamente útiles a su disposición. El primero y ciertamente uno de los más útiles es un buen mapa de calor antiguo. Esto hace que sea inmediatamente evidente qué partes de su diseño atraen la mayor atención.
Un vistazo a nuestro proyecto de muestra anterior y podemos sacar inmediatamente algunas conclusiones valiosas. En primer lugar, el titular que anuncia el iPhone 4S definitivamente está ganando la batalla de la atención. Esto tiene mucho sentido, ya que todos hemos aprendido a gravitar instintivamente hacia grandes titulares como una fuente importante de información.
Otro contendiente importante es un área a la derecha de la foto del héroe de los tres iPhones. Esto contiene una pieza de información muy valiosa. El área que se resalta no es tanto el iPhone en sí, sino la imagen en el teléfono: la cara de una niña. Siempre recuerde que las caras son mágicas cuando se trata de captar la atención del usuario. Simplemente no podemos evitarlo, cuando hay una cara en una página, nuestros ojos se dirigen directamente a ella.
Observe cómo la jerarquía parece estar tomando forma. Vemos que la mayor parte de nuestra atención está dirigida hacia el titular, esto se reduce un poco al producto del héroe lanzado y se ve afectado por una colorida imagen de un iPod Touch en el pie de página. Esta página realmente parece estar leyendo bien de arriba a abajo.
Podemos ver esta misma información de una manera diferente haciendo clic en la pestaña Opacidad. Aquí todo se ha oscurecido y se ha desvanecido de acuerdo con los valores del mapa de calor. Esta vista realmente le brinda una imagen perfecta de lo que un usuario podría absorber después de un rápido vistazo a la página (que normalmente es todo lo que obtiene).
La trama de la mirada
Como ya he sugerido varias veces, no solo es importante saber qué ve el usuario, sino en qué orden ven esa información. Esto le ayuda a construir la página de manera que maximice la comprensión y la retención de elementos importantes.
Feng-Gui satisface esta necesidad en forma de Mirada. Esto muestra la mejor conjetura del software sobre cómo un usuario puede leer la página. El resultado parece bastante loco, lo cual es bueno, porque los movimientos de nuestros ojos tienden a ser bastante esporádicos cuando se lee una página.
Es importante tener en cuenta que su inclinación natural es leer una página en un patrón de "z": de izquierda a derecha, de arriba a abajo. Sin embargo, como diseñadores podemos romper esta inclinación natural. Observe cómo en el ejemplo anterior, el primer punto de enfoque se encuentra en la parte superior derecha de la página. Definitivamente, hay un notable patrón de ida y vuelta, aunque tus ojos intentan volver a lo que es natural. Según Feng-Gui, cada punto de enfoque en esta imagen dura "unos 200 ms durante la lectura del texto lingüístico, y 350 ms durante la visualización de una escena". Así que, aunque parezca que toda esta actividad ocular tomaría Un momento, en realidad sucede en el lapso de unos segundos!
Pensando en estos resultados, podemos decir una vez más que la página de Apple está bastante bien. Comenzamos con el título, saltamos a los héroes del producto, miramos el pie de página y luego comenzamos a leer la letra más fina de la página. Esta es una progresión perfectamente lógica, lo que indica que Feng-Gui se está desempeñando de manera bastante sólida.
¿Esto realmente ayuda?
Para muchos diseñadores, todo esto va a parecer un ejercicio sin sentido. Después de años de ser un diseñador profesional, muchos de nosotros podríamos haber llegado a conclusiones similares por nuestra cuenta. Sin embargo, le insto a no descontar el valor de productos como este.
Para empezar, no todos los diseñadores están diseñados para pensar así. El uso de simuladores de seguimiento ocular en su flujo de trabajo estándar lo ayudará a recordar analizar críticamente un diseño para ver si cumple con sus objetivos. Además, incluso si tiene la teoría abajo, es muy bueno ver un punto de vista objetivo. El software nunca será tan bueno como un grupo focal de cincuenta usuarios, pero definitivamente es una buena alternativa para aquellos con poco tiempo y dinero.
Finalmente, independientemente de si necesita o no una herramienta que lo ayude a ver lo que ve un usuario, puede apostar a que su cliente no está altamente capacitado (de lo contrario, ¿por qué lo necesitarían?). Esto hace que los mapas de calor, los gráficos de mirada y otras herramientas increíblemente útiles para crear informes de clientes que justifiquen sus decisiones de diseño. ¡Armado con estos, lucirás infinitamente más profesional en una presentación! Incluso podría agrupar un informe de este tipo como un complemento de prima opcional para ayudar a aumentar sus ganancias.
Conclusión
En resumen, el diseño de la página es mucho más complicado que simplemente organizar los elementos de una manera que se vea bonita.Se trata de estructurar voluntariamente un mensaje y la experiencia del usuario que cumple con un conjunto de objetivos establecidos. Muy a menudo, los diseñadores pegan elementos en cualquier lugar donde parezcan encajar, sin pensar en cómo podría interrumpir el flujo de información en la página.
Herramientas como Feng-Gui son una gran ayuda en su búsqueda para aprender a estructurar sus diseños de una manera lógica y efectiva. ¿Has probado algún otro servicio similar? ¿Cómo se compara? Háganos saber en los comentarios!
Créditos de imagen: Micky, karpacious, City University Interaction Lab