Gestalt principles for better design

1. GESTALT
PRINCIPLES
HOW TO FIX COMMON UX FAULTS
AND IMPROVE DESIGN
Designed By: Huong Ngoc Vo

2. THE KEY
IDEAS
BEHIND
GESTALT
THEORY

3. EMERGENCY
• What did you see first when look
at this picture?
– Circle
– Rainbow color
– Coat button, start, moon, bugs…
all little things
• The WHOLE is other than the sum
of the PARTS.

4. REFICATION
• What kind of shapes you recognize
first?
– A 3D square
– A 3D square with thorns
– Black cones
• Our mind FILLS THE GAPS.

5. MULTI-STABILITY
• What do you recognize first?
– An apple
– A woman
– A man
– All of them ???
• Human mind seeks for PATTERNS,
avoid UNCERTAINTY.

6. INVARIANCE
• What do you recognize first?
– A kitty
– Other black animals
• We’re good at recognizing
SIMILARITIES and DIFFERENCES

7. PRINCIPLES
CONTENT

8. FIGURE/GROUND
• “Elements are perceived as either
figure (the element in focus) or
ground (the background on which
the figure rests).”
• Ground: larger area, blur color
• Figure: small area, impressive color

9. COMMON REGIONS
• “Elements are perceived as part of
a group if they are located within
the same closed region.”

10. COMMON REGIONS
Head menu
Border
Tab
Panel
Paragraph
Group elements

11. COMMON REGIONS &
FIGURE GROUND
Area 1, 2, 3 separates by line
and border (common regions)
Area 1: background color is
white (figure/ground)
Area 2 & 3: back color is grey
(figure/ground)
2
1
3

12. PROXIMITY
• “Objects that are closer together
are perceived as more related than
objects that are further apart.”
• If they are separate, they aren’t in a
relationship.

13. PROXIMITY
Head menu
Sub menu
List Items
Hierarchy of components

14. PROXIMITY
THE DISTANCE OF
• Characters
• Words
• Lines
• Paragraphs
• Same level components
• Different level of components

15. SIMILARITY
• “Elements that share similar
characteristics are perceived as
more related than elements that
don’t share those characteristics.”
• If they are similar, they go together

16. LEVEL OF SIMILARITY
Color
Size
Shape
Orientation

17. LEVEL OF SIMILARITY
Color & Size
Color & Shape

18. SIMILARITY IN PRACTICE
All items have same role

19. SIMILARITY IN PRACTICE
Consistence style
Same roles/priority/level

20. PROXIMITY VS
SIMILARITY
Which rules is more powerful?

21. FOCAL POINTS
• “Elements with a point of interest,
emphasis or difference will capture
and hold the viewer’s attention.”
• Be different

22. PROXIMITY COMBINES
SIMILARITY
Sub menu is hard to find

23. PROXIMITY COMBINES
SIMILARITY
Highlight sub menu according
to its hierarchy

24. HOW WE CAN FIX IT?
Border the head menu and
(common regions rules)
Using line to separate
submenus
Increase the distance of sub
menu
Highlight current focused menu
(similarity & focal point rules)

25. OTHER PRINCIPLES
• Symmetry and order
• Papalism
• Uniform connected
• Continuation
• Past experience
• Common fate

26. THANK YOU