From a26df2e86b4082925c6a01276f41cfccb92f2001 Mon Sep 17 00:00:00 2001 From: shum Date: Fri, 23 Oct 2026 12:45:07 +0000 Subject: [PATCH] plans: names UX design principles --- plans/names-codes/2026-10-23-ux-principles.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) create mode 100644 plans/names-codes/2026-10-23-ux-principles.md diff --git a/plans/names-codes/2026-10-23-ux-principles.md b/plans/names-codes/2026-10-23-ux-principles.md new file mode 100644 index 0000000000..1700f19141 --- /dev/null +++ b/plans/names-codes/2026-10-23-ux-principles.md @@ -0,0 +1,14 @@ +# Names store: 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. + +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.