Дизайн — статьи о сайтах
Заявка в книжном магазине устроена иначе, чем заявка на услугу. Человек просит найти книгу, которой нет на полке, отложить издание или привезти заказ к определённому дню. Каждое лишнее поле — повод закрыть вкладку. Но и нехватка поля обходится дорого: менеджеру приходится звонить и уточнять то, что можно было спросить в форме.
Сначала определите, какую задачу решает форма
На сайте книжного обычно скрываются сразу несколько сценариев: заказ книги, которой нет в наличии, бронь в торговом зале, запрос от школы или библиотеки на партию, вопрос о подборе подарка. Если собрать всё в одну форму «Оставить заявку», в ней окажется десяток полей, половина из которых к конкретному запросу не относится. Лучше сделать для каждого сценария свою короткую форму.
Критерий отбора простой: поле нужно, если без него сотрудник не может сделать следующий шаг. Всё остальное можно выяснить при подтверждении заказа.
Обязательный минимум для заказа книги
- Что ищете. Одно поле для названия и автора. ISBN принимайте как необязательную подсказку: покупатель редко его знает, но если знает, поиск у поставщика ускоряется.
- Контакт. Один способ связи: телефон или e-mail. Двух обязательных контактов не требуйте: человек не должен выбирать, какой из них вам отдать.
- Имя. Достаточно одного слова, чтобы менеджер мог обратиться по имени.
- Количество. Подставьте по умолчанию «1», чтобы поле не приходилось заполнять руками.
Какие поля почти всегда лишние
- Отчество и фамилия. Для уточнения наличия они не нужны. Запросите их позже, если оформляется доставка службой, которой они требуются.
- Полный адрес в первой заявке. Книги может не оказаться у поставщика, и адрес будет вводиться зря. Спрашивайте его только при выборе доставки.
- Город, если магазин один и работает в одном месте.
- Дата рождения и «Как вы о нас узнали» в обязательном порядке. Вопрос об источнике можно оставить необязательным выпадающим списком после отправки.
- Повторный ввод e-mail. Лучше проверить формат адреса и показать ошибку сразу.
Поля, которые зависят от способа получения
Здесь помогают условные поля: форма показывает дополнительные строки только после выбора. Если покупатель выбрал «Заберу в магазине», нужен лишь выбор точки (когда их несколько). Если «Доставка», появляются город, улица и дом. Так человек, который идёт за книгой сам, не видит адресных полей вообще.
Полезно и поле «Как удобнее связаться»: звонок, мессенджер или письмо. Оно сокращает число недозвонов. Менеджер сразу пишет туда, где ответят.
Условный пример формы «Заказать книгу, которой нет в наличии»
Фрагмент страницы вымышленного магазина, без привязки к реальному проекту:
- Заголовок: «Не нашли нужную книгу? Мы поищем у поставщиков».
- Поле «Название и автор» (обязательное), подсказка внутри: «Например, “Мастер и Маргарита”, Булгаков».
- Поле «ISBN, если знаете» (необязательное).
- Поле «Количество» со значением «1».
- Переключатель: «Заберу в магазине» / «Нужна доставка». При выборе доставки появляются поля «Город» и «Адрес».
- Поле «Телефон или e-mail» (обязательное) и «Имя» (обязательное).
- Необязательное поле «Комментарий»: например, «нужно именно твёрдый переплёт».
- Кнопка: «Отправить запрос на поиск». Под ней: «Проверим наличие и свяжемся с вами в рабочее время».
Всего пять обязательных элементов, а адрес запрашивается только тем, кому нужна доставка.
Кнопка, пояснения и экран после отправки
Надпись «Отправить» ничего не объясняет. Название кнопки должно называть действие: «Заказать книгу», «Отложить в магазине». Рядом напишите, что произойдёт дальше и кто свяжется. Сроки указывайте только те, которые магазин реально выдерживает.
Если на сайте есть согласие на обработку персональных данных, формулировку и необходимость чекбокса согласуйте с юристом. Дизайнеру и разработчику нужно лишь следить, чтобы ссылка на документ была видна рядом с кнопкой, а текст не уходил за край экрана на телефоне.
После отправки не оставляйте пустую страницу с «Спасибо». Покажите, что человек ввёл: название книги и контакт. Так он поймёт, что заявка принята и не содержит опечатки. Если у заявок есть номера, выведите его.
Проверочный список перед запуском формы
- У каждой формы одна понятная задача: заказ, бронь или запрос для организации.
- Для каждого обязательного поля можно ответить, что менеджер сделает с этими данными.
- Адрес показывается только при выборе доставки.
- Требуется один контакт, а не два.
- Кнопка называет действие, под ней написано, что будет дальше.
- На телефоне для телефона открывается цифровая клавиатура, а для e-mail — клавиатура с символом «@».
- Ошибки показываются рядом с полем и не стирают уже введённое.
- Тестовая заявка доходит до сотрудника, а после отправки человек видит подтверждение.
