Psicología del diseño y la neurociencia de Awesome UX

Escucha la versión en audio de este artículo

Existe una ciencia que explica por qué determinados diseños llaman la atención y hacen que la sangre bombee.

El cerebro humano es perezoso, parcial y propenso a los atajos.

El estudio de la experiencia del usuario de la cognición humana puede ser blando, poco científico y lleno de suposiciones falsas; tal vez sea culpa de un cerebro perezoso.

La cognición es compleja y muchos factores influyen en las reacciones viscerales o en una impresión instantánea. Cuando le preguntas a alguien, "¿Por qué hiciste eso?" existe una alta probabilidad de que no pueda responder o de que malinterprete su respuesta.

Entra en neurociencia.

Si bien los métodos de investigación como la observación y la entrevista a menudo requieren que el investigador y el participante de UX hagan conjeturas, la tecnología moderna como el seguimiento ocular permite a los investigadores estudiar reacciones y preferencias casi imperceptibles .

En el caso de productos con un tráfico considerable, los detalles aparentemente diminutos, como el ancho de un botón o el contraste de color del texto, pueden generar una diferencia de millones de dólares. Es por eso que los gigantes tecnológicos como Facebook y Google están comenzando a emplear técnicas basadas en la neurociencia para estudiar cómo las personas usan sus productos.

Comencemos con una introducción al "pensamiento rápido" reactivo y brindemos algunos consejos para que los diseñadores ayuden a aprovechar el poder de la neurociencia para crear excelentes experiencias de usuario.

Psicología del diseño: pensamiento rápido, pensamiento lento

No es ningún secreto que gran parte de lo que impulsa el comportamiento humano es subconsciente. En los milisegundos después de que una persona encuentra una nueva aplicación o sitio web, se activan millones de neuronas y el cerebro toma cientos de decisiones subconscientes.

¿Estoy en el lugar “correcto”? ¿Debo confiar en este sitio?

El investigador de YouTube UX Javier Bargas-Avila determinó en un estudio de 2012 que las personas forman reacciones estéticas a una página web en los primeros 17 a 50 milisegundos después de la exposición .

Para poner eso en perspectiva, el ojo tarda entre 300 y 400 milisegundos en parpadear. Su producto puede recibir su juicio, juicio y sentencia, todo en menos de un abrir y cerrar de ojos.

Es posible que estas impresiones no se registren, pero tienen un impacto en el comportamiento. Por ejemplo, si un sitio se carga lentamente y el cerebro lee los primeros elementos que se cargan como "fuera de tema", el usuario puede salir de inmediato en lugar de esperar a que se cargue el sitio.

Empresas como Facebook invierten importantes recursos en estudiar el orden de carga de los elementos. Si alguien inicia sesión en Facebook y no ve ninguna insignia de notificación, es posible que se vaya de inmediato. Si las insignias se cargan primero, es posible que esperen mientras se carga la sección de noticias con mucho contenido.

El libro Thinking, Fast and Slow del premio Nobel Daniel Kahneman divide el pensamiento humano y la toma de decisiones en dos sistemas para ayudar a ilustrar la diferencia.

Sistema 1: rápido, automático, frecuente, emocional, estereotipado, subconsciente.

El pensamiento del Sistema 1 es reactivo , responsable de la cognición compleja pero instintiva, como determinar la distancia entre objetos o determinar las respuestas emocionales. Su cerebro perezoso generalmente usa por defecto el pensamiento del Sistema 1.

Sistema 2: lento, esforzado, lógico, calculador, consciente, poco frecuente.

El pensamiento del Sistema 2 es analítico y se aplica a escenarios más complejos, como determinar el comportamiento social apropiado o comparar dos productos con diferentes precios y características.

Dado que el cerebro no quiere volver a procesar información o tomar decisiones nuevas cada vez que se enfrenta a un nuevo escenario, gran parte de la toma de decisiones humanas cae en el Sistema 1, o "pensamiento rápido".

Al tomar decisiones rápidamente, el cerebro puede confiar demasiado en esquemas o modelos mentales, patrones familiares de información e interacción. Cuando se activa el pensamiento del Sistema 1, el Sistema 2 nunca entra en vigor. Es posible que las personas no sean conscientes de la taquigrafía de toma de decisiones de su cerebro, pero tiene un gran impacto en sus comportamientos y percepción del producto.

La ciencia de la psicología en el diseño

El cerebro humano consume la friolera de 25% del oxígeno del cuerpo a pesar de que solo representa alrededor del 2% de su masa. El cerebro es perezoso como mecanismo de supervivencia: el reconocimiento de patrones y los atajos significan que se gasta menos energía procesando conscientemente la situación . El cerebro identifica las cosas, las etiqueta y las ignora hasta que vuelven a ser relevantes.

La preferencia del cerebro por los patrones y la toma de decisiones perezosa puede facilitar la supervivencia, pero dificulta el diseño de UX. ¿Cómo estudias algo que tu sujeto de investigación ni siquiera puede percibir?

Un puñado de técnicas de neurociencia han dado el salto recientemente a la investigación de UX, ayudando a los investigadores a arrojar luz sobre las cosas que estimulan el "pensamiento rápido".

La atención y la percepción se pueden estudiar con cámaras de seguimiento ocular. La respuesta emocional y la excitación se pueden determinar con sensores de piel o análisis facial. La respuesta eléctrica en el cerebro se puede medir con electroencefalografía.

Para los diseñadores, puede parecer una tarea imposible capturar el interés de alguien y transmitir información vital en menos de un abrir y cerrar de ojos. Afortunadamente, así como la neurociencia puede ayudarnos a diagnosticar problemas, también puede revelar soluciones generales y mejores prácticas.

Aquí hay algunas lecciones generales aprendidas de la investigación de la experiencia del usuario de la neurociencia que los diseñadores pueden emplear al diseñar productos digitales.

Consejo de Psicología del Diseño #1: Haz que sea fácil de identificar

Todos llegan a un sitio web o una aplicación con alguna expectativa de cómo debería verse. Mantenerse cerca de esa expectativa ayuda a los diseñadores a beneficiarse de la toma de decisiones subconsciente instantánea.

La persona que abre su aplicación o sitio web quiere saber a) si esto tiene lo que estoy buscando; y b) ¿es de alta calidad? Mantener los diseños simples y mantener la marca, los servicios y los productos al frente y al centro ayuda a las personas a orientarse.

Poner cierta información al frente y al centro significa evitar que otra información la desplace. Ordenar un diseño es tan importante como reorganizar los componentes.

Notará un movimiento entre las empresas de tecnología hacia interfaces más simples y menos concurridas. Estos diseños minimalistas superan a los diseños más complejos en la realización de tareas y se muestra que la claridad visual influye en las decisiones de compra dentro y fuera de línea.

Se ha demostrado científicamente que los diseños limpios y visualmente simples funcionan mejor. El cerebro perezoso puede comprender el propósito del sitio al instante y comprender qué acción tomar.

Consejo de Psicología del Diseño #2: Indique lo que viene

Cebar o preparar a alguien para una próxima información o interacción puede mejorar la capacidad del usuario para comprender y reaccionar ante la nueva información. Puede preparar a alguien para que espere cosas como elementos de la interfaz de usuario, ciertas interacciones o el tiempo en un proceso.

Por ejemplo, Yelp usa una pantalla adicional para alertar a los usuarios que están saliendo de Yelp para visitar un sitio de terceros. El contexto adicional ayuda a señalar al usuario que espera un nuevo diseño y arquitectura de información.

El cebado es un arma de doble filo. La información que no tiene la intención de comunicar aún puede afectar la toma de decisiones . Por ejemplo, si su empresa de fotografía solo muestra imágenes de bebés, una persona podría asumir incorrectamente que solo atiende a una clientela infantil.

Consejo de psicología del diseño n.º 3: Organizar para lectores perezosos

Los estudios de seguimiento ocular pueden seguir la mirada de una persona mientras interactúa con un producto. Pueden producir mapas de calor que muestran la cantidad de tiempo que se pasa enfocado en una parte de la pantalla, o mapas de cómo el ojo salta alrededor de la página.

Sabemos que, en todas las industrias y tipos de aplicaciones, el cerebro comúnmente busca información en un patrón F (o patrón E). La persona mira la información en la parte superior, lee a la derecha y luego escanea la página en busca de información o íconos relevantes.

Romper el patrón F, por ejemplo, poner información importante en la esquina inferior derecha, hará que sea más difícil de encontrar.

Doma tu texto

Según un estudio de Nielsen Norman de 45 237 páginas vistas, las personas leen solo alrededor del 20 % del texto de una página. Peor aún, en los sitios con más contenido, las personas dedicaron solo unos 4 segundos adicionales por cada 100 palabras adicionales de texto.

En un mundo donde la gente no lee palabra por palabra, Nielsen Norman emplea las siguientes pautas para el texto escaneable .

• Palabras clave destacadas
• Subtítulos significativos
• Listas con viñetas
• Una idea por párrafo
• El estilo de la pirámide invertida: comience con la conclusión
• La mitad del recuento de palabras (o menos) de la escritura convencional

Trabajar con Color Pop y Contraste

La organización y ubicación del texto no son los únicos factores importantes en el diseño. La teoría del color, los pesos y el contraste se pueden utilizar para dirigir la atención del usuario.

El equipo de diseño de la cabina de la NASA utiliza la luminancia, o el brillo percibido de un diseño, para ayudar a controlar la atención del piloto en un área repleta de información contradictoria. El equipo de diseño de la cabina utiliza el color y el contraste para dar protagonismo visual a los elementos más importantes.

La luminancia y el contraste se pueden usar en su producto para resaltar o restar importancia a información específica, pero se hace referencia con mayor frecuencia en el botón o el diseño de la llamada a la acción. Como puede ver en los botones rojos de ejemplo a continuación, aunque el botón en la esquina superior izquierda es el más saturado, se "siente" el más brillante porque el contraste es el más alto.

El contraste y la luminancia son solo un primer paso. La teoría del color sugiere equilibrar los colores de su producto usando el color dominante el 60 % del tiempo, el secundario el 30 % y el acento el 10 %. Este desglose es consistente con la neurociencia detrás de lo que llama la atención. Debido a que el color de acento se usa menos, llama más la atención.

Así como el uso de colores brillantes puede llamar la atención, el uso de colores más apagados puede ayudar al usuario a determinar qué información es secundaria o menos importante. Por ejemplo, la mayoría de los sitios web utilizan áreas de pie de página con un color más neutro para mostrar la separación del resto de la información de la página.

Cualquier característica o información que los diseñadores desprioricen ayuda al usuario a enfocarse directamente en las interacciones o información más importantes.

Consejo de psicología del diseño n.º 4: control intuitivo

Afortunadamente, no necesita miles de dólares en software de seguimiento ocular o un electroencefalograma para saber si un diseño está funcionando.

Las pruebas de 5 segundos son una herramienta poderosa para determinar si sus diseños son o no comprensibles al instante.

En una prueba de 5 segundos, el participante ve un sitio o una aplicación durante 5 segundos y luego responde preguntas sobre el tema y el diseño. Incapaz de volver a referirse a la imagen, el participante da sus "impresiones": lo que los participantes supusieron que era el propósito y la función del producto, y qué harían o dónde buscarían los próximos pasos.

Su producto puede tener toda la funcionalidad que su usuario desea, pero si el cerebro perezoso y amante de los patrones no puede captarlo instantáneamente, seguirá adelante .

Diseñadores como “lectores de mentes”

A medida que aprendemos más sobre la psicología del diseño, el cerebro y la percepción, las normas de diseño seguirán cambiando en toda la industria. El hilo conductor son los datos: a medida que mejoran los métodos para el estudio de la neurociencia y la cognición, también lo hará el tipo y la calidad de los datos disponibles para el diseño de UX.

El gran diseño de la experiencia del usuario no es magia, es ciencia. Neurociencia.

Este artículo fue escrito en colaboración con la investigadora de UX Caitria O'Neill , anteriormente en Facebook, actualmente en Airbnb, y becaria de la d.school de Stanford .

• • •

Lectura adicional en el blog de diseño de Toptal:

• eCommerce UX: una descripción general de las mejores prácticas (con infografía)
• La importancia del diseño centrado en el ser humano en el diseño de productos
• Los mejores portafolios de diseñadores de UX: estudios de casos y ejemplos inspiradores
• Principios heurísticos para interfaces móviles
• Diseño anticipatorio: cómo crear experiencias de usuario mágicas