Дизайн форм: UX-правила и лучшие практики

Почему дизайн форм критически важен

Форма — это финальный шаг воронки. Пользователь заинтересовался, дошёл до формы заявки и… ушёл. 67% пользователей бросают формы, не заполнив до конца. Причина — плохой дизайн: слишком много полей, непонятные подписи, отсутствие обратной связи.

Хорошо спроектированная форма конвертирует в 2–3 раза лучше плохой. Это самый быстрый способ увеличить конверсию без изменения трафика.

Принципы дизайна форм

Минимум полей

Каждое дополнительное поле снижает конверсию на 10–15%. Для первичной заявки достаточно: имя + телефон (или email). Всё остальное можно уточнить при обратном звонке. Задайте себе вопрос: «Без какого поля мы НЕ можем связаться с клиентом?» — остальное уберите.

Одна колонка

Формы в одну колонку заполняются быстрее и с меньшим количеством ошибок. Две колонки путают порядок заполнения. Исключение — связанные поля (город + индекс), и то на десктопе.

Подписи сверху

Label над полем ввода, а не внутри (placeholder) и не сбоку. Placeholder исчезает при вводе — пользователь забывает, что вводить. Label сверху всегда видна, поле визуально связано с подписью.

Группировка

Связанные поля группируйте визуально: контактные данные отдельно, адрес отдельно, детали заказа отдельно. Используйте заголовки секций и отступы.

Состояния полей ввода

Default

Нейтральная рамка, label сверху, placeholder с примером. Поля не должны сливаться с фоном — используйте контрастную рамку или подложку.

Focus

Активное поле выделяется: рамка меняет цвет (обычно на акцентный), появляется тень. Пользователь видит, где сейчас курсор. Это базовое микровзаимодействие.

Заполненное

После ввода label остаётся видимой (floating label или постоянная позиция сверху). Зелёная галочка справа — валидация прошла.

Ошибка

Красная рамка + текст ошибки под полем. Текст конкретный: «Введите номер телефона в формате +7 (999) 123-45-67» вместо «Неверный формат». Не используйте только цвет — 8% мужчин дальтоники, добавляйте иконку.

Disabled

Серое поле, курсор not-allowed. Используйте только когда поле зависит от другого выбора (например, город неактивен, пока не выбрана страна).

Валидация

Inline-валидация

Проверяйте каждое поле при потере фокуса (onBlur), а не при отправке формы. Пользователь видит ошибку сразу и исправляет, а не получает список из 5 ошибок после нажатия «Отправить».

Маски ввода

Телефон: +7 (___) ___-__-__ — формат задан автоматически. Дата: __.__.____. Маска показывает ожидаемый формат и предотвращает ошибки.

Кнопка отправки

• Текст: конкретный — «Получить расчёт», «Записаться на консультацию», не «Отправить»
• Размер: крупная, во всю ширину формы на мобильных
• Цвет: акцентный, контрастный с фоном формы
• Состояние загрузки: spinner + «Отправка…» после клика. Кнопка disabled, чтобы предотвратить повторную отправку
• Успех: зелёная галочка + «Заявка отправлена, перезвоним в течение 15 минут»

Мобильные формы

На мобильных форма — основной инструмент конверсии. Особенности:

• Правильный type: tel для телефона, email для почты, number для цифр — вызывает нужную клавиатуру
• autocomplete: name, email, tel — браузер подставит сохранённые данные
• Крупные поля: высота минимум 48px, font-size: 16px (предотвращает зум в iOS)
• Кнопка на виду: фиксированная внизу экрана или видна без прокрутки

Примеры хороших форм

• Минималистичная: имя + телефон + кнопка. Для лендингов
• Пошаговая (wizard): длинная форма разбита на шаги с прогресс-баром. Для сложных заявок
• С калькулятором: пользователь выбирает параметры, видит примерную стоимость, отправляет заявку. Для услуг

Формы на вашем сайте не конвертируют? Обратитесь к нам — проведём аудит и оптимизируем дизайн форм.