Форми для сайту: юзабіліті форм
Зараз на кожному сайті можна зустріти форму зворотного зв’язку, будь то комерційний або інформаційний сайт. На жаль, більшість власників сайтів роблять форми незручними для заповнення або показують їх занадто нав’язливо, псуючи враження про компанії в цілому. Давайте розберемося, де і як правильно запитувати дані користувача, щоб було легко взаємодіяти з сайтом.
Основні види форм для сайту
Розглянемо особливості кожного виду, щоб ви змогли вибрати відповідні для вашого сайту або використовувати список як чек-лист, щоб не забути розмістити їх всі.
Форма замовлення зворотного дзвінка
Рекомендуємо всім комерційним сайтам використовувати дану форму. Ідеальне місце розміщення – шапка сайту, поруч із номером телефону. Причому не варто показувати поля введення відразу, їх краще сховати під кнопкою «Замовити дзвінок» і виводити після кліка. Не обов’язково робити кнопку яскравою, у вигляді посилання вона буде так само добре помітна:
У розгорнутій версії достатньо двох полів «Телефон» та «Ім’я» і де обов’язково для заповнення тільки перше:
Можна залишити тільки одне поле для введення телефону, теж цілком робочий варіант, хоча доведеться у кожного клієнта при дзвінку спочатку запитувати ім’я:
Також форма зворотного дзвінка стане в нагоді в підвалі сайту, розмістіть її поруч з контактною інформацією. Так після перегляду сторінки клієнтам не доведеться повертатися у початок.
Форма консультації
«Форма-рятувальник» для тих користувачів вашого сайту, які не змогли знайти потрібну інформацію на сторінці, але хочуть зробити замовлення. Краще розміщувати в одному з двох варіантів: або у згорнутому вигляді, у правому нижньому куті екрана, або в розгорнутому – внизу на Головній, і на сторінках каталогу товарів або послуг.
Перший варіант розміщення (приклад з сайту Танго і Кеш):
Другий варіант розміщення (приклад з сайту Okna-dpa):
Дану форму часто замінюють онлайн-консультантом, що в принципі одне і те ж, але потрібно розуміти, що знадобиться співробітник, який буде її підтримувати.
Кількість полів так само рекомендуємо залишати невеликим. Запитуйте ім’я, а замість номера телефону можна запитувати email користувача (зробіть друге поле є обов’язковим для заповнення).
Ще дану форму варто розмістити на сторінці контактів. Обов’язково додайте поле для коментаря, щоб користувачі могли розповісти, з якого питання вони звертаються в компанію.
Форма зворотного зв’язку на сторінці контактів YouDesign:
Форма замовлення послуг
Очевидно, що форму потрібно розміщувати на сторінці послуги, краще всього в кінці сторінки, після опису робіт, результатів і цін, щоб як би спрямувати користувача до оформлення заявки після ознайомлення з інформацією. Виводити поля форми можна відразу, розгортати після кліка по кнопці або перенаправляти в особистий кабінет на відповідну сторінку.
Часто на сторінках послуг розміщують форму замовлення зворотного дзвінка або консультації, що не зовсім правильно. Клієнт вже вибрав сторінку послуги, можливо навіть тариф, а йому показується загальна форма, де немає обраної інформації. Це дезорієнтує. Рекомендуємо вказувати наступні поля:
- «Вид послуги» або «Тариф» – це поле краще заповнювати автоматично або розмістити у вигляді тексту на початку форми
- «Ім’я»
- «Телефон» – зробіть поле є обов’язковим для заповнення
- «Email» – щоб продублювати інформацію про замовлення клієнта
- «Коментар» – можливо, у клієнта є уточнення
Кожен бізнес індивідуальний і вам можуть знадобитися додаткові параметри, але рекомендуємо розміщувати не більше 5-7 полів, щоб не відштовхувати клієнта. Якщо все-таки великої кількості полів не уникнути, то візуально групуйте їх за тематиками, щоб скоротити кількість помилок при введенні інформації. Приклад простої форми замовлення на сайті компанії Ладу:
Форма замовлення товарів
Таку форму краще показувати користувачеві на сторінці кошика, коли він визначився з вибором товарів. Якщо у вас на сайті є особистий кабінет, то доведеться пропрацювати дві форми: для авторизованих і неавторизованих користувачів.
Для нових клієнтів. Не змушуйте їх реєструватися, щоб повернутися до замовлення. Так ви тільки відштовхує їх. Досить додати кілька полів з контактною інформацією. Запитайте ім’я, телефон, email та адресу доставки. Так користувачеві не доведеться здійснювати зайві дії, а ви отримаєте нового клієнта. По email можна зробити автоматичну реєстрацію та надіслати клієнту пароль на пошту.
Приклад розміщення полів у формі для нових користувачів на Ozon:
Для старих клієнтів. Ті, хто замовляють повторно, вже вказали всю контактну інформацію, тому у формі крім списку товарів повинні бути тільки пункти вибору доставки та оплати. І якщо ви використовуєте промокоди, то додайте поле для їх введення, але не більше. Не потрібно заново просити контакти клієнта.
Форма замовлення на Wildberries, де навіть виводиться минулий вибір способу доставки та оплати (але залишають можливість їх змінити):
Багато розбивають введення адреси доставки на кілька полів, окремо запитуючи індекс, назва міста, вулиці, номер будинку і т. д., що виглядає дуже громіздко. Антиприклад з сайту Ангорочка:
Користувачі навіть у таких формах допускають помилки, тому краще залишити одне загальне поле для введення адреси і уточнювати коректність даних у нових клієнтів по телефону.
Обов’язковими полями для введення слід зробити контактні дані, адресу доставки, вибір способу доставки та оплати. Форму можна виводить поетапно, але й не забороняється показати всі поля відразу. Головне, візуально розділіть їх на смислові групи.
Форма реєстрації
Рекомендуємо відокремлювати її від форми авторизації, тому що багатьох нових клієнтів дезорієнтує кнопку «Увійти». Дві посилання поруч не будуть займати багато місця і скоротять час пошуку. Також форма завжди має бути помітна, тому краще розмітити її в шапці сайту. Самий звичний варіант – у верхньому правому куті у вигляді посилання (приклад від Аква-Віва):
В цілому форма повинна містити ті ж поля, що і форма замовлення (і обов’язкові поля для вводу такі ж), тому радимо не перевантажувати її зайвими пунктами і адреси оформити загальне поле. Пам’ятайте, що реєстрація це додаткові дії для клієнта, тому не відштовхуйте його довгим списком. Можна запитати дату народження, щоб відправляти поздоровлення і знижки, але змушувати клієнта придумувати нікнейм або вказувати додатковий телефон або адресу – зайве.
Шикарна практика пропонувати клієнтам зареєструватися через соцмережі. Так клієнтові не доведеться придумувати пароль і в цілому реєстрація пройде швидше. Приклад використання такої можливості на сайті Asos:
Даний інтернет-магазин зарубіжний, тому наведені популярні соцмережі тих країн, для російськомовної аудиторії краще прибрати Twitter і додати кнопки для Вконтакті, Однокласників.
Особистий кабінет найкраще підійде інтернет-магазинах для зберігання контактних даних клієнта, історії замовлень, інформації про знижки та бонуси. Також підійде сервісів, що працюють за передплатою, наприклад, якщо ви надаєте доступ до перегляду фільмів в оригіналі.
У той же час, якщо ви продаєте промислові товари, коли кожен замовлення супроводжується дзвінком фахівця, то тоді ні в кошику, ні в формі реєстрації сенсу немає. Сайтів, що надають послуги, наприклад, по дизайну або ремонту квартир теж найчастіше не потрібен особистий кабінет.
Форма авторизації
Як вже говорилося вище, розмістити посилання на форму краще в шапці, поруч з посиланням на реєстрацію. Найбільш зручна пара полів – «Email» і «Пароль», але ще краще, якщо ви зробите авторизацію через соцмережі.
Приклад гарної форми авторизації від Lamoda, де пропонують два варіанти входу на сайт:
Відновлення пароля звичніше все робити за адресою пошти, відправляючи клієнту посилання на форму введення нового пароля. Генерування автоматичного «тимчасового» пароля змушує користувача самому шукати форму зміни пароля, що незручно і тільки зайві заморочки для клієнта. Такого краще не допускати.
Форма підписки на розсилку
Ми вже не раз писали про користь email-маркетингу і давали поради щодо його розвитку, наприклад, у цій статті та її другої частини найбільш детальна інформація. Тому форма підписки мастхев, якщо ви хочете використовувати цей канал залучення клієнтів.
Розмістити форму слід на Головній сторінці, щоб користувач відразу побачив, що є така можливість. Краще після всієї основної інформації, внизу сторінки (приклад від Lavkalavka):
Якщо на сайті є блог, і в листах, крім товарів і послуг, ви анонсируете нові статті, то тоді можна додати форму на загальній сторінці розділу, наприклад, праворуч від статей, як це зробив у Vkusnosti by Mado:
У формі підписки, звичайно ж, потрібно полі «Email», і ще можна запитати ім’я, щоб зробити листа більш персоналізованими.
Іноді для підписок має сенс завести окрему сторінку. Так у вас буде більше шансів переконати читача залишити свій контакт. На таких сторінках обов’язково вкажіть тематику листів (в ідеалі, дайте посилання на приклад листа) і опишіть як часто вони будуть приходити на пошту (бажано виділити певний день, число), щоб користувач вирішив, чи підходить йому ваш формат. У жовтні 2017 ми оновили свою сторінку підписки. Подивіться як це зробили ми – дивитися сторінку підписки.
Загальні рекомендації з юзабіліті форм
Тепер, коли ми визначилися, які форми і де потрібно розмістити на сайті, з’ясуємо як зробити їх більш зручними для заповнення.
- Форми у спливаючих (модальних) вікнах. Слід виводити їх тільки після кліка користувачем потрібної посилання або кнопку. Ніяких «всплывашек» при відкритті Головної сторінки або при спробі клієнтів покинути сайт. Онлайн-консультант теж не повинен «вискакувати», пропонуючи почати чат. Такі речі дратують і відштовхують користувачів. Антиприклад від Delicat-Servis (зараз хлопці прибрали цю проблему, і форма розкривається тільки після кліка):
- Використання анімації. Виділимо в окремий пункт, так як це поширена проблема. Форма не повинна мигати, стрибати по екрану або випливати на середину екрану для залучення уваги. Така анімація заважає користувачеві вивчати основний вміст сторінки і при довгому перегляді дратує. Робіть кнопки на форми контрастними, і тоді клієнт їх точно не пропустить.
- Назва форми. Завжди підписуйте форми, щоб користувач бачив, що заповнює. Правильно, коли в заголовку прописується назва тарифу або послуги, але якщо заголовок виходить дуже довгим, то додайте цю інформацію у вигляді тексту нижче, як це зробили Fullhousedesign:
- Назва полів форми. Краще всього розташовувати назву поля над ним, а вже всередині поля вказати приклад заповнення. Якщо розмістити назву всередині поля, то воно буде стиратися при заповненні, що не зовсім зручно. Також поганий варіант, коли назви знаходяться зліва, а поля праворуч, очам доводиться співвідносити колонки між собою (поганий приклад форми на сайті Московського будинку книги):
Зручний варіант розташування підписів і підказок (на сайті Xarakiri.ru):
- Обов’язкові поля. Завжди помічайте * поля, обов’язкові для заповнення. Вище при описі форм ми вказали, які вибрати. Виняток становлять форми з один полем – і так ясно, що воно обов’язкове. Приклад виділення обов’язкових полів від компанії Izto:
- Помилки у формах. Користувачі часто помиляються і не помічають цього, тому рекомендуємо додати перевірки для введення контактної інформації та обов’язкових полів. Повідомлення про помилки краще виводити у вигляді тексту поряд з відповідним полем. Вони не повинні зникати або перекривати поля вводу. Можна виділяти поле червоною рамкою, але повідомлення теж має бути. Приклад зрозумілих повідомлень про помилки від Aristo:
- Підтвердження відправки даних. Після того, як клієнт заповнив всі поля і натиснув кнопку відправки, потрібно вивести помітне повідомлення з підтвердженням, щоб він не намагався заповнити форму повторно. Можна використовувати модальні вікна або, якщо форма і так у спливаючому вікні, розмістити під кнопкою відправки відповідний текст. Також у повідомленні слід вказати, коли конкретно фахівці зв’яжуться з клієнтом або що йому робити далі. Простого «Спасибі, дані відправлені» недостатньо. Приклад детального підтвердження відправлення від компанії Кабельні системи:
- Використання «капчі». Не рекомендуємо використовувати в формах перевірку на робота, так як вона змушує користувачів здійснювати зайві дії і може навіть стати причиною відходу з сайту. Використовуйте непомітні для користувачів методи захисту, наприклад, відстежуйте на сервері час заповнення форми (якщо воно дуже маленьке, то значить форму заповнює робот), додавайте приховані поля (які зможе заповнити тільки робот), використовуйте анти-спам сервіси для перевірки і т. д. На самий крайній випадок можна скористатися перевіркою введення від Google:
- Збереження даних. Можливо клієнт випадково закрив форму, сталася помилка або перезавантаження, і щоб не довелося вводити дані заново – зберігайте їх до відправки. Особливо ця порада стосується довгих форм.
- Кнопка скидання даних. Ні в якому разі не розміщуйте її поруч з кнопкою відправки, щоб користувач випадково не клікнув по ній. Додайте її в іншій частині форми або зовсім приберіть. Приклад невдалого розташування кнопок на сайті Avarit:
- Закон про Персональних даних. Щоб уникнути штрафів за збір персональних даних клієнтів, необхідно підготувати нормативні документи і написати про це на сайті. Детальніше про закон і підготовці сайту »
Підсумки
До кожної форми слід підходити індивідуально, тому неможливо описати всі випадки в одній статті. Головний принцип, яким слід керуватися – мінімум полів. Краще зателефонувати клієнту і уточнити деталі усно, ніж змушувати його заповнювати довгі форми. Можливо у клієнта виникнуть додаткові питання, тоді дзвінком ви вирішите дві проблеми.
Сподіваємося, що наші рекомендації допоможуть вам зробити на сайті зручні форми і збирати більше замовлень. Для тих, хто хоче персональний аналіз юзабіліті форм, рекомендуємо скористатися даною послугою.
P. S. Якщо вам потрібна інформація про те, як створювати форми (технічна сторона питання), потрібні рекомендації з кодом, зручним конструкторам і т. д., тоді пишіть запитання в коментарях, зробимо по цій темі окрему статтю.
