Как проектировать формы: лучшие практики UX

Главные правила

Форма — место, где пользователь платит за результат своим временем и данными. Чем меньше усилий она требует, тем чаще её доводят до конца.

• Спрашивайте только необходимое. Каждое поле должно быть нужно для текущего шага.
• Видимая подпись над каждым полем, а не только плейсхолдер.
• Одна колонка и логичный порядок полей.
• Правильные типы ввода, чтобы на телефоне открывалась нужная клавиатура.
• Ошибки — сразу, рядом с полем и с подсказкой, как исправить.

Подписи и плейсхолдеры

Плейсхолдер (серый текст внутри поля) исчезает, как только пользователь начинает печатать. Если он заменяет подпись, человек забывает, что вводит, а при проверке заполненной формы не может понять, какое поле какое. Кроме того, светло-серый текст часто плохо читается.

Подписи над полем удобнее, чем слева: их проще связать с полем взглядом и они не ломаются на узком экране.

Порядок и группировка полей

• Располагайте поля в одну колонку — так взгляд движется по прямой и ничего не пропускается.
• Порядок — от простого к сложному и от привычного к личному: сначала имя, потом контакты, потом детали.
• Группируйте связанные поля под заголовками: «Контакты», «Адрес доставки», «Оплата».
• Короткие связанные поля (город и индекс, срок действия карты) можно ставить в одну строку.
• Длинную форму разбейте на шаги с индикатором прогресса.

Типы ввода и автозаполнение

Правильный type, inputmode и autocomplete экономят пользователю больше времени, чем любой визуальный приём.

<label for="email">Email</label>
<input id="email" type="email" autocomplete="email">

<label for="phone">Телефон</label>
<input id="phone" type="tel" autocomplete="tel">

<label for="code">Код из SMS</label>
<input id="code" inputmode="numeric" autocomplete="one-time-code">

<label for="name">Имя</label>
<input id="name" type="text" autocomplete="given-name">

• type="email" и type="tel" открывают на телефоне клавиатуру с @ или цифрами.
• autocomplete позволяет браузеру подставить сохранённые данные.
• Для коротких списков (до 5–6 вариантов) лучше радиокнопки, чем выпадающий список.
• Не дробите телефон или дату на несколько полей без необходимости.

Полный список значений autocomplete есть в документации MDN.

Валидация

• Проверяйте поле после того, как пользователь его покинул, а не на каждое нажатие клавиши — иначе ошибка появляется, пока человек ещё печатает.
• После исправления убирайте ошибку сразу, по мере ввода.
• Сообщение — под полем, красным цветом и иконкой или текстом, чтобы его видели люди с нарушением цветовосприятия.
• Текст ошибки объясняет, как исправить: не «Неверный формат», а «Введите email в формате name@example.com».
• При отправке с ошибками переводите фокус на первое ошибочное поле.
• Будьте терпимы к формату: принимайте телефон с пробелами, скобками и дефисами и нормализуйте его сами.

Обязательные поля

Если почти все поля обязательные, отмечайте необязательные словом «(необязательно)». Если обязательных мало — отмечайте их. Одинокая звёздочка без пояснения понятна не всем, поэтому расшифруйте её в начале формы.

Как сократить форму

Пример: форма заявки на консультацию.

Вопросы для каждого поля: нужно ли оно прямо сейчас? Можно ли узнать это позже или определить автоматически?