Skip to content
Gosai Digital
  • Services
  • Use Cases
  • Case Studies
  • Process
  • Resources
  • About
Book a call
←Back to resources
Resource guideFoundationalDesign & Digital
By Gosai Digital·February 2026·14 min read
Back to Resources
18 min read

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.

Section 1

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.

Hick's Law

More choices = slower decisions. That's it.

Fitts's Law

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.

Miller's Law

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.

Jakob's Law

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.

Cognitive Load

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)
Recognition Over Recall

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.

Progressive Disclosure

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.

Mental Models

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.

Section 2

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.

Proximity

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.

Similarity

Elements that share visual characteristics (color, shape, size, orientation) are perceived as related. Use similarity to create visual categories and show relationships.

Figure-Ground

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.

Visual Hierarchy

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.

Alignment

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.

Contrast

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.

White Space

Empty space is a design element, not wasted space. It creates breathing room, improves readability, and directs attention. Generous whitespace signals quality and confidence.

Repetition

Repeat visual elements throughout the design to create unity and consistency. This includes colors, fonts, shapes, spacing rhythms, and interaction patterns.

Section 3

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.

Affordance

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.

Consistency

The same actions should always produce the same results. Internal consistency (within your product) and external consistency (with platform conventions) both matter.

Predictability

Users should be able to anticipate what will happen before they act. Clear labels, consistent patterns, and meaningful icons all contribute to predictable interfaces.

Information Scent

Users follow clues that suggest they're heading toward their goal. Links and buttons should clearly indicate what users will find when they click.

Wayfinding

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.

Exit Points

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.

Section 4

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.

Feedback

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.

Error Prevention

Design to prevent mistakes before they happen. Disable invalid options, use constraints that make errors impossible, and confirm destructive actions before executing them.

Recoverability

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.

Accessibility

Interfaces should be usable by people with diverse abilities. This includes sufficient color contrast, keyboard navigation, screen reader support, and alternatives for visual content.

Quick Reference Cheat Sheet

Print this list and keep it near your monitor. Before shipping any interface, run through these questions.

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.

Continue reading

Related resources

Keep moving through the same operating model with a few nearby articles from the same topic cluster.

Design & Digital10 min read

Visual Hierarchy That Converts: A Design Principles Playbook

Master the art of visual hierarchy to guide user attention, reduce cognitive load, and dramatically improve conversion rates. A practical playbook for designers, developers, and business owners.

Applied

February 1, 2026

Read article
Design & Digital7 min read

Building Internal Tools Your Team Will Actually Use

Most internal tools fail because they're built for executives, not end users. Learn how to design tools that employees love through user research, friction reduction, and AI-powered assistance.

Applied

January 1, 2026

Read article
Architecture & Data9 min read

Salesforce Reporting for Staffing Firms: Pipeline, Margin, and Recruiter Productivity

Salesforce reports in staffing firms are often wrong because the source objects, field conventions, and report types were built for a generic sales org. Here's how to fix the three layers that determine whether your numbers are trustworthy.

Applied

March 1, 2026

Read article

Resource updates

Get notified when new guides go live.

Practical notes on Salesforce, staffing workflows, and operational cleanup. No newsletter bloat.

Gosai Digital

Senior Salesforce architecture, admin, and development on a fractional retainer.

Services

  • Services
  • Use Cases
  • Case Studies
  • Process

Company

  • About
  • Contact
  • Resources

More

  • FAQ
  • Pricing

© 2026 Gosai Digital. All rights reserved.

PrivacyTerms
Share:
Design Fundamentals
UI design interface on screen
Modern analytics dashboard with clean UI design
1
Avoid

A pricing page with 8 tiers and 20+ features to compare. Users abandon rather than decide.

Preferred

Offer 3 clearly differentiated tiers. Let users upgrade later if needed.

2
Avoid

A tiny 'Submit' button placed far from form fields. Users miss it or struggle to click on mobile.

Preferred

Make primary actions large and position them directly adjacent to the relevant content.

3
Avoid

A 15-item navigation menu with no grouping. Users can't remember what's where.

Preferred

Group nav items into 4-5 categories with clear labels. Use dropdowns for sub-items.

4
Avoid

A checkout where the back button goes forward to payment. Clever isn't usable — bounce rate was 73%.

Preferred

Follow platform conventions. Put the cart icon top-right, the logo top-left, and navigation where users expect it.

5
Avoid

A checkout form with billing, shipping, and gift options all on one screen — 25+ fields at once.

Preferred

Break checkout into focused steps: shipping, then billing, then review. 3-5 fields per step.

6
Avoid

Requiring users to type exact product codes from memory into a blank text field.

Preferred

Show a searchable dropdown with product names, images, and codes so users can recognize and pick.

7
Avoid

Showing all 47 settings options on a single screen. Users see complexity before value.

Preferred

Group settings into tabs (General, Notifications, Privacy). Show the most common options first, tuck advanced ones behind 'Show more.'

8
Avoid

Using a heart icon for 'delete' because your brand uses hearts. Users click expecting 'favorite.'

Preferred

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.

9
Avoid

Form labels equidistant between two fields. Users can't tell which label belongs to which input.

Preferred

Place labels closer to their field (4px gap) than to the field above (16px+ gap). Spacing creates ownership.

10
Avoid

Same blue button style for both 'Submit' and 'Cancel.' Users can't quickly distinguish them.

Preferred

Use a filled primary button for the main action and an outlined or ghost button for secondary actions.

11
Avoid

A modal dialog with no backdrop or shadow — it blends into the page content behind it.

Preferred

Use a dimmed backdrop, elevation (shadow), and clear borders to separate the modal from background content.

12
Avoid

Every element the same size and weight. Users don't know where to focus first.

Preferred

Make the primary heading 2-3x larger than body text. Use color and weight to create a clear 1-2-3 reading order.

13
Avoid

Elements at random positions with inconsistent margins. The page feels chaotic.

Preferred

Align elements to a consistent grid. Use the same margin and padding values throughout the layout.

14
Avoid

Light gray text (#999) on white background. Fails WCAG contrast and strains eyes in bright environments.

Preferred

Use #525252 or darker for body text on white. Meet 4.5:1 contrast ratio minimum for all text.

15
Avoid

Content crammed edge-to-edge with minimal padding. Users feel overwhelmed and miss key information.

Preferred

Use generous padding around content blocks. Let sections breathe — whitespace signals confidence and quality.

16
Avoid

Each section uses a different visual style, button shape, and icon set. Feels like five different websites.

Preferred

Define a style system: one button style, one icon set, one spacing scale. Reuse them everywhere.

17
Avoid

Flat text that's actually a button. Users hover randomly to discover it's interactive.

Preferred

Give buttons a background, border, or shadow. Use cursor:pointer and a visible hover state to signal clickability.

18
Avoid

Blue buttons mean 'confirm' on one page and 'cancel' on another. Users learn to distrust their instincts.

Preferred

Pick one color for primary actions and stick to it everywhere. Blue always means 'go,' red always means 'destructive.'

19
Avoid

A 'Learn More' link that opens a video. Users expect text and get something else.

Preferred

Label links honestly: 'Watch the demo (2 min video)' or 'Read the full guide.' Tell users what happens next.

20
Avoid

Nav items labeled 'Solutions' and 'Resources' with no indication of what's inside.

Preferred

Use descriptive labels with preview text: 'Services — Voice agents, internal tools, strategy.' Give users a scent trail.

21
Avoid

No visual indication of which page the user is on. Every page looks identical — users feel lost.

Preferred

Highlight the active nav item, show breadcrumbs, and use page titles so users always know where they are.

22
Avoid

A multi-step wizard with no way to go back or cancel. Users feel trapped and abandon.

Preferred

Always provide Back, Cancel, and a visible step indicator. Let users leave and return without losing progress.

23
Avoid

User clicks Submit and nothing happens. No spinner, no disabled state. They click 3 more times — 3 duplicate tickets.

Preferred

Disable the button on click, show a spinner, and display a success/error toast when the action completes.

24
Avoid

A date picker that allows February 31st and only shows an error after form submission.

Preferred

Disable invalid dates in the picker itself. Prevent the mistake from happening rather than punishing it after.

25
Avoid

A delete action with no confirmation and no undo. One misclick destroys hours of work permanently.

Preferred

Show a confirmation dialog for destructive actions. Even better: soft-delete with an 'Undo' toast for 10 seconds.

26
Avoid

Using color alone to indicate errors. Color-blind users can't distinguish valid from invalid fields.

Preferred

Combine color with icons and text: a red border + warning icon + 'Email is required' message. Triple redundancy.

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)
Get in Touch
More Resources