UX Principles Guide for Building Web Software

Whether you're prompting Leo to build a feature or shaping it yourself, good UX comes down to a handful of principles. The best software feels effortless — users always know where they are, what to do next, and how to get there with the fewest possible steps.

Use these six principles as a checklist, and as language you can hand directly to Leo when you describe what you want.

Principle 1 Orientation Principle 2 Eliminating Friction Principle 3 Minimize Distance Principle 4 Surface, Don't Bury Principle 5 One Consistent Pattern Principle 6 Progressive Disclosure

Disorientation vs. Orientation

Every screen should silently answer three questions: Where am I? How did I get here? Where can I go next? Answer them clearly and users feel oriented and confident. Fail, and they feel disoriented — lost, unsure whether their last action even worked.

Disorienting

Unnecessary redirects — bouncing to a new page when the work could happen on the current one.
Saving = teleporting — a save that throws the user to a list or detail page, losing their context. Did it even save?
Dead ends — no breadcrumb, no way back, no obvious next action.

Orienting

Persistent navigation — a consistent top nav bar and breadcrumbs so users always know where they sit.
Self-explaining labels — "Add Customer" beats "New"; "Save Invoice" beats "Submit."
Intuitive tables — sortable column headers, a visible search box, sensible default ordering.
Edit in place — on save, stay put and reflect the change immediately.

See the difference

Bad No nav, no breadcrumb, vague button

Edit

Clicking Submit redirects to a list page — did it save?

Good Nav + breadcrumb + clear label + inline save

Home Customers Invoices

Edit Invoice — Acme Co

Saved

Stays on the page and confirms inline.

See the difference — self-explaining controls

Bad Icon-only — guess what each does

Sync? Publish? Settings? Export? Who knows.

Good Icon + label — no guessing

The label removes all ambiguity.

See the difference — empty states

Bad A dead end with no next step

No records found.

Good Explains + offers the next action

No customers yet

Add your first customer to start sending invoices.

Prompt Leo like this: "When I save this form, stay on the same page and show a confirmation instead of redirecting. Add breadcrumbs and make the table columns sortable and searchable."

Eliminating Friction to Outcomes

Every click, screen, and decision is a small tax on the user. Get them to the outcome they want in as few steps as possible — minimize the clicks, the screens, and the distinct actions a task requires.

Make the path obvious, not secret

Workflows should never be a hidden combination — "press this button, then that one, then this other one." If a task takes multiple steps, the app should lead the user through each one.

Wizards & walkthroughs

Break multi-step work into a guided sequence — one or two actions at a time.

One obvious next step

At every stage, make it visually clear what the primary action is.

Remove the optional

Cut fields, screens, and clicks that aren't essential. The shortest correct path wins.

See the difference

Bad Everything at once, no clear next step

New Order

Which button first? It's a secret combination.

Good One step at a time, one clear action

Customer 2 Items 3 Review

Step 2 of 3 — Add items

Pick the products for this order.

The next step is never in doubt.

See the difference — ask for less

Bad Demands everything up front

Create account

First name

Last name

Password

Confirm password

Company

Job title

Phone

How did you hear about us?

9 fields before they've even tried it.

Good Only what's essential now

Create account

Password

Ask for the rest later, in context.

See the difference — editing a value

Bad A trek through multiple pages

Project name: Q3 Launch

Settings General Edit Save

Four clicks to rename one field.

Good Edit right where it lives

Project name

Click the value, type, done.

Prompt Leo like this: "Turn this into a step-by-step wizard with one clear action per screen, and reduce this 4-page flow down to as few clicks as possible."

Minimize Distance — Cluster What Belongs Together

The eye has to scan to connect related things. The farther apart related concepts, actions, and information sit — vertically or horizontally — the more work the user does to tie them together. Keep related things close.

Cluster related actions and data

A record and its buttons, a label and its input, a total and the rows it sums — keep them adjacent so the eye doesn't travel.

Sticky navigation

Keep key navigation and primary actions in view as the user scrolls, so controls stay near the content.

Density when it helps

For long lists, a condensed table beats large white-space-heavy cards — scan many rows at a glance. Reserve roomy cards for a few high-importance items.

Put feedback where the eye already is

Flash notifications must be impossible to miss. Don't drop them halfway down the page or above the user's current view, where scrolling can hide them. Pin them to a consistent, fixed position — typically the top-right corner — easy to see and easy to dismiss.

See the difference — scanning a long list

Bad Big cards — endless scrolling

Acme Co

Invoice #0059

$3,200

Globex

Invoice #0066

$1,200

…only 2 rows visible in all this space.

Good Condensed — many rows at a glance

Customer	Invoice	Amount
Acme Co	#0012	$1,200	View
Globex	#0013	$3,400	View
Initech	#0014	$880	View
Umbrella	#0015	$5,050	View
Stark	#0016	$2,110	View

5 rows in the same height — actions clustered right.

See the difference — where the notification lands

Bad Buried below the fold

Saved! (good luck seeing me)

User never scrolls here →

Good Fixed top-right, easy to dismiss

Invoice saved

See the difference — keep labels near their fields

Bad Labels stranded far left

Phone

The eye has to jump the gap to pair each one.

Good Label sits right on its field

Phone

Pairing is instant — no scanning.

See the difference — make the primary action stand out

Bad Everything shouts equally

Delete this invoice?

Two identical buttons — easy to click the wrong one.

Good Primary + quiet secondary

Delete this invoice?

Weight and color signal which is which.

Prompt Leo like this: "Group each row's actions next to the row, make the nav bar sticky, use a condensed table for this list, and show flash messages as dismissible toasts fixed to the top-right."

Surface, Don't Bury — Promote Primary Workflows

The work people do every day should be the easiest to reach. Where a feature lives in your navigation is itself a UX decision — the deeper you bury something, the less it gets used. If Meetings is core to the app, it belongs on the top nav bar, not three clicks down under Admin ▸ Settings ▸ Meetings.

This is different from Principle 2: friction is about the steps inside a single task; this is about how your whole app is structured — what's reachable at a glance versus hidden away in a menu.

The rule of thumb: prominence = frequency × importance

Rank your features by how often and how critically they're used. The top of that list earns a spot in the main navigation. Rarely-touched things — one-time setup, admin config — should live deeper; that's correct, not a bug. The goal isn't to surface everything, it's to surface the right things.

See the difference — reaching a daily workflow

Bad Buried three levels deep

DashboardCustomersAdmin ▾

1 Click Admin

2 Click Settings

3 Click Meetings

4 Finally — the list

Used daily, yet hidden where no one looks.

Good First-class nav item, one click

Dashboard Meetings Customers Admin ▾

Always visible, always one click away.

See the difference — surface the right things, not everything

Bad Everything on the bar — nothing stands out

Dashboard Meetings Customers Invoices Reports Settings Billing Users Roles Imports Exports Webhooks Logs Audit

14 equal items — the daily ones drown in the noise.

Good Top few promoted, the rest in "More"

Dashboard Meetings Customers Reports More ▾

Daily work up front; rare config tucked inside “More”.

Prompt Leo like this: "Meetings is something I use every day — promote it to a top-level item in the nav bar instead of nesting it under Admin. Keep the rarely-used settings in a secondary ‘More’ menu."

One Consistent Pattern — What You See Is What You Get

The same thing should look the same everywhere it appears, and you should be able to change it right where it lives. The classic trap: viewing an invoice looks one way, but to change it you get bounced to a totally different edit form — a wall of inputs that looks nothing like the invoice itself. The user has to learn two mental models for one object, and re-orient every time they switch between reading and editing.

The best experience is What You See Is What You Get: you edit the invoice on the invoice — change a price, add a line item dynamically, and watch the total update in place. You book an appointment by clicking the calendar, not by filling out a form and hoping it landed. Viewing and editing are one surface, and it's obvious at a glance whether editing is currently enabled.

Same layout, view & edit

Fields sit in the same place and order whether you're reading or changing them.

Editing is a visible state

Make it unmistakable when edits are on — active inputs, a Save button, a clear "Editing" cue.

Reuse the pattern

One object, one component. Don't make users relearn a second design for the same data.

See the difference — editing an invoice & its line items

Bad A separate form that's nothing like the invoice

Edit Invoice #0012

Line items

A wall of inputs. No running total — submit and go check.

Good Edit the invoice on the invoice

Invoice #0012

Acme Co

Editing

Item	Qty	Amount
Design work	10	$1,200
		$360

Total $1,560

Click a line to edit it, add rows inline, total updates live.

See the difference — booking an appointment

Bad A form, divorced from the calendar

New Appointment

Title

Date

Start time

End time

Type a date & time blind, submit, then go see where it landed.

Good Click the slot, type the title, done

Tuesday, Jun 16

9:00

10:00

10:00 – 10:30

11:00

+ click to add

12:00

The appointment appears exactly where it lives on the calendar.

Prompt Leo like this: "Let me edit the invoice on the invoice page itself — add and remove line items inline and update the total live, instead of a separate edit form. And for scheduling, let me add an appointment by clicking a slot on the calendar rather than filling out a form."

Progressive Disclosure — Reveal Detail on Demand

Show people the essential few things up front, and tuck the rest away until they ask for it. Pouring every field, option, and column onto one screen overwhelms users and buries the thing they actually came for. Progressive disclosure reveals detail in layers: a clean overview first, then the richer detail one click deeper.

It's the mechanism behind Principle 2's "ask for less" and Principle 4's "surface the right things." You're not deleting the detail — you're deferring it until the user wants it.

Overview first

Lead with the handful of columns or fields people scan for. Everything else waits one layer down.

Detail on demand

A click opens a side panel, drawer, or expandable row with the full record — no page jump, no lost context.

Kill the sideways scroll

A table you scroll horizontally hides half its data off-screen. Fewer columns + a detail view beats an endless scroll.

See the difference — a table with too many columns

Bad 12 columns — scroll sideways to see them

Customer	Email	Phone	Company	Plan	Status	MRR	Created	Last login	Owner	Region	Tags
Acme Co	ap@acme.co	(555) 010-2244	Acme Co	Pro	Active	$1,200	Mar 4	2h ago	Dana R.	US-West	VIP
Globex	ar@globex.io	(555) 778-0090	Globex	Free	Trial	$0	Jun 1	1d ago	Lee P.	US-East	—
Initech	ap@initech.com	(555) 221-7788	Initech	Pro	Active	$880	Feb 9	5m ago	Dana R.	EU	Net-30

Half the columns live off-screen — the user scrolls back and forth and still can't compare rows.

Good 4 key columns — click a row for the rest

Customer	Plan	Status	MRR
Acme Co	Pro	Active	$1,200
Globex	Free	Trial	$0
Initech	Pro	Active	$880
Umbrella	Team	Past due	$5,050

Just what you scan for — click a row to reveal the full record.

Acme Co

Pro · Active · $1,200 MRR

Emailap@acme.co

Phone(555) 010-2244

CompanyAcme Co

OwnerDana R.

CreatedMar 4, 2026

Last login2h ago

RegionUS-West

TagsVIP, Net-30

Slides in from the right — the table stays put behind it.

The same idea applies to the controls themselves, not just data. A copy button doesn't need to sit on screen at all times — reveal it when the user hovers the thing they'd copy. And the instant they click, tell them it worked: a silent action leaves them asking "wait, did that copy?"

See the difference — when to show the copy button

Bad A copy button on every row, always

API key sk_live_9f2c8b1a

Webhook URL https://acme.co/hooks/27f

Account ID acct_4821x

Three buttons competing for attention before anyone needs one.

Good Revealed on hover — quiet until needed

API key sk_live_9f2c8b1a

Webhook URL https://acme.co/hooks/27f

Account ID acct_4821x

Hover a row — the button appears only when it's relevant.

See the difference — feedback when you click copy

Bad Click it… did anything happen?

API key

sk_live_9f2c8b1a

No checkmark, no toast — so they click again, unsure it worked.

Good Instant confirmation — checkmark + toast

API key

sk_live_9f2c8b1a

Click Copy — the button confirms and a toast flashes top-right.

Copied to clipboard

Prompt Leo like this: "This table has too many columns and scrolls sideways. Keep only the few I scan for — name, plan, status, amount — and when I click a row, slide in a side panel with the full record instead of widening the table."

The takeaway

Great UX isn't decoration — it's the removal of confusion and effort. Keep users oriented, strip out friction, cluster what belongs together, surface the work people do most, keep one consistent pattern across viewing and editing, and disclose detail progressively as it's needed. When you describe features to Leo, name the principle you care about and it will build toward it.