 Bueno, estamos llegando ao final de la jornada e vamos a hacer un cierre de lujo. Tenemos con nosotros a Pizcianeri, e ella, pues un hombre se ve que non es de Soria, es italiana, creo que de La Toscana, puede ser, de La Toscana. Pero bueno, vive en Valencia durante dos años, se habla español perfectamente, como vais a comprobar. Más o menos. Perfectamente. Bueno, lo importante que hay que decir de Pizcianeri, es que ella es consultora Wordpress, es diseñadora gráfica, directora creativa, fotógrafa, por más de dos décadas. Eu creo que algo vamos a aprender de ella, e seguro bastante. Eu estou moi emocionado no solo de presentarla, sino de tenerla aquí, porque es un... He descubierto que es una gran persona, a parte de una gran profesional, e tenemos un lujo de tenerla aquí con nosotros e contándonos un poquitín, un poquitín de lo que ella sabe. Vale, logo os cuento. Quando termine logo al final os contarei algún detalhe de fin de fiesta. No momento de verdade, un aplauso e disfrutar de Pizcian. Gracias. Gracias. Quisiera decir solamente que sí, es verdad, un pouco abro español, pero nunca he trabajado en español en mi vida porque vengo de Londres. O sea, yo he vivido la mayoría, bueno, toda mi vida, mi carrera de trabajo en Londres. Así que, a ver, es una de las primeras veces que hablo de cosas de trabajo en español, a ver que pasa. Entonces, crear un UI rompedora, se dice UI, por exemplo, UI está bien, vale. Con os principios básicos de gestalt aplicados ao diseño web. Parece algo bastante misterioso, no, con de decirlo así. En realidad, vamos a ver que se trata de principios muy sencillos e vamos a ver de que se va. A ver, empezamos con esta página. Esta página, por lo menos, en Inglaterra se conoce muy bien, es legendaria. Está ganadora de todos os rankings de las páginas peores en el mundo. E lo tiene todo, o sea, tiene el fondo psiquedélico, tiene os conseñantes degradados, tiene las sombras, tiene música, tiene animaciones, o sea, lo tiene todo, no le falta absolutamente nada. E de por un lado, a mí me parece que sí que es un UI rompedora porque este tío, esto no es de broma, este tío es un negocio que existe. Eu tarde un pouco a entender que es que me vende, pero es un negocio que existe súper exitoso, también. E, entonces, o sea, es una bofetada en la cara de todos os snobs del diseño, pero para mí esta UI no funciona porque, se deberíais decir unha razón, darme só unha razón porque esta UI, esta página no funciona porque, unha razón. El fondo unha razón, otras razones? No está claro, que es que no está claro? Lo que vende que es bastante fundamental? Claro. E luego, outro más? A mí, también, porque esta es estática, pero a versión real pasa de todo, o sea, que es. E, pero, sí, yo, para dar una razón que inclui, pueda incluir todas las razones, se puede decir que esta página está hecha de detalles, se ven solamente los detalles, no logramos ver el completo, que seria, por ejemplo, que es que vende, no? E, entonces, hay simplemente un montón de detalles que luchan para nuestra atención. E, entonces, nuestro cérebro va en sobrecarga cognitiva e non nos gusta nada, no entendemos o que pasa. Tambien, outra cosa que pasa, es que yo me encuentro tratando de interpretar desesperadamente que, se hay algo que me pueda guiar, por ejemplo, me veo los títulos rosas e digo, ah, dos coches españoles con los títulos rosas, son los coches españoles, pero no, porque hay un coche italiano que tiene dos títulos rosa. Entonces, no, eso veo que mi cérebro trata de interpretar, pero no consigo interpretar. Así que, sin ir demasado lejos con el análisis de esta página, eu diría que para mi esta UI no funciona, porque no, por lo de los detalles, porque los detalles son todo o que se ve. E, entonces, nuestro cérebro tiene que trabajar demasiado para llegar a alguna conclusión. Pero, a verdade, es que eu le llevo mucha admiración, porque eu nunca me atrevería a hacer algo así de ingenioso, non? Este es un genio, un genio del mal, pero es un genio, porque estáp, el tío hace un montón, o sea, le lleva un negocio súper bueno, entonces, como se dice, me quito os sombreros, puede decir, se dice, no sé. A ver, entonces, como nós somos genios del mal, nosotros nos saldría mucho máz fácil crear un UI que lleve, que lleve nuestros usuarios en un viaje sencillo e simples, e sin, como se dice, bamps. E, por eso, para mí, un UI rompedora é un UI que hace que os usuarios não pensen. E é aquí que os princípios de Gestalt se hacen nossos aliados. A ver, por exemplo, aqui que se ve? Perro da alma tá, eu creo que está como fateando em um bosque sombreado porque soy poeta. E, pero analizando os detalles, isto poderia parecer que é uma aglomeración de manchas negras e nos entiende o que é. Pero, en realidad, emerge o contorno, a figura máz importante, emerge dos detalles. E isto é confirmación do hecho que o nosso cérebro quer sempre ver o completo antes e os detalles luego. Isto é o que o cérebro quer hacer porque o que o nosso cérebro nos pide sempre é de trabajar lo menos posible. Por isso, um UI rompedora é um UI que hace trabajar os usuarios lo menos posible. E é, os princípios de Gestalt descriven isto, descriven as várias tácticas e estratégias que o nosso cérebro utiliza para hacer o mínimo esfuerzo posible para comprender o mundo visual delante dos nossos ojos. Então, os princípios de Gestalt descriven como o ojo humano percebe os elementos visuales. La psicología Gestalt foi, se empezó a desarrollar en Alemania a princípios de siglo XX. Sin mirar a las notas é imposible que eu me acuerde os nombres dos tres psicólogos principales, pero no hablo alemán, así que no estarán en las notas e las queréis. E todo empezó porque as teorías no permitían de explicar uns fenómenos visuales que estos psicólogos estaban empezando a notar. Então, han tenido sentido a necesidad de explicar uns fenómenos de outra manera e sobre todo como o ojo humano percebe, percebe a parte completa e não os detalhes. Então, isto está a base de todos os princípios que vamos analizar, tienden todo isto como base. Como base. E o princípio máis que se destaca máis da psicología Gestalt é que o todo é diferente da suma das partes. É decir, que os humanos percebimos uma imagem completa de forma diferente de como percebimos os detalhes. E sobre todo somos capazes de identificar objetos enteros imediatamente e sin un esforzo consciente. É a meta final sempre é de fazer o menos esforzo possível. E sem minhas notas me sale mal, pero creo que isto é o mais importante, é isto. E a coisa máis interesante é que a teoria de diseño occidental se base a realidade em Gestalt, ou seja, que a maioria dos princípios de diseño gráfico surgen da teoria Gestalt quando nos surgen da teoria da historia del arte ou da arte de práctico occidental. E tantos de estos princípios se vosotros son diseñadores ou inclusive desarrolladores ou se hacéis páginas utilizáis estos princípios sem saber que os estáis utilizando de, bueno, todos os dias. Los que vamos saber son los principales que están como base da teoria Gestalt e os que, en mi opinión son máis útiles e se utilizan máis todos os dias. A ver, aquí tenemos o perro outra vez e este princípio se chama o princípio da emergencia e ocurre prácticamente descríbe como unha imagen compleja é formada de muchos detalles sencillos pero nós percibimos o contorno antes de percibir os detalles. Nos fijamos nos detalles só se é importante por exemplo, quando vemos un coche na calle vemos un coche, não vemos o volante, as ruedas as puertas e tal ou unha cara, também vemos a cara nos fijamos nos detalles de la cara. A enseñanza máis importante para o diseño web do princípio da emergencia é que a apariencia general dos elementos da UI sempre deve ser máis importante que os detalles. É decir que en términos prácticos por exemplo, diseñamos um botón de no hacerlo, de hacerlo máis sentido posible porque nos sirve de nada que sea super chulo e super bonito se os usuarios se distravan con os detalles e pierdem tempo con ello, que parece obvio pero no siempre lo é. Este, aquí a ver que bicho é este? Un pato nejo Queme o pato primeiro pato e conejo, primeiro máis patos Eu doo o pato Eu doo o pato antes e o conejo me tenho que fijar porque me han dicho que hay también un conejo Este é un fenómeno mo interesante ou seja, que se llama de la multistabilidad e según este princípio há imagenes que pueden tener máis de una interpretación pero nós só podemos ver una interpretación a la vez agora todos podemos ver las dos, pero juntas no, e também não há ningún tipo de manera de poder prever o que se eu veo o pato antes o conejo ou tu o conejo e eu o pato ou seja, não há maneira e isto é algo que é melhor evitar porque se há doble interpretación empiezan problemas, por exemplo esta é unha página de unha agencia super creativa que hace trabalhos maravillosos pero se han pasado no momento que han criado sua própria web porque han querido ser demasiado creativos e isto é algo que os diseñadores temos que puxar o cuidado, especialmente se vienes do diseño de antigo estilo, de impressión como? gráfico, sí e pasas a web e é completamente outra cosa, então eu cada vez que quero hacer algo con animaciones porque é chulo porque posso luzir minhas habilidades e minha imaginación é que tenho que cortar e dizer isto é útil ao usuario porque se não é útil ao usuario hai que evitar e isto é, por exemplo, aqui esta página dá miedo casi como la de Ling porque com mover o ratón pasan un montón de coisas e hai una doble interpretación que non se resuelve não serve de nada ao usuario a enseñanza principal para o diseño web desde o princípio de multistabilidade é, outra vez, no les hagas pensar evita ambigüedad e sobrecarga de información em tu UI e testea a la usabilidade que querio decir esto, que a veces en términos sentíos porque não creo que ninguno de nós será algo como o que acabamos de ver pero en términos sentíos a veces, quando estamos demasiado cercanos de un diseño porque hemos pasado meses, trajando en ello não somos capazes de ver se hai a lo mejor uns detalhes que se podrian interpretar en máz de una maneira por exemplo, un botón que se parece a un encabezado o algo así então para evitar ambigüedad hai que testear la usabilidade e se não hai presupuesto para ello, então se utiliza amigos, companeros que usen tu web e se aseguren de que não hai doble interpretaciones aqui em la figura por exemplo que se ve bien o triángulo e apesar de que no está dibujado e igual aquí vemos a esfera e vemos o monstro de Loch Ness e aí a serpiente apesar de que no estão completos no estão dibujados este principio se llama de a reificación se refiere a la habilidade que nossa mente tiene a completar una imagen incompleta apesar de a falta de información completa então isto quer dizer que a veces não haces falta evitamos sobrecarga dando menos información hai que dar bastante información pero não haces falta dar toda a información e outra cosa interessante e segurá que ve outra cosa aparte do triángulo que seno eu veo Pac-Man se ve en mi edad porque eu veo Pac-Man então aqui temos que gracias vex, se ve demasiado tempo en Inglaterra pero aqui entonces é um exemplo de reificación e multistabilidade nos principios juntos e isto é um exemplo do uso da reficación estes são círculos que não são completos mas os vemos como completos a enseñancia principal para o diseño web é que a mente do usuario é capaz de rellenar os suecos então é importante utilizar o espaço como uma herramienta de diseño não ter medo de ter espaço porque en realidad le estás fazendo um favor aqui há uma cara que tem que parece diferente em todas as imagens mas menos de ter uma minusfalia que existe não sei como se chama en español que há gente que não é capaz de reconocer as caras mas todos vemos sabemos quem é porque é famoso o hemos visto mil vezes então não nos dá igual que lleve de maneira ou outra ou que haya envejecido que lleve gáfase e tal este principio se chama de invariabilidade e se refiere ao eixo de que os seres humanos reconhecemos os objetos a pesar de variaciones deformaciones en escala deformaciones elásticas de perspectiva e tal e é útil e também é a maneira que destacamos dos bots porque por agora os bots não conseguem e isto é um exemplo típico de utilizo no diseño web mas sabemos que o CAPTCHA está super mal por accesibilidade e tal mas isto é um exemplo e é o slide de enseñancia principal para o diseño web que é a ventaja de seres humanos sobre os robots por agora e se utilizan os CAPTCHA agora os princípios que saen má útiles quando os diseñamos para o web estos que hemos visto son como os básicos e estos son los que se refiene de maneira máis específica ao diseño web que se utiliza máis frecuente aqui vemos que esta habilidade de reconocer a parte máis importante de una imagem nos vimos foi máis útil nos antepasados quando havia un depredador que estava a punto de comérselos e isto se llama a reacción entre figura fondo e se refiere ao lecho de que sabemos enfocar una parte de una escena ignorando os detalhes quando os detalhes nos hacen falta e o resto se hace borroso e é algo que se utiliza muchísimo en fotografía filtros de instagram e as unidades de campo para que se destaque a parte principal de la escena e aqui vemos que un ejemplo en diseño web é quando tenemos que hacer que a parte máis importante se destaque aqui quando yo visito esta página não me queda duda de que a parte máis importante é o formulario e é o formulario não me hace pensar me resulta máis fácil a enseñanza é assegurarse que as partes máis importantes de tu UI destaque claramente del fondo outra vez algo que poderia parecer obvio pero non siempre lo és aqui estamos llegando aos principios que se llaman de agrupación isto é o princípio de la semejanza e se refiere ao lecho de que nuestra mente agrupa a partir dos centímetros similares em una entidad então as flechas rosas estão en un grupo e as blancas las vemos que hacen parte de outro grupo que posiblemente va a tener outra función e outro significado também e por exemplo esta agencia ha puesto todos os logotipos de sus clientes con el mismo tamaño e o mesmo color porque de no haver hecho isto se logra o efeito link que hai un montón de detalles e não entiendes nada aqui nuestra mente percebe que este é um grupo que tem algo que os pone todos juntos aqui não temos que pensar para entender isto a enseñanza para o diseño web é de agrupar os elementos de UI aplicandoles atributos visuales semejantes para no hacer pensar a nuestros usuarios aqui vemos como a mente agrupa os elementos que estén próximos e se llama o principio de la proximidad e os objetos adjuntos tienen a ser vistos como una unidade e isto lo vemos em muchas partes das nossas web mas seguramente na navegación me queda muy claro que os elementos da navegación hacen parte de um grupo e o logo hace parte de outro grupo que quer o logotipo e é interesante ver aqui como vemos tambien o principio da semejanza porque a página actual é de outro color então fazendo a distinta estou aplicando tambien em principio da semejanza me disse que hay algo distinto para o diseño web e o principio de proximidad nos ensenha que temos que assegurar que os elementos do mesmo grupo sean próximos entre si e também lejanos de que não tiene nada que ver con ellos outra vez algo muy obvio mas para o web vemos que non sempre é assim aqui este principio se llama da región comun e según este principio os elementos que estan dentro da mesma región de espacio se agrupan de maneira muy clara porque seno estos puntos não tendrian nada que ver no outro pero claro que porque estan dentro del marco blanco por ejemplo utilizamos en un monton este post de facebook que é uma das maneiras porque é um monton de información con ele utilizar espacios delimitados claramente marcados a información, o viaje do usuario se hace muito mais fácil então criar é de fácil utilización agrupando os elementos entre áreas claramente marcadas o viaje vai ser super corto em vez de ter que ir a um monton de sítios este é o princípio segundo este princípio este osopanda é completo muito claramente completo apesar de de que as formas não são completas este é o princípio de cierre e então o ojomano cierre as formas aun quando falta información completa é como parte do princípio que vimos antes e se utiliza muito em diseño gráfico típico mas também nas páginas web por exemplo en os periódicos aqui temos por exemplo as líneas entre as columnas ou os marcos de las categorías que não são completos e isto é super importante de utilizar para evitar a sobrecarga de información por exemplo en o periódico que tem um monton de distintos elementos de partes de información hai que utilizar o espacio blanco e o diseño minimalista então é algo que os clientes podais defender estas elecciones por boas prazones este é o princípio de continuidade o ojo percibe as líneas em um flujo continuativo aunque as líneas não estão completas como neste caso que são puntos por exemplo en google maps percibimos a línea continuativa mas não é continuativa e aun que google maps má mal porque não veo nada porque me las ponen sobre o nome da calle eu aí não veo nada e o meu ponto é e do mesmo color que os pontos da linha então não entendo nada então podemos utilizar os princípios de gestal para crear una llave verdaderamente rompedora se sempre tenemos a la mente esta necesidad de hacer que os usuarios piensem lo menos posible então todos estos princípios espero que os hayan enseñado como se pode hacer esto de una maneira consciente estou segura de que muchos de vosotros ya aplican estos princípios porque sí porque lo hacemos pero haciéndolo de una maneira consciente lo va resultar muito máis e também para convencer os clientes por exemplo quando te dicen el logotipo lo quero máis grande e dices no, non se puede hacer porque está demasiado cerca de outro elemento e va a despistar os usuarios então eu creo que pode ser un arma máis potente e se hai unha enseñanza para o diseño web é de no hacerros pensar con muchísimas gracias a Steve Krug é o autor do livro máis famoso que creo que a maioria de nosotros habrá leído vale, ya está mi tiempo se ha acabado e gracias bueno, muchas gracias Pizia tenemos un detalle para ti de la organización no podemos cumprimentar con todo o que nos has dado a la organización por haber venido que con nosotros e agora, va ver un momento de preguntas joder, estou como na tele que tal el bicho, no te entiendes a ti mismo entre cojeros preguntas e formaros en cuando terminemos aquí pasamos todos ao traca que va a ver unha mesa redonda despedida e logo o que nos va estar esperando por aí vale bueno, preguntas para Pizia hola, muchas gracias pues has hablado de muchas cosas, todas ellas eran estáticas agora te quiero preguntar sobre unha imagen dinámica ou un efeito para la X en una web hay situación o sea aí entramos tambien en el campo de la accesibilidad que es outra cosa que tenemos que tener en cuenta todo el rato quando diseñamos cuando diseñamos cualquier cosa e las respuestas que en genera si no estamos seguros evitar a mi me encanta el efeito para la X porque sí pero aí situaciones en que puede ayudar la narración que tiene un sentido entonces lo resolvemos pero tiene que tener sentido porque yo no de accesibilidad no sé mucho pero me interesa mucho e siempre controlo que funcione o no entonces no te puedo dar una respuesta que sea siempre no hay veces que se puede utilizar pero sempre con mucho cuidado la verdad es que yo me tengo que cortar muchas veces porque me encantaria pero no tenemos por aqui outra pregunta bueno enhorabona por la ponencia podrias ilustrar aunque sea muy brevemente qual es tu proceso de diseño de creación de una web o sea por donde plantas la semilla yo es muy buena pregunta yo siempre empiezo para mi la investigación es yo paso mucho tiempo con los clientes haciéndoles un montón de preguntas e solo luego solamente luego empiezo a diseñar luego lo del diseño para mi ha cambiado muchísimo pasando del diseño gráfico puro al web por estas cosas por accesibilidad por la usabilidad por el hecho de que tiene unha función completamente distinta do que haci antes que era imagen corporativa e edit libros un montón de libros pero el proceso siempre tiene que ser para mi es máx que la mitad son preguntas a los clientes para averiguar quiénes son sus usuarios cuáles son sus necesidades cuáles son sus metas que quieren lograr e tal e luego cuando llego a eso depende de clientes que presupuesto hay porque cuando en los raros casos que al presupuesto siempre como se dice wireframes hacer el skeleton el diseño sin ningún tipo de imagen e luego con imágenes diseño muchísimo con el color por ejemplo porque me encanta en el web tienes que hacer un montón de testa ver que que la gente con problemas de no se consideren daltonismo que hay muchísimos tipos controlar todo esto