Содержание · 8
Количество полей, порядок, валидация, состояния кнопки и текст на ней. Разбираем практику, которая напрямую влияет на количество заполненных форм.
Каждое поле стоит денег
Правило простое и подтверждается почти в любом тесте: чем больше полей, тем меньше отправленных форм. Каждое поле должно быть оправдано вопросом «что мы сделаем с этими данными сегодня».
Поля «на будущее» — компания, должность, откуда узнали — почти всегда стоят больше, чем дают.
Подписи над полем
Подпись внутри поля вместо метки (placeholder as label) исчезает при вводе — и человек забывает, что именно он заполняет. При проверке заполненной формы приходится очищать поля, чтобы вспомнить.
Надёжнее всего метка над полем: она видна всегда, не мешает автозаполнению и корректно читается программами экранного доступа.
- Метка над полем, а не внутри.
- Подсказка отдельной строкой под полем, если нужна.
- Указывать необязательные поля, а не обязательные.
- Один столбец: формы в две колонки заполняются с ошибками.
Валидация
Проверка при отправке заставляет читателя искать ошибку среди всех полей. Проверка при вводе раздражает, показывая ошибку до того, как человек закончил печатать.
Рабочий компромисс: проверять при потере фокуса, а сообщать об успешном исправлении сразу.
Кнопка
На кнопке должно быть написано действие, а не «Отправить». «Получить расчёт», «Записаться на консультацию», «Скачать смету» сообщают, что произойдёт после нажатия, — и это заметно повышает вероятность нажатия.
Состояния кнопки обязательны все: обычное, наведение, фокус с клавиатуры, нажатие, загрузка и отключённое.
Форму бросают не на сложном поле, а на лишнем. Каждый вопрос должен объяснять, почему без ответа нельзя.
Мобильные особенности
На телефоне форма — самое уязвимое место: маленькая клавиатура, перекрывающая половину экрана, и точность касания около 44 пикселей.
Обязательный минимум: правильный тип клавиатуры для каждого поля, размер элементов не меньше 44 × 44 px, кнопка в зоне большого пальца и автозаполнение, которое не сломано лишними атрибутами.
Порядок полей и почему он не произвольный
Поля ставят в порядке возрастания усилия: сначала то, что человек знает наизусть, потом то, что нужно вспомнить, и в конце то, за чем придётся встать и сходить. Форма, начинающаяся с номера договора, теряет людей на первом же шаге — не потому, что поле сложное, а потому, что оно требует прерваться.
Второе правило — не разбивать связанные данные. Имя и фамилия в двух полях оправданы только если их потом действительно используют по отдельности. Адрес одной строкой ошибается реже, чем адрес из шести полей, потому что человек пишет его так, как привык.
Проверка ввода: когда и как
- Проверять при уходе из поля, а не на каждом нажатии: ошибка, появляющаяся посреди набора, мешает набирать.
- Успешную проверку показывать не нужно — галочки у каждого поля превращают форму в отчёт.
- Текст ошибки говорит, что сделать, а не что произошло: «нужно десять цифр», а не «неверный формат».
- Ошибку показывать рядом с полем, а не общим списком сверху: список заставляет искать.
- После отправки с ошибкой фокус переводится на первое проблемное поле, иначе на телефоне его не найти.
Что в итоге
Форма теряет людей на количестве полей, непонятных ошибках и кнопке без смысла.
Уберите лишние поля, поставьте метки над полями и напишите на кнопке, что произойдёт, — три изменения, которые работают почти всегда.
Коротко
- Что писать на кнопке?
- Результат действия от лица пользователя: «Отправить заявку», «Скачать смету», а не «Отправить» и не «Подробнее». Кнопка должна быть понятна вне контекста — её читают отдельно от текста рядом.
- Сколько полей допустимо в форме?
- Столько, сколько нужно для следующего шага, а не для всей базы. Каждое лишнее поле снижает долю заполнивших; телефон и адрес обычно можно спросить позже.
Тёмная тема сайта
Почему чистый чёрный фон — плохая идея, как пересчитывать цвета и тени, что делать с изображениями и когда тёмная тема вообще не нужна.ДальшеЧитайте также
Посмотреть примеры
Нашли ошибку или неточность в атрибуции? Напишите нам
Обсуждение
Загружаем…