product-ux-quality

Product & UX Quality

Users never see your architecture; they see whether the button did something. "High quality product" is decided in the last 20% — the states, edges, and moments most developers (and most AI models) skip because the happy path already demos well. This skill is that 20%, as a checklist you don't get to skip.

The Five States rule — every screen, no exceptions

Any view that shows data has five states, and shipping fewer is shipping a bug:

1. Loading — skeleton matching the final layout (not a lone spinner, never a blank flash).
2. Empty — a designed moment, not "No data": say what this screen will show and give the action that creates the first item ("No invoices yet → Create your first invoice"). Empty states are the new user's entire first impression of your product.
3. Error — human words + a retry action. Never a raw error code, never a dead end.
4. Partial/short data — 1 item, 3 items: does the layout still look intentional?
5. Overflow — 10,000 items, a 60-character name, a ₹9,99,99,999 amount: pagination, truncation with tooltip, layout survives.

Build all five while building the screen — a shared query-state component makes state 1–3 free forever; retrofitting is 5× the cost.

Forms — where products win or lose users

• Validate inline, on blur, with the message next to the field — not an alert after submit, and never only server-side (but always also server-side; client validation is UX, not truth).
• Error messages say how to fix: "Mobile number must be 10 digits" not "Invalid input".
• Submit buttons: disabled while submitting with a working indicator (prevents the double-submit that idempotency guards against — fix it at both layers), and the label says what happens ("Create Invoice", not "Submit", not "OK").
• Never lose user input: failed submits keep the form filled; destructive navigation away from a dirty form asks; long forms save drafts if abandonment costs real work.
• Smart defaults everywhere: today's date pre-filled, last-used values remembered, focus in the first field, Enter submits.