12 способів оптимізувати веб-форму на сайті, SEO кейси соціалки, реклама, інструкція
Для користувачів сайту заповнення веб-форм найчастіше є найдратівливішим і стомлюючим заняттям. Нерідко саме неправильно складена веб-форма стає причиною високого показника відмов на етапі передплати розсилки, заповнення контактної інформації або оформлення покупки.
Оптимізація форми, підхід до її дизайну з розумінням того, що хоче користувач, і проведення тестів для виявлення «слабких моментів» можуть суттєво покращити досвід користувача.
У статті ми розглянемо 12 способів оптимізувати веб-форму на сайті.
Автоперевірка коректного заповнення полів
Якщо користувач заповнив поле неправильно, варто негайно повідомити про це, а не чекати, поки він натисне кнопку «Прийняти». Функція допоможе користувачам швидко виправити помилки та переконатися, що форма заповнена правильно.
У прикладі компанії Autoglass, якщо інформація, введена в поле, коректна, поруч із ним з'являється зелена галочка, якщо ні — червоний хрестик та пояснення помилки.
(натисніть для збільшення)
Чіткі вимоги до заповнення полів
Користувачам має бути зрозуміло, в якому форматі вони мають вводити інформацію в поле — довжину пароля, необхідність цифр у ньому тощо.
Наприклад, на сайті ASOS поля форми супроводжуються поясненням, в якому форматі повинні бути дані, і для чого потрібна інформація, що вводиться.
(натисніть для збільшення)
Розташування назва поля зліва від нього
Багато сайтів розміщують назву поля над ним, що робить форму дуже довгою (як на прикладі нижче). Однак найкращий варіант – розмістити назву зліва від поля (як у прикладі від ASOS у попередньому пункті).
(клацніть длязбільшення)
Назва поля також можна помістити всередину (приклад у наступному пункті). Однак і тут є свої мінуси — назва може не зникнути і перемішатися з інформацією, яку вводить користувач, а крім того деякі користувачі, побачивши, що в полі вже є інформація, просто її пропускають.
Додаткова інформація поряд із формою
При оформленні купівлі декількох товарів багато користувачів вирішують перевіряти ще раз кошик і підсумкову вартість і переривають процес чекауту. Щоб звести такі дії до мінімуму, до форми можна додати нагадування про вибрані товари, вартість послуг тощо.
(натисніть для збільшення)
Чітке пояснення помилок
Не використовуйте загальне пояснення «Поле заповнено неправильно», конкретизуйте залежно від помилки, що скоєно користувачем. Наприклад, у формі на сайті VW незрозуміло, що не так з індексом (postcode):
(натисніть для збільшення)
На сайті Peugeot це реалізовано набагато краще:
Збереження пароля
На сьогоднішній день користувачам доводиться пам'ятати величезну кількість паролів для різних сайтів, тому якщо ви додасте опцію запам'ятовування пароля, вони будуть вам лише вдячні.
(натисніть для збільшення)
Підказки користувачам
Навіть якщо назви форм прості та зрозумілі, користувачі все одно роблять помилки. Якщо не хочеться робити функціонал перевірки кожного поля, як у пункті 1, можна хоча б інформувати користувачів про некоректне заповнення полів.
(натисніть для збільшення)
Збереження даних у формі при перезавантаженні сторінки
Напевно, більшість користувачів стикалися з такими формами — помилка при заповненні виявляється тільки після натискання кнопки"Прийняти", і при цьому всі поля очищаються. У таких випадках заповнювати інформацію знову вирішуються далеко не всі користувачі, тому переконайтеся, що дані, внесені коректно, зберігаються, і їм потрібно лише відредагувати неправильно заповнене поле.
Скорочення кількості полів
Нехай користувач залишає мінімум інформації, яка необхідна для оформлення купівлі товару, замовлення послуги, реєстрації на сайті і т.д.
(натисніть для збільшення)
Трішки гумору
Стандартна форма не обов'язково є три поля на білому тлі. Виявляйте креативність!
(натисніть для збільшення)
Якщо форма передбачає запровадження стандартної інформації — дата, стать і т.д. Використовуйте формати автозаповнення. Однак формати використовуйте відповідно до типу даних — наприклад, для дати слід використовувати список, що випадає (як у ASOS), а для вибору підлоги краще використовувати не його, а радіокнопку.
(натисніть для збільшення)
Інструкція, що користувачеві робити далі
Як тільки користувач заповнив форму, йому потрібно не тільки сказати «Дякую!», але й дати подальшу інструкцію - його запит передано на обробку, йому зателефонують, напишуть по e-mail і т.д.