Юзабіліті тестування форм

Веб-форма – це набір полів, списків та перемикачів, після заповнення і відправки яких користувач отримує доступ до певного функціоналу сайту або інформації, здійснює певну операцію або залишає дані про себе на ресурсі. 

Оскільки користувачі дуже часто взаємодіють з різного роду формами, досить важливим моментом для ресурсів в інтернеті є зручність заповнення цих самих форм. Існують різні підходи до побудови зворотного зв'язку між користувачем і веб-формою при її заповненні. При неправильному заповненні полів користувач повинен отримати повідомлення, яке вказує на допущені помилки і підказки для виправлення.

Помилки можуть виводитись користувачу двома основними типами: 

• після відправки даних ( валідація після відправки даних);
• миттєво ( вбудована валідація/по втраті фокусу).

Валідація після відправки даних дуже часто зустрічається, але є не найбільш виграшним варіантом. При цьому способі валідації користувач спочатку заповнює всі поля форми, далі надсилає дані на сервер, натискаючи кнопку відправки, дані перевіряються на валідність на сервері і тільки після цього результат перевірки виводиться на екрані користувача у вигляді повідомлення про помилку. У такому випадку процес заповнення форми може зайняти більше часу, ніж очікує користувач. Йому потрібно буде виправити всі помилки на формі і відправити її знову, але зовсім не факт, що користувач не припуститься помилки ще раз.

Потрібно бути серйозно зацікавленим в даному ресурсі, щоб не залишити його і не почати пошук більш зручного і швидкого варіанту. У сучасних реаліях, при існуванні значної кількості аналогів для більшості ресурсів, користувач досить швидко знайде кращий варіант.

Щоб не допускати подібного розвитку подій краще використовувати на формі вбудовану валідацію – при заповненні полів користувач буде миттєво отримувати повідомлення про помилки, а значить швидко їх виправляти.

Повідомлення можуть відображатись на формі у різному виді: 

• зелений чекбокс – у випадку правильного заповнення поля ;
• червоний хрестик з підказкою правильного заповнення – у випадку неправильного заповнення. 
• виділення поля без помилок зеленою рамкою ; 
• виділення поля з помилкою червоною рамкою; 
• текстове повідомлення про помилку із підказками під неправильно заповненим полем; 
• балуни (спливаючі вікна) та ін.

Більшість експертів згодні, що вбудована валідація добре впливає на враження користувача від взаємодії з ресурсом. Результати досліджень порівняння ефективності вбудованої валідації та валідації після відправки даних показали наступне:

• відсоток успішного заповнення форми підвищився на 22%;
• зменшилася на 22% кількість зроблених помилок;
• збільшився на 31% рейтинг задоволеності продуктом;
• значно скоротився час заповнення форми (на 41%);
• зменшилося на 47% число фіксацій очей;
• зросла на 22% кількість користувачів, які стверджують, що заповнення форми коштувало докладених зусиль.

Також на ступінь зручності роботи з формою на сайті впливає формат, при якому користувач повинен вводити дані в поля. Існує два типи валідаційних політик:

• жорсткі валідаційні політики;
• м'які валідаційні політики.

При жорсткій валідації користувачеві потрібно вводити дані суворо за шаблоном. Це дозволяє вводити більш точні дані в поля форми і запобігає виникненню помилок, що особливо добре для полів з важливою інформацією. Наочним прикладом є поле введення мобільного телефону – система не дозволить ввести більш ніж 9 цифр, 2 з яких повинні бути кодом існуючого мобільного оператора.

При усіх перевагах цієї валідаційної політики, таких як спрощення написання коду і прискорення роботи системи, вона істотно знижує ступінь юзабіліті форми. Користувачі змушені підлаштовуватися під певні шаблони, що для багатьох може здатися складним і незрозумілим.

При м'якій валідації користувач може ввести дані в будь-якому зручному йому форматі, а перетворення даних в потрібний формат бере на себе система. Наприклад, в тому ж полі введення номера телефону користувач не буде прив'язаний до дужок. Цей спосіб забезпечує високий рівень юзабіліті, але й має ряд ризиків, пов'язаних з його реалізацією. Для реалізації перетворень даних потрібні додаткові ресурси, вище ризик не врахувати якийсь варіант введення даних і припуститися помилки в коді.

Тестування зручності використання форм валідації 

Під час юзабіліті тестування форм слід звернути особливу увагу на кілька корисних правил, які допоможуть якісно протестувати рівень зручності використання форм валідації.

1. Перевірка коротких пояснювальних текстів (підказок) 

Такі підказки пояснюють користувачам навіщо їм потрібно вводити певну інформацію, в якому форматі її вводити. Вони допомагають заповнити форму швидко і правильно. Наприклад, «Переконайтеся, що інформація, яку Ви вводите, збігається з даними Вашої кредитної карти».

2. Повідомлення про помилки 

Користувач повинен отримати повідомлення про допущені помилки незалежно від типу валідації, що використовується. Також дуже важливо, щоб дані, які ввів користувач, не змінювалися навіть після відправки форми і отримання повідомлень про помилки. Якщо форма обнулятиме дані при перевірці даних, існує велика ймовірність того, що користувач не стане заново заповнювати форму. Також варто пам'ятати про важливі характеристики зрозумілих повідомлень про помилки – стислість і простоту поясненнь.

3. Тактовність повідомлень про помилки

Повідомлення про помилки повинні мати тактовний характер, бути лаконічними і не містити слів несхвального змісту. Користувач повинен бути сповіщений не тільки про ті дані, які він ввів невірно, а й про правильно введені дані. Для особливо важливих полів повинно виводитись не тільки повідомлення про помилку, а й підказки про те, як краще заповнити поле. Це допоможе уникнути можливих проблем ще до введення даних користувачем. Така підказка може виглядати навіть як посилання на сторінку іншого ресурсу.

4. Надлишкова прискіпливість

Досить неприємна для користувачів ситуація, коли дані можуть бути введені тільки в суворо визначеному форматі, а інші варіанти виключені. Прикладом може бути поле дати народження, де повинно допускатися два формати введення року народження – «92» або «1992», а також між цифрами повинен допускатися як символ «.», так і символ «/». При запиті номера телефону хорошим варіантом буде відсутність вимоги вводити символ «+», дужки, тире і т.ін., краще дати можливість користувачеві ввести дані як йому зручніше.

Превентивні заходи забезпечення високого рівня юзабіліті форм

Крім безпосереднього тестування юзабіліті форм, слід згадати про превентивні заходи для забезпечення високого рівня юзабіліті та запобігання виникненню помилок у користувачів.

1. Слідувати спільному правилу

Форма повинна бути приведена до загальноприйнятого виду, звичного для користувачів. У такому випадку користувачеві буде набагато простіше орієнтуватися на формі. Користувач вже буде приблизно знати, які дані у нього можуть запросити, в якому порядку розташовані поля, яким чином до них можна ввести значення, якими вони повинні бути і т.ін.

2. Показати пароль

Повне маскування паролю часто є джерелом проблеми під час заповнення поля, так як користувач не бачить, що він вводить в поле. Внаслідок, користувачі або роблять більшу кількість помилок, часто зовсім відмовляючись від заповнення форми, або вводять більш простий пароль, що негативно позначається на безпеці. Хорошим виходом буде показ останнього введеного символу в паролі.

3. Використання плейсхолдерів

Плейсхолдери допоможуть заощадити місце на формі, особливо якщо форма велика і місця для підписів полів небагато. Але разом з тим у них є і свої недоліки – поля з плейсхолдерами можуть сприйматися користувачами як вже заповнені. А також у зв'язку зі зникненням плейсхолдера, після установки курсору в поле, можна забути, що необхідно вводити в поле.

4. Випадаючі списки

Випадаючі списки допомагають зменшити кількість полів, в яких можна припуститися помилки. Вони пропонують вже готові вірні значення, а користувачеві залишається тільки вибрати відповідне.

Юзабіліті тестування веб-форм має важливе значення в процесі тестування, так як зручність і зрозумілість продукту, простота використання є одними із головних характеристик якісного ПЗ для користувача. Зробивши форму максимально простою, зручною та доброзичливою можна заслужити більшу довіру і збільшити кількість користувачів, задоволених використанням продукту.