Тестирование форм регистрации и полей ввода

Задача отдела поддержки — обеспечить корректную работу веб-форм

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

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

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

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

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

Запустили форму на сайте — необходимо проверить вёрстку в разных браузерах и на разных устройствах. Форма должна корректно работать на всех устройствах и в последних версиях популярных браузеров.

Важно знать свою целевую аудиторию: обратите внимание на статистику использования разных устройств и в каких браузерах смотрят сайт ваши пользователи. Такая статистика доступна в любой системе веб-аналитики.

Преимущества

Если с точки зрения здравого смысла, юзабилити и верстки всё ок, проверяем работу форм по чек-листу.

1. Обязательные для заполнения поля выделены визуально. Обычно используется знак * и пояснение к нему, что поле обязательно для заполнения.
2. Допускается отсутствие такой маркировки, если все поля являются обязательными.
3. Поля формы подписаны. Допускается реализация, когда подписи полей находятся рядом с ними или подсказки размещаются внутри самих полей. Второе решение менее удобно, так как при заполнении полей подсказка удаляется.
4. Для каждого поля формы предусмотрена проверка корректности его заполнения. Часто в поле для ввода телефона используется специальная маска. Для поля, в которое нужно ввести адрес e-mail проверяется наличие спецсимвола @, отсутствие пробелов в адресе, отсутствие кириллицы в написании адреса. Поля для ввода текста пропускают ограниченное количество символов. Не пропускают вредоносный код.
5. При отправке формы должны быть показаны сообщения об ошибках в том случае, когда проверка формы (валидация полей) не пройдена. Текст сообщений должен быть написан на языке сайта, без грамматических ошибок, текст сообщений должен быть понятен пользователям.
6. Допускается подсветка полей, в которых есть ошибки.
7. Если сценарий содержит в себе отправку почтовых сообщений пользователю, а при регистрации, как правило, это обязательный шаг, то нужно убедиться, что письмо приходит. Проверяем тему письма и текст.
8. Обычно в результате успешного прохождения формы регистрации создается логин и пароль (или высылается ссылка при переходе по которой пользователь устанавливает свой пароль). Полученные логин и пароль должны срабатывать при авторизации на сайте.
9. В настоящее время сохранение персональных данных пользователя, а его телефон, e-mail, ФИО — это персональные данные) невозможна без получения его согласия на эту процедуру. Необходимо убедиться, что мы предусмотрели чекбокс для выставления согласия и не сохраняем форму регистрации, если галочка согласия не выставлена.

Это самые простые, но важные правила для проверки работы формы регистрации на сайте.

Иногда в этом несложном функционале участвуют интеграции с другими системами. Например, бизнес-логика требует обязательной проверки введенного пользователем телефона. В этом случае взаимодействие пользователь-сайт организовано более сложно. Пользователь вводит номер телефона и отправляет его через сайт на сервер (нажав кнопку «зарегистрироваться»). Сервер отправляет запрос на создание SMS сообщения в компанию, которая предоставляет услугу оператора связи. Код подтверждения приходит на телефон пользователя.

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

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

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