100 cosas que todo diseñador debe saber (1 de 10)

En los últimos días estoy leyendo un libro muy interesante sobre psicología del diseño: 100 things every designer needs to know about people de Susan M. Weinschenk. Trata sobre la necesidad de todo diseñador, gráfico, de interacción … de conocer a su audiencia y entender cómo perciben, analizan y procesan aquello que supuestamente leen, ven, oyen …

El libro está estructurado en 10 bloques y voy a dedicar una entrada a resumir cada uno de ellos para guardar un resumen escrito de lo que vaya leyendo (y entendiendo) sobre el mismo y por si a alguien más puede servirle.

BLOQUE 1: ¿Cómo ve la Gente?

Este bloque contiene las primeras 12 «cosas» y está dedicado a explicar cómo vemos los humanos. Comienza apuntando las diferencias entre lo que «ve el ojo» y lo que «interpreta el cerebro».

#001: Lo que ves no es lo que interpreta tu cerebro

¿Que ves en la imagen de la izquierda? ¿un rectángulo? Pero … ¿realmente hay un rectángulo o sólo 4 círculos parciales? Este ejemplo, el rectángulo de Kanizsa resume totalmente este punto.

El cerebro intenta por todos los medios encontrar interpretar lo que sensorialmente percibe, y busca «atajos» para que lo percibido tenga sentido.

El cerebro se basa en su conocimiento previo para decidir «qué» estamos viendo y tomar decisiones en nanosegundos a partir de los millones de impulsos que recibe en cada instante. Pero estos atajos pueden causar errores en ocasiones. Mediante formas y colores se puede influenciar sobre lo que la gente ve o piensa que ve, creando ilusiones ópticas.

Notas:

• lo que crees que la gente va a ver en tu web no tiene porqué ser lo que realmente ven. Dependerá de su entorno, conocimientos, hábitos sobre lo que miran y expectativas
• debemos ser capaces de persuadir a nuestros usuarios para que vean las cosas de cierta manera, en función de como están representadas

#002: La visión periférica se utiliza más que la central para obtener la esencia de lo que vemos

Mientras utilizamos la visión central para mirar las cosas y obtener sus detalles, es la visión periférica la que nos ayuda a contextualizar lo que la central ve y ponerlo en contexto. Sin dicha visión periférica perderíamos gran parte de la información del entorno que rodea a aquello que miramos.

Por otra parte, la visión periférica es la culpable de que nos distraigamos si estamos leyendo un texto y algo se mueve en una esquina de la pantalla (¿un banner animado?). Todo lo que pasa en la zona periférica de la visión puede captar nuestra atención y desconcentrarnos.

Notas:

• los usuarios utilizamos la visión periférica para decidir de un sólo vistazo sobre qué trata una página web o una aplicación
• es muy necesario diseñar esa zona para que cumpla con el propósito de la página y la web
• evitemos las animaciones y parpadeos si queremos que el usuario se concentre en lo que queremos que haga

#003 Los usuarios identificamos objetos a partir de patrones

Nuestros ojos y nuestro descomponen en patrones todo lo que perciben puesto que este «truco» agiliza el reconocimiento de lo que estamos viendo.

La reciente teoría de los Geones (1.985) indica que el cerebro no almacena y compara millones de imágenes sino que recuerda alrededor de 24 formas básicas (patrones) y con de ellas identifica cualquier objeto que vemos.

Notas:

• utilicemos patrones siempre que podamos para facilitar la visualización y comprensión de lo que queremos transmitir
• evitemos imágenes en 3D. Los humanos vemos en 2D  y el proceso para percibir el 3D ralentiza la percepción

#004 Hay una zona del cerebro especializada en reconocer caras

Como las caras son difíciles de descomponer en patrones, nuestros cerebros han desarrollado una zona especial para reconocerlas. Somos capaces de identificar a una persona por su cara entre una multitud aunque no esperemos verla allí y los ojos son lo más importante. Además las caras nos provocan una respuesta emocional (simpatía, miedo, horror, ..) y suelen hacer que miremos adonde ellas miran.

Notas:

• las caras son lo primero que identificamos en las páginas web, si miran de frente crean un mayor valor emocional sobre la página y si miran hacia algún lado solemos mirar hacia ese mismo lado en primer lugar

#005 Los usuarios recordamos los objetos con  ligeras inclinaciones

Varios estudios demuestran que solemos recordar los objetos con cierto ángulo superior e inclinación lateral. Es decir, un poco desde arriba y un poco desde un lado: es la perspectiva canónica. No es habitual recordar objetos desde encima o desde un plano lateral. La perspectiva canónica nos ayuda a identificar los objetos correctamente.

Notas:

• los iconos en las webs deberían estar creados con perspectiva canónica

#006 Los usuarios escaneamos la pantalla en función de nuestra experiencia anterior y expectativas

Los usuarios pasamos por alto ciertas partes de la pantalla como logotipos, espacios vacíos, barras de navegación y márgenes laterales. Buscamos de forma inconsciente el texto de mayor tamaño y enfocamos nuestra atención comenzando por él.

Tras este primer vistazo miraremos o leeremos según nuestra cultura (izquierda a derecha o viceversa) pero si algo como una imagen grande o un movimiento llama nuestra atención puede modificar nuestra tendencia natural de visionado.

Notas:

• en una web, lo más importante debe colocarse en el tercio superior de la pantalla
• no debe ponerse nada importante en los márgenes laterales, ni estructurar la información de forma que rompa con el patrón cultural de lectura (izquierda a derecha o viceversa)

#007 Los usuarios percibimos señales que nos indican como utilizar un objeto

Los objetos suelen indicarnos como utilizarlos. Tomaremos una taza de café por el asa, moveremos hacia abajo el asa del pomo de un puerta para abrirla o sabremos donde clicar en una página web si vemos un botón que nos invite a ello. Este tipo de señales intrínsecas a los objetos y que nos indican qué puede hacerse con ellos son llamadas  «permisividad» o «permitividad» (en inglés: affordance).

El asa de la imagen ¿te invita a empujar o a estirar? Para empujar no necesito el asa, por tanto debe ser para estirar. Sin embargo el texto encima del asa dice «empujar»… ¿Por qué tan complicado? Algo falla en la imagen.

Cualquier objeto, aplicación o página web debería estar diseñado para que el cerebro perciba, imagine e interprete correctamente la acción a realizar sobre el mismo y cómo realizarla.

Notas:

• al diseñar objetos, debemos incluir sus «affordances» y evitar las falsas señales
• utilizar sombras indica si un objeto está activo, es clicable, …
• señales como «mouseover» o punteros que cambian de forma al pasar por encima de elementos clicables son inútiles en dispositivos táctiles

#008 Los usuarios podemos no percibir cambios en nuestro campo visual

Antes de seguir leyendo, mira este vídeo de 1’20» y cuenta el número de pases de pelota entre los participantes.

Este vídeo es un buen ejemplo de lo que se conoce como «ceguera al cambio» o «ceguera por falta de atención». Si estamos intensamente concentrados en una tarea, es altamente probable que nuestro cerebro no perciba grandes cambios que suceden en el entorno.

Más sobre el experimento del Gorila en: The Invisible Gorilla

Notas:

• no asumamos que los elementos en una pantalla se ven simplemente porque están ahí, sobre todo si algo ha cambiado después de un refresco de pantalla. Como usuarios podemos no percibir que estamos viendo una pantalla diferente
• debemos añadir señales adicionales si algo ha cambiado

#009 Los usuarios creemos que las cosas que están juntas también están agrupadas

Si en una página web dos elementos (por ejemplo, una imagen y un texto) están muy juntos, asumimos que van unidos y asociamos el uno al otro (la imagen ilustra al texto que la acompaña). Esta percepción es todavía más fuerte si la unión es de izquierda a derecha (o viceversa en las culturas que leen de derecha a izquierda).

Notas:

• si queremos que varios elementos parezcan relacionados, deberemos ponerlos lo más cerca posible unos de otros
• para separar elementos, mejor usar un mayor espacio entre ellos que líneas o cajas, así no añadimos ruido a lo que se ve

#010 Es difícil leer texto rojo sobre azul

Los colores rojo y azul, cuando se utilizan superpuestos, crean el efecto de que uno «salta» sobre el otro, que a su vez se «empotra» hacia abajo.

Es el peor ejemplo de chromostereopsis pero puede crearse el mismo mal efecto al combinar otros pares de colores entre ellos (como verde y rojo).

Notas:

• Evitar estas combinaciones, incluso ponerlos demasiado juntos. en una web.

#011 El 9% de los hombres y el 0,5% de las mujeres son daltónicos

Pongamos especial cuidado con las combinaciones de colores que utilizamos en textos, imágenes, iconos, … para minimizar las dificultades que tienen muchos de nuestros usuarios con los colores.

Un buen truco es utilizar algún website que ofrezca el servicio de comprobación de efectos de ceguera de colores (https://www.es.colorlitelens.com/test-de-daltonismo.html) y conocer los indeseados efectos cromáticos que podemos estar introduciendo en nuestros diseños.

Notas:

• evitar combinaciones de rojo, verde y azul y comprobar resultados antes de dar por válido ninguna imagen o diseño

#012 El significado de los colores varía de unas culturas a otras

Y entre unos sectores de población, laborales, religiosos … a otros. El blanco es señal de pureza en algunas culturas (y se utiliza en bodas) y de luto en otras (y se utiliza en funerales). La felicidad se asocia con blanco, verde, amarillo o rojo según la parte del mundo en la que estés.

La rueda de colores de InformationIsBeautiful es una fuente de consulta muy útil en el momento de aplicar colores al diseñar para diferentes culturas o ámbitos.

Notas:

• elegir los colores cuidadosamente y teniendo en cuenta el significado que éste puede suscitar
• asegurarse de evitar la creación de asociaciones no deseadas gracias a (o por culpa de) los colores y en función del público mayoritario de tu producto o servicio

Navega por la colección