Якими повинні бути форми на сайті?

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

Мораль цієї байки така: погані форми вбивають конверсію сайту. Неважливо, для чого конкретно потрібна форма – для реєстрації, підписки або замовлення товару – непродуманий дизайн і складна система говорять про одне: «Сайт не піклується про клієнта».

У цій статті ми розберемося, які форми використовувати для сайту і як сказати клієнту: «Ми тебе любимо».

Які бувають веб-форми на сайті

Перед тим, як покращувати веб-форми, давайте згадаємо, якими вони бувають і які функції виконують.

1. Форма консультації. Якщо клієнт не знайшов необхідної інформації на сайті або у нього виникли додаткові питання, він захоче поспілкуватися з консультантом. Для цього використовують форму консультації: діалогове вікно, спливаюче вікно «передзвонимо через п’ять хвилин» або поле «напишіть номер телефону і ми зв’яжемося з Вами, щоб уточнити деталі». Варіацій безліч. Головне – допомогти клієнту.
2. Форма замовлення послуг. Уявімо, клієнт прочитав про Вас, його все влаштовує і він вирішив замовити послугу у Вас. Для цього на сайті пропонують форму замовлення послуг, де просять вказати ім’я, телефон, вид послуги або тарифу. Бізнесу, який отримує більшість замовлень з сайту, без такої форми не обійтися.
3. Форма замовлення товару. Зустрічається в інтернет-магазинах. Зазвичай включає в себе картку товару, ім’я, телефон, бажаний спосіб оплати. Така форма корисна вже після того, як користувач наповнив кошик і тепер готовий оплатити товари.
4. Форма регістрації. Якщо раніше для реєстрації потрібно було заповнювати тисячу полів, то тепер достатньо ввести ім’я, адресу електронної пошти або просто клікнути на іконку соціальної мережі, щоб зв’язати особистий обліковий запис з внутрішньою системою сайту.
5. Форма авторизації. Зараз все більш стає популярною авторизація через соціальні мережі. Тому така форма включає стандартні поля «адресу електронної пошти – пароль» та іконки соціальних мереж.
6. Форма підписки на розсилку. Зазвичай включає в себе адресу електронної пошти та супровідний текст, який пояснює, навіщо потрібно мати підписку яку користь від неї отримає потенційний читач.

Як зробити форму на сайті зручною для користувача

Існує ряд рекомендацій, які універсальні для всіх форм. Давайте розберемо їх докладніше.

• Стислість сестра таланту. На початку двохтисячних форми на сайті були схожі на докладні анкети до секретної організації. Зараз же дизайнери намагаються скорочувати кількість полів у формі, щоб утримати клієнта та підвищити конверсію. Подумайте, яка інформація не обов’язкова, а яку – можна отримати іншим шляхом, і скоротіть кількість полів для зручності користувачів Вашого сайту.
• Логіка змісту – понад усе. Скорочуючи форму, не забувайте про структуру і логіку викладу. Пам’ятайте про стандартну послідовність для полів і вибору значень. Якщо не впевнені, що користувачеві зручніше вибрати спочатку, тестуйте кілька форм і аналізуйте результати.
• Помилки, текст і обов’язкові поля. Не допускайте помилок в тексті. Навіть незначна дрібниця (неправильна форма дієслова або пропущена буква) може вплинути на рішення клієнта. Також замініть двозначні фрази або слова на більш чіткі і зрозумілі формулювання. Так Ви уникнете непорозумінь з клієнтом. І не забудьте – усі обов’язкові поля відзначаємо маркером (зірочкою або кольором).
• Зовнішній вигляд форми. Не перевантажуйте форму зайвими елементами. Краще зробити її максимально простою і зрозумілою для користувача. Для цього помістіть усі поля в одну колонку, дотримуйтеся непорушного принципу про зовнішнє і внутрішнє та візуально згрупуйте схожі поля і позначки.
• Мінімум анімованих елементів. Якщо можливо, взагалі позбудьтеся від анімованої форми. Не потрібно, щоб вона стрибала, кліпала, приваблювала музикою або спливала на середину екрана, перекриваючи весь вільний простір. Це заважає клієнту розібратися з вимогами, а при довгому перегляді – дратує.

Проміжний висновок

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

9 правил ідеальної форми

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

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

1. Стислість

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

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

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

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

Виникають питання, як саме визначити зайві рядки? Слід позбутися рядків, якщо інформацію:

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

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

У таблиці наведено приклад правильної і неправильної форми заявки.

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

2. Капча

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

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

3.Тип і розмір

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

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

4. Обов’язкові рядки для заповнення

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

До речі! Ще один варіант позначки – зробити такі поля іншим кольором.

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

5. Допомога

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

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

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

6. Перевірка правильності заповнення

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

Як саме оформити повідомлення – на вибір «конструкторів» сайту. Хоча досить просто спливаючого напису «Неправильно». Або символів навпроти кожного рядка:

• зелена галочка – вірно;
• червоний хрестик – невірно.

7. Захист від відправки помилкової інформації

Продовження попереднього підпункту. Тобто – зробити кнопку «Відправити» неактивною, поки в рядках є помилкова інформація або дані введені некоректно.

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

8. Кнопці «Очистити» – правильне оформлення

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

Є два варіанта:

• прибрати кнопку «Очистити»;
• зробити для неї інше оформлення – не таке яскраве, меншого розміру та помістити далі від кнопки «Відправити».

9. Правильне розміщення Label

Label – повідомлення, що саме слід ввести у поле. Помилково розміщувати інформацію безпосередньо в самому полі. Як тільки користувач клацає на поле, підказка пропадає. Це збиває з пантелику. До того ж, відволікаючись на інші справи (дзвінок по телефону) користувач забуває, яку інформацію потрібно було ввести.

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

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

Висновок – Label важливо розміщувати поруч з рядком, а не в самій формі!

Якими повинні бути форми на сайті: підводячи підсумки

Ми навели основні правила, що враховуються при розробці форми. Однак до створення кожної з них слід підходити індивідуально. Враховується ряд факторів, основними з яких є:

• тип товару, що пропонується;
• особливості поведінки цільової аудиторії.

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

До речі! Телефонний дзвінок «вбиває двох зайців». Ви не тільки отримуєте необхідну Вам додаткову інформацію. Ймовірно, що у клієнта виникли уточнюючі питання. Ваш дзвінок буде доречним – Ви вирішите проблему людини.

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