Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

93

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

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

Відзначайте необов’язкові поля

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

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

Відзначайте необов’язкові для заповнення поля. Впишіть слово «Необов’язково» або «За бажанням» прямо в поле. Це зробить процес заповнення форми більш комфортним для користувача.

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

Пишіть текст над полями форми

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

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

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

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

У формах не повинно бути кнопку «Скасувати»

Кнопки «Скасувати», «Cancel», «Ні» роблять форми менш ефективними. По-перше, вони дозволяють відмовитися від покупки, передплати або реєстрації. По-друге, клієнти можуть натискати кнопки випадково.

Кнопка «Скасувати» доречна тільки в діалогових вікнах або індикаторах процесу.

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

Порятуйте користувачів від нескінченних кліків по кроковим регуляторам

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

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

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

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

У формі пошуку кнопка «Шукати» повинна бути розташована ліворуч

Більшість дизайнерів поміщають кнопку «Шукати» праворуч від форми пошуку. Це не найкраще рішення: користувач спочатку оцінює форму, потім кнопку, потім повертається до форми для введення потрібного слова, після чого знову повертається до кнопки.

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

Якщо кнопка, розташована ліворуч, це скорочує число візуальних зупинок до трьох.

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

Форма підтвердження віку повинна бути простою

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

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

Зайві кнопки у формі підтвердження роблять форму менш ефективною.

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

Ідеальна форма підтвердження віку має одну кнопку:

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

Довгі форми повинні негайно перевіряти коректність заповнення полів

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

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

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

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

З’єднуйте поле пошуку і кнопку «Знайти»

Якщо ви залишаєте порожній простір між полем пошуку і кнопкою «Знайти», це може призвести до проблем сприйняття.

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

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

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

Текст в полі підвищує ефективність форм

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

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

Капча зупиняє не тільки спам-роботів, але і користувачів

Captcha захищає сайт від спам-ботів. Однак більшість користувачів не заповнюють форми, якщо капча надто складна. А прості варіанти, наприклад, капча-чекбокс, малоефективні.

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

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

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

Зробіть форму реєстрації максимально простою та зручною

Щоб вирішити цю задачу, скористайтеся наступними рекомендаціями:

  • Просіть користувача придумати нік після реєстрації. Пошук незайнятого ніка часто займає багато часу, що змушує частина користувачів відмовлятися від реєстрації.
  • Дозвольте користувачам вводити пароль один раз. Для цього використовуйте чекбокс, що дозволяє побачити написаний пароль.
Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті
  • Використовуйте функцію автозаповнення полів з географічними даними (країна, місто).
  • Дозвольте користувачам входити на сайт за допомогою ніка або адреси електронної пошти.
  • Дозвольте користувачам входити на сайт через облікові записи в Facebook, Twitter та інших соціальних мережах.
Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

Забезпечуйте можливість ставити позначку в чекбоксі натисканням на текст

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

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

Об’єднайте загальний пошук по сайту з пошуком за розділами

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

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

Підказки у формах повинні з’являтися при наведенні курсору

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

Підказки повинні з’являтися при наведенні курсору на відповідний знак або посилання. Це позбавляє користувача від страху покинути форму і втратити введену інформацію.

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

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

Форми пошуку, що складаються з декількох полів, лякають користувачів.

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

Щоб знайти найближче відділення, користувач повинен заповнювати тільки одне поле.

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

Підказуйте користувачам формат заповнення форм

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

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

Форми для входу на сайт не повинні знаходитися на головній сторінці

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

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

Виходом із ситуації може стати кнопка «Увійти», після натискання якої відкривається форма для входу.

Ще одна причина помістити текст над полями форми

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

Юзабіліті для чайників. Частина 2: якими мають бути форми на сайті

Ця проблема вирішується приміщенням тексту над полями форми.

Рецепт створення ефективних форм

Щоб форми на сайті працювали ефективно, скорочуйте кількість полів. Ярлики повинні знаходиться над полями форми, так як це скорочує число візуальних фіксацій і полегшує роботу з формою мобільним користувачам. Відзначайте необов’язкові поля, не використовуйте кнопку «Скасувати», використовуйте підказки. Об’єднуйте кнопку «Знайти» з полем пошуку, поміщайте її зліва від поля. Дозвольте користувачам шукати в цілому по сайту або в окремих розділах. Зробіть максимально зручними чекбокси та капчу.

P. S. У цій статті є ще одна частина: «Юзабіліті для чайників. Частина 1: якими повинні бути кнопки на сайті».

За матеріалами сайту UX Movement.

Читайте також:

  • Якою має бути форма підписки: 10 ідей для А/Б-тестування
  • 62 змінних для А/Б-тестування
  • Як проводити A/B-тестування