16% роблять цю юзабіліті помилку форм заповнення

КЛЮЧОВІ ВИСНОВКИ

- Великі багатоколонкові форми можуть спричинити неправильне зчитування та помилки при введенні даних користувачем

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

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

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

Як наслідок, багатоколонкові поля більш чутливі до помилок, зокрема, через пропуск обов’язкових полів або зайві зусилля, витрачені на непотрібні поля.

Однак наш e-commerce UX-тест показує, що 16% сайтів використовують великі багатоколонкові форми, що може призвести до відмови від оформлення замовлення, коли користувачі отримують повідомлення про помилку через неправильну ідентифікацію важливих і неважливих для них полів.

У цій статті ми обговоримо результати нашого преміум-дослідження щодо форм чекаута:

• Чому великі багатоколонкові форми складніше заповнювати
• Як макет з однією колонкою вирішує цю проблему

Чому великі багатоколонкові форми складніше заповнювати

⛔ Багатоколонковий макет форми у Walmart може призвести до того, що користувачі пропускатимуть ключові поля, що, ймовірно, спричинить виникнення помилки, якої можна було б уникнути.

❌ У багатоколонкових формах Staples та Sea Paradise (зображення нижче) користувачі можуть пропускати поля, коли сканують форму вперед-назад.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Як одноколонковий макет вирішує проблему

✅ У CVS одноколонкове розташування форм чекаута дозволило учасникам тестування ефективно заповнювати їх і рухатися далі без помилок.

✅ Форми Microsoft та Allstate (зображення нижче) містять лише одну колонку, що полегшує користувачам заповнення та перегляд полів.

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

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

На практиці такий макет допомагає користувачам знайти і заповнити всі необхідні поля.

✅ Одноколонковий макет на Etsy робить невеликий виняток для полів “Поштовий індекс” і “Місто”, що має сенс як з концептуальної точки зору (оскільки ці дві частини даних з’являються поруч у стандартному форматі адреси), так і тому, що поле “Поштовий індекс” автоматично заповнює поле “Місто”.

✅ Аналогічно, сусідні поля для терміну дії кредитної картки та коду безпеки в Apple не викликали проблем при тестуванні, оскільки ці поля концептуально пов’язані між собою (і розташовані разом на деяких фізичних кредитних картках).

Слід зазначити, що окремі поля, які тісно пов’язані між собою або можуть розглядатися як єдине ціле, як-от:

• дати (наприклад, поля день/місяць/рік);
• ім’я, прізвище та по батькові;
• місто, область, zip або поштовий індекс;
• дані кредитної картки (наприклад, номер картки/термін дії/код безпеки)

можуть бути розміщені в одному рядку форми.

Коротше кажучи, є різниця між “деякими рядками з 2–3 полями в рядку” (прийнятною практикою в певних випадках) і загальним “макетом форми з двома колонками” (загалом проблематичним і ніколи не рекомендованим).

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

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

✅ У Debenhams макет форми адреси з однією колонкою підтримує бажання користувачів заповнювати та сканувати інформацію в одному напрямку. Це також залишає місце для іншої важливої інформації, наприклад, підсумок поточного замовлення та деталі кошика.

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

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

Проте 16% сайтів у нашому e-commerce UX-тесті використовують великі форми на кілька колонок для оформлення замовлення, що ускладнює успішне заповнення важливих полів і підвищує ризик відмови від покупок.

Автор статті Едвард Скотт «Form Field Usability: Avoid Multi-Column Layouts»