SebWeo.com
Контактна форма (чи будь-яка інша) на сайті — це дуже важливий компонент. На неї покладено не тільки важливий функціонал спілкування з адміністрацією сайту, але й естетичний аспект. І щоб ваші клієнти залишалися з вами на зв’язку, і щоб самою контактною формою було зручно користуватися. І особливо, коли мова йде про сайт на мобільному пристрої. Тож, в сьогоднішній статті ми трохи поговоримо про основні моменти при розробці форм, які будуть зручні та функціональні і на мобільних пристроях. Отже, почали!
Форми мають багато різновидів і вони використовуються майже на кожному сайті (так чи інакше). Це можуть бути реєстраційні/авторизаційні форми, контактні форми зв’язку, форми онлайн-опитування чи вікторини, або щось подібне. Але важливо, щоб будь-яка з цих форм була зручною та простою у використанні. На ПК чи ноутбукові користуватися формами зазвичай дуже просто. Попасти в потрібне поле мишкою чи тачпадом, та ввести дані, не повинно бути проблемою. Однак перегляд сторінок сайту через смартфон чи інший пристрій з малими розмірами форм-фактору може викликати ускладнення. Часто через дрібні помилки дизайнера/верстальника взаємодія пальцями з формами на маленькому екрані може бути неприємною справою. Тож, такого варто уникати у своїх веб-проектах. Адже це може призвести до втратити конверсії, потенційних клієнтів та й взагалі роздратувати відвідувачів вашого сайту. І це особливо важливо зараз, коли мобільний трафік постійно зростає. Фактично він вже значно перевершує трафік з ПК. Тому розробка веб-сайту, зручного для мобільних пристроїв, повинно бути на початку списку завдань під час запуску нового проекту.
Гарна новина полягає в тому, що розробити зручну форму під мобільні пристрої не так вже й складно, як це може представлятись. Існує лише кілька загальних правил та деяких основ, щоб створити робочі та зручні форми. І далі ми про це детальніше поговоримо!
Що більше полів містять ваші форми, то важче їх буде використовувати на мобільному пристрої. Оскільки на мобільних пристроях використовувати форми елементарно складніше. Зменшивши кількість полів або блоків у формі, ви можете максимізувати шанси того, що відвідувачі заповнять їх. Наприклад, якщо у формі є поле вибору країни, — його можна заповнювати автоматично (наприклад, по IP відвідувача).
У більшості випадків все, що вам потрібно для чудової контактної форми, — це ім’я та адреса електронної пошти. А усе інше залежить від типу використовуваного веб-сайту. Зрештою, чим менше полів містить ваша форма, тим легше буде ними користуватися мобільним відвідувачам.
Перегляньте кожен блок/поле форми і подумайте, чи справді вони (додаткові дані) вам потрібні.
Якщо доводиться багато друкувати у формі на мобільному, — це дуже важкий досвід. Один із способів полегшити життя відвідувача з мобільного — це спростити вибір, перед яким ви його ставите.
Наприклад, розглянемо можливий запис до лікаря: для цього нам обов’язково потрібне ім’я, електронна адреса, телефон (бажано), та на який час записати. Тут можна дещо спростити резервування, використовуючи вибір із запропонованих даних: автоматично підставляти код телефону для поточної країни, а також надати вибір із можливих часових проміжків робочого часу (вільні години). Завдяки такому підходу клієнтам потрібно буде менше вводити цифр, і вони будуть знати, які з запропонованих вами варіантів найкраще підійдуть для них.
Вам потрібно поглянути на свої форми та представити, чи можна якісь поля замінити спадними меню з доступними опціями. Це буває рідко, але такий підхід обов’язково сподобається вашим відвідувачам. І не забувайте зробити меню достатньо великим, щоб було зручно обирати підходящий варіант.
Це просто, але дуже важливо. Якщо всі поля форми заповнювати легко, але кнопки не працюють, це буде дуже неприємно. Якщо ваші відвідувачі не можуть надіслати інформацію, яку вони ввели у ваші форми, усі ваші зусилля будуть марними. Крім того, це виглядає дуже непрофесійно, коли кнопка «Надіслати» не працює належним чином. Зверніть увагу на наступні 3 прості кроки:
Ми вже багато писали про важливість ефективності та швидкості завантаження сайту. Оскільки більшість людей не люблять повільні веб-сайти. Оскільки швидкість Інтернету зростає і надто довге очікування завантаження сайту може відлякати відвідувачів. Крім того, швидкість мобільного Інтернету, як правило, значно відрізняється від звичайного підключення. А це накладає додаткові вимоги оптимізації сайтів під мобільні пристрої. Дана конкретна порада може стосуватися загалом всього сайту, але вона також важлива для сторінок, на яких відображаються форми, що переглядаються з мобільних пристроїв. Якщо ці розділи вашого сайту завантажуються надто довго, ви можете втратити потенційних клієнтів і контакт із відвідувачами. Як правило, швидкість завантаження сайту не повинна перевищувати двох секунд. Коли ваш сайт не справляється із цим, показники відмов різко зростають, і це буде жахливою новиною.
Існує багато способів підвищити загальну продуктивність вашого сайту, і варто їх реалізувати. Це допоможе всім користувачам/відвідувачам, і особливо тим, хто використовує мобільні пристрої.
Враховуючи, що форми є ключовим елементом більшості веб-сайтів, цілком зрозуміло, що ви повинні ретельно перевірити їх, перш ніж публікувати. Ви можете підготувати сторінку з новою формою, але не публікувати її, доки не перевірите її повністю. Наприклад, на робочому сайті зробити обмеження по IP, тощо.
На етапі тестування ви можете використовувати прості інструменти, щось на зразок Chrome Dev Tools. Або схожі інструменти веб-розробника, які мають опції перевірки/зміни вихідного коду, а також можливості зміни роздільної здатності екрану, щоб оцінити відображення на мобільних пристроях. Якщо під час тестування ви зіткнулися з будь-яким проблемним елементом вашої форми, ви повинні негайно усунути ці недоліки. Інакше ви ризикуєте втратити мобільну аудиторію, чого ми якраз і намагаємося уникнути цією публікацією!
Переконайтеся, що ваш сайт оптимізований під мобільні пристрої. Зокрема, перевірте ваші форми. Наступні 5 порад допоможуть вам у цьому:
Якщо у вас є запитання чи/або поради щодо створення зручних форм під мобільні пристрої, не соромтеся озвучувати їх у розділі коментарів нижче. Дякую за увагу!
Тема (шаблон) — це своєрідний кістяк сайту на WordPress. І, на жаль, іноді цей «кістяк»…
Що таке Ліла — це стародавня гра, що виступає в якості інструменту для особистісної трансформації,…
Сучасні варіанти дитячих конструкторів — це не просто іграшки, а дієвий інструмент розвитку, який допомагає…
Основний трафік на сайт з пошукових систем йде саме з органічної видачі. І тут дуже…
Зміни — це щось таке, що завжди лякає і рідко буває простим та легким. Тим…