Rules
The rules are short on purpose. The first one settles most arguments: if an imperfection causes a problem, it is the imperfection that goes, not the rule that says what matters.
Do and do not
Do
- Keep actions, focus, forms, navigation, dialogs and content straight and solid.
- Seed every imperfection from a stable key (a slug, a name, an index). Never use Math.random.
- Use transforms, paint and absolutely positioned SVG only.
- Reserve the space before anything paints, so the layout never moves after load.
- Keep to about three noticeable imperfections per viewport.
- Keep text contrast at AA or better. Print the ratios where you use them.
- Turn off all motion under prefers-reduced-motion. Follow the colour scheme.
- Hide decoration from screen readers, and let the correction be read in place of the struck word.
- Make every hit target at least 44px, and keep it the same size with or without the imperfection.
- Check the page at 360px wide: no horizontal scroll, and the same order as the desktop.
Do not
- Scroll-jacking. The page scrolls as the browser scrolls.
- A custom cursor, or anything that replaces the pointer.
- Preloaders, intro animations or a wait before the content shows.
- Hover-only information. Anything shown on hover must also show on focus and on touch.
- Layout shift (CLS above 0), including from late fonts, late images or animated sizes.
- Tap targets under 44px, or an imperfection that changes a control's size or position.
- Blur filters on text, and rotated text. Tilt goes on sheets and plates.
- Pink or gold as text colour. Both fail contrast on paper.
- An imperfect focus ring, form field, error message or dialog.
- Anything that breaks Back, such as history hijacking or a page that will not go back.
- A new random value on each visit. Every imperfection is the same on every load.
The anti-UX ban list
Never, in any build
Each of these is a usability cost that the imperfection does not repay. If a change needs one of them, the change is wrong.
- Scroll-jacking and forced scroll speeds.
- Custom cursors.
- Preloaders and splash screens.
- Hover-only information, and hover-only controls.
- Layout shift of any size after first paint.
- Targets under 44px, and targets that move when a decoration changes.
- Motion that does not stop under prefers-reduced-motion.
- Anything that breaks the Back button.
The checks for these are on the free checklist.