Автор: Богдана Данилейко
Елементи сайту, які підвищують конверсію
Сайт, як бізнес інструмент, повинен виправдовувати вкладення в нього, продавати та приносити прибуток. Мало забезпечити високу відвідуваність сайту, потрібно, щоб користувачі виконували цільові дії на ньому: замовляли та оплачували товар чи послугу, реєструвалися, залишали контактні дані, підписувалися на розсилку, яка допоможе перетворити холодний лід до гарячого. Якщо таких дій на сайті здійснюється мало, то, відповідно, конверсія сайту низька.
Елементи, що підвищують конверсію сайту формуються виходячи із його типу: лендинг, інтернет-магазин чи промо-сайт.
Але дизайн – це не лише про красу, це також про легкість навігації, яка дозволяє користувачеві досягти певної мети. Тому у цій статті розглянемо найголовніші як UX (проектування) так і UI (візуал) елементи.
Розрахунок конверсії сайту та визначення її якості
Конверсія – це відсоток відвідувачів сайту, які виконали цільову дію на сайті. Кожен тип сайту має власні цільові дії, які залежать від маркетингових цілей, вимог власників та власне продукту. Наприклад, ціль промо-сайту — ознайомити з новим товаром, ціль інтернет-магазину — продати, ціль соціального проєкту — отримати більше заявок на email-розсилки.
Формула розрахунку конверсії: кількість цільових дій поділяється на загальну кількість відвідувачів ресурсу. Показник показує, наскільки ефективно сайт виконує свої завдання.
Для розрахунку застосовуються інструменти аналітики, в Україні це Google Analytics. Щоб працювати з ними, необхідно встановити лічильники на сайт і вибрати в кабінеті інструменту потрібні цілі з 4-х категорій. Конверсія залежить від специфіки ніші бізнесу. Відсоток успіху для одних сфер може виявитися провальним показником для інших.
Хорошою можна вважати конверсію, яка повертає інвестиції в сайт. Часто, окремі сторінки можуть давати 30-34%, що є реальною конверсією, яку можна отримати. Досягти позначки 70% для сторінки вдається набагато рідше, так як для даного результату зазвичай необхідно залучити багато часу на тестування дизайну, проробку контенту, роботу seo-спеціалістів та вдачу, коли тренди, точність офферу та температура аудиторії сходяться в одній точці.
Навігація
За результатами досліджень 2020 року агентством DIGIMATIX, 54% респондентів відповіли, що візуальний дизайн сайту в меншій мірі впливає на рішення про покупку, ніж оффер, навігація та контент. При цьому власне критерій навігації (кількість кроків, сторінок та кліків по сайту, в яких користувачу потрібно розібратися, щоб пройти шлях до оплати чи оформлення замовлення) впливає з ймовірністю 94%.
Дослідження агентства DIGIMATIX, листопад 2020 рік
Навігація допомагає переміщатися сайтом та його розділами, знаходити потрібні товари або інформацію. Зручна система навігації сайту дозволяє юзерам:
- Швидко зрозуміти зміст пропозиції сайту або товари/послуги, які він пропонує.
- Побачити своє поточне розташування на сайті (сторінка чи розділ).
- Перейти на переглянуті раніше сторінки та товарів.
- Отримати додаткову інформацію про компанію.
Поради щодо покращення навігації:
- Продумайте структуру сторінок, спростіть її та забезпечте можливість швидкого переходу до будь-якої сторінки/розділу з сайту.
- Розміщення навігації має відповідати загальним паттернам поведінки. Наприклад, для користувачів є звичним розташування гамбургер-меню у лівому верхньому куті, а кошика – у правому верхньому. Експериментуючи з дизайном – враховуйте ризики.
- Використовуйте іконки біля пунктів меню. Це візуально спростить та пришвидшить пошук потрібного товару в каталозі сайту.
- На сторінці Картки товару головною цільовою дією має бути кнопка “Купити” чи “Додати в кошик”. Усі інші клікабельні елементи мають бути другорядними за візуальною ієрархією.
- Подумайте про ієрархію на мобільних пристроях. Не забувайте, що елементи, на які клікають найчастіше, мають бути зручно розташовані для пальців руки
- У карточках товарах розміщайте блоки up-sales та cross-sales продаж. А також уже переглянутих та рекомендованих.
Адаптивність сайту
Добре пропрацьований сайт, з протестованою адаптивністю вартує вкладених в нього сил та коштів, так як гарантує повноцінне охоплення аудиторії.
Після світової пандемії пов’язаної з covid-19, в мережу інтернет вийшло ще більше бізнесів, а значить, що конкуренція в нішах стала більш високою. Вибагливість користувачів до сайтів, в тому числі і на мобільних пристроях, зростає з геометричною прогресією. Якщо під час оформлення замовлення на девайсі у користувача певні елементи форми не відображаються або, навпаки, перекривають один одного, то з великою ймовірністю потрібний товар замовлять у компанії-конкурента. Більш детальною про критерії адаптивності ви можете прочитати в нашій статті “Адаптивний дизайн сайту“.
Пошукові системи понижують ваш сайт у рейтингу, якщо він не відповідає поняттю «mobile-friendly».
Для адаптивного дизайну необхідно продумати та створити декілька варіантів макетів – під різні розміри девайсів, що вимагає більшої кількості часу та зусиль. Загалом, це трудомісткий процес, оскільки існують різні способи реалізації адаптативності і розробник мусить обрати найбільш актуальне та оптимальне, на його думку, рішення. Також збільшується і об’єм детального тестування, виявлення багів та їх усунення.
Дизайн сторінки картки товару
Воронка продажів складається з мікрокроків, які користувач повинен пройти перед купівлею. Додавання товару в кошик є одним із ключових кроків, що напряму впливає на відсоток конверсії.
Зниження відсотку користувачів на етапі кошику
- Наповнюйте сторінки картки товару тільки високоякісними фото та відео.
За різними дослідженнями критерій наявності якісних зображень товару є одним із найголовніших при прийнятті рішень про покупку. Для 44% користувачів цей фактор дуже важливий. 56% відвідувачів у першу чергу звертають увагу саме на фото товару і лише потім на дизайн сторінки сайту.
Згідно з дослідженнями Wyzowl 2020 року, додавання відеоогляду продукту допомагає збільшити час користувача на сайті та збільшує кількість продажів.
Чудовим рішення є використання 3D-огляду товару.
- Відгуки про товар
Майже 95% покупців читають онлайн-огляди перед купівлею.
Товари, що мали більш як 5 відгуків купляли на 270% частіше.
72% користувачів не здійснюють оформлення замовлення, доки не прочитають відгуки, хоча б на сторонніх ресурсах.
84% людей довіряють відгукам з інтернету.
Враховуйте у дизайні сторінки наявність блоку з відгуками, його видимість та наповнення.
- Кнопки CTA (Call to action)
Використовуйте кнопки, що прилипають “Додати в кошик” / “Купити” — так користувач може скролити зміст сторінки і додати товар до кошика в будь-який момент.
Кнопка “Купити”, що прилипає на сайті pampik.com
Чудовим рішення стимуляції до оформлення замовлення є додавання в картці товару блоку, який говорить про те, скільки людей зараз переглядають товар, або кількість залишків на складі.
Ці ідеї в дизайні взяті з nudge-маркетинга і широко використовуються на сайтах.
Сповіщення про закінчення залишків товару на сайті Rozetka.ua
Використання веб-форм на сайті
Форми — найкращий спосіб отримання нового клієнта. Але при заповненні даних на сайті подбайте про відчуття безпеки та довіри користувача.
Рекомендації по дизайну форм:
- Зменште кількість полів до мінімуму. Залиште лише важливі дані й це збільшить кількість користувачів, які дійдуть до кінця в декілька кліків. Ідеальна кількість полів – два: як звертатися до клієнта та пошта або телефон.
- Запитуйте електронну пошту — так ви зможете ненав’язливо нагадати про себе ще раз та запропонувати потенційному клієнту щось дійсно цікаве.
- Пообіцяйте клієнту, що будете надсилати йому на пошту лише вартісні спеціальні пропозиції, не спамлячи зайвим і непотрібним.
- Зазначте, що персональні дані не будуть розголошені стороннім особам.
- Головна мета – простота та зручність форми. Краще запросити додаткову інформацію пізніше, ніж не отримати дані користувача зовсім.
Детальніше про проєктування форм читайте у статті про форми реєстрації на сайтах.
Негативний простір сайту
Негативний простір зробить сайт читабельнішим та забезпечить легке сприйняття інформації. Деякі фахівці вважають, що даний фактор входить у трійку елементів дизайну, що впливають на конверсію. Негативний простір допомагає керувати відвідувачами сайту, акцентуючи їхню увагу на потрібних речах: інформації, CTA-кнопці тощо.
Рекомендації по використанню негативного простору:
- Відділяйте окремими блоками способи зв’язку: телефони, соціальні мережі, пошту.
- Не перевантажуйте дизайн. Дозвольте і дизайну, і користувачеві вільно дихати. Порожній простір є важливим елементом дизайну, як типографіка, колір і зображення.
- Розділяйте за допомогою негативного простору товар, фото та відеоогляди продукту і детальну інформацію. Це забезпечить швидкий фокус та довіру до продукту і компанії.
Негативний простір групує та розділяє окремі блоки
CTA-кнопки
Правильна CTA-кнопка — один з найважливіших елементів, що впливають на конверсію. Від її розміру, розташування та змісту залежить, відбудеться конверсійна дія чи ні.
Щоб знайти найефективніший варіант кнопки радимо проводити A/B-тестування та аналізувати результати. Змінюйте колір, шрифти, ефекти наведення, заклики до дії. Логічним завершенням роботи над CTA-кнопкою буде правильний зміст форми, що відкрилася: воно має бути простим і зрозумілим.
Наступним важливим елементом, що впливає на конверсію є кількість посилань та кнопок на сторінці — чим їх більше, тим менше ймовірності, що відвідувач сайту зможе зробити вибір та зробити конверсійну дію. Розумне обмеження вибору завжди призводить до більшої конверсії.
Кнопка, що підвищила конверсію лендингу на 34%
Соціальні докази
Соціальні докази – це відгуки, сертифікати та дипломи. Такий контент викликає довіру у потенційного клієнта ще більше, ніж фото та відео.
Дослідження Data Insight і AliExpress Росія 2020 показало, що в 9 з 10 онлайн-покупок люди приймають рішення з використанням відгуків, а для кожної 5-ї покупки відгуки мають вирішальне значення.
Не лінуйтеся збирати відгуки у своїх клієнтів та розміщувати їх на сайті. Можна додати на сайт віджет відгуку, наприклад, Google Відгуки. Демонструючи відгуки реальних людей, ви підвищите довіру компанії та збільшите продажі.
Резюме
Якщо ви маєте дуже схожі товари з конкурентами, а ваше ім’я не має достатню силу бренду, то для клієнтів стає важливими повнота опису картки та дизайн сайту у процесі оформлення замовлення.
Хочемо нагадати принцип Парето:
Щоб досягти суттєвих покращень з меншими зусиллями, визначте 20% вашого сайту, що відповідають за 80% критичних показників.
Проаналізуйте, які сторінки вашого сайту найбільш важливі для конверсії та розпочніть їх поступове оновлення і покрашення. Так вам вдасться досягти оптимального та логічного результату.
Нагадуємо, що у фахівців нашого агентства ви завжди можете замовити аудит сайту та розробку дизайну сайту.