Owl mascot waving

The Owl symbolizes wisdom & keen observation — exactly what we need to understand how users perceive design!

UX Psychology Gestalt Principles & Cognitive Laws

The Science Behind Great Design

Osama Ali

linkedin.com/in/os3li
INTRODUCTION

What Are Gestalt Principles?

From the German word for "shape" or "pattern" — the core idea is simple:

The human mind perceives things as organized wholes rather than separate parts.

🧠

Reduce Cognitive Effort

Interfaces become intuitive without deep thinking.

📐

Organize Information

Help users find what they need effortlessly.

👁️

Create Visual Hierarchy

Guide the user’s eye from most to least important.

GESTALT PRINCIPLE 01

Proximity

Elements that are close together are perceived as a single group. Distance implies separation.

Owl observing

“Place headings close to their paragraphs so users know they belong together.”

🔑 In UX: Group related form fields together. Separate unrelated sections with whitespace.
Profile Settings
❌ Poor Proximity
Full Name
Email
Phone
Address
✅ Good Proximity
Personal Info
Full Name
Email
Contact
Phone
Address
GESTALT PRINCIPLE 02

Similarity

Elements that share visual properties (color, shape, size) are perceived as related or serving the same function.

Curious owl

“All ‘Buy’ buttons should look the same — same color, same style.”

🔑 In UX: Consistent styling for same-purpose elements. Different styling signals different behavior.
E-Commerce — Product Cards
Wireless Headphones
$79.99
Smart Watch
$199.99
USB-C Hub
$49.99
Same color = Same action (Add to Cart)
Different color = Different action (Remove)
GESTALT PRINCIPLES 03 & 04

Continuity & Closure

03

Continuity

The eye follows smooth paths and lines rather than jumping between objects.

Trending Now
The cut-off card implies more content
04

Closure

The brain fills in gaps to perceive incomplete shapes as whole.

Famous Logos
You see a circle
You see a square
You see a triangle
🔑 Continuity: Use scroll-peeking and progress indicators to imply more content. Closure: Minimal logos work because users complete the shape mentally.
GESTALT PRINCIPLE 05

Figure / Ground

The mind separates elements into figure (focal point in front) and ground (background). This helps us focus on what matters.

Alert owl

“Pop-ups with a dimmed background make the modal the ‘figure’ and everything else the ‘ground.’”

🔑 In UX: Use overlays, blur, and contrast to make the primary action stand out from its context.
Shopping App
🏠 Home 📦 Products 🛒 Cart
🛒 Confirm Purchase?

Wireless Headphones — $79.99

← Figure (Focus) Ground (Background) →
GESTALT PRINCIPLE 06

Common Fate

Elements that move together in the same direction and speed are perceived as related — part of one unit.

Serious owl

“Think of a flock of birds — they move as one. Animated elements that move together feel connected.”

🔑 In UX: Animate related elements together during interactions to show they’re functionally linked.
Notification Panel
📧 New message from Sarah
📧 Meeting reminder: 3 PM
📧 Weekly digest ready
These move together → related
🔔 App update available
🔔 Storage almost full
These move together → related
COGNITIVE LAWS

Hick’s Law & Fitts’s Law

H

Hick’s Law

Decision time increases with the number of choices. Too many options = analysis paralysis.

Restaurant Menu
❌ Overwhelming
BurgerPizzaPasta SushiTacosSalad RamenSteakCurry WingsSoupWrap
✅ Categorized
🍕 Italian Pizza, Pasta
🍣 Asian Sushi, Ramen, Curry
🍔 American Burger, Steak, Wings
F

Fitts’s Law

Time to reach a target depends on its distance and size. Bigger + closer = easier to click.

Call to Action
❌ Hard to reach
🖱️
✅ Easy to reach
🖱️
🔑 Hick’s: Reduce choices or group them into categories. Fitts’s: Make important buttons large and close to the user’s natural focus area.
MEMORY & RECALL

Miller’s Law & Serial Position

7±2

Miller’s Law

People can hold 7 ± 2 items in short-term memory. Break information into chunks.

Payment Form
❌ Hard to read
4532015112830366
+12025551234
✅ Chunked
4532 · 0151 · 1283 · 0366
+1 (202) 555-1234
1…N

Serial Position Effect

People remember first and last items best. Middle items are often forgotten.

Mobile Navigation
🏠 Home
🔍 Search
📋 Orders
❤️ Saved
👤 Profile
↑ Primacy Recency ↑
🔑 Miller’s: Chunk long data (credit cards, phones) into groups. Serial Position: Put the most important nav items first and last.
COGNITIVE CONCEPTS

Affordance & Cognitive Load

Af

Affordance

Visual properties that tell users how to interact. A raised button says “click me.”

Button Affordance
❌ No Affordance
Submit Is this clickable? 🤔
✅ Clear Affordance
Obviously a button ✓
CL

Cognitive Load

The mental effort used in working memory. Simpler interfaces = less fatigue.

Signup Flow
❌ High Load
Name
Email
Password
Confirm
Phone
Address
✅ Low Load
Step 1 of 3
Name
Email
🔑 Affordance: Make interactive elements look interactive. Cognitive Load: Break complex forms into steps — less fields per screen.
ADVANCED CONCEPTS

Mental Models, Symmetry & Prägnanz

🧠

Mental Model

Users expect things to work based on past experience. Don’t break their expectations.

🔍 🛒
Cart in top-right ✅ (expected)
🛒 🔍
Cart in top-left ❌ (breaks mental model)
⚖️

Symmetry & Order

Symmetrical elements feel stable and balanced. Asymmetry implies something is off.

Balanced ✅
Unbalanced ❌
💎

Law of Prägnanz

The brain interprets complex images in the simplest form possible. “Simplicity wins.”

We see two circles,
not complex arcs
🔑 Mental Model: Follow conventions (cart top-right, logo top-left). Prägnanz: Keep designs simple — the brain prefers it.
Owl giving thumbs up

Why Does This Matter?

Understanding these principles transforms design from just “beautiful shapes” into an effective, intuitive user experience.

01

Reduce Cognitive Effort

Interfaces that feel natural without deep thinking.

02

Organize Information

Users find what they need without frustration.

03

Create Visual Hierarchy

Guide the eye from most important to least.

04

Make It Intuitive

When users say “it just works” — that’s these principles in action.

1 / 12