UX-гайдлайн і стандарти інтерфейсів
1) Принципи
Ясність перш краси. Сенс і дія очевидні за 1-2 секунди.
Одна мета на екран. Все інше - вдруге або приховано.
Послідовність. Ті ж патерни = ті ж очікування.
Доступність за замовчуванням. Контраст, фокус, клавіатура, озвучка.
Контекстність. Підказки і тексти - рівно там, де потрібні.
Локалізація-first. Довжини рядків, формати, культура - в дизайні спочатку.
Оборотність. Будь-яку ризиковану дію можна скасувати/підтвердити.
Вимірюваність. Кожне правило - з метрикою (конверсія кроку, час, помилки).
2) Сітка, відступи і ритм
Сітка: 4/8-pt крок; колонки: 12 (desktop), 6 (tablet), 4 (mobile).
Внутрішні відступи компонентів: кратні 4; зовнішні - 8/ 12/16/24.
Вертикальний ритм: заголовок → підзаголовок → контент → дії (CTA).
Межі та роздільники: економно; воліти «повітря» і ієрархію друкарні.
3) Типографіка
Шкала кеглів: 12/14/16/20/24/32/40 (body 16).
Висота рядка: 1. 4–1. 6 для тексту, 1. 2–1. 3 для заголовків.
Довжина рядка: 45-75 знаків (desktop), 35-55 (mobile).
Виділення: жирний для смислових акцентів; капс - тільки в мітках.
Читаність вголос: тексти повинні звучати природно.
4) Колір і контраст
Семантика: `success / info / warning / error / neutral`.
Контраст: мінімум WCAG 2. 1 AA (текст/фон ≥ 4. 5:1; великий ≥ 3:1).
Колір ≠ єдиний сигнал. Додавайте іконку/текст/форму.
Фокус-кільце: завжди видимий (не відключати в CSS).
5) Навігація та інформаційна архітектура
Шлях користувача: "Де я? Що тут? Що далі" - очевидно.
Ієрархія меню: ≤ 2 рівнів в основній навігації.
Хлібні крихти: для глибоких розділів.
Пошук: доступний глобально на складних каталогах; гаряча клавіша '/'.
Стан навігації: активна вкладка/сторінка підсвічена токенами.
6) Компоненти та патерни
Використовуємо компоненти дизайн-системи (без «саморобок»).
Один primary-CTA на екран; інші - secondary/tertiary.
Стани: default/hover/focus/active/disabled/loading - обов'язкові у кожного інтерактиву.
Порожні стани: контекст + цінність + CTA (+ вторинний link).
Загальні алерти: один page-alert на екран + локальні inline-підказки.
7) Форми, валідація і помилки
Лейбл обов'язковий. Placeholder - приклад формату, а не заміна.
Inline-валідація на blur, summary-помилок на submit.
Повідомлення про помилку: що не так + як виправити + обмеження/формат.
Авто-скролл і фокус до першої помилки;'aria-invalid','aria-describedby'.
Маски та формати: підказують, але не ламають введення (можливий пейст).
Збереження даних: нічого не втрачаємо при перезавантаженні/помилці.
8) Стани та фідбек
Успіх: тост 2-4 с, нейтрально-позитивний тон, CTA «що далі».
Інфо/notice: м'який банер/тултип, не блокує потік.
Warning/Error/Critical: ієрархія візуально/семантично; критичні - модалка/банер з явною дією.
Завантаження: skeleton> спінер; оцінка часу при очікуванні> 3 с.
9) Контент і microcopy
Правило трьох відповідей: що відбувається → навіщо → що робити далі.
CTA: дієслово дії + об'єкт («Зберегти зміни», «Пройти верифікацію»).
Числа/дати/валюти: Локальні формати.
Тон: доброзичливий; у стресових кроках (платіж/безпека) - нейтральний.
10) Доступність (A11y)
Повна навігація з клавіатури; логічний порядок табів.
Ролі і'aria-'для інтерактивів, лайв-регіони для тостів/статусів.
Контрасти, фокус-кільця, розміри інтерактивів ≥ 44 × 44 px.
Текстові альтернативи у іконок/зображень; таблиці з'th '/' scope'.
Перевірки: автоматичні (лінтер/сканер) + ручні сценарії скрінрідера.
11) Локалізація та інтернаціоналізація
Всі рядки - в i18n-ключах з контекстом.
Тест «довгих мов» (DE/TR), RTL-режими.
Числа/валюти/часи - утилітами форматування.
Tone-map: ступінь формальності/емоції за сценаріями (онбординг/платежі/безпека).
12) Респонсивність і адаптив
Брейкпоінти: 360 / 768 / 1024 / 1280+.
Mobile-first: критичний шлях доступний однією рукою, CTA в зоні великого пальця.
Гести і клавіатура: жести дублюються кнопками; на desktop - хоткеї.
Щільність: на desktop - «повітря», на mobile - економія вертикалі без шкоди клікабельності.
13) Темна тема
Контраст по WCAG зберігається; уникати «чистого чорного» для фону (темно-сірий).
Світіння/тіні - ослаблені; фокус-кільце контрастне.
Ілюстрації та логотипи - з інвертованими версіями.
Політика переходу: зберігаємо вибір користувача (system/light/dark).
14) Анімації та рух
Тривалість: 120-200 мс (малі), 200-300 мс (переходи).
Функції прискорення - природні (cubic-bezier з легким уповільненням).
Анімації не повинні блокувати потік і погіршувати читаність.
Поважати'prefers-reduced-motion'.
15) Перформанс
LCP ≤ 2. 5 с, TTI/TBT в зеленій зоні; код-сплітинг; лінива завантаження медіа.
Віртуалізація довгих списків; кешування даних.
Skeleton для сприйняття швидкості; мінімізувати «джанк» макета.
16) Безпека і приватність в UI
Ясні пояснення причин запитів (камера, KYC, гео).
Прозорі терміни/комісії/ліміти; без «миттєво», якщо можливі затримки.
Конфіденційні дані - маскування, явне «показати/приховати».
Підтвердження для незворотних дій; журнал дій/повідомлення про вхід.
17) Метрики якості UX
Конверсія кроку і час до завершення.
Error rate по полях/кроках і Time-to-Fix.
CTR по CTA і повторюваність сценаріїв.
Drop-off після помилки/після завантаження> N секунд.
Звернення на підтримку за темами (до/після змін).
A11y-дефекти на реліз (мета - 0 критичних).
18) Чек-листи
Екран перед релізом
- Одна головна мета і один primary-CTA.
- Навігація і статус «де я» очевидні.
- Контент короткий: 1-2 пропозиції на блок.
- Стани: loading/empty/error/success покриті.
- A11y: контраст AA, фокус видно,'aria-'на інтерактивах.
- Локалізація: довжини рядків/формати/RTL перевірені.
- Перформанс: немає «важких» блоків без потреби.
Форма перед релізом
- Лейбли і приклади форматів присутні.
- Inline-валідація + summary на submit.
- Скролл до першої помилки, фокус в полі.
- Повідомлення: що/як/чому; без кодів 500/400 для користувача.
- Дані не втрачаються при помилках/перезавантаженні.
19) Анти-патерни
«ОК» як CTA на смислових кроках.
Плейсхолдер замість лейблу.
Колір як єдиний сигнал статусу.
Спінери без оцінки часу і без альтернативи.
Модальні вікна без фокус-трепу і ESC-закриття.
Змішування стилів/іконок, дублювання компонентів поза дизайн-системою.
Гумор/емодзі в критичних сценаріях (платіж/безпека).
20) Приклади «до/після»
Помилка форми
До: «Помилка 400»
Після: "Неправильний формат дати. Використовуйте ДД. ММ. ГГГГ"
Порожній стан
До: «Тут порожньо»
Після: "Тут з'явиться історія операцій після першого поповнення. [Поповнити рахунок]"
Повідомлення успіху
До: «Готово»
Після: "Платіж прийнято. Баланс оновлено. [Подивитися історію]"
Навігація
До: незрозуміло, де користувач
Після: активна вкладка + хлібні крихти + явний заголовок сторінки
21) Шаблони для дизайн-рев'ю
Каркас екрану
Заголовок → короткий опис → контент/список → фідбек/статуси → дії.
Каркас форми
Заголовок → підказка → поля (лейбл + helper + помилка) → CTA → вторинні дії → примітки (комісії/терміни).
Шаблон microcopy
Заголовок (опц.)
1-2 пропозиції: контекст + наступний крок
CTA: дія + об'єкт
Вторинний лінк: допомога/правила
22) Процеси та підтримка стандартів
Definition of Done (UX): макет + тексти + стани + A11y + i18n + метрики.
UX-рев'ю в PR: чек-лист з розділів 18-21.
Документація: кожна фіча додає/оновлює гайд в wiki/Storybook.
Аудит раз на квартал: контент, A11y, перформанс, консистентність.
Підсумкова шпаргалка
Одна мета, один головний CTA.
Стани і фідбек спроектовані заздалегідь.
A11y і локалізація - з нуля, а не «потім».
Менше квітів - більше семантики і ритму.
Вимірюйте: конверсія, помилки, час, звернення.
Все через дизайн-систему: ті ж правила → ті ж очікування → передбачуваний UX.
Можу доповнити цей гайд готовими шаблонами для ваших ключових сценаріїв (реєстрація/КУС, депозит/висновок, бонуси/турніри) і зібрати чек-листи під ваш процес рев'ю.