A visual starter guide for QA teams
Learn to see software the way real users do
Short lessons, live examples you can click, and a searchable glossary — so a QA team new to UX can learn fast.
👀 Tip: the examples below are real, live components — hover them, click them, flip the switches. That's the fastest way to learn what each one is.
Part 1
The mindset shift
You already spot when something breaks. UX just widens what counts as "broken" — confusing, slow, or unfair also count.
🧪 QA asks "Is it broken?" — does it match the spec and function correctly?
🎯 UX also asks "Does it work for people ?" — is it clear, fast, and easy to finish?
Remember: a bug breaks the software. A UX issue breaks the person's ability to get what they came for. Report both.
Part 2 · the important one
The component gallery
Every piece of an interface has a name. Here they are as real, working examples — see it, then you'll never forget the word.
Buttons & CTAs
Save
Primary button The main action on a screen. Bold and filled.
Cancel
Secondary button A lesser action. Outlined or plain.
Start free trial
CTA (Call to Action) The one thing the page wants you to do.
Link / ghost button Low-emphasis action that looks like a link.
Submit
Disabled state Visible but not usable yet — greyed out.
States The same button looks different by state.
Inputs & forms
Field + label + placeholder Label names it; placeholder is the faint hint inside.
Inline validation Instant feedback as you type — right or wrong.
Checkboxes Tick on/off. Several can be chosen.
Radio buttons Pick only one from the group.
Toggle / switch On/off. Click it — it flips.
Choose a country… Ukraine Poland
Dropdown / select Opens a list to choose from.
Feedback & status
Spinner / loader Shown while the app is working.
Progress bar How far along a task or upload is.
Toast / snackbar A brief message that pops up, then fades.
delivery dateArrives in 3–5 days
Tooltip Hover the dotted text — a hint appears.
Badge / notification count The little number on an icon.
Skeleton screen Grey shapes shown while content loads.
Navigation
Overview Reviews Specs
Tabs switch views without leaving the page. Click "Reviews" and "Specs".
Tabs Switch between views in the same area. Click them.
Breadcrumbs Shows where you are in the site.
Pagination Move through pages of a long list.
Menu icons ☰ opens a hidden menu; ⋮ opens more actions.
Avatar The image or initials for a user.
Content & overlays
Trail Runner Lightweight shoe
Add to cart Card A box grouping image, title, text, and a button.
Delete item Delete this item? This can't be undone.
Cancel Delete
Modal (dialog) Click "Delete" — a window blocks the page until you choose.
NEW
Chip / tag / pill A tiny rounded label for status or category.
Part 3
How real users behave
People skim, guess, and give up fast. A few pictures worth remembering.
Buy now
— the "fold" —
Above vs below the fold. Anything under the red line needs scrolling — and many users never scroll. Keep the key action above it.
eyes trace an "F"
Scanning, not reading. Eyes sweep the top, then down the left. Put what matters where the eye lands.
Visit — 100%
Cart — 40%
Buy 8%
The funnel. Users fall away at every step. The biggest drop-off is where to look for problems.
Behavior "tells" to watch while testing: rapid rage-clicks , dead clicks on things that aren't links, double-submits on slow pages, and people bouncing back and forth. Each = a spot a real user struggles.
Part 4
Money changes behavior
People react strongly to price and feel cheated by surprises. QA is the safety net for the numbers.
$99
$49
The first number ("$99") is the anchor —
it makes $49 feel like a deal.
Anchoring. The number people see first shapes what feels cheap or expensive.
✅ Numbers must agree Plan card, cart, and receipt must all show the same total. Check tax, discounts, monthly vs yearly.
🚫 No surprise fees A cost that appears only at the last step is the top reason carts get abandoned.
🧨 Break the edges Expired coupons, stacked discounts, plan switches, refunds, empty carts, huge quantities.
🕵️ Spot dark patterns Pre-ticked add-ons, a tiny "no thanks", a hidden cancel button. Even if they "work", flag them.
Part 5
Spot & report a UX issue
If you feel any of these while testing, it's worth logging.
You had to stop and think what to do next.
You clicked something that did nothing , or missed something clickable.
You couldn't tell if your action worked .
An error didn't say how to fix it .
You re-entered info you already gave, or the flow had too many steps.
You felt tricked, rushed, or pressured .
Severity (user pain) →
Priority (fix urgency) →
Hurts a lot, low urgency
Fix first big pain + urgent
Minor, can wait
Small but on a key screen
Severity vs priority. How much it hurts the user (severity) is not the same as how soon to fix it (priority). Note both.
Report shape: where (screen + device) → user's goal → what goes wrong (steps) → who & how bad → evidence (screenshot) → what "good" looks like .
Part 6
Quick 10-point checklist
Run these against any screen. Tap to expand.
1 · Does it show what's happening? Spinners, progress, "saved". Check: is there feedback after every action?
2 · Plain words, no jargon? Check: would a first-timer understand every label and message?
3 · Can you undo / cancel / go back? Check: can you leave any state without losing work?
4 · Is it consistent? Check: does "Delete" look and act the same everywhere?
5 · Does it prevent mistakes? Check: can you break something by accident, with no confirm?
6 · Show, don't make me remember Check: must you memorize a code from another screen?
7 · Fast for pros, clear for newbies? Check: is the common path quick and the first path obvious?
8 · Is it clutter-free? Check: is anything on screen not helping the task?
9 · Do errors help you recover? Check: does the message say what to do next, blame-free?
10 · Is help easy to find? Check: if stuck, could you find help inside the product?
Part 7 · reference
Terminology glossary
Every term in plain words, with an example. Search or filter — great for onboarding.
No terms match. Try a shorter word.
QA → UX Training Guide · a visual starter for QA teams new to UX. Examples are live components; principles are evergreen (behavior notes reflect 2026 practice). Add your own product's terms to the glossary anytime.