В настоящее время практически на каждом сайте есть формы с полями для ввода пользователем определенной информации. Это могут быть формы авторизации, регистрации, изменения пароля, отправки комментариев и отзывов, форма обратной связи, платежные данные, анкеты и многие другие. Они должны соответствовать определенным требованиям как по внешнему виду и юзабилити, так и по функциональным возможностям. От этого зависит скорость решения задачи пользователя и общее впечатление от сервиса. Форма считается хорошей, если по мере ее заполнения у пользователей не возникает никаких вопросов.
При тестировании форм необходимо обратить внимание на следующие моменты:
- Понятно ли для чего предназначена форма и зачем ее нужно заполнять?
Прежде всего нужно убедиться, что макет формы легко понять, поскольку сложная форма или форма с большим количеством полей будет вызывать у пользователей нежелание ее заполнять. Форма получит более высокий уровень конверсии, если у нее будет меньше полей и они будут хорошо продуманными и легко заполняемыми.
Каждая форма должна запрашивать у пользователя только необходимый минимум информации, пользователь должен всегда понимать, каких конкретно данных от него ждут и зачем. Поэтому в сложных формах все неочевидные поля нужно снабжать соответствующими комментариями. Также все поля могут иметь текстовый заполнитель (placeholder), который содержит подсказку что именно нужно указывать в поле и исчезает при вводе первого символа. Если текстовые поля содержат заполнители, то они должны быть центрированы по вертикали. Если форма содержит поля для указания персональной информации, например, номера телефона или адреса, необходимо добавлять пояснение о том, как эта информация будет использована.
- Отмечены ли обязательные поля? Все ли обязательные поля отмечены?
Для начала необходимо проверить то, что все обязательные поля в формах отмечены звездочкой. Также должно быть указано, что поля, отмеченные звездочкой, являются обязательными. Это облегчает пользователям понимание того, какие поля они должны заполнить, а какие являются необязательными. Если же все поля обязательны для заполнения, рядом с их названиями звездочки не выводятся.
В случае, если пользователь ввел некоторые данные некорректно или прошел на другую страницу, а потом опять вернулся к заполнению формы, форма должна быть показана заново и при этом все введенные данные (за исключением паролей и полей CAPTCHA) должны сохранять свои значения.
- Встроена ли проверка заполнения обязательных и необязательных полей?
Существует 2 типа валидации: inline-валидация и валидации при отправке формы.
Inline-валидация – это автоматическая проверка введенных данных в режиме реального времени. Если пользователь заполнил информацию правильно, рядом со строкой ввода может появляться подтверждение этого в виде зеленой галочки. Если что-то не так – сведение об ошибке. Такой способ проверки заметно улучшает конверсию и экономит время пользователя.
Валидация при отправке формы осуществляется только после того, когда форма отправлена, т.е. в случае наличия каких-либо проблем с одним или несколькими полями формы, пользователь получит обратную связь только после отправки формы.
- Происходит ли проверка правильности ввода контактных данных?
Формы должны проверять ввод значений в некоторых полях, например, адрес электронной почты или номер телефона. При обнаружении ошибки курсор следует автоматически переместить в поле с ошибкой и в удобном для восприятия месте необходимо указать причину неудачи отправки данных. Все неверно заполненные поля должны быть визуально выделены и рядом с полем указывается суть ошибки заполнения, а также подсказка по правильному заполнению.
- Как устроены выпадающие списки?
Выпадающий список – элемент графического интерфейса пользователя, который позволяет выбрать одно из нескольких значений параметра. Как у любого элемента формы, у выпадающего списка должны быть название и подсказка (placeholder). Следует также проверить наличие варианта по умолчанию: вариант по умолчанию должен быть только в том случае, если есть уверенность, что около 90% пользователей выберет именно его. Иначе необходимо предусмотреть это поле незаполненным. Как правило, использование выпадающих списков оправдывает себя, если количество значений параметра от 5 до 15. Если вариантов менее 5, то необходимо использовать радиокнопки, если вариантов больше 15, то следует или сократить их количество или заменить выпадающий список на текстовое поле.
- Что происходит при отправке формы?
Наведение на кнопку отправки данных и клик по ней должен сопровождаться простейшей анимацией этой кнопки (например увеличение, вдавливание, изменение цвета, размера тени и т.д.).
Как только форма успешно отправлена, следует убедиться, что пользователю отображается соответствующее сообщение.
- Доступны ли персональные данные без авторизации в системе?
Нужно удостовериться, что некоторые функциональности не доступны неавторизованному пользователю.
- Правильно ли работает функционал в формах при вводе данных?
В первую очередь следует проверить все позитивные кейсы, которые чаще всего будут встречаться пользователям ресурса. Позитивный тестовый случай использует только корректные данные и проверяет, что приложение правильно выполнило вызываемую функцию, т.е. призван показать, что программа работает так, как и полагается, при условии, что пользователь вносит корректные данные и не выходит за рамки предусмотренного сценария поведения.
К таким кейсам можно отнести заполнение всех обязательных полей формы корректными, валидными данными, которые не должны вызвать каких-либо сбоев/ошибок на стороне сервера. Это самый простой этап тестирования.
Что касается негативного тестирования – здесь может быть очень много различных тестов, проверок. Рассмотрим основные из них.
Если речь идет о числовых полях, значит эти поля можно проверить, введя: числа с буквами; числа с точкой; числа с запятой; числа содержащие спецсимволы; числа различной длины (как целая, так и дробная часть); пустые поля; пробелы и др.
Для текстовых полей может быть определен другой набор тестов, специфический для определенных условий. Возьмем, к примеру, поле для ввода e-mail адреса: в адресе отсутствуют обязательные символы «@» и «.»; последовательность символов «@» и «.»; количество символов «@» и «.»; только цифры в e-mail адресе; спецсимволы в e-mail адресе; допустимая длина адреса; пустое поле; пробелы.
Если заполнены не все обязательные поля, то незаполненные поля должны быть подсвечены и, желательно, сопровождаться текстовыми сообщениями.
В случае, если есть два поля: одно для ввода пароля, а второе для его подтверждения, то при вводе различных паролей должны появляться соответствующие сообщения и подсвечиваться поля.
Также при тестировании текстовых полей следует обращать внимание на возможность внедрения XSS и SQL-инъекций. Содержимое текстовых полей должно проверяться на наличие спецсимволов и тегов.
Хорошей практикой считается, если текстовые поля автоматически заполняются заранее известными данными. Например, для авторизованного пользователя могут автоматически заполняться поля с именем, фамилией, номером телефона, домашним адресом, e-mail-адресом (при наличии таких данных в личном кабинете пользователя).
