Розробка дизайну форм авторизації та реєстрації сайту
Форми входу та реєстрації — точки максимального тертя. Поганий дизайн тут напрямую конвертується в потрачених користувачів: за даними Baymard Institute, до 23% користувачів відмовляються від реєстрації через надто складну форму.
Компоненти та стани
Дизайн охоплює не тільки «пусту» форму, але весь набір станів:
- Placeholder та label (inline vs floating label)
- Focus-стан поля з явним outline
- Помилка валідації (inline, під полем, червоний border)
- Успішне заповнення (зелена галочка або нейтральний індикатор)
- Стан завантаження кнопки (spinner + disabled)
- Успішне завершення (success screen або редирект)
Floating label (label всередині поля, що знаходиться вверх при фокусі) — поширений паттерн, але він погано працює з автозаповненням браузера: label та значення накладаються. Для більшості сайтів надійніше статичний label над полем.
Реєстрація: мінімум полів
Правило: реєстрація через email потребує максимум двох полів — email та пароль. Ім'я, телефон, день народження — збирати після першого входу, в onboarding-флоу. Кожне додаткове поле знижує конверсію на 4–8%.
Соціальні кнопки (OAuth)
Якщо передбачен вход через Google, GitHub, Apple — кнопки повинні відповідати брендбукам провайдерів. Google потребує точного відповідності: білий фон, лого Google SVG, текст «Sign in with Google» без скорочень. Apple потребує чорну або білу варіант, без кольорових модифікацій. Порушення правил може привести до блокування OAuth-застосунку.
Терміни
Дизайн форм входу та реєстрації в Figma зі всіма станами, desktop + mobile: 1–2 робочі дні.