26 UI Principles Every Builder Should Know
The difference between interfaces that feel intuitive and ones that frustrate users often comes down to a handful of well-established principles. These aren't opinions or trends. They're grounded in cognitive psychology, decades of usability research, and the work of pioneers like Jakob Nielsen, Paul Fitts, and the Gestalt psychologists.
Why These Principles Matter
Users don't read manuals. They form expectations based on every other interface they've ever used. When your design violates these expectations, users don't blame themselves. They blame your product.
The principles in this guide come from three domains: cognitive psychology (how humans process information), Gestalt theory (how we perceive visual relationships), and usability research (what actually works in practice). Understanding them will help you make better design decisions and articulate why one approach works better than another.
For each principle, we've included a description plus a side-by-side do and don't example so you can spot these issues — and fix them — in your own work.
Well-Designed Interfaces
When Principles Come Together
Great interfaces apply these principles invisibly. Users don't notice them working. They just feel that everything makes sense.
Cognitive Principles
These principles are rooted in cognitive psychology. They describe how humans perceive, process, and remember information. Violating them creates mental friction that users feel but can't always articulate.
More choices = slower decisions. That's it.
A pricing page with 8 tiers and 20+ features to compare. Users abandon rather than decide.
Offer 3 clearly differentiated tiers. Let users upgrade later if needed.
The time to acquire a target is a function of the distance to and size of the target. Important actions should be large and positioned where users expect them.
A tiny 'Submit' button placed far from form fields. Users miss it or struggle to click on mobile.
Make primary actions large and position them directly adjacent to the relevant content.
The average person can hold 7 plus or minus 2 items in working memory. Chunk information into digestible groups of 5-9 items to aid comprehension and recall.
A 15-item navigation menu with no grouping. Users can't remember what's where.
Group nav items into 4-5 categories with clear labels. Use dropdowns for sub-items.
Users spend most of their time on other sites. They expect your site to work the same way as all the others they already know. Leverage existing mental models.
A checkout where the back button goes forward to payment. Clever isn't usable — bounce rate was 73%.
Follow platform conventions. Put the cart icon top-right, the logo top-left, and navigation where users expect it.
Every interface creates mental effort. There are three types:
- Intrinsic load: the inherent difficulty of the task itself (unavoidable)
- Extraneous load: added by poor design choices (your fault, fix it)
- Germane load: effort spent learning and building mental models (the good kind)
A checkout form with billing, shipping, and gift options all on one screen — 25+ fields at once.
Break checkout into focused steps: shipping, then billing, then review. 3-5 fields per step.
Recognizing something is far easier than recalling it from memory. Show options, use icons with labels, and provide context clues rather than expecting users to remember.
Requiring users to type exact product codes from memory into a blank text field.
Show a searchable dropdown with product names, images, and codes so users can recognize and pick.
Show only what's needed at each step. Reveal complexity gradually as users need it. This keeps interfaces clean and prevents overwhelming new users while still serving power users.
Showing all 47 settings options on a single screen. Users see complexity before value.
Group settings into tabs (General, Notifications, Privacy). Show the most common options first, tuck advanced ones behind 'Show more.'
Users bring expectations from their past experiences. A shopping cart icon means 'view my items.' A floppy disk means 'save.' Align with these mental models or explicitly teach new ones.
Using a heart icon for 'delete' because your brand uses hearts. Users click expecting 'favorite.'
Use universally understood icons: trash for delete, heart for favorite, gear for settings. Match existing mental models.
Principles That Fight Each Other
Here's the dirty secret: these principles sometimes conflict. Hick's Law says reduce choices. Progressive Disclosure says hide complexity until needed. But what if hiding options means users can't find critical features? What if showing fewer options means cramming more into each one? There's no formula. You have to understand the tradeoffs and make judgment calls. The principles are a compass, not GPS.
Visual & Gestalt Principles
In 1920s Berlin, a group of psychologists asked why we see shapes in clouds. Their answer became the Gestalt principles - laws of perception that explain how the human brain organizes visual information. A century later, these same laws tell us why some layouts feel organized and others feel chaotic, even when they contain identical content.
Objects that are close together are perceived as a group. This is the most powerful Gestalt principle. Consider a form: if a label has 20px margin below it but 24px margin above, users instinctively know that label belongs to the field below, not above. You never had to draw a box around them. Spacing did the work.
Form labels equidistant between two fields. Users can't tell which label belongs to which input.
Place labels closer to their field (4px gap) than to the field above (16px+ gap). Spacing creates ownership.
Elements that share visual characteristics (color, shape, size, orientation) are perceived as related. Use similarity to create visual categories and show relationships.
Same blue button style for both 'Submit' and 'Cancel.' Users can't quickly distinguish them.
Use a filled primary button for the main action and an outlined or ghost button for secondary actions.
The brain separates elements into foreground (the focus) and background (the context). Use contrast in color, elevation, and blur to make important elements pop forward.
A modal dialog with no backdrop or shadow — it blends into the page content behind it.
Use a dimmed backdrop, elevation (shadow), and clear borders to separate the modal from background content.
The most important elements should be the most prominent through size, color, contrast, or position. Users should immediately know where to look first, second, and third.
Every element the same size and weight. Users don't know where to focus first.
Make the primary heading 2-3x larger than body text. Use color and weight to create a clear 1-2-3 reading order.
Every element should have a visual connection to something else on the page. Alignment creates order, organizes information, and connects disparate elements into a cohesive whole.
Elements at random positions with inconsistent margins. The page feels chaotic.
Align elements to a consistent grid. Use the same margin and padding values throughout the layout.
Difference between elements creates visual interest and hierarchy. Contrast can be achieved through color, size, shape, or spacing. If elements aren't the same, make them noticeably different.
Light gray text (#999) on white background. Fails WCAG contrast and strains eyes in bright environments.
Use #525252 or darker for body text on white. Meet 4.5:1 contrast ratio minimum for all text.
Empty space is a design element, not wasted space. It creates breathing room, improves readability, and directs attention. Generous whitespace signals quality and confidence.
Content crammed edge-to-edge with minimal padding. Users feel overwhelmed and miss key information.
Use generous padding around content blocks. Let sections breathe — whitespace signals confidence and quality.
Repeat visual elements throughout the design to create unity and consistency. This includes colors, fonts, shapes, spacing rhythms, and interaction patterns.
Each section uses a different visual style, button shape, and icon set. Feels like five different websites.
Define a style system: one button style, one icon set, one spacing scale. Reuse them everywhere.
Interaction Principles
These principles govern how users interact with your interface. They determine whether an action feels intuitive or confusing, whether users feel in control or lost.
Elements should look like what they do. Buttons should look clickable, text fields should look typeable, and sliders should look draggable. Visual cues signal possible actions.
Flat text that's actually a button. Users hover randomly to discover it's interactive.
Give buttons a background, border, or shadow. Use cursor:pointer and a visible hover state to signal clickability.
The same actions should always produce the same results. Internal consistency (within your product) and external consistency (with platform conventions) both matter.
Blue buttons mean 'confirm' on one page and 'cancel' on another. Users learn to distrust their instincts.
Pick one color for primary actions and stick to it everywhere. Blue always means 'go,' red always means 'destructive.'
Users should be able to anticipate what will happen before they act. Clear labels, consistent patterns, and meaningful icons all contribute to predictable interfaces.
A 'Learn More' link that opens a video. Users expect text and get something else.
Label links honestly: 'Watch the demo (2 min video)' or 'Read the full guide.' Tell users what happens next.
Users follow clues that suggest they're heading toward their goal. Links and buttons should clearly indicate what users will find when they click.
Nav items labeled 'Solutions' and 'Resources' with no indication of what's inside.
Use descriptive labels with preview text: 'Services — Voice agents, internal tools, strategy.' Give users a scent trail.
Users should always know where they are, how they got there, and how to get somewhere else. Breadcrumbs, active states, and consistent navigation help users stay oriented.
No visual indication of which page the user is on. Every page looks identical — users feel lost.
Highlight the active nav item, show breadcrumbs, and use page titles so users always know where they are.
Always provide clear paths to leave the current context. Close buttons, back links, cancel options, and escape keys give users confidence that they won't get trapped.
A multi-step wizard with no way to go back or cancel. Users feel trapped and abandon.
Always provide Back, Cancel, and a visible step indicator. Let users leave and return without losing progress.
Feedback & Error Handling
Interfaces must communicate with users. These principles ensure that users understand what's happening, what went wrong, and how to recover from mistakes.
The system should respond to every user action immediately. Hover states, loading indicators, success messages, and error alerts all tell users their input was received.
User clicks Submit and nothing happens. No spinner, no disabled state. They click 3 more times — 3 duplicate tickets.
Disable the button on click, show a spinner, and display a success/error toast when the action completes.
Design to prevent mistakes before they happen. Disable invalid options, use constraints that make errors impossible, and confirm destructive actions before executing them.
A date picker that allows February 31st and only shows an error after form submission.
Disable invalid dates in the picker itself. Prevent the mistake from happening rather than punishing it after.
When users make mistakes, make it easy to recover. Undo functionality, edit capabilities, and clear paths back reduce the cost of errors and encourage exploration.
A delete action with no confirmation and no undo. One misclick destroys hours of work permanently.
Show a confirmation dialog for destructive actions. Even better: soft-delete with an 'Undo' toast for 10 seconds.
Interfaces should be usable by people with diverse abilities. This includes sufficient color contrast, keyboard navigation, screen reader support, and alternatives for visual content.
Using color alone to indicate errors. Color-blind users can't distinguish valid from invalid fields.
Combine color with icons and text: a red border + warning icon + 'Email is required' message. Triple redundancy.
Quick Reference Cheat Sheet
Print this list and keep it near your monitor. Before shipping any interface, run through these questions.
Cognitive
- Are there fewer than 7 options at any decision point? (Hick's Law)
- Are important buttons large and positioned near related content? (Fitts's Law)
- Is information chunked into groups of 5-9 items? (Miller's Law)
- Does the interface match common conventions? (Jakob's Law)
Visual
- Are related items grouped together? (Proximity)
- Do similar functions have similar visual styles? (Similarity)
- Is there a clear visual hierarchy? (Visual Hierarchy)
- Does text have sufficient contrast? (Contrast)
Interaction
- Do clickable elements look clickable? (Affordance)
- Do the same actions behave the same way? (Consistency)
- Do users know where they are? (Wayfinding)
- Can users easily exit or go back? (Exit Points)
Feedback
- Does every action get immediate feedback? (Feedback)
- Are errors prevented where possible? (Error Prevention)
- Can mistakes be easily undone? (Recoverability)
- Is the interface usable for people with disabilities? (Accessibility)
Further Reading
These principles were established by researchers and practitioners over decades. If you want to go deeper, start with these foundational resources:
- "Laws of UX" by Jon Yablonski - A comprehensive collection of 21 UX laws with practical applications
- Nielsen Norman Group (nngroup.com) - Jakob Nielsen's 10 Usability Heuristics, refined since 1994
- "The Design of Everyday Things" by Don Norman - The foundational text on affordances and human-centered design
- "Don't Make Me Think" by Steve Krug - Practical web usability principles that still apply today
A confession: I still violate these principles regularly. The difference now is that I know when I'm doing it and why. Sometimes the business constraint wins. Sometimes the deadline wins. Sometimes I just make mistakes. But knowing the principles means I can have an honest conversation about tradeoffs instead of stumbling blindly into them.
Building interfaces that work?
We apply these principles to every project we build. If you're working on an interface and want a second pair of eyes, we're happy to chat.