Владимир Завертайлов

Чек-листы для форм на сайтах

Один из способов повысить удобство сайта — разрабатывать его по проверенному своду правил. Так пользователь будет получать от интерфейса именно то, чего и ожидал — а довольный пользователь приносит больше прибыли. Этот чек-лист посвящен формам.

Это вторая часть наших чек-листов. В первой мы подробно разобрали требования к фильтрам. В отличие от фильтров, требования к пользовательским формам более универсальны. Однако нам потребовалось несколько жарких дискуссий, чтобы выработать более-менее единый формат. Видео с HolyWarModeOn рассказывает о типовых ошибках юзабилити в проектах.

Важность: Extra High

 Сохранение формы.

 Форма сохраняется в веб-формах (админ-панели) или SQL-таблицах.

 Изменение адреса отправки.

 E-mail, на который приходят данные из веб-формы, можно менять в административной панели.

Важность: High

 Актуальность адреса отправки.

 Прописан реальный e-mail лица, отвечающего за обработку заявок.

Почему именно так. Ситуация из типичных будней техподдержки: владелец интернет-магазина рвет и мечет — нет заявок от клиентов. Открываем админку, смотрим: внесен адрес svetochek1988@mail.ru, куда и попадают все запросы. Дальше объяснять нет смысла.

 Отправка формы.

 Данные из заполненной формы отправляются администратору на e-mail.

 Отправка уведомления пользователю.

 Опционально. Пользователь получает уведомление на свой e-mail об успешно полученной заявке и последующих действиях, которые от него требуются.

Навигация

 Предусмотрены плейсхолдеры (placeholder) для полей.

 Если названия полей не подписаны, то внутри полей выводится подсказка, которая исчезает при внесении текста.

Атрибут placeholder отвечает за вывод текста-подсказки внутри полей формы. Эта подсказка заменяется данными, введенными пользователем.

Почему именно так. Пользователям нужны инструкции, а проектировщикам и дизайнерам — компактный способ предоставления информации.

Пример: Юнипласт.

 Прописан атрибут autocomplete для полей, поддерживающих это значение.

Атрибут autocomplete подставляет ранее введенные пользователем данные в поле, если функция не отключена в браузере.

Почему именно так. Чем быстрее пользователь заполнит форму, тем выше вероятность, что он ее отправит.

Пример: Лабиринт.

 Правильная работа многошаговых форм.

 Навигация рядом с формой показывает текущий этап и количество оставшихся шагов.

Почему именно так. Неизвестность пугает посетителей и снижает вероятность полного заполнения объемной формы. Положительный пример — Asos. В форме указано пять шагов, но по факту регистрация проходит в пять раз быстрее — основные функции сайта доступны сразу после заполнения первого экрана регистрации.

Пример: Asos.

Замечание. На некоторых проектах мы отказались от стандартной регистрации в пользу авторизации через социальные сети.

Пример: Restlook.

 Многошаговые формы корректно работают при навигации посредством кнопок «Вперед» и «Назад» в браузере.

Валидация

 Для числовых значений из определенного диапазона прописаны ограничители минимального и максимального количества символов.

 Проверьте это для дат, времени и прочих подобных характеристик.

Почему именно так. Простая подстраховка от ввода откровенного вранья или появления ошибок по невнимательности — даты рождения в будущем или времени доставки раньше времени заявки.

 Для полей, предполагающих загрузку файлов, прописан атрибут accept, определяющий тип загружаемых документов.

Почему именно так. Если прописан атрибут accept, при выборе с жесткого диска пользователь видит только подходящие типы файлов для загрузки — например, doc и txt. Это исключает отправку документов в формате, не подходящем для обработки.

 Для полей, валидация которых проходит через регулярное выражение, прописан атрибут pattern.

Валидация — это проверка введенных пользователем данных на соответствие требованиям системы. Информация проверяется путем сверки с регулярным выражением, заданном в специальном формате.

Например, регулярное выражение [0-9]{5,10} для пароля означает, что он может состоять только из цифр, а его длина колеблется от пяти до десяти символов. Если для поля прописан атрибут pattern, то форма не отправляется, пока данные не будут введены верно.

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

Почему именно так. Пользователь должен понимать, чего от него ждут при вводе данных. Для этого предназначены краткие пояснения вроде «Пароль состоит не менее чем из 8 символов и включает цифры и латинские буквы».

 Доступна инструкция по формату вводимых данных на человеческом языке.

Почему именно так. Очевидная и понятная подсказка позволяет быстро разобраться в причинах ошибки и не чувствовать себя тупым при заполнении полей формы.

Пример: ЛитРес.

♽ Пользователь не видит регулярного выражения как подсказки к действию.

Почему именно так. Подсказка у поля индекса, представляющая собой регулярное выражение [0-9], малоинформативна. Фраза «Индекс состоит из цифр от 0 до 9» намного понятнее пользователю.

 Сообщения об ошибках понятны обычным пользователям и логичны.

Пример: ZimZum.

Важно. Типовая ошибка — регулярное выражение в сообщении о неверном заполнении формы.

Прочее

 Форма запрашивает у пользователя только необходимые данные.

Откройте форму, визуально убедитесь, что требуется внести только необходимый минимум информации.

Почему это важно. Объемные формы убивают конверсии. Регистрация, покупка или обратная связь должны быть максимально простыми, чтобы не путать пользователей.

Пример: Сампринт.

 Если все поля обязательны для заполнения, рядом с их названиями не выводятся звездочки — символ *.

Откройте форму и убедитесь в этом визуально. Желательно наличие поясняющего текста об обязательном заполнении всех полей.

 Для авторизованного пользователя в поля формы автоматически подставляются все известные о посетителе данные.

Убедитесь визуально, что указанная пользователем в профиле информация автоматически выводится в полях форм, запрашивающих эти данные.

 Текстовое многострочное поле при вводе объемного сообщения изменяет высоту либо в правой части появляется скроллбар для просмотра всего содержимого.

Откройте форму с текстовым многострочным полем, введите в него максимально большое количество символов.

Почему именно так. Многие пользователи перечитывают написанное перед отправкой. Нужно дать им возможность воспользоваться скролл-баром или просмотреть все сообщение в расширенном поле вместо перемещения по тексту с помощью стрелок клавиатуры.

Пример: Мех-экспо.

 В полях формы прописан корректный атрибут TYPE, сообщающий браузеру тип элементов формы.

 Правильно указаны типы дат, времени, телефонов, диапазонов, url, e-mail, чисел.

 Во время отправки формы на медленном канале пользователь не может менять в ней данные.

Важно. Действительно для ajax-форм.

Почему именно так. При невысокой скорости соединения форма ajax отправляется не сразу, некоторое время оставаясь на экране со всей внесенной информацией. Пользователь не должен в этот момент передумать и поменять все данные. Точнее, передумать он как раз может, но реализовать свою задумку — уже нет: необходима блокировка от изменений до момента получения ответа от сервера.

При этом желательно визуально показать, что форма заблокирована. Один из вариантов — прелоадер:

Важность: Low

 Вывод подсказок и ошибок сделан с анимационным эффектом.

Замечание. Этот параметр зависит от дизайна и не является обязательным.

Далее — три спорных истории, которые нужно решать с менеджером на этапе проектирования.

 Кнопка отправки данных неактивна, пока не активирован чекбокс «Согласиться с правилами», «Пользовательское соглашение».

Пример: Ebazaar.

 Кнопка отправки данных неактивна, пока все введенные данные не прошли положительную валидацию.

Откройте форму с полями для ввода, введите некорректные данные, проверьте, активна ли кнопка.

Это важно. В некоторых случаях некорректность — понятие относительное. Подстава подстав — валидация номеров телефонов в форме обратной связи. Если вкратце — отключайте ее.

 Если данные не прошли положительную валидацию, при наведении курсора на кнопку для отправки данных выводится информационное сообщение.

Откройте форму, введите некорректные данные, наведите курсор на кнопку отправки данных, проверьте, выводится ли сообщение.

Список можно распечатать — пользуйтесь для тестирования юзабилити. То же самое — в документе Google.


 

Что еще почитать по этой теме

Интеграция с 1C — готовьте напильник
05 Мая 2016
Интеграция не из коробки — штука сложная. Чтобы её сделать, нужны адекватные специалисты, терпение, хитрость и силовые приёмы.
Запускаем готовый сайт: пре-лонч чеклист
12 Мая 2014

Коллеги из веб-студии The Pixel Lab составили простой, но необходимый чеклист, с которым стоит свериться перед тем, как заливать файлы на продуктивный сервер. Чеклист полезен вне зависимости от того, насколько вы крутой профи. Алсо, мы поддерживаем идею стандартизации процесса веб-разработки, посему в конце статьи вас ждет пачка ссылок на наши собственные чек-листы. Приятного чтения.

Наш чеклист для фильтров на сайтах
27 Января 2014

Довольно часто на сайтах е-коммерса нас просят реализовать фильтры. Хороший фильтр — довольно дорогая игрушка. Вообще, они не всегда уместны — пользователю проще посмотреть глазами на список, чем разбираться в логике разработчика фильтра. Конечно, если в этом списке не так много элементов. Скажем, не больше 200 в каждом разделе. Ниже в виде проверочного списка для наших QA, я зафиксировал некоторые требования, которые мы настойчиво внедряем на своих проектах с этого года. Стандартизация, ептэ.

У вас есть проект?

Давайте обсудим его. Продумаем. И сделаем!

Заказать клёвый проект
Заявка отправлена
Спасибо, ваша заявка отправлена. Эксперт студии Сибирикс свяжется с вами в ближайшее время для уточнения подробностей.