Página 1 de 13

Las leyes “Gestalt” GESTALT LAWS

Empecemos dando a entender que significa Gestalt. Es simplemente un

término alemán para definir patrón (en inglés: pattern). Claramente estas leyes fueron dadas por científicos alemanes, más preciso psicólogos (principalmente Max Westheimer, Kurt Koffka, y Wolfgang Kohler). Son importantes porque dan una clara descripción de varios fenómenos de percepción. Esto se puede aplicar en la informática de distintas maneras, por ejemplo para el diseño de interfaces, o para la presentación de gráficas. Además, uno de los usos más potentes, es poder presentar o encontrar información importante, dentro de un conjunto de datos, de manera más rápida, guiándose simplemente por la percepción que tiene el ser humano promedio.

¿Cuántas son?

También es importante decir que Gestalt comprende varios tópicos de la psicología humana, donde las leyes que enunciare a continuación son solamente para el agrupamiento de elementos gráficos. Varios papers científicos las denominan también “Principios Gestalt”.

Según este criterio enunciaremos ocho leyes, no necesariamente todas. Por ejemplo, en la siguiente imagen seguramente observas un sabueso dálmata, te preguntaste ¿Por qué? Si la figura no está acabada completamente. ¿Porque no vemos simplemente un arreglo de manchas?

[%]

Página 2 de 13

1. Ley de proximidad LAW OF PROXIMITY Cuando un individuo visualiza un arreglo de objetos, se percibe los objetos que están más cerca entre sí, formando grupos.

Ejemplos:

[1]

72 círculos – 4 grupos

[2]

96 rectángulos – 6 grupos

2 grupos formado por 2 subgrupos = 8 grupos.

Página 3 de 13

[3]

12 conejos – 3 grupos

Esta ley es bastante popular y potente. Viendo ampliamente, una distribución de objetos aleatorios en la vida real no tienen la misma dirección y posición, ni son necesariamente del mismo tamaño, forma, etc. Es por eso que para un escenario en particular, aleatorio. Se puede distinguir diferentes leyes, patrones, etc.

2. Ley de similitud LAW OF SIMILARITY

Cuando un individuo visualiza un arreglo de objetos, son agrupados perceptualmente juntos, si estos son similares el uno al otro.

Ejemplos:

[4]

36 circulos – 18 circulos grises – 18 circulos negros – 6 grupos

Página 4 de 13

[5]

40 cuadrados – 24 círculos – 6 grupos

36 cuadrados – 13 círculos – 5 grupos

[6]

10 círculos – 10 triángulos – 4grupos

3. Ley de continuidad LAW OF CONTINUITY

Cuando un individuo visualiza un arreglo de objetos, son agrupados perceptualmente juntos, si estos forman elementos visuales suaves y continuos.

Ejemplos:

[7]

2 elementos continuos

Página 5 de 13

[8]

1 elemento continuo

[9]

1 elemento continuo

Claramente elementos agrupados por líneas más suaves son más fáciles de percibir que los que no lo son. Por ejemplo la percepción del primer grafo es más fácil que del segundo:

[*]

4. Ley de simetría LAW OF SIMMETRY Cuando un individuo visualiza un arreglo de objetos, percibe objetos que son simétricos (o casi simétricos) en un determinado punto fácilmente.

Simetría según la R.A.E. es: “Correspondencia exacta en forma, tamaño y posición de las partes de un todo”.

Página 6 de 13

Ejemplos:

[10]

[11]

[12]

5. Ley de cercanía LAW OF CLOSURE Un individuo percibe objetos como un entero, cuando ellos no se encuentran completos.

Ejemplos:

Página 7 de 13

[13]

[14]

[15]

Página 8 de 13

6. Ley de destino común LAW OF COMMON FATE Un individuo percibe objetos como líneas que se mueven a lo largo de un camino bastante sencillo.

Ejemplos:

[16]

[17]

Página 9 de 13

[18]

7. Ley del buen Gestalt LAW OF GOOD GESTALT Cuando un individuo observa un arreglo de elementos, tiende a agrupar estos elementos, si forman un patrón que es regular, simple, y ordenado.

Ejemplos:

[19]

Página 10 de 13

[20]

[21]

También es conocido como Ley de Prägnanz. (Significa conciso).

8. Ley de la experiencia pasada LAW OF PAST EXPERIENCE

Cuando un individuo observa dos objetos con cercanía, o en cortos intervalos de tiempo, los objetos están predispuestos a ser observados juntos.

[22]

Página 11 de 13

[23]

Fuente de imágenes:

[%]http://myvisualperspective.files.wordpress.com/2011/09/gestalt_proximity__dalmation_by_gderanidaye.jpg

[1] http://upload.wikimedia.org/wikipedia/commons/2/22/Gestalt_proximity.svg

[2] http://peace.saumag.edu/faculty/kardas/Images/Web%20Images/Lecture/proximity.GIF

[3] http://netdna.webdesignerdepot.com/uploads4/gestalt-ux-principles/gestaltens.jpg

[4] http://upload.wikimedia.org/wikipedia/commons/8/8f/Gestalt_similarity.svg

[5] http://3.bp.blogspot.com/-NwJTIOFCwVQ/UFxsAhkXupI/AAAAAAAAALA/2CUqoEOwEBY/s1600/similarity.GIF

[6] http://www.interaction-design.org/images/figures/gestalt_law_of_similarity_2.gif

[7] http://peace.saumag.edu/faculty/kardas/Images/Web%20Images/Lecture/continuity.GIF

Página 12 de 13

[8] http://peace.saumag.edu/faculty/kardas/Images/Web%20Images/Lecture/continuity2.GIF

[9] http://cct370-w07.wikispaces.com/file/view/Continuation.gif/30515530/Continuation.gif

[10] http://www.ics.uci.edu/~kobsa/courses/ICS104/course-notes/gestalt-symmetry.jpg

[11] http://www.publicdomainfiles.com/images_view/52/13526122814485.png

[12] http://upload.wikimedia.org/wikipedia/en/1/1c/Law_of_Symmetry.jpg

[13] http://99designs.com/designer-blog/wp-content/uploads/2014/01/gestalt-closure.jpg

[14] https://wiki.ucl.ac.uk/download/attachments/20714537/closure.png

[15] http://media-cache-ak0.pinimg.com/236x/7b/73/e7/7b73e7ec067d6bff7add019453d6f8b1.jpg

[16] http://artinstituteofdave.weebly.com/uploads/8/0/0/0/8000489/3916345_orig.jpg

[17] http://abcofdesign.com/images/commonfate.png

[18] http://1.bp.blogspot.com/_wQHfNXAmhHM/TJM1YRp6cyI/AAAAAAAAAGA/zoSHZwke9QA/s1600/pacman(common+fate).jpg

[19] http://www.atpm.com/9.10/images/design-gestalt.gif

[20] http://www.vanseodesign.com/blog/wp-content/uploads/2010/01/gestalt-Pragnanz-1.png

[21] http://0.tqn.com/d/psychology/1/0/B/1/Pragnanz.jpg

[22] http://images.scholarpedia.org/w/images/e/e6/Todorovic-Gestalt_principles-Figure_9.jpg

[23] https://uo74lw.dm2301.livefilestore.com/y2mlkVs4rCmJe-QXep-xsAFwesErGeTPd1zCODL8kPfCPbjoP882L-OYV_Tzad7S87Gbt30-CCHliVMQBXqMI6rw8Il0iCD3xgNJLMR7HNWG52MgsSbtkMDbYus_E5GH7jt/image%5b41%5d.png?download&psid=1&rdrts=67089462

Página 13 de 13

Libro base y recomendado:

[*] Colin Ware: “Information Visualization: Perception for Design”, 3rd Edition 2012 Link amazon: http://www.amazon.com/Information-Visualization-Third-Edition-Technologies/dp/0123814642/ref=sr_1_1?ie=UTF8&qid=1390165163&sr=8-1&keywords=Information+Visualization%3A+Perception+for+Design

Documento hecho por: Hector Ugarte R. INGENIERO INFORMATICO Blog: http://lampardsoft.blogspot.de/

2014 – Bonn, Alemania