# UX Principles Guide for Building Web Software > Six core UX principles for building web software end users love — when prompting Leo, or designing on your own. Source: https://llamapress.ai/wiki/ux-principles-for-web-software | Updated: 2026-07-31 --- [Back to Wiki](https://llamapress.ai/wiki) Six principles for building apps your end users find effortless. 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](https://llamapress.ai/wiki/ux-principles-for-web-software#orientation) [Principle 2 Eliminating Friction](https://llamapress.ai/wiki/ux-principles-for-web-software#friction) [Principle 3 Minimize Distance](https://llamapress.ai/wiki/ux-principles-for-web-software#distance) [Principle 4 Surface, Don't Bury](https://llamapress.ai/wiki/ux-principles-for-web-software#surface) [Principle 5 One Consistent Pattern](https://llamapress.ai/wiki/ux-principles-for-web-software#consistency) [Principle 6 Progressive Disclosure](https://llamapress.ai/wiki/ux-principles-for-web-software#disclosure) 1 ## 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." 2 ## 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 Email 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 Email 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." <%= render "wiki/cookbook\_card", slug: "...", note: "optional override of the summary line" %> Title/summary are read from the guide's YAML frontmatter at render time, so the card never drifts from the guide. Unknown/invalid slug → renders nothing (a broken reference must not 500 a wiki article). %> Cookbook recipe Password Show/Hide Toggle (eye icon or checkbox) A one-controller friction fix: an eye icon or a "Show password" checkbox so typos never cause a failed login. Includes a live demo. [Open guide](https://llamapress.ai/cookbook/password-show-hide-toggle) Password Show/Hide Toggle (eye icon or checkbox) [Open full page ↗](https://llamapress.ai/cookbook/password-show-hide-toggle) 3 ## 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 #0069 $2,200 Globex Invoice #0045 $2,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 Email Phone The eye has to jump the gap to pair each one. Good Label sits right on its field Email 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." 4 ## 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](https://llamapress.ai/wiki/ux-principles-for-web-software#friction): 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." 5 ## 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." 6 ## 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](https://llamapress.ai/wiki/ux-principles-for-web-software#friction) "ask for less" and [Principle 4's](https://llamapress.ai/wiki/ux-principles-for-web-software#surface) "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.