This week Yang Qian and Teesta Das took a brief session on 'Gestalt Theory' during the studio time at the Mdes Graduate Interaction Design class, CCA. We had to also base the teaching time on the studio principle of 'Push Yourself!'

1. Interaction Concept
Gestalt Principles
TEESTA DAS & YANG QIAN
OCT.29 2018

2. Optical Illusion

7. Holism

11. Gestalt
[ɡəˈʃtalt ]
German
feminine noun
form, shape
!
Gestalt Psychology took off
in the 1920s in Berlin

12. The psychology behind
visual communication
🔄

13. What happens when someone’s eye
meets your design creations?
How does their mind react to the
message your piece is sharing?
Laura Busche, Brand Content Strategist at Autodesk

14. 4 key ideas

15. Emergence

16. Reification

17. Multi-Stability

18. Invariance

19. Gestalt Psychology and Why It's Essential for Good Design

20. Proximity Similarity
Closure
Symmetry
Continuation
Common
Fate
Common
Region

21. 7 principles
Particularly helpful in UI design

22. Recognizing
Gestalt
Injecting
Gestalt
Learn to inject visual
stimuli to our design
Explaining the basic
principles
Phase One Phase Two

23. Proximity
Elements arranged close to
each other are perceived
as more related than those
placed further apart.
e.g. Proper kerning helps readers snap up each word

24. Common Region
Elements placed within the
same region are perceived
as grouped
e.g. advertisement windows

25. Similarity
Elements that look alike are
perceived as part of a
group.
Color / Size / Orientation
Shape / Texture

26. Closure
A group of elements are
often perceived to be a
single recognisable form
or figure.
“Fill in the gaps”

28. Symmetry
Symmetrical elements
tend to be perceived as
belonging together
regardless of their
distance
e.g. photo galleries

29. Continuation
“Connecting the dots”:
Objects that are plotted in
a continuous pattern are
grounded together.
e.g. items in a drop-down menu

30. Common Fate
Elements moving towards
the same direction are
perceived as more related
than those moving in
different directions, or not
moving at all.
e.g. vertical scrolling + horizontal scrolling

31. Activity!
Gestalt Hunter
7 Principles 🕒 2 mins 📷 10 pics

32. 7 Principles 🕒 2 mins 📷 10 pics

33. Next step
Pick one and sketch
Rule: No color, no detail, no perspectivity

34. 7 principles
Application in UI design

35. Situation
Visual
Elements Perception
Attention
Behavior

36. Proximity

37. Proximity

38. What else?

39. *drumrolls*
Gestalt Hunter
Tournament!
3 groups 📷 screen snap 1min
💻 + 📱

40. Hunting Time!
3 groups 📷 screen snap 1min
💻 + 📱
Proximity

41. Common
Region

42. Common
Region

43. Hunting Time!
3 groups 📷 screen snap 1min
💻 + 📱
Common Region

44. Similarity

45. Similarity

46. Hunting Time!
3 groups 📷 screen snap 1min
💻 + 📱
Similarity

47. Closure

48. Hunting Time!
3 groups 📷 screen snap 1min
💻 + 📱
Closure

49. Symmetry

50. Symmetry

51. Hunting Time!
3 groups 📷 screen snap 1min
💻 + 📱
Symmetry

52. Continuation

53. Continuation

54. Continuation

55. Hunting Time!
3 groups 📷 screen snap 1min
💻 + 📱
Continuation

56. Common
Fate

57. Common
Fate

58. Hunting Time!
3 groups 📷 screen snap 1min
💻 + 📱
Common Fate

59. The form of an object is not more
important than the form of the space
surrounding it. All things exist in
interaction with other things.
In music, are the separations
between notes less important than
the notes themselves?
“
”
Malcolm Grear

60. Extended reading

61. Articles:
https://medium.muz.li/gestalt-principles-in-ui-design-6b75a41e9965
https://robots.thoughtbot.com/gestalt-principles
https://crmrkt.com/eOzMg4
https://www.usertesting.com/blog/gestalt-principles/
https://socialsharing.info/gestalt-principles-and-examples/
https://en.wikipedia.org/wiki/Malcolm_Grear#Quotes
Video:
https://www.youtube.com/watch?v=dk7cXdjX2Ys
Extended Reading:
https://uxdesign.cc/ux-psychology-go-hand-in-hand-how-gestalt-theory-appears-in-ux-design-18b727343da8
References