Разработка дизайна формы авторизации и регистрации сайта
Формы входа и регистрации — точки максимального трения. Плохой дизайн здесь напрямую конвертируется в потерянных пользователей: по данным 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 рабочих дня.