 ¡Hola, buenas tardes! Vamos a empezar la sesión de la tarde en esta workout, en el track, en este track, con una ponente que para mí es un honor presentarla porque es una gran amiga. Pitchaneri es italiana, pero también ha sido londinense y ahora tenemos la suerte de que va a ser valenciana. Bueno, eres valenciana. Espero que me queráis. O sea, que yo... Es mi aspiración, vamos. Es valenciana. Bueno, Pitcha es especialista en diseño y ahora está muy, muy, muy concienciada con la accesibilidad y quiere demostrarnos a todos que el diseño puede ser accesible y cómo hacer para mejorar nuestros diseños y nuestras webs. Así que hoy nos va a hablar sobre percepción visual y memoria y bueno, os dejo con ella. ¡Disfrutad! Gracias. Vale, ¿quién soy? Ya lo dijo Bisen, yo quería solo añadir que más que italiana soy, Toscana, que no es igual. Pero bueno, no, no, está bien, está bien. Ya me tenéis, si me queréis mencionar o si queréis conectar conmigo, me encantaría, ahí lo tenéis. Esto es que yo solo lo he ensayado. Perfecto, aquí tenéis el título de la charla, ya nos hemos ubicado y podemos continu... ¡Continuar! No, no, no podemos continuar. No, no, ¿cómo, cómo vuelvo? No, es tropeado toda la charla ya. No, sí, la verdad. O sea, que... No, es que es un desastre. No, no, ¿qué? Ayudarme, por favor, ¿cómo vuelvo? Espera, sí, así. No, un desastre, un desastre, vale, no pasa nada, no pasa nada. Hay de mucho peor en la vida. No, ese fe once, vale. Vale, desastre. Volvemos atrás. Lo que iba a hacer era que íbamos a hacer... Yo creo que lo podemos seguir haciendo, o sea que no creo que... Bueno, lo intentamos. Y vamos a hacer un juego de memoria. Habrá otro, así que lo podemos solventar más tarde. Para quien escuche sin ver, pero ya lo habéis visto, pero no pasa nada, es que íbamos a mirar a una escena de una calle en Australia en realidad, donde hay gente andando, hay coches, hay cosas, hay muchos detalles. Esto yo ya no lo quiero utilizar, porque no me obedece. Esto, cinco segundos, uno, dos, tres, cuatro, cinco, ya. ¿Qué ha cambiado? Porque, sí, demasiado fácil, pero bueno. ¿Qué ha cambiado? A ver, a ver, contamos, ¿cuántas cosas? No tenemos que... Ahora, a ver, la camisa sí, alguien lo dijo, porque se vio antes, pero bueno, la camisa, ¿qué más? Es que yo no me acuerdo, o sea que no lo sé, es la verdad. Señal detrás, la señora, o sea que... Vale. Ahora tenemos que sí, que ahí había una señora en la primera y luego en la segunda desapareció el color de la camisa del señor, creo que eso es algo postal y la ventaja. Hubo aquí para este público una ventaja que normalmente no hay, pero bueno, en realidad, si no habéis notado nada, si no dependería de vosotros, porque es simplemente la manera en que percibimos el mundo. Es así, porque es difícil fijarse en los detalles. Entonces, esto iba a ser un ejemplo de lo que vamos a aprender a mirar hoy de forma, yo espero, entretenida, ya empezamos bien. Los mecanismos básicos de la percepción, cómo la memoria y la atención trabajan juntas, los tipos de procesos de percepción visual y puntos claves para un mejor diseño web, porque esto es mi punto de vista, yo no soy científica. El científico lo tenemos aquí y mi amigo Vicent también fue, es un científico de la visión, y me ayudó a hacer que en esta presentación no hubieran bobadas enormes, porque yo claro que estas cosas las miro y las quiero aprender desde el punto de vista del diseño web, eso se yo, o sea que me divierto aprendiéndolas para mejorar las cosas, porque es muy interesante cómo percibimos estas cosas. Y al final vamos a ver la única regla que nos va a servir, que si nos quedamos con ella ya está, ya lo tenemos todo. ¿Cómo percibimos el mundo a nuestro alrededor? Ya dijimos la primera cosa que vamos a mirar, los mecanismos básicos de percepción y cómo la memoria y la atención trabajan juntas. Hay una definición de la percepción que me gusta mucho que vi en este libro de este científico americano que se llama Bruce Goldstein. La percepción es nuestro portal al mundo que nos rodea, y este es el libro de 2002 Sensation and Perception. A ver, porque el mundo coge sentido para nosotros a través de nuestros sentidos y de la experiencia, esa es la clave. Entonces la percepción es la interpretación que hacemos de la información que recibimos a través de nuestros sentidos y de la experiencia previa. Entonces la base, esa es la base de nuestra interpretación del mundo, es la experiencia previa que es los que llamamos conocimiento. Y a ver cómo conocemos el mundo, lo conocemos a través de nuestros sentidos. Entonces, dependiendo de los sentidos que utilicemos, es como vamos a percibir el mundo. Esta presentación se basa más en la vista, porque es lo que más se experiencia en la web, pero habría mucho más de que hablar. Entonces, ¿qué ese reconocimiento es? El proceso mental que identifica un input sensorial a partir de las representaciones, este hueco, almacenadas en nuestro sistema de memoria. ¿Qué quiere decir esto? Parece complicado, no lo es, y vamos a ver cómo más o menos funciona. Porque el conocimiento previo es esencial en el proceso de reconocimiento, porque es como damos significado a las experiencias que pasan fuera de nosotros, en el mundo exterior. A ver, porque cuando vemos un objeto en nuestro entorno, es el proceso de reconocimiento que nos permite de categorizarlo. Ahora, para quien escuche sin ver, aquí hay un perro de almata, es decir, un perro blanco con manchas negras, y cuando lo vemos decimos, esto es un perro, ya lo sé, o sea que lo sabía de antes y ahora lo sé. Esto es un gato, porque en esta imagen que estamos viendo ahora hay un gatito tumbado que nos mira de una manera muy dulce, y así lo hemos reconocido, porque ya lo sabíamos. ¿Y cómo pasa esto? Pasa porque nuestro cerebro siempre se esfuerza por ahorrar energía, porque quiere evitar tener que repetir constantemente los mismos procesos cada vez que vemos algo que ya habíamos visto antes. ¿Por qué? Porque fundamentalmente nuestro cerebro es precioso, pero ¿por qué es precioso? Porque no sirve conservar energía para las cosas verdaderamente importantes, porque y esto viene, ahora vamos a ver más de dónde viene esto y cuándo nos sirven las cosas. El objetivo de todas formas siempre es de trabajar lo menos posible, siempre elegimos nuestro cerebro y el camino de menor resistencia, que es en general un consejo muy bueno por la vida, yo creo, y que es difícil de hacer, pero yo creo que es muy importante. Y por eso solemos ver el todo antes que las partes y nos fijamos los detalles después, que es lo que habría pasado con la primera imagen si hubiera ido como tenía que ir, pero bueno. Y esto es también el principio básico de la teoría gestáltica, que hace una teoría de psicología de la visión, que tiene unas cosas bastante útiles para el diseño. Por eso, en esta imagen, vimos el gatito de antes otra vez con un puzzle súper impuesto, que es simplemente a significar que los detalles llegan después, pero primero vemos el gato y luego decimos, pero es un gato muy joven, es que es pardo y tiene ojos ámbar y tal. Y por eso en la escena de antes, si no hubieras tenido la ventaja que tuviste, no ibasis a recordaros nada, porque los detalles de la camisa es que no es importante, no hacía falta recordárselo. Y esta es la razón, porque una otra razón, porque no podemos fijarnos en todos los detalles, porque solo en realidad podemos visualizar una parte limitada del mundo a la vez y podemos ver nítidamente, nos enseña nuestro amigo aquí y que lo tenemos aquí de control de calidad, una parte aún más limitada de la imagen que estamos visualizando. Por eso, si hay algo verdaderamente importante, hay que ponerlo ahí en el medio, porque tengo que guardar, entonces si estoy a punto de cerrar el sin guardar, es importante que se me acuerda. O sea, que no es que esta UI está perfecta, no, para nada, pero está ahí y no puedo seguir sin verla. Entonces, primer punto clave para el diseño web, colocar la información importante en el lugar donde el ojo está fijándose en ese momento, pero no quiere decir que sea en el centro, porque el diseño web más normal de toda la vida que se ve de todas partes es centrar, siempre todo centrado, no es, es que es porque, pero eso también es para quien diseña así, es que no le da la gana de hacerlo, de esforzarse un poco más, pero es que en realidad, especialmente en el mundo occidental, que es donde vivimos nosotros, es mucho más fácil que el ojo se coloque primero a la izquierda, porque de ahí leímos, es así, pero no es, tampoco esto se puede dar por hecho, porque puede ser que antes, en el momento antes, la atención estuviera concentrada en un detalle que estaba en otro sitio, entonces, entonces por eso las mapas de calor, como decías, decía moratinos esta mañana, son súper chulas porque te pueden revelar comportamientos que no te esperabas, entonces la contentación depende de la atención, que es un ingrediente clave de la experiencia consciente del mundo, que es muy importante como distinción y esto es muy útil cuando diseñamos, porque diseñamos para que la gente se centre en una información importante limitando la interferencia de los detalles sin importancia, que hace Apple lo quita todo, no queda nada, porque es así que es que capturás la atención, que forma parte de la cognición y porque lo que hacemos, o sea que exploramos constantemente nuestro entorno en busca de información que sea relevante y útil, porque acordaros que queremos no trabajar o trabajar menos posible con el cerebro y nos centramos en los estímulos interesante, interesante sutilizando la atención. ¿Qué quiere decir esto? Que la atención guilla nuestros sentidos hacia lo que es importante descartando lo que no lo es y es por eso que no recordamos los detalles, pero son distinción importantes que si no vemos, hay una diferencia entre lo que vemos, pero no le hacemos mucho caso y lo que no vemos, esa es la diferencia, porque en el primer caso si ves algo, no lo sabes, pero están almacenados, si algo no lo ves no están almacenados, es así, lo que no se ve no se recuerda y eso pasa, por eso aquí, o sea volvimos a lo de antes, unas cosas ves, otras no, porque no lo has visto y no te acuerdas y esto se llama ceguera a los cambios y nos pasa miles de veces en nuestras vidas digitales, muy a menudo, que es la incapacidad de detectar cambios dentro de una escena visual en una situación de mundo real y esto yo he tenido iPhone y otro y es que el iPhone es terrible, porque cuando te da los sugierimientos los cambia, o sea que te da una palabra y tú dices sí es esa, pero la cambia enseguida, entonces tú no te fijas y escribes cosas terribles, esta es una situación, otras situaciones son los deslizadores, que en que te fijas, o sea en nada es una de las miles de razones, porque otro punto clave es di no los cambios repentinos y no a los deslizadores, eso es otro juego de atención, ahora con calma, donde estoy, me he perdido, esta es la charla que tenía que dar en work en paz, pero nunca que nunca pasó, porque hubo una pandemia y entonces no lo he hecho nunca en una, por eso es así, porque a ver, lo que va a, esta es, esta, esta, otro juego de atención, esto ahora vamos a ver un vídeo en el que hay gente que juega, se pasa una pelota, hay un equipo en negro y un equipo en blanco y quisiera que me dijeraís cuantas veces se pasa la pelota el equipo en blanco, ahora podemos ir, lo pongo en marcha, voy. ¿Cuántos crees que son 13? ¿Cuántos 14? Y 15 alguien dijo que, bueno, vamos con 13, vale, vamos con 13, ahora se pone en marcha la próxima o no, 13. ¿Habéis notado algo? ¿Habéis notado algo? ¿Qué habéis notado otra vez? Entonces para ponerla otra vez, mirar bien. ¿La habéis visto ahora? Ok, todo el mundo ha visto el oso que lo que fuera, que bailaba el mundo, vale, y esta, ¿Qué quiere decir esto? O sea, lo que ha pasado es que había esta gente que se pasaba la pelota, se os ha pedido de ponerle atención a un algo muy específico que es cuantas veces el equipo en blanco se pasa la pelota y no os habéis enterado de hecho de que había un personaje vestido de forma absurda que pasaba bailando en la escena y esto fue, eso era una, una, una public que hizo el transporte Orlando como campaña de atención para los ciclistas porque por mucho que te pongas un chaleco fluorescente te aplastan igualmente porque si no te miran no te ven y entonces a ver esta es demostración de cómo funciona nuestra. Entonces demostración es fácil, muy fácil pasar por alto lo que no buscas y se llama ceguera por desatención porque recibimos tantos estímulos en nuestro entorno digitales que nos pasa ignorar lo que tenemos delante de los ojos para mí las notificaciones me dan perfectamente igual aunque le ponga, le ponga pitillos o sea que me da igual no si no me fijo nunca entonces nunca es por sentado que la gente verá la información importante tienes que asegurar, o sea asegurar de lo que, de que lo hagan esto súper feo también no se estoy segura de cómo está la UI y si con todos esos colores iguales pero bueno esto no te lo puedes perder y es que es una necesidad por ley o sea es un en el sentido de la experiencia de usuario sabemos que no está bien pero bueno a ver entonces hemos visto hasta ahora esto mecanismos básicos y cómo la mejor atención trabaja juntas y ahora los tipos de procesos de percepción visual porque hay algo interesante que pasa hay dos tipos principales que son los procesos ascendentes y descendentes que en español es súper difícil de pronunciar lo va a tener que decir varias veces lo va a decir mal me vais a perdonar y los ascendentes responden a la simple pregunta que estoy viendo y son porque otra vez me niego a los esfuerzos no requiere ningún tipo de esfuerzo de atención de memoria o de y esto es en uno de los fenómenos perceptivos ascendentes que si veo esto ha pasado otra vez lo que quería decir que es lo digo ahora que es el principio de la proximidad o sea en la primera que era esta es todas estas estas como se llaman círculos aunque ser rojos todos iguales pero no parecen pertenecer a un grupo parecen todos que están que van a su lado pero si los vemos así ya parece que quieren que pertenecen al mismo grupo y esto es un principio gestal que se llama el principio de la proximidad es muy sencillo los elementos colocados cerca uno de los otros son percibidos como parte del mismo grupo y parece algo lógico pero cuántas veces vemos webs que pasan de ello por completo y las cosas están en todas partes por ejemplo esto página súper chula muy bonita por muchas razones pero el hecho de que el menú esté en todas partes te pierdes porque porque no no encuentras no te parece que estas palabras pertenezcan al mismo grupo de significados y haces algo así por lo menos sabes que son grupos que te dan sentido no es es fácil que esto que tengan una función parecida entonces otro punto clave es de asegurar asegurarse que los elementos que pertenecen a un mismo grupo se coloquen muy cerca o cerca muy a lo mejor no y a ver y hay otro fenómeno perceptivo astendente que pasa sin que nos enteramos de no nos enteramos de ello que es esto si vemos elementos que tienen varias cosas iguales que se van en la misma dirección y tal también los agrupamos por ejemplo las flechas rojas no sabemos bien qué es quiere decir pero algo diferente de las negras porque porque tienen características diferentes entonces parecidas entre ellas pero diferentes entre los grupos entonces esto es principio de la semejanza según el cual nuestro cerebro agrupa cosas que tienen alguna propiedad visual común entonces otro punto clave es que los elementos de la yo hay que realizan una función similar deben compartir una o más características visuales pero que es por ejemplo aquí pero aquí es que es casi que no hay bastante diferenteación entonces estos principios funcionan de de ambos lados o sea que si hacerlos parecidos pero también no demasiado parecidos sabes y cuando cuando tienes dudas de cómo hacerlo funcionar hacer funcionar estos dos principios de una manera que funciona visualmente mirar a las páginas de los periódicos porque solucionan solucionan un montón de problemas enormes con cantidades de contenidos increíbles yo es lo que hago cuando me quiero recordar de cómo hacerlo bien me voy a buscar al gardiano a otros periódicos porque lo hacen súper súper bien otro fenómeno perceptivo astendente es esto o sea que cuando pasa algo súper importante tenemos que fijarnos en el detalle más o sea que si vemos un león nos vamos o sea que y esto se llama la organización figura fondo elemento más importante de una escena aparece por delante de todo lo demás por ejemplo aquí el cliente pensaba que la foto gigapixel es más importante de la experiencia de usuario que no ve nada en la navegación y está hecho así pero tendría que estar hecho así por ejemplo aquí ves que es que o sea tienes que decidir quieres texto o quieres imagen porque si quieres porque aquí no se ve nada de los ninguno de los dos entonces punto clave 6 las partes más importantes de la interfaz de usuario deben destacarse claramente sobre el fondo y ahora los descendentes que ocurren pre atención pero al contrario de los de antes utilizan cosas que ya sabemos para interpretar la información sensorial y la pregunta es esto es algo que he visto antes o no y es lo que porque las cosas que vemos cogen forma a partir de lo que ya sabemos y son más sofisticados y sí que utilizan la atención y la memoria al contrario de los los que hemos visto hasta ahora porque los que conocemos condiciona mucho nuestra interpretación de lo que vemos aquí tenemos la foto del del perro otra vez y es que sabemos que no es un gato y cuando vemos el gato sabemos que no es un perro y estos entonces hay varios elementos como la memoria el contexto de la cultura que juegan un papel muy importante en esto en estos procesos porque por ejemplo otro fenómeno de descendente es esto yo yo no veo o sea yo veo una cara así y me encantan son las los enchufes americanos que son así o el el pulpo racho que que quiere pelearse y me encanta y eso es un fenómeno perceptivo de descendente el principio de la familiaridad que convierte formas en objetos completo y si completo y significativos esto es un ejemplo de cómo se puede utilizar en el en el diseño y esto es un ejemplo de una web que no hace esto o sea que hace que es una web súper chula que hace un montón de cosas que no son familiares utilizando formas que o sea que te te haces scroll normal y te y te pasa de todo se va en diagonal o sea que te pierdes por completo y te mareas te mareas completamente entonces punto clave 7 es que la familiaridad es muy importante hay que colocar los elementos de la yo hay en sitios familiares y las tendencias visuales inesperadas y súper chulas suele ser suelen ser mala idea o sea que no ayudan a nadie otro fenómeno de descendentes no nos hace falta aquí que está en el medio de estas están en medio un triángulo no ahora aquí vemos para aquí escucha sin ver hay una imagen que no está completa pero se ve bien que hay un triángulo blanco que forma un triángulo y aquí lo tenemos y este principio se llama de la cosificación porque tendemos a rellenar los huecos o las partes que faltan y estos son logos súper famosos leyendarios que utilizan explotan este concepto este aquí también hay otro y por ejemplo en el diseño normal es que aparte de hecho que no se llama isabel se llama se llama elisabeth pero elisabeth es otro nombre pero no pasa nada y aquí se ve muy mal pero lo que quería decir es que hay muchas líneas que no son completas pero no nos hace falta la línea completa porque si no si haces la línea completa es que le das demasiado que demasiado trabajo al cerebro otra vez entonces punto clave 8 solo falta uno es que la mente de los usuarios puede llenar los vacíos el espacio blanco es tu mejor amigo cuando diseñas y menos puede ser mucho más a ver otro fenómeno extendente hemos vuelto a la imagen de antes que son tres círculos incompletos que ve que se ve aquí el coco o sea que pacman que también lo reconoces si eres de una cierta generación y no eres mi madre porque para mi madre pacman no sabe qué es entonces no habría visto pacman en esa imagen entonces demostración de cómo la cultura quiere decir mucho aquí que veis que es pato pato mano para los patos y los conejos es que toda respuesta es la correcta no quiere no y esto es lo que pasa aquí o sea que puedes ver pdx y luego te fijas que hay una flecha entonces son es otro principio gestal de la multistabilidad cuando una imagen ambigua tiene dos interpretaciones y aquí que pasa aquí que otra cosa que cuando los de cuando los clientes no te hacen caso que esto es realidad es un enlace pero no hay nada que me diga que es un enlace parece un encabezado y ya está y eso no está bien si siempre hay que aclarar lo que hacen punto grave 9 asegurarse que los elementos de la ui puedan tener sólo una interpretación hay que evitar ambigüidades visuales porque al final si no si haces cosas así porque te gusta más es simplemente tu vanidad y no la experiencia de usuario que has privado en conclusión cuánto mayor es la carga cognitiva más difícil es procesar la información eso es todo o sea todos podía simplemente deciros esto y ya estaba la charla o sea que a ver entonces miramos a los mecanismos básicos de percepción cómo la mayor atención trabajan juntas tipos de procesos de percepción visual puntos claves para un mejor diseño web y hemos llegado a la única regla que nos va a servir de verdad que si nos quedamos con esto ya lo tenemos todos a que no falta más nada más no me hagas pensar muchas gracias tenía tiempo y quería decir que lo de no me hagas pensar no es mío es un libro que tenía que salir ahí pero no ha salido de de steve crook k r ug que el título es don't make me think y si leís si yo se interesa leer un libro sobre cómo diseñar cómo hacerlo todo en la web eso es muchas gracias así preguntas o sea que ahora sería es que cuando has hablado de lo de los hay ya me está pasando lo que hemos hablado en las comidas en tema imágenes y tema links de imágenes vale es que muchas veces hemos tenido que poner imágenes en los diseños no y eso y esas imágenes no son clíqueables y sin embargo cuando hace este de usabilidad o los tres de tal todo el mundo cliquea en la imagen entonces qué podemos hacer para evitar que la gente no cliquen las imágenes cliquen en el puñetero botón bueno si el si el botón es claramente un botón y es claramente interactivo yo no tengo respuesta o sea que a veces no no hay manera o sea que también es eso es lo que decía moratinos antes que dice a que a veces ves que la gente en las mapas de calor ves que la gente va en un sitio donde no te esperabas y podemos simplemente intentar dirigirlos donde queremos nosotros los o sea el punto también uno de los puntos de todo esto que quería decir es que podemos hacer todo podemos intentar dirigir la gente o sea que podemos intentar hacerlo pero en mi opinión no se puede es increíble me acuerdo de una vez que una amiga que nunca había utilizado un ordenador a por eso estamos en los 90 y que le dije estaba intentando hacer algo y le dije tienes el teclado a por f y ella os acordáis que había la la pequeña manzana en la y ella pero no era parte del teclado era era la marca en la en el teclado y ella yo que yo no le puede decir que no porque dice en realidad eso puede ser puede ser un botón manzana entonces qué le vamos a hacer hacer que el botón sea parezca lo más interactivo posible si hace falta subrayar subraya que le vamos a hacer una pregunta te has planteado dar esta ponencia con un examen al final a cualquier responsable comunicación de la de gt o cualquier ministerio de españa y que le pongan el ssl también las webs que no puedes no puedes ir a las webs el bueno a ver si lo que quería hacer lo que me habría gustado muchísimo hacer pero es que todo el mundo iba iba muy obviado es hacer otra cosa que quería que llegar a alguien aquí ayudándome a lo del micro que y que se agacharan y luego saliera otra persona y seguro que nadie se iba a enterar de ellos a seguro seguro seguro pero bueno perdona la tuya era otra pregunta y no te ha contestado bueno es que no tengo respuesta verdad se estaría muy bien sí me encantaría a ver hacer la accesible primero porque la dashboard la bueno es que si tú utilizas una herramienta para controlar el contraste cuando estás dentro de work pre-editando te da mil errores de contraste pero mil no verdad sí eso sí sí sí es verdad pero tú que crees en que sé de qué de qué hablas en para mí a muchas veces errores de contraste yo siempre tengo que hacerlo más grande pero depende también de tú tú hablas de la de workers como herramienta es que eso sería más interesante preguntárselo a alguien como dicen que saben más de accesibilidad que yo y que y que para mí sería eso yo lo que noto personalmente mucho es lo del contraste del contraste de color para