Gestalt Laws Principles

Contents

Gestalt Laws Principles#

Gestalt Principles of Grouping#

"Gestalt" == pattern

The whole is other than the sum of the parts.

Kurt Koffka

Regular, orderly, symmetrical, simple Proximity Similarity Enclosure Closure Continuity Connection

What are they and why do they matter?#

Proximity#

plot_points(array1a, array2a)

../_images/f64d1d44b17d8e889f8ca3a9325aab03dea6f317e3ba2ea10ec39860e9c9310b.png

plot_points(array1b, array2b)

../_images/11e6b6689de8973b8471698297617f52878035e000fbf7b542527ac2260319fc.png

plot_points(array1a, array2a)

../_images/f64d1d44b17d8e889f8ca3a9325aab03dea6f317e3ba2ea10ec39860e9c9310b.png

plot_points(array1c, array2c)

../_images/ba6c466f22d9c5b4346439b803a3bfae8e82d0a79a15ccc496eb688f56297c8d.png

plot_points(array1_groups, array2_groups)

../_images/4ffbff79a50ca89debf8f56f89f816ae1857b1c30cea9adaa8acad8b4321289f.png

plot_scatter(x_scatter, y_scatter)

../_images/b0529cc3f552e93028acc4da1b0a0f89d6e7f66a630230254f1cdd4d1d9ed96f.png

sales_plot(barplot=True)

../_images/943099950be68f930768ffad065b856c1c835f13ffdc8dba5bcbb74a286f58e1.png

sales_plot(barplot=False)

../_images/0584b3ab2a0fd868bbc5aec98ca83bab787568b61608db9a7e590b1dc43aa437.png

Proximity
Things close to each other are grouped.

Similarity#

plot_points(array1a, array2a)

../_images/f64d1d44b17d8e889f8ca3a9325aab03dea6f317e3ba2ea10ec39860e9c9310b.png

plot_points(array1a, array2a, labels_a)

../_images/ea02d3787f9bcb709897e4e1cce3e30ad8768c5280d753e0e5079855c1ced94d.png

plot_points(array1a, array2a, labels_a, squares=True)

../_images/eeafc5509900d7d93a87483018e6096e4ae7283109b2a4ef6c82a683a0ecc436.png

plot_scatter(x_scatter, y_scatter)

../_images/b0529cc3f552e93028acc4da1b0a0f89d6e7f66a630230254f1cdd4d1d9ed96f.png

plot_scatter(x_scatter, y_scatter, labels=labels_a)

../_images/1fa04549737b8b367729c06d9ab41796789f4b5e9886de144c548e01f800a2ad.png

Similarity
Things that look similar are grouped.

Enclosure#

../_images/4ffbff79a50ca89debf8f56f89f816ae1857b1c30cea9adaa8acad8b4321289f.png

../_images/23dc2830dbef833f9ea9f37038034af5acbc6f8502ce5dcece83d8e6bbaddc51.png

../_images/253f859e4982719021b1af8752e6923c37e43db460f007e3f08ebdb5f67532fa.png

../_images/1fa04549737b8b367729c06d9ab41796789f4b5e9886de144c548e01f800a2ad.png

../_images/28bb564f6626a4159d849a3403d1025c2ec619f0e8caf688d068c30e81440cb3.png

Enclosure
Things with a boundary around them are grouped.

Closure#

../_images/3ba76f87db467105bd1b5423e06622cc4b9aa19297c730c50446fb3bacca8767.png

../_images/a0785faa4d2fd05292ac91b0f9c55b2ec1636f44114dbb50671f62c2d6766ad9.png

../_images/78db137db7eb7eb556afab369fcd3463a09a78498eacc25c85fa16ca3871e240.png

../_images/48cbe911ae68776cd892a2600dec542dbc2878b8032221b17418d136ea5b6a5b.png

../_images/1fa04549737b8b367729c06d9ab41796789f4b5e9886de144c548e01f800a2ad.png

Closure
We like seeing closed shapes.

Continuity#

../_images/2fde6a485cf0734cdc3e40bc844ac474f1642fdd08971918c05fc4942101cb52.png

../_images/30f5991c824ea483cc5818dde225f34102a9ebefdb5696ee8be19963cc3a6c60.png

../_images/98a6025520fe355d9be363fc3ec1801001e3df4cf7160a9a66ef6fdf2b8e48f9.png

../_images/b720a0b323745ed3b8d900c7260f0e6e95e7b9f700d836f4e6543606ed822845.png

../_images/ea1b8ca821e2bb207762c265a5b7ef2f6d2766d37aa053ef4a5fb3e304043cee.png

../_images/c72c9b3db63348ba988a93692950e436a8365b77bfb50e7d8fbe6ec35f9b21ce.png

../_images/c3b460155f2e3a1619125b3db4a65578f6b5697c84ef7549cf33a5f7310edc99.png

../_images/82a738f1aa43ad6fd13cf06cccc91ce85b4347114138f1cc5c547148355e3ccf.png

Continuity
Objects are grouped if they’re aligned or form a continuation of one another.

Connection#

../_images/d4c350daf5f878535e5cdb26bc1b99b4700e33b7a3b1f1870ca57bdad303b112.png

../_images/c673232fdf7555ffd1f8a426cd65889fbf7921d985844baaddf6279dd089c6ad.png

../_images/8a0525be7df51aa89191871a29e11d233071513e1f4d7c954ad32b38b1498e00.png

../_images/e644ea48256f7002d24f1b3edae921ec3f31c7804e46296b6c3ed66ac70d85b5.png

../_images/234c8d7a37bf071bc130c640653ddadfb069ede25166683b2d06e296ade3c3a6.png

../_images/f711a4082557c8e082b2c6d83a9e7712ebf4aeb01c885b1887e12712ec841045.png

../_images/e88c3a1e3459f31c9b9840a7019e9eb9a1582342bc9e48ae3903074284eb2b8a.png

../_images/fd69398bdafab3dae78d0cb76c386d68508642071f108dc4071c75ba3373be58.png

../_images/5bcd39e02a837de0f095e5895cdca15a916bbdbdaf1e08cd0ebf3df35b9dea3b.png

Connection
Things explicitly connected are … connected.

So… that’s it?#

Pretty much…#

Proximity
Similarity
Enclosure
Closure
Continuity
Connection

Bonus Principle#

Figure and Ground#

References#

Colin Ware, Information Visualization: Perception for Design
Stephen Few, Show Me the Numbers
Cole Nussbaumer Knaflic, Storytelling with Data

(Ware’s work is more detailed, the others pretty much just use the same summary)
There’s some interesting more recent work from people like Steve Palmer if you’re after papers to read.