UI Good vs Bad Gallery
This page compares common interface mistakes against corrected versions in the same context. Each section focuses on observable outcomes: clarity, scan-ability, consistency, and accessibility.
Use it as a quick review reference before shipping interface changes.
Key takeaways
- Hierarchy helps users identify primary paths quickly.
- Visible labels and inline errors improve form completion.
- Consistent spacing and alignment speed up scanning.
- Readable type needs constrained width and stable scale.
- Interactive controls require hover and focus-visible states.
- States like tables, alerts, and empty screens need clear meaning and next steps.
1) Buttons and links hierarchy
BAD DESIGN
Primary action looks like link
The main action has the same treatment as supporting links. Users pause to identify which control completes the task.
GOOD DESIGN
Primary button + secondary link
Primary action uses button emphasis while secondary actions remain links. Hover and focus-visible states make priority and keyboard flow explicit.
2) Form labels and errors
BAD DESIGN
Placeholder-only + detached error
Placeholders disappear after typing and error text is not tied to the field. Users lose context and need extra correction attempts.
Error: invalid entry.
GOOD DESIGN
Visible label + inline error
Labels remain visible and the error appears directly under the control. Grouping improves clarity and fixes are faster.
Enter a valid email format.
3) Spacing consistency
BAD DESIGN
Inconsistent margins and padding
Random spacing creates crowded edges and uneven rhythm. Related items are harder to recognize as groups.
GOOD DESIGN
Consistent spacing scale
Repeated spacing values separate groups clearly. Users scan sections with less visual friction.
4) Typography and readability
BAD DESIGN
Wide text + mixed type scale
Long line length and frequent size shifts reduce reading speed. Users spend more effort tracking lines.
Account Information Overview For Current Subscription and Team Member Access Rights
Review all details and plan usage before renewal processing this month.
GOOD DESIGN
Constrained width + simple scale
A limited measure and stable hierarchy improve readability. Content can be scanned in a predictable pattern.
Account summary
Review subscription status, usage, and renewal date before plan changes.
5) Alignment to a grid
BAD DESIGN
Mismatched left edges
Inputs and labels start at different x positions. Visual drift slows form scanning.
GOOD DESIGN
Shared container and gutters
Fields align to one grid and column width. Group relationships become obvious at a glance.
6) Cards click targets
BAD DESIGN
Tiny read-more target
Only the small text link is clickable while the card appears interactive. This mismatch increases miss-clicks.
Release notes
Version updates for billing and reports.
Read moreGOOD DESIGN
Clear primary action
Primary destination is clear and feedback is consistent. Users can predict where interaction occurs.
Release notes
Version updates for billing and reports.
Open details7) Navigation dropdown (CSS hover)
BAD DESIGN
Submenu collapses on movement
A hover gap closes the submenu while moving pointer. Focus styles are missing, so keyboard position is unclear.
GOOD DESIGN
li:hover + li:focus-within
Submenu stays open for both pointer and keyboard navigation. Focus ring shows current location clearly.
8) Table readability
BAD DESIGN
Dense rows and weak header
Header and body blend together, reducing quick comparison. Dense rows increase reading effort.
| Plan | Users | Status |
|---|---|---|
| Starter | 3 | Active |
| Team | 12 | Trial |
GOOD DESIGN
Clear header and row rhythm
Header contrast and zebra rows improve scan speed. Users can compare values with less effort.
| Plan | Users | Status |
|---|---|---|
| Starter | 3 | Active |
| Team | 12 | Trial |
9) Empty state
BAD DESIGN
No next step
A blank area or "No data" gives no recovery path. Users cannot act without guessing.
No data.
GOOD DESIGN
Context + one action
State explanation plus one action supports immediate recovery. Users know what happened and what to do next.
No invoices yet. Create your first invoice to start tracking payments.
10) Notifications / alerts
BAD DESIGN
Looks like normal paragraph
Low distinction and long text hide urgency. Important status changes are easy to miss.
Your payment attempt was not successful due to provider settings mismatch and might require manual review.
GOOD DESIGN
Short title + concise message
Clear labeling and concise copy communicate status quickly. Distinct styling separates alerts from body content.
11) Settings page hierarchy
BAD DESIGN
No grouping, misaligned controls
Flat lists without sections make settings hard to scan. Misalignment increases interpretation time.
GOOD DESIGN
Grouped sections with alignment
Section headings define intent and aligned controls improve scan flow. Users find target settings faster.
Preferences
Notifications
12) Sidebar + content layout
BAD DESIGN
Changing sidebar width
Sidebar width shifts between pages and moves content columns. Orientation is lost because reading zones keep changing.
GOOD DESIGN
Fixed shell and gutters
Fixed sidebar width and consistent content max-width create predictable scan zones. Navigation and content remain stable across pages.
13) Ugly vs beautiful card surface
BAD DESIGN
Ugly visual treatment
Mixed border styles, low contrast text, and uneven spacing make the card hard to parse quickly. The call-to-action is visible but lacks visual priority.
MONTHLY REPORT
active users: 1244 / revenue: $13,294 / churn: 7.4%
openGOOD DESIGN
Beautiful visual treatment
The card uses consistent spacing, readable contrast, and clear information tiers. The action is prominent and easy to identify during rapid scanning.
Monthly report
Active users: 1,244. Revenue: $13,294. Churn: 7.4%.
Open report14) Ugly vs beautiful pricing block
BAD DESIGN
Ugly pricing hierarchy
The plan name, price, and details use similar emphasis and cramped spacing. Users cannot quickly distinguish headline value from secondary details.
PRO PLAN $29 monthly 10 projects 50GB support included
buy nowGOOD DESIGN
Beautiful pricing hierarchy
The plan title and price are dominant, while included details are grouped below in supporting text. The primary action is clear and consistently styled.
Pro plan
$29 / month
10 projects, 50GB storage, priority support.
15) Ugly vs beautiful dashboard density
BAD DESIGN
Overcrowded panels
Metrics, actions, and filters are packed with minimal spacing, so everything competes at once. Users need extra scanning to find high-priority information.
GOOD DESIGN
Balanced information density
Related metrics are grouped with consistent spacing and clear headings. Important values stand out while secondary context remains available.
Users
1,244 active this month
Revenue
$13,294 monthly recurring
16) Ugly vs beautiful hero header
BAD DESIGN
Weak visual hierarchy
Heading, body text, and button have similar weight, so the key message is not obvious. Users need extra time to understand the page purpose.
Manage projects faster with less setup.
Get startedGOOD DESIGN
Clear hero message and CTA
Strong headline contrast and spacing guide attention from message to action. Users can identify value and next step quickly.
Ship projects faster
Plan, track, and deliver in one workspace.
17) Ugly vs beautiful modal dialog
BAD DESIGN
Ambiguous actions
The dialog has unclear action labels and no visual emphasis between cancel and destructive actions. Users may trigger the wrong outcome.
Delete file?
GOOD DESIGN
Intentional action hierarchy
The modal title and consequence text are explicit, with clear destructive and secondary actions. Decision risk is reduced through label clarity.
Delete project?
This action permanently removes files and cannot be undone.
18) Ugly vs beautiful empty dashboard
BAD DESIGN
Empty without guidance
The dashboard appears blank with no setup hint or next action. Users are left uncertain about how to start.
No widgets.
GOOD DESIGN
Guided first step
The state explains why nothing is shown and provides a single suggested action. Users can start setup immediately.
No widgets yet. Add a metrics widget to track activity.
19) Light vs Dark mode (good vs bad)
BAD DESIGN
Inconsistent theme tokens
Light mode uses dark text, but dark mode keeps the same text and border values, causing low contrast. Components look disconnected across themes.
GOOD DESIGN
Consistent contrast in both modes
Both themes preserve hierarchy, readable contrast, and consistent component spacing. Users switch modes without losing clarity.
20) Ugly vs beautiful checkout summary
BAD DESIGN
Poor price grouping
Line items and totals blend together with no visual separation. Users may miss taxes, discounts, or final payable amount.
Subtotal $42.00 Tax $3.20 Total $45.20
PayGOOD DESIGN
Clear total summary
Itemized values are separated from the final total and action. Users can validate cost quickly before confirming payment.
Checklist
- Primary actions are visually dominant over secondary links.
- Forms use visible labels and field-level error messages.
- Spacing and alignment follow a consistent scale/grid.
- Text blocks use readable line length and stable hierarchy.
- All interactive elements show hover and focus-visible states.
- Tables, alerts, and empty states are easy to parse quickly.
- Layout shell remains stable across pages.