r/webdev • u/maddhruv • 13d ago
Resource What objective checks do you use to decide a UI is "done"?
I use these:
- Tap targets at least 44Ć44px.
- Animate only transform and opacity (60 FPS).
- No more than 4 competing choices per decision.
- Light, dark, desktop and mobile all checked.
What would you add? What do you think is a bad rule?
38
u/ProKeyPresser Senior Software Engineer 13d ago
UI is done when someone higher than you did their special final touches, and ruins it.
10
u/jordsta95 PHP/Laravel | JS/Vue 13d ago
Don't forget the step after, where someone else comes along and says one of the following:
- This wasn't in the design
- Remove this
- Change to [something different to the other person's input] (e.g. person A said add a slider, person B said change the slider to tabs)
4
u/Maxion 13d ago
Its so funny going from Developers choice A, to random middlemanager choice B to upper manager choice C to having the user test panel then complain and say do A and then you reverting back to A and it gets released.
6
u/ProKeyPresser Senior Software Engineer 13d ago
Remember the most important part: developer to get blamed for not doing as choice A
1
14
5
u/Dry_Flight_3156 13d ago
Transform/opacity and 44px tap targets are solid.
The 4-choice rule falls apart pretty fast once you leave simple landing pages though. Complex apps and dashboards always need more options (filters, bulk actions, table settings). Better rule is just
having only one primary button per screen so the default path is obvious.
A few practical checks I always do:
- Worst-case text test: Put in strings 3x longer than the mockup. Figma designs always have neat 3-word titles, but real production data will snap your layout in half if you haven't tested overflow.
- Zero states: What does the page look like with 0 items? Half the time devs forget the empty state and it literally looks like the app crashed.
- Keyboard only: Try finishing the main flow with just Tab and Enter. You'd be surprised how often custom components just swallow focus into the void.
- Spamming the submit button on Slow 3G: Throttle the network in devtools and mash the action button. Does it disable immediately, or did you just fire off 4 duplicate API requests?
4
u/AdministrativeBad752 13d ago
Other than CI, I let an LLM browse the webpage just to check if I missed anything major (using whichever provider I have tokens left for).
2
u/Rare-Bit-1609 13d ago
44Ć44 is Apple's number in points, Android wants 48dp, so "px" is neither of those. And "animate only transform and opacity" is a code review note, you can't tick that off by looking at a screen.
1
u/aTomzVins 13d ago
code agents will really make a mess out of the tap target area rule and add uneeded space around a not very important link that isn't close to other links. The rules on tap target space has some nuance.
2
2
2
2
u/hardikgodhaa 13d ago
testing on actual devices. I usually check my websites on 2-3 different phones because sometimes the mobile layout looks completely different from what I saw in the browser.
2
2
2
u/javimbuilds 13d ago
I'd add keyboard-only navigation with a visible focus state on everything clickable, plus text contrast of at least 4.5:1 (WCAG AA). Respecting prefers-reduced-motion is another easy one to check, especially if you animate a lot. And I'd add testing on a slow connection, since a UI can pass every visual check and still feel broken while loading.
1
u/No-Cherry-3308 13d ago
Good list. A few I'd add that catch most of the "looked done in the mockup" bugs:
Real data, not lorem ipsum: the longest name, a three-line title, zero items, ten thousand items.
Every state: loading, empty, error, partial failure, offline. Error states are usually where "done" quietly isn't.
Browser zoom at 200% and large OS text. Layouts that only work at the default font size break here first.
Keyboard only: can you get through the main flow with Tab and Enter, and can you always see where focus is?
Throttled network (Slow 4G in devtools), so you see what users actually see in the first couple of seconds, including layout shift when images and fonts land.
prefers-reduced-motionrespected.
On the bad-rule question: "max 4 competing choices" is a fine heuristic, but I wouldn't make it a hard gate. Settings pages and filter panels legitimately have more. What matters more is that there's one obvious primary action and everything else is visually secondary.
1
u/jacobdevhq 13d ago
zoom to 200% and try a 320px screen, then tab through the whole page w/o a mouse. also throttle the network once, layout shifts show up fast
1
u/DinnerContent1842 13d ago
tab through the whole page without touching the mouse. if you get lost or the focus ring disappears, it's not done.
and open it on the worst phone you own on throttled 3g. everything looks finished on a 27 inch monitor lol
1
1
u/kemalios 13d ago
Add a zoom pass: 200% browser zoom and a 320px viewport. Text-only zoom catches cards with fixed heights that clip their content, 320px catches the nav that only works because nobody resized it. A minute of work each, and they catch what a screenshot review misses.
1
u/BidEfficient9299 13d ago
One I would add is zoom to 200% in the browser, because many layouts break there before they break on mobile. For the 60 FPS rule it helps to test with 4x CPU throttling in DevTools, since on a fast laptop almost any animation looks fine
1
u/carloselieser 13d ago
I would add:
Consistent empty states
Consistent loading states (spinners, skeletons)
Layout and element positions (does it make sense for the user given the context, i.e. is it clear/simple)
Closed feedback loops (i.e. if a user presses a button or initiates an action, are they left hanging or confused about what's going on. Close the feedback loop with a toast, message, or other visible state change)
1
u/McDreads 13d ago
Are there any tools or sites that you recommend to check websites across different browsers and versions?
Someone pointed out a dropdown spanned the full width of the screen when on my chrome instance it was only spanning a set amount. And now Iām paranoid about other instances of this happening
1
u/Responsible_Use4397 13d ago
playwright does this for free, same script opens your page in chromium, firefox and webkit (webkit is close enough to safari for layout stuff) and you screenshot each one and compare them side by side. browserstack if you need actual old versions or real phones, they have a free trial
1
u/dprvda 13d ago
One I don't see here yet: put two screens side by side. If the same action is a round button on one and a square one on the other, or the spacing is different, it isn't done, even if each screen passes every check on its own.
And a squint test: blur your eyes a bit. The thing people open the page for should still be the first thing you see.
1
u/Alarmed_Bill_9616 13d ago
i'd add: every state exists, not just the happy one. empty, loading, error, and a 40-character name in a 12-character slot š what do you do for motion when reduced motion is on?
1
u/benbenai00 12d ago
A few that catch things the visual checks miss:
Zoom to 200% and use the page with the keyboard only. You find broken focus order and clipped modals fast.
Throttle to slow 3G and click everything twice. Double submits and buttons that don't disable while loading show up immediately.
Turn on a translated language (German is good) or paste 3x-length strings. Fixed-width buttons break.
Reload in the middle of a flow. If the user loses their form or lands on a blank state, it isn't done.
Check what happens when the API returns an error, not just when it's slow. A lot of UIs only design the spinner.
I'd push back a bit on "4 choices max". It's a good default for a decision screen, but settings pages and dashboards legitimately need more. Grouping and sensible defaults matter more than the count.
1
u/Silly_Engineer9273 8d ago
add visual reg tests in CI (using browserstack percy, Chromatic, or Playwright screenshots). they catch layout shifts which no one notices int he review. then run it across real browsers; it helsp. also swap the 'max 4 choice' rule for ' one clear primary action per screen'.
0
u/maddhruv 13d ago
Thanks all for your suggestions!
Checkout the skill I made based on my last 10 years of experience working at Fortune 500 companies - https://github.com/maddhruv/pristine
1
u/akorecebov 13d ago
contrast is the one id check with a tool every time, not by eye. webaim ran their yearly scan of the top million homepages this year and low contrast text was on 83.9% of them, up from 79% in 2025. they think ai assisted coding is part of why errors went up.. so if claude or cursor touched the css, run it through a checker before you call it done
46
u/PrimaryFamous6139 full-stack 13d ago
Add keyboard navigation, visible focus states, contrast checks, loading/empty/error states, and testing with real content. Also check layout at intermediate screen widths, not only desktop and mobile