Most bad UI fails for predictable reasons. These checklists are the predictable reasons, written down. Run them before you ship, not after.
Screen Review
| Check | Standard |
|---|
| Primary purpose is obvious | A new user can explain the screen in one sentence |
| Primary action is obvious | One next step clearly stands out |
| Visual hierarchy is strong | The eye lands in the intended order |
| Spacing reveals grouping | Related elements feel grouped, unrelated ones separated |
| Copy is specific | Labels and buttons say exactly what they do |
| Real states exist | Empty, loading, success, and error are designed |
| Check | Standard |
|---|
| Only necessary fields included | Friction is minimized |
| Labels are persistent | No placeholder-only labeling |
| Errors are actionable | What happened and how to fix it are clear |
| Progress is preserved | User input survives failures |
| Mobile completion is smooth | Keyboard, autofill, and CTA placement work well |
| Commitments are clear | Price, billing, and timing are visible |
Navigation Review
| Check | Standard |
|---|
| Structure matches user mental model | Labels and categories are intuitive |
| Location is visible | Current section is always obvious |
| Backtracking is easy | Breadcrumbs, back, cancel, or close are present |
| Search is easy to find when important | It is not hidden behind unnecessary friction |
| Filters are manageable | Active filters and reset actions are visible |
Accessibility Review
| Check | Standard |
|---|
| Keyboard works everywhere | No mouse-only traps |
| Focus is visible | Every interactive element has a strong focus state |
| Contrast passes | Text and controls are readable |
| Semantics are correct | Buttons are buttons, links are links |
| Motion is respectful | Reduced motion is supported |
| Zoom works | Core tasks still work at 200% |
| Check | Standard |
|---|
| UI reacts quickly | Clicks get immediate feedback |
| Layout stays stable | No surprising jumps |
| Loading states help | Users know what is happening |
| Assets are efficient | Images, fonts, and scripts are controlled |
| Slow connections are tolerable | Core tasks remain usable |
Conversion Review
| Check | Standard |
|---|
| Value proposition is clear | Users understand the benefit quickly |
| Risk reducers are present | Proof, policies, and reassurance exist near decisions |
| CTA copy is specific | Outcome-based language is used |
| Pricing is understandable | No hidden costs or confusing plan logic |
| UI respects the user | No manipulative patterns or false urgency |
Red Flags
If you see these, stop and fix them:
- more than one primary action competing on the same screen
- ambiguous CTA labels like
Continue with unclear consequences - disabled buttons without explanation
- errors that erase input
- modals used for long, complex workflows
- color-only status signals
- mobile layouts that merely stack without reprioritizing
- slow interfaces with no local feedback
- pricing or commitment details hidden until the end
Final Standard
A good web UI should feel:
- obvious on first scan
- efficient on repeat use
- safe when users make mistakes
- inclusive across contexts
- trustworthy at decision moments
- fast enough that users stay in flow
Where to Go From Here
The checklists in this chapter only stay useful if they meet real screens. Pick one product surface this week and run the screen, form, accessibility, and performance reviews against it. Note what fails. Fix the top three. Move to the next surface.
For deeper reading, the books and references in the README are the highest-value next stop: Refactoring UI for visual decisions, Don't Make Me Think for clarity, the WCAG guidelines for accessibility specifics, and the Nielsen Norman Group archive for evidence behind most of what is in this tutorial.