Law of Proximity
Elements that are close to each other tend to be perceived as a group.
UX Implication:
In interfaces, related items should be placed close to each other. For example, form labels should be near their inputs, and menu items in the same category should be grouped together.
Law of Similarity
Elements that share similar attributes (color, shape, size) are perceived as related.
UX Implication:
Use consistent visual styles for similar functions. For instance, all clickable buttons should share the same color scheme, while informational elements might use another.
Law of Continuity
Elements arranged on a line or curve are perceived as more related than elements not on the line.
UX Implication:
Users follow lines in designs. Navigation menus work well in straight lines, and progress indicators should flow in a continuous direction.
Law of Closure
Our minds naturally fill in gaps to create complete forms.
UX Implication:
You don't need to show every element completely. Users can understand partial shapes, allowing for cleaner, less cluttered designs.
Figure-Ground Relationship
Elements are perceived as either figures (objects of focus) or ground (background).
UX Implication:
Modal dialogs use this principle by dimming the background, making the popup the clear figure. This helps users focus on the current task.
Law of Symmetry
The mind perceives symmetric elements as belonging together.
UX Implication:
Symmetrical layouts create balance and harmony, making interfaces feel more organized and professional.
Law of Common Fate
Elements moving in the same direction are perceived as related.
UX Implication:
Animation can group related elements. Items that move together during transitions are understood as belonging to the same group.