ux-rules

Topics in the source

• Screens that respect people
• Never wait on a slow job
• One loader per navigation, skeletons after it
• Empty, failed and loading are three different states
• Lists load as you scroll
• The chosen resource lives in the URL
• Forms
• Do not cut to fix

Each rule below exists because a real screen broke it and a person noticed. No click waits on AI, an import, an export or anything slow. Create the record first, do the work in the background, and take the person straight to the screen of the thing being made: its skeleton, a visible "working" state, each part appearing as soon as it is ready. A spinner inside a modal that waits for a model call reads as broken. The session check may show one loading indicator. After that, every wait is a skeleton: the shape of what is coming, where it will appear. Two loaders in a row read as two loads, and changing the second one's size or color does not fix the sequence. The "loading" flag starts as true and turns off on both success and failure; starting it as false creates a frame where the list is empty and nobody has read it. "No items yet" while loading is false. "No items yet" after a failed request is also false. Every list distinguishes: loading: skeleton; failed: what went wrong in plain words, and "Try again"; truly empty: what to create first. If old data is already on screen when a refresh fails, keep showing it and report the failure beside it; do not replace what the person is read

This is an excerpt. Refer to the complete source and its current requirements.