plans: general UX design principles

plans/names-codes/2026-10-23-ux-principles.md

@@ -1,14 +1,17 @@
-# Names store: UX design principles
+# UX design principles
 
-From the design iteration of 21–23 October 2026 (ep's review of the mockup, versions 16–38 and the community and long-name rounds). They apply to every page of simplex.domains.
+General principles for any user interface, drawn from the names store's design iteration of 21–23 October 2026.
 
-1. **Nothing moves.** The main button, and the link under it, sit at the same place on every step. A state that changes on a page (a check that finishes, a name taken meanwhile, a rate that expires) changes in place, in space reserved for it. No content pushes the button, and nothing jumps between states.
-2. **Every gap is measured, not eyeballed.** Rows keep the same padding whatever their content: a 63-letter name gets the same top and bottom padding as a 6-letter one. An inline label sits on the text's baseline; an icon is centred on its word. Gaps are fixed values (16 px between a name and its label on desktop).
-3. **Long names are the normal case.** Every screen is drawn for 63 letters as well as 6. A name breaks only when it is wider than its line; a label that belongs to the name wraps with it; on a phone a secondary label ends the name's last line on the right.
-4. **One main action per step.** It is the centred button; other choices are links under it. A required agreement sits between the choices and the button, and the button stays off until it is given.
-5. **Say what is true, now.** "The name is available (checked at 10:42)", re-checked while the page is open; "Invoice valid for 14:59", not "rate held". When the truth changes, the page says so at once and in the same place.
-6. **Codes are never money.** A code "allows you to register a free name"; with a code the price reads "Free". Real money is shown as money: a taken name's payment is the buyer's balance, a new name costs only the difference, and a refund is one message to support with the reference.
-7. **Don't offer what can't be used.** When a name is taken meanwhile, its payment details fade and stop taking input; a card is not offered below its minimum charge. An inactive button always has a visible reason next to it.
-8. **What looks clickable is clickable.** A blue label is one control, the word and its icon together; the pointer is enough, with no decorative underline.
-9. **Fewer words, no repeats.** One-line notes. A fact is said once: the reference lives in the payment card's status row, not in a second line.
-10. **Phone and desktop are both first.** Every change is checked at 390 and 1280 px wide, in light and dark, with short and 63-letter names, and measured, not only looked at.
+1. **Stable layout.** The main controls keep their position across steps and states. Content that can change (a status, an error, a late result) has space reserved for it; a change never pushes or shifts anything else.
+2. **One main action per screen.** It is the most prominent control, in a predictable place; other actions are visibly secondary. A required condition, such as a consent, sits just before the action, which stays disabled until it is met.
+3. **Design for the extremes.** Every screen is designed and checked with the longest and the shortest real content, empty and full states, every supported width, light and dark, and slow and failed responses.
+4. **Exact spacing.** Gaps come from a fixed scale and stay the same for equivalent elements whatever their content. Inline elements sit on the text's baseline; icons are centred on their text.
+5. **Say what is true now.** State facts with when they were checked, keep them current while they are shown, and update them in place as soon as they change. Promise nothing the system does not guarantee.
+6. **Words match what things are.** Name each thing by what it is to the user, and never describe one concept in the words of another: something free is not a payment, a balance is not a fee. A term means the same on every screen.
+7. **Offer only what can work.** An option that cannot succeed in the current state is not offered; a disabled control shows why. Prevent expected failures rather than report them.
+8. **What looks interactive is interactive.** A control responds over its whole visible area, and nothing that is not a control looks like one.
+9. **Fewest words, said once.** Each fact appears once, where it is needed. Short sentences; no repeats between neighbouring elements.
+10. **No dead ends.** Every state, including errors and rare ones, says what happened and offers the next step. When only a person can help, give the contact and the reference they will need.
+11. **Money and irreversible actions are safe.** They need an explicit act, survive interruption and reload, and never happen twice.
+12. **Motion explains.** Transitions connect one state to the next; nothing flashes, flickers or visibly loads in.
+13. **Verify by measurement.** Check layouts by measuring positions and gaps in real browsers at every width and theme, not by eye or screenshots alone.