UX vs UI — what's the difference?
UI (user interface) is what it looks like — colors, buttons, type. UX is what it's like to use — the flow, the clarity, whether it's frustrating or effortless. A gorgeous UI with bad UX still fails. You need both, but UX comes first: decide what should happen, then make it pretty.
The principles that matter most
Get these right and 90% of your UX is handled.
Clarity over clever
Obvious beats impressive. Plain labels ("Sign up", not "Embark") and clear actions win every time.
Visual hierarchy
The most important thing should look the most important. Size, color, and position guide the eye.
Consistency
Same things look and behave the same way everywhere. Predictable = comfortable.
Feedback
Every action gets a reaction — a hover, a loading state, a "Saved!" message. Never leave users guessing.
Prevent errors
Stop mistakes before they happen (disable invalid buttons, confirm destructive actions) and make them easy to undo.
Don't make me think
Reduce choices and steps. Every extra decision or click is friction. Default to the obvious path.
Accessible to all
Readable contrast, keyboard support, alt text. Good accessibility is good UX. See Accessibility.
Speed counts
A slow page is bad UX no matter how nice it looks. Optimize images and keep it light.
Do & don't
Do
- Make the main action a big, obvious button
- Use real words people understand
- Give links/buttons clear
:hover&:focusstates - Keep forms short; only ask what you need
- Show where the user is and where they can go
- Use whitespace so things can breathe
- Make tap targets at least 44×44px
Don't
- Bury the main action among 10 equal buttons
- Use jargon or cute labels nobody understands
- Make clickable things look unclickable (or vice-versa)
- Ask for info you don't actually need
- Auto-play sound or pop a modal on arrival
- Cram everything together with no spacing
- Rely on color alone to signal meaning
UX laws worth knowing
These aren't rules to memorize for a test — they're shortcuts that explain why certain designs feel good. Reach for them when you're stuck on a decision.
Hick's Law
More choices = slower decisions. Cut options, tuck away advanced settings, and offer one obvious default.
Fitts's Law
Big, close targets are faster to hit. Make primary buttons large and put them where the cursor or thumb already is.
Jakob's Law
People spend most of their time on other sites, so they expect yours to work the same way. Follow conventions before you innovate.
Miller's Law
Working memory holds about seven items. Chunk long lists, numbers, and menus into small, scannable groups.
Law of Proximity
Things placed close together look related. Group with spacing instead of reaching for boxes and borders.
Aesthetic–Usability
Good-looking interfaces are perceived as easier to use, and users forgive small flaws. Polish buys goodwill — but can't fix a broken flow.
Peak–End Rule
People judge an experience by its most intense moment and its ending. Nail the key moment and finish on a high — a clear success screen.
Doherty Threshold
Keep responses under ~400ms or users lose their flow. If something's slow, show progress immediately.
Nielsen's 10 usability heuristics
The most-cited checklist in UX — written in 1994 and still true. Hold any design up against these and the problems jump out.
Every screen needs five states
Designers build the "everything's perfect" view and forget the rest — but real users hit all five. Design each one on purpose.
Full of content
The happy path with real data. The view everyone designs first.
Nothing here yet
First run or no results. Explain what goes here and give a clear next action — never a blank void.
Working on it
Skeletons or spinners so users know the app isn't frozen. Show it instantly.
Something broke
Say what happened in plain words and offer a way forward — retry, go back, get help.
Some, not all
A few results, a half-filled form, a slow connection. Make the incomplete state still useful.
Forms that don't frustrate
Forms are where users quit. Most of that abandonment is avoidable with a handful of habits.
Do
- Keep labels visible above the field, not placeholder-only
- Validate inline and explain the fix right away
- Ask for the fewest fields possible
- Use the right input type & mobile keyboard (
email,tel) - Show a clear success state when it's done
- Mark which fields are optional, not just required
Don't
- Rely on placeholder text as the only label
- Wait until submit to reveal every error at once
- Demand info you don't truly need
- Clear the whole form after one mistake
- Hide why a field was rejected
- Use a tiny "Submit" that's hard to tap
Navigation people don't get lost in
If users can't find it, it doesn't exist. Navigation is half of UX.
Label by what users want
Name links for the user's goal ("Pricing", "Help"), not your internal org chart.
Show where they are
Highlight the current page and use breadcrumbs on deep pages so nobody feels lost.
Offer search
Past roughly 20 pages, a search box beats hunting through nested menus.
Keep it shallow
Fewer levels means less digging. Most things should be reachable in two or three clicks.
Always a way back
A logo that links home and a visible path back. Never strand the user on a dead end.
Works on a thumb
On mobile, collapse to a clear menu with big tap targets. See Mobile Navigation.
Write microcopy that helps
The tiny text on buttons, errors, and empty states does a huge amount of the work. Specific and human beats generic and robotic every time.
How UX actually gets made
Good UX isn't a lucky guess — it's a loop. You don't have to do every step formally, but knowing them keeps you honest.
Research
Learn who the users are and what they're trying to do. Talk to a few real people; read the support questions.
Define
Write down the core tasks and the one thing each page must help the user accomplish.
Wireframe
Sketch the layout and flow in low fidelity — cheap to change before any pixels are polished.
Prototype
Make it clickable, in Figma or HTML, so the flow can be felt rather than just imagined.
Test
Watch real people try it. Where they hesitate or click the wrong thing is your bug list.
Iterate & ship
Fix the biggest friction, ship, then measure and keep improving. UX is never truly "done".
Test it with real people
You're too close to your own design to see its flaws. A handful of quick tests reveals most of them — no lab or budget required.
Five users is enough
About five testers surface roughly 85% of usability problems. You don't need dozens.
Ask them to think aloud
"Tell me what you're looking at and trying to do." Their narration is gold.
Give tasks, not hints
"Buy a blue shirt in medium," then stay quiet. Don't lead them to the answer.
Watch, don't ask
What people do beats what they say. Note where they hesitate, misclick, or give up.
Numbers worth tracking
Task success rate
Can people actually finish the key task? The single most important number.
Time on task
How long the core flow takes. Trending down usually means it's getting easier.
Error rate
How often users hit a wrong turn or a validation error along the way.
Drop-off point
Where people leave. A spike on one step points straight at the friction.
Pre-launch UX checklist
A two-minute pass that catches the most common — and most embarrassing — problems.
- A first-time visitor understands the page in about 5 seconds
- The primary action is the most obvious thing on the screen
- Every link, button, and input has a visible hover and focus state
- It's fully usable with the keyboard alone
- Text has enough contrast and the body is at least 16px
- Tap targets are 44×44px or larger on mobile
- Empty, loading, and error states are all designed
- Forms validate inline and show a clear success message
- Images are optimized so the page loads fast
- You watched at least one real person use it