La Gestalt en el diseño web

Publicado el 27 ago, 2012 | 6 Comments

La Gestalt es una corriente de la psicología alemana que surgió a principio del s.XX. El significado general de la palabra Gestalt es “forma” aunque también quiere decir “estructura, conjunto, figura, creación,…“. No voy a contaros su historia, corrientes y todas las aplicaciones que tiene la Gestalt en la psicología, profesiones de ayuda o en el campo de las artes, solamente voy a centrarme en lo que al diseño general se refiere y por ende, al diseño web (también aplicables al diseño de apps u otras interfaces digitales).

“El todo es más que la suma de sus partes”

Ésta es la máxima de la Gestalt  que procede de los conceptos de holismo y sinergia (todas las propiedades de un sistema o estructura, no pueden ser completamente determinadas o explicadas por las partes que los componen por sí solas, sino que suponen un todo integrado y global, un efecto superior caracterizado por la acción conjunta de éstas).

De lo cual deriva en que:

“La percepción humana no es la suma de sus datos sensoriales, sino que pasa por un proceso de reestructuración que configura, a partir de esa información, una forma con muchos más datos”.

La Gestalt ha sistematizado esos procesos de reestructuración y ha formulado unas leyes que los explican. Éstas son algunas de las más conocidas:

(intentaré mostrar con ejemplos su funcionamiento)

Ley de cierre: 

De forma innata, nuestro cerebro tiende a completar formas incompletas o espacios vacíos.

Así, en esta web, nuestra mente cierra la forma rectangular con sólo ver las esquinas.

Ley de Cierre Ejemplo

 En esta otra, sudece lo mismo con las letras y las palabras. Al ser formas conocidas, no hace falta ver toda la forma para identificar cuales son cada una, nuestro cerebro la reconoce y la completa.

Ley de Cierre Ejemplo

 

Ley de figura/fondo: 

Tendemos a percibir ciertos elementos como figuras o como fondo. Cuando hay algún elemento sobre otro, uno es figura y otro es fondo.

En esta ocasión, los triángulos blancos que vemos sobre otro color hacen de figura.

Ley de Figura y Fondo Ejemplo

El sistema de pestañas es un claro ejemplo de figura y fondo.

Ley de pregnancia o equilibrio: 

Al visualizar muchos elementos, nuestra mente se fija en las figuras claramente visibles, asimétricas y armoniosas. Tendemos a simplificar lo que estamos viendo y a buscar o establecer un patrón visual pues así nos resulta más fácil y más rápido procesarlo.

Tener diferentes elementos con una misma estructura y organización, nos permite procesar más rápidamente un patrón. Encontrar el mismo elemento común en todos resulta mucho más fácil

En este ejemplo observamos como una forma asimétrica y diferente a las demás, ayuda a que nuestra mente se fije primeramente en esa.

Ley de proximidad: 

Es el principio de la organización perceptual. Nuestro cerebro agrupa los elementos por su proximidad entre ellos.

Las agrupaciones de los elementos  que se muestran en el menú lateral, nos hacen ver que tienen características diferentes unos grupos de otros.

Aquí, vemos varios links con el mismo aspecto pero agrupados de diferente forma para mostrar que aunque son parecidos, sus acciones no son las mismas.

Ley de simetría: 

Esta ley dice que procesamos mejor y más rapido las formas simétricas que las asimétricas.

El conjunto de elementos forma un triángulo, una de las formas simétricas que mejor percibimos, unificando todo en un mismo bloque.

En este caso, el contenido se divide en dos rectángulos visualmente iguales para que haya una simetría y un equilibrio en el conjunto.

 

Ley de similitud

Nuestra mente agrupa los elementos similares en una entidad. La semejanza depende de la forma, el tamaño, el color y otros aspectos visuales de los elementos.

Aquí vemos como agrupamos diferentes elementos con similitud en un único bloque y así diferenciamos unos bloques de otros.

 Nuestra mente divide el contenido en columnas, por las similitudes entre los elementos, aunque en realidad sean filas de artículos.

Todas estas leyes las vemos día a día en webs, apps, … pero las tenemos tan interiorizadas que no paramos a pensar en ellas, nuestro cerebro las procesa rápidamente y sin tener conciencia de ello. Seguramente, sin saberlo, las hemos aplicado a nuestros diseños por el simple hecho de que forman parte de nuestro conocimiento, aprendido en ocasiones de la observación de distintas webs, apps, interfaces, etc. y las las tenemos asimiladas.

Seguro que a partir de ahora, a través de su conocimiento sabréis diferenciarlas y os ayudarán de manera mas consciente y eficaz a trasladar vuestro mensaje a los usuarios.

6 Comentarios

  1. Diego
    17 marzo, 2013

    Excelentes ejemplos, agregaré esta página a la listas bibliográficas del trabajo que estoy realizando, es un deber visitar esta excelente guía.

    Contestar
    • UnTipoDigital
      27 marzo, 2013

      Me alegro de que te haya gustado, muchas gracias por la recomendación.

      Contestar
  2. Selene
    2 octubre, 2013

    Me sirvió bastante para un trabajo, muchas gracias por tu aporte. Saludos desde México.

    Contestar
    • UnTipoDigital
      4 octubre, 2013

      Me alegro de que te haya servido. Saludos ;)

      Contestar
  3. Cristina
    10 diciembre, 2014

    Gran explicación con muy buenos ejemplos. Me ha servido mucho para mis estudios, me ha venido como agua de Mayo, sobre todo por los ejemplos ! Una gran aportación =)

    Contestar
    • UnTipoDigital
      11 diciembre, 2014

      Gracias Cristina! Me alegro de que te haya servido!

      Contestar

Dejar un comentario