Это вторая часть наших чек-листов. В первой мы подробно разобрали требования к фильтрам. В отличие от фильтров, требования к пользовательским формам более универсальны. Однако нам потребовалось несколько жарких дискуссий, чтобы выработать более-менее единый формат. Видео с HolyWarModeOn рассказывает о типовых ошибках юзабилити в проектах. Сразу под роликом ищите подробный чек-лист для форм на сайте.
Важность: Extra High
□ Сохранение формы.
□ Форма сохраняется в веб-формах (админ-панели) или SQL-таблицах.
□ Изменение адреса отправки.
□ E-mail, на который приходят данные из веб-формы, можно менять в административной панели.
Важность: High
□ Актуальность адреса отправки.
□ Прописан реальный e-mail лица, отвечающего за обработку заявок.
Почему именно так. Ситуация из типичных будней техподдержки: владелец
интернет-магазина рвет и мечет — нет заявок от клиентов. Открываем админку, смотрим: внесен адрес svetochek1988@mail.ru, куда и попадают все запросы. Дальше объяснять нет смысла.
□ Отправка формы.
□ Данные из заполненной формы отправляются администратору на e-mail.
□ Отправка уведомления пользователю.
□ Опционально. Пользователь получает уведомление на свой e-mail об успешно полученной заявке и последующих действиях, которые от него требуются.
Навигация
□ Предусмотрены плейсхолдеры (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.
Автор: zevvssibirix
