Проектування UX-форм
1) Принципи
1. Спочатку завдання, потім поля. Форми - продовження призначеного для користувача сценарію, а не список БД.
2. Один екран - одна мета. Приберіть все, що не веде до завершення завдання.
3. Ніколи не втрачайте дані. Автосейв, відновлення чернетки, безпечні повтори.
4. Покажіть «як правильно». Правила та приклади до помилки; валідуйте дбайливо.
5. Доступність за замовчуванням. Лейбли, фокус, контраст, клавіатурна навігація.
6. Передбачувана швидкість. Перший відгук ≤ 100 мс, відправка з явним статусом і прогресом.
2) Інформаційна архітектура форми
Мета → кроки → поля. Почніть з результату (наприклад, «виплата коштів») і виділіть мінімальний набір полів.
Угруповання за змістом: «Особисті дані», «Оплата», «Підтвердження». Кожна група ≤ 6 полів.
Прогресивне розкриття: додаткові поля показуйте за умовою (toggle/вибір країни).
Порядок полів - як в голові у користувача: від відомого до складного.
3) Макет і сітка
Одна колонка для мобільних і більшості завдань - швидше по погляду і таб-порядку.
Дві колонки доречні для коротких взаємопов'язаних полів (дата/час, ім'я/прізвище).
Висота рядка 40-48 px, відстань між полями 8-12 px (пов'язані )/16-24 px (групи).
Вирівнювання лейблів зверху поля; праворуч - для вузьких форм не використовувати.
4) Лейбли, плейсхолдери, хелпери
Лейбл обов'язковий. Плейсхолдер - приклад, а не заміна.
Helper-текст розміщуйте під полем: правила, формат, посилання на приклад.
Опціональні поля позначайте «(необов'язково)» замість «» на обов'язкових.
html
<label for = "iban"> IBAN <span class = "muted"> (optional) </span> </label>
<input id="iban" aria-describedby="iban-help">
<small id = "iban-help "> Format A-Z, 0-9; example: DE89 3704 0044 0532 0130 00 </small>5) Кроки і прогрес
Багатокрокові форми (КУС/виплати): 3-5 кроків, явний прогрес «Крок 2 з 4».
Зберігайте завершені кроки; дозволяйте повернутися без втрати даних.
Кнопки навігації: «Назад», «Далі», фінальний «Підтвердити» - завжди на одному місці.
6) Управління введенням
Клавіатури та атрибути: 'type','inputmode','autocomplete'під тип даних.
Маски вводу використовуйте м'яко (телефон, IBAN, PAN, дата), зберігайте нормалізовані значення.
Автозаповнення не ламайте: коректні'autocomplete =» given-name» | «cc-number» | «one-time-code»'і т.п.
Пресети сум/шорткати: «+ 50/+ 100/Все» поруч з полем суми.
7) Валідація і помилки
Стратегія: до введення (helper), під час (м'які підказки), після (на blur/submit).
Асинхронні перевірки (унікальність логіну, ліміти, ризик) - з дебаунсом 250-400 мс.
Текст помилок: причина → як виправити → альтернатива.
Summary-панель над формою для декількох помилок + фокус до першої помилки.
Idempotency-Key для критичних дій (ставка/платіж) і безпечні ретраї.
8) Кнопки і відправка
Первинна CTA виділена кольором/розміром, доступна за Enter.
'Busy'-стан і блокування повтору кліка; при затримці> 3-5 с - «Очікуємо підтвердження»....
Після успіху - явний статус (тост/екран «Готово») + що буде далі.
9) Доступність (A11y)
Правильні зв'язки'label → input', помилки через'aria-describedby', критичні -'role = «alert»'.
Видиме':focus-visible', порядок Tab відповідає візуальному.
Контраст тексту/іконок ≥ AA; сенс не тільки кольором.
Підтримка'prefers-reduced-motion': мінімум анімацій.
Для груп радіокнопок -'fieldset/legend', для підказок -'role = «status»'.
10) Локалізація та міжнародні формати
Дати/валюти/номери - локальні при введенні, сховище - ISO/мінорні одиниці.
Допускайте різні алфавіти в іменах/адресах; не обмежуйте дефіси/апострофи.
Телефон зберігайте в E.164; країна вибирається явно або з «+ CC» при вставці.
11) Перформанс і стабільність
Перший візуальний відгук ≤ 100 мс; асинхронні перевірки - не блокують екран.
Skeleton замість «висить» спінера, фіксуйте висоти, уникайте CLS.
Віртуалізуйте довгі списки (наприклад, країни/банки).
Анімуйте тільки'transform/opacity', без масових blur/тіней.
12) Безпека і приватність
Не логуйте PAN/CVC/паспорт; не відправляйте в RUM/консоль.
Маскуйте чутливі поля, не зберігайте їх в автосейв.
Не розкривайте, чи існує аккаунт: «Якщо email зареєстрований, ми надішлемо листа».
Зберігання - мінімально необхідне; показуйте, навіщо потрібно KYC.
13) Патерни за типовими сценаріями
13. 1 Платіж/депозит
Поле суми з пресетами, валюта явно вказана.
PAN з м'якою маскою, Luhn-перевіркою; CVC прихований; дата'MM/YY'з авто- '/'.
Текст про комісії/терміни поруч, не в tooltip.
13. 2 Виведення коштів
Кроки: «Сума → Метод → Підтвердження».
Прогрес і «Зазвичай до N хвилин/годин» (без жорстких обіцянок).
Варіанти методу по країні; попередження про ліміти.
13. 3 KYC
Покроковий завантажувач файлів: вимоги до формату/ваги, передогляд, приватність.
Терміни перевірки і канал статусів (пошта/повідомлення).
13. 4 Ліміти і відповідальна гра
Зрозумілі одиниці (в день/тиждень/місяць), умисбудови, підтвердження змін, «Вступить в силу через»....
14) Антипатерни
Placeholder замість лейблу.
Помилки «на кожен символ» без дебаунсу.
Скидання форми при помилці.
Критична інструкція захована тільки в tooltip.
Жорсткі маски, що забороняють валідні символи/вставку.
Блокування всієї сторінки заради перевірки одного поля.
Відправка без явного busy/прогресу.
15) Сніпети реалізації
Зведення помилок + фокус до першої проблеми
js function focusFirstError() {
const el = document. querySelector('[aria-invalid="true"]');
if (el) el. focus({ preventScroll:false });
}Кнопка з миттєвим busy і ідемпотентністю
js btn. addEventListener('click', async () => {
btn. classList. add('is-busy');
try {
const r = await fetch('/api/submit', {
method: 'POST',
headers: { 'Idempotency-Key': crypto. randomUUID() },
body: new FormData(document. querySelector('form'))
});
if (!r.ok) throw new Error();
// success UI
} catch {
// show retry
} finally {
btn. classList. remove('is-busy');
}
});HTML-каркас доступної групи радіокнопок
html
<fieldset>
<legend> How to get </legend>
<label><input type="radio" name="method" value="sepa"> SEPA</label>
<label><input type="radio" name="method" value="swift"> SWIFT</label>
</fieldset>16) Токени дизайн-системи (приклад)
json
{
"form": {
"gap": 12,
"groupGap": 20,
"labelSize": 14,
"fieldHeight": 44,
"radius": 10
},
"motion": {
"pressMs": 90,
"hoverMs": 160,
"overlayInMs": 240
},
"validation": {
"debounceMs": 300,
"blurFeedbackMs": 100
},
"a11y": {
"focusRing": { "width": 2, "offset": 2 },
"contrastAA": true
}
}CSS-пресети
css
.form { display:grid; gap:12px; }
.form__group { display:grid; gap:20px; }
label { font-size:14px; }
.input { height:44px; padding:0 12px; border-radius:10px; }
.input:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.field-error { color: var(--role-danger); font-size:.875rem; margin-top:6px; }17) Метрики та експерименти
Completion Rate, Time-to-Complete, Error Rate по полях.
Retry Success Rate, частка покинутих форм, глибина кроку.
CTR підказок/прикладів, частка автозаповнень.
A/B: порядок полів, пресети сум, тексти помилок, поділ на кроки.
18) QA-чек-лист
Сенс і потік
- Поля відповідають меті; немає зайвих.
- Групи логічні; максимум 6 полів на групу.
Введення
- Коректні'type/inputmode/autocomplete'.
- Маски м'які, вставка не ламається, caret передбачуваний.
Валідація
- Helper до введення; помилки на blur/submit; дебаунс 250-400 мс.
- Summary-панель для множинних помилок; фокус до першої.
Доступність
- Лейбли пов'язані; контраст ≥ AA;':focus-visible'видно.
- Навігація з клавіатури; радіогрупи з'fieldset/legend'.
Перформанс
- Перший відгук ≤ 100 мс; немає «висять» спінерів.
- Немає CLS; довгі списки віртуалізовані.
Безпека
- Немає логів чутливих полів; PAN/CVC не в автосейві.
- Ідемпотентність і безпечні ретраї включені.
19) Специфіка iGaming
Ставки: поле суми + пресети, миттєвий'busy', оптимістичне підтвердження з можливістю undo (якщо регламент допускає).
Платежі/висновки: явні комісії і терміни поряд з полями, не тільки в підказках; перевірка лімітів і статусу KYC.
Турніри: форма реєстрації з мінімальним набором даних, правила і погоджувані чекбокси без «темних патернів».
Відповідальна гра: форми установки лімітів зі зрозумілими інтервалами і прев'ю результату («Ваш денний ліміт стане 2 000 ₴ з завтрашнього дня»).
Коротке резюме
Хороша форма - це ясна мета, мінімальний набір полів, зрозумілі правила до помилки, миттєвий відгук і збережені дані. Проектуйте структуру від сценарію, поважайте доступність і локалі, включайте безпечні ретраї та ідемпотентність. Так форми відчуваються швидкими і довіреними - особливо в критичних сценаріях iGaming.