Law of Common Region
Elements tend to be perceived into groups if they are sharing an area with a clearly defined boundary.
Read the original on lawsofux.com →
The scenario: a mobile app's notification settings — twelve toggles. Both versions contain the exact same twelve settings with the exact same on/off states; only the visual boundaries change. Watch how four bordered cards turn an unscannable wall into four quick questions.
Notifications
Manage how TaskHub notifies you.
Notifications
Manage how TaskHub notifies you.
Push
SMS & Sound
Security
🔍 What changed
- Nothing was added or removed — the same 12 settings with the same states appear in both versions.
- Four bordered cards create four common regions: Email, Push, SMS & Sound, Security.
- Short uppercase card headers let users skip whole groups they don't care about.
- Related settings that were scattered through the flat list (e.g. all email options) now sit inside one boundary.
💼 Explaining it to stakeholders
“A boundary is the cheapest information architecture there is. Drawing four boxes around the same twelve settings means users scan four labels instead of reading twelve rows — settings screens stop generating ‘how do I turn this off?’ support tickets, and people who can control their notifications precisely are far less likely to disable them entirely.”