1si1/2020 Leyes Gestalt an el diseio da interfaces digtales- Interactive Leyes Gestalt en el disefio de interfaces digitales Cémo podemos aplicarlas para conseguir simplicidad y claridad en nuestros disefios Josep Blanco May 17, 2016 - 6 min read G $TALT I CONTINUATION Principios de la Percepcién Visual | Repositorio Universidad de Porta Los disefiadores saben de la gran importancia que tienen aspectos de disefio como el uso de margenes, la distancia entre los diferentes elementos de la pagina, el contraste entre las figuras y el fondo, la aplicacién de diferentes patrones graficos de disefio para diferenciar elementos, etc. Me atreveria a decir que aplican estos recursos sobre todo basandose en su experiencia, de una manera instintiva, y con el objetivo de conseguir un disefio claro. En el fondo, lo que estan aplicando de una manera mas 0 menos consciente son algunas de las Leyes Gestalt. En este post vamos a reflexionar sobre c6mo podemos aplicar las Leyes Gestalt para conseguir un disefio claro. Estas leyes, que a nivel general explican como debe ser la figura, el fondo y la buena forma, fueron descritas a principios del siglo XX por la corriente de la psicologia Gestalt. Esta corriente defiende que la percepcidn se rige por unas leyes que se basan en que la interpretacidn y significacin de la obra (pagina web, pintura, misica...) depende de la relaci6n que se establece entre los elementos que la forman, relacién condicionada por los atributos (graficos, auditivos, tactiles...) de cada elemento individual. hitps:ologinteractus.comeyes-gestal-en-e-dlseho-de-iterfaces-dgtales-168682c1475t wr‘5/2020 Leyes Gestalt on a iso de intartaces gales - Intracius éPero por qué un disefio claro? éAlguna vez te has preguntado qué es lo primero que realizamos al fijar la atenci6n en una imagen? El psicdlogo Rudolph Arnheim nos lo explica: Lo que percibimos en primera instancia en una imagen es su esquema organizativo global, el conjunto, donde residen una serie de fuerzas que determinan el equilibrio y las zonas de atraccion maxima. Lo que necesitamos como espectadores 0 usuarios es claridad, porque sino se dificulta este proceso de percepcién del esquema global, que debe durar fracciones de segundo, y es imprescindible para que podamos plantearnos abjetivos en base a Jo que se nos presenta delante. ¢Por qué percibimos la siguiente pagina web desconcertante y fea? Porque cuesta horrores percibir un esquema organizativo global. Como disefiadores, cuando aplicamos las Leyes Gestalt, éstas nos ayudan a construir un esquema organizativo global. Itps:olog intracius.comeyes-gestaten--dsefo-de-inerfaces-dgtles-188082c1475¢ an1si1/2020 Leyes Gestalt an el diseio da interfaces digtales- Interactive Aplicando las Leyes Gestalt 1. Ley de la proximidad La ley de proximidad nos dice que los elementos préximos tendemos a percibirlos como una unidad. Por lo tanto, al componer una pagina, debemos agrupar los elementos que tienen relacién entre ellos, y separarlos del resto como indica la siguiente figura: SEE En el siguiente ejemplo, podemos ver que no se aplica la ley de la distancia, obteniendo un disefio abigarrado y tosco, y cuesta mas tiempo de lo normal entender el esquema en el que se basa la composicién de la pagina: Prronae Oi ccn Drisirnerin @, hitps:ologinteractus.comeyes-gestal-en-e-dleho-de-iterfaces-dgtales-168682c14751 31si1/2020 Leyes Gestalt an el diseio da interfaces digtales- Interactive 2. Ley de la semejanza Esta ley, como la anterior, nos permitiré relacionar los elementos que deben percibirse como una unidad, utilizando las diferencias de atributos graficos, En la siguiente figura podemos observar como sin utilizar la ley de proximidad podemos igualmente relacionar elementos aplicando los mimos atributos a aquellos que deseamos agrupar. =e En el siguiente ejemplo -web de eDreams de bastantes afios atras- vemos como se aplica esta ley de manera correcta y consistente, aunque al no usarse la ley de proximidad para agrupar elementos el resultado es algo abigarrado y pesado. Fijémonos que los tres bloques de la parte inferior se perciben como un conjunto: tres bloques que tienen “algo” en comin, en este caso que pertenecen a listas de “Ofertas”. Lo mismo sucede con los banners publicitarios, que tienen un tratamiento muy parecido, aunque con la aplicacion de la ley a la inversa, que consigue que el elemento principal, el buscador, destaque por encima de los demas, Ore Ue) Cn VCs cee eed nt) DE PLAZAS hitps:ologinteractus.comeyes-gestal-en-e-dlseho-de-iterfaces-dgtales-168682c1475t an1si1/2020 oe a sea 5 Se Monee FON ne aa Mose ta ae Lo oom Be se stews | 3. Ley del cierre Es evidente que contorneando unos elementos con una linea se percibiran agrupados, tal como esta ley indica. De todas formas, me gustaria aprovechar para aconsejar que en caso de que deseemos utilizar la ley del cierre, no lo hagamos utilizando lineas, porque como resultado obtendremos un disefio muy estatico y sobrecargado. En su lugar podemos utilizar figuras de fondo coloreado, de modo que el contorno de la figura realizara la misma funcién que las lineas, tal como se ilustra en la siguiente figura: pO a — a a7 4. Ley de continuidad o destino comun Esta ley nos dice que los elementos que se sittian siguiendo algtin tipo de alineacin, se perciben como un conjunto. Como ejemplo, en las siguientes figuras podemos observar como el ritmo de lectura 0 visualizacién de los elementos puede cambiar segtin cémo se alineen los elementos: hitps:ologinteractus.comeyes-gestal-en-e-dlseho-de-iterfaces-dgtales-168682c1475t 371si1/2020 Leyes Gestalt en el disefio de interfaces digtales- Interactius 2 s == y = z ’ Esta ley se aplica en multitud de casos, como por ejemplo en la alineacion de textos, elementos de formularios y etiquetas, etc. Incluso vale la pena destacar que también podemos utilizarla como ley de cierre en elementos alineados, como se puede observar en las siguientes figuras: en la primera se utiliza el cierre mediante lineas, mientras la segunda versién muestra slo el texto alineado, cumpliendo la funcién de elemento de cierre: 5} Ofertas do vuolos ‘Origen - Destino i Barcelo = Madris ze Barcelona - Madrid Magn = Barcaiona ze Maddd - Barcelona ve Madris = Paris ne Barcolora - Soviia 10€ Madris - Amsterdam aoe Sovila - Barcelona 7 Sovlla - Barcelona 20€ Sacer Meo 7 ‘Barcelona = Paris ae Barcelona - Palma de Mallorca 9€ Ofertas desde u cdaa ofertas Cteras desde Cr desde 5. Ley del contraste Sino respetamos un contraste minimo entre figura y fondo, ésta no se percibira con la suficiente claridad. Esta ley parece bastante evidente, pero atin asi no resulta complicado encontrar paginas web en las que el texto no tiene la suficiente legibilidadpor culpa de un contraste insuficiente entre ésta y el fondo, tal como sucede en el siguiente ejemplo: Pee coerce a barcelona hitps:ologinteractus.comeyes-gestal-en-e-dlseo-de-iterfaces-dgtales-168682c1475t er1si1/2020 6. Ley de la experiencia Esta ley describe, como no, la importancia de tener en cuenta la experiencia previa del usuario, La percepci6n no depende s6lo de los estimulos que nos Iegan al sistema nervioso central, sino también del conocimiento previo que tenemos sobre Jos conceptos relacionados con los nuevos estimulos. De esta forma las leyes Gestalt también nos recuerdan que las interfaces deben tener una adaptaci6n cognitiva y cultural segan su publico objetivo. Ademas, debén contemplar un minimo de flexibilidad para adaptarse a diferentes niveles de experiencia de los usuarios, teniendo en cuenta los convencionalismos preestablecidos por los propios usuarios. Leyes Gestalt para mejorar el criterio en el disefio Otras leyes Gestalt como la de pgegnancia o enmascaramiento nos ayudan a entender los procesos psicoldgicos de la percepcién y procesamiento de la informaci6n, pero no son aplicables directamente en el disefio visual de interfaces desde el punto de vista grafico. En conclusién, las leyes Gestalt representan una ayuda para mejorar los criterios de evaluacién de disefios, sobre todo para disefiadores menos experimentados, como también para aquellas personas que deban, por ejemplo, coordinar y gestionar equipos multidisciplinares en los que se encuentren profesionales del disefio. Para aquellos mas experimentados, no deja de constituir una ayuda para distanciarse un poco del disefio propio y analizarlo con perspectiva, de manera objetiva. Web Design hitps:ologinteractus.comeyes-gestal-en-e-dleho-de-iterfaces-dgtales-168682c14751 77