На сьогоднішній день майже на кожному сайті є форми з полями для введення користувачем певної інформації. Це можуть бути форми авторизації, реєстрації, зміни паролю, форма для коментарів та відгуків, форма зворотнього зв'язку, платіжні дані, анкети та багато інших. Вони повинні відповідати певним вимогам як за зовнішнім виглядом і юзабіліті, так і за функціональними можливостями. Від цього залежить швидкість вирішення завдання користувача і загальне враження від сервісу. Форма вважається хорошою, якщо під час її заповнення у користувачів не виникає ніяких запитань.
Що важливо під час тестування форм?
1. Чи зрозуміло для чого призначена форма і навіщо її потрібно заповнювати?
Перш за все необхідно переконатися, що макет форми легко зрозуміти, оскільки складна форма або форма з великою кількістю полів буде викликати у користувачів небажання її заповнювати. Форма отримає більш високий рівень конверсії, якщо у неї буде менше полів і вони будуть добре продуманими і легко заповнюватися.
Кожна форма повинна запитувати у користувача тільки необхідний мінімум інформації, користувач повинен завжди розуміти, які конкретно дані від нього очікують і навіщо. Тому у складних формах всі неоднозначні поля повинні мати відповідні коментарі. Також всі поля можуть мати текстовий заповнювач (placeholder), який містить підказку, що саме потрібно вказувати в полі і зникає при введенні першого символу. Якщо текстові поля містять заповнювачі, то вони повинні бути розміщені посередині по вертикалі. Якщо форма містить поля для зазначення персональної інформації, наприклад, номерів телефонів та адрес, необхідно додавати пояснення про те, як ця інформація буде використана.
2. Чи зазначені обов'язкові поля? Чи всі обов'язкові поля зазначені?
Для початку необхідно перевірити чи всі обов'язкові поля у формах відзначені зірочкою. Також має бути зазначено, що поля, відмічені зірочкою, є обов'язковими. Це полегшує користувачам розуміння того, які поля вони повинні заповнити, а які є необов'язковими. У випадку якщо всі поля обов'язкові для заповнення, перед назвою зірочки не зазначаються.
Якщо користувач ввів деякі дані некоректно або перейшов на іншу сторінку, а потім знову повернувся до заповнення форми, форма повинна бути показана знову і при цьому всі введені дані (за винятком паролів і полів CAPTCHA) повинні зберігати свої значення.
3. Чи вбудована перевірка заповнення обов'язкових та необов'язкових полів?
Існує 2 типи валідації: inline-валідація та валідація під час відправки форми.
Inline-валідація – це автоматична перевірка введених даних в режимі реального часу. Якщо користувач заповнює інформацію правильно, поруч з рядком введення може з'являтися підтвердження цього у вигляді зеленої галочки. Якщо щось не так – інформація про помилку. Такий спосіб перевірки помітно покращує конверсію і економить час користувача.
Валідація під час відправки форми здійснюється тільки після того, коли форма відправлена, тобто в разі наявності будь-яких проблем з одним або декількома полями форми, користувач отримає зворотний зв'язок тільки після відправки форми.
4. Чи відбувається перевірка правильності введення контактних даних?
Форми повинні перевіряти введення значень в деяких полях, наприклад, адресу електронної пошти або номер телефону. Під час виявлення помилки курсор слід автоматично перемістити в поле з помилкою і в зручному для сприйняття місці необхідно вказати причину невдалої відправки даних. Всі невірно заповнені поля повинні бути візуально виділені і поруч з полем вказується суть помилки заповнення, а також підказка щодо правильного заповнення.
5. Як влаштовані випадаючі списки?
Випадаючий список – елемент графічного інтерфейсу користувача, який дозволяє вибрати одне з декількох значень параметра. Як у будь-якого елементу форми, у списку повинні бути назва і підказка (placeholder). Слід також перевірити наявність варіанта за замовчуванням: варіант за замовчуванням повинен бути тільки в тому випадку, якщо є впевненість, що близько 90% користувачів вибере саме його. Інакше необхідно передбачити це поле незаповненим. Як правило, випадаючі списки використовують у випадках, коли кількість значень параметра від 5 до 15. Якщо варіантів менше 5, то необхідно використовувати радіокнопки, якщо варіантів більше 15, то слід або скоротити їх кількість, або замінити випадаючий список на текстове поле.
6. Що відбувається під час відправки форми?
Наведення на кнопку відправки даних і клік по ній повинен супроводжуватися найпростішою анімацією цієї кнопки (наприклад збільшення, втискування, зміна кольору, розміру, тіні і та ін.).
Після успішної відправки форми слід переконатися, що користувачеві відображається відповідне повідомлення.
7. Чи доступні персональні дані без авторизації в системі?
Потрібно впевнитися, що деякий функціонал недоступний для неавторизованого користувача.
8. Чи правильно працює функціонал в формах під час введення даних?
В першу чергу слід перевірити всі позитивні кейси, які найчастіше зустрічатимуться користувачам ресурсу. Позитивний тестовий випадок використовує тільки коректні дані і перевіряє, що додаток правильно виконав функцію, що викликається, тобто він має показати, що програма працює так, як і годиться, з умовою, що користувач вносить коректні дані і не виходить за рамки передбаченого сценарію поведінки.
До таких кейсів можна віднести заповнення всіх обов'язкових полів форми коректними, валідними даними, які не повинні викликати будь-яких збоїв / помилок на стороні сервера. Це найпростіший етап тестування.
Що стосується негативного тестування – тут може бути дуже багато різних тестів, перевірок. Розглянемо основні з них.
Якщо мова йде про числові поля, значить ці поля можна перевірити шляхом введення: числа з буквами; числа з крапкою; числа з комою; числа із спецсимволами; числа різної довжини (як ціла, так і дробова частини); порожні поля; пробіли та ін.
Для текстових полів може бути визначений інший набір тестів, специфічний для певних умов. Візьмемо, наприклад, поле для введення e-mail адреси: в адресі відсутні обов'язкові символи «@» і «.»; послідовність символів «@» і «.»; кількість символів «@» і «.»; тільки цифри в e-mail адресі; спецсимволи в e-mail адресі; допустима довжина адреси; пусте поле; пробіли.
Якщо заповнені не всі обов'язкові поля, то незаповнені поля повинні бути підсвічені і, бажано, супроводжуватися текстовими повідомленнями.
У разі, якщо є два поля: одне для введення пароля, а друге для його підтвердження, то під час введення різних паролів повинні з'являтися відповідні повідомлення і підсвічуватись поля.
Також під час тестування текстових полів слід звертати увагу на можливість впровадження XSS і SQL-ін'єкцій. Вміст текстових полів має перевірятися на наявність спецсимволів і тегів.
Доброю практикою вважається, якщо текстові поля автоматично заповнюються заздалегідь відомими даними. Наприклад, для авторизованого користувача можуть автоматично заповнюватися поля з ім'ям, прізвищем, номером телефону, домашньою адресою, e-mail адресою (при наявності таких даних у особистому кабінеті користувача).
