Топ-6 помилок мобільної версії сайту, які знижують його конверсію
Перш ніж розбирати заявлені 6 помилок мобільної версії сайту, розберемося, навіщо вона взагалі потрібна. Згідно з останніми даними, частка користувачів, які заходять в інтернет з мобільних пристроїв, перевищує частку тих, хто заходить з ПК, у 3 рази. І всі вони очікують побачити зручний та інформативний сайт, який максимально схожий на свою десктопну версію.
Але припустимо, у вас є мобільна версія сайту. Чому ж тоді вона погано конвертує? Найімовірніше, справа в помилках, яких ви припустилися під час її створення. Користувачі зазнають труднощів під час пошуку інформації на сайті, під час натискання CTA-кнопок, під час завантаження сторінок тощо.
У цій статті ми розберемо 6 поширених помилок, на які потрібно перевірити мобільну версію сайту. Вони негативно впливають на конверсію ресурсу, тому їх потрібно уникати.
Зміст:
- Помилка 1. Погана структура і логіка розміщення елементів інтерфейсу в шапці сайту.
- Помилка 2. Відсутність кнопки «Знайти» в рядку пошуку.
- Помилка 3. Відсутність кнопок цільового дії на першому екрані.
- Помилка 4. Погана оптимізація контенту.
- Помилка 5. Повільна швидкість завантаження сторінок сайту.
- Помилка 6. Вузькі банери в слайдерах.
Помилка 1. Погана структура і логіка розміщення елементів інтерфейсу в шапці сайту.
Один із найважливіших елементів будь-якого сайту — це header або, простіше кажучи, шапка. Саме тут мають бути основна інформація про компанію разом із контактними даними та логотипом, а також панель навігації. Користувач бачить шапку першою і більшу частину інформації шукає саме в ній.
Під час створення інтерфейсу сайту UX-дизайнери керуються правилом «Не змушуй користувача думати». Це означає, що користувачеві не доведеться самому припускати, де на сайті може розташовуватися та чи інша інформація. Що більший відсоток такого “часу на роздуми”, то менший відсоток конверсій.
Щоб конверсія продажів утримувала високі показники, до елементів, які можуть створювати додаткове когнітивне навантаження (наприклад, до іконок), щонайменше варто додати підписи. Користувач не повинен замислюватися про їхній функціонал. Як максимум — у всіх елементів мають бути чітка структура і логіка розміщення, сформована на підставі користувацького досвіду. Так, гамбургер-меню завжди розміщується ліворуч, тоді як «Кошик» — праворуч. Номери телефонів мають бути клікабельними, а клік на логотип має перенаправляти користувача на головну сторінку сайту. Також у всіх компонентів мають бути максимально зрозумілий дизайн і єдиний стиль.
Шапка не повинна займати занадто багато місця на першому екрані. Її “ідеальна” висота — від 80px до 120px. Такий розмір дасть змогу компактно розмістити необхідні елементи інтерфейсу і не перевантажити перший екран.
Помилка 2. Відсутність кнопки «Знайти» в рядку пошуку.
У більшості користувачів сформовано патерн, за якого після введення запиту в пошуковий рядок у десктопній версії сайту вони натискають на кнопку «Знайти» за допомогою курсору мишки. Водночас натискання клавіші Enter сприймається як перехід на наступний рядок. Ця поведінкова особливість навіть більшою мірою стосується користувачів мобільних пристроїв і була помічена під час перегляду записів сесій на багатьох версіях сайтів для гаджетів.
Виявилося, що людина вводить запит, але далеко не відразу розуміє, що їй потрібно зробити, щоб вивести на екран результати пошуку. Найскладніше розібратися з цим аудиторії старше 40 років.
Виходячи з цього, в рядок пошуку необхідно додати кнопку з назвою «Знайти» або «Пошук».
Помилка 3. Відсутність кнопок цільового дії на першому екрані.
Розміщення кнопок цільової дії не на першому екрані або загалом їхня відсутність на сторінці вкрай негативно впливає на конверсію сайту. Саме ці елементи інтерфейсу дають користувачеві можливість здійснити конверсійну дію.
Зазвичай це:
- додавання товару в кошик;
- здійснення замовлення;
- виклик pop-up форми;
- відправлення заявок;
- замовлення зворотного дзвінка.
Негативний ефект цієї помилки добре помітний під час перегляду записів сесій у HotJar або теплової карти скролінгу в Plerdy.
У користувача, який заходить на цільову сторінку сайту, виникають закономірні запитання: “як замовити товар?” або “як відправити заявку на послугу?”. Якщо він не знаходить потрібної CTA-кнопки — цінність конверсії падає. Швидше за все, клієнт практично відразу піде з вашого сайту до конкурентів, у яких цієї проблеми немає.
Кнопки цільової дії обов’язково повинні бути присутніми на сторінці і вкрай бажано, щоб вони були на першому екрані (до скролу). Також хорошим рішенням буде закріпити основну кнопку внизу першого екрана.
Помилка 4. Погана оптимізація контенту.
Зміст сайту впливає на безліч поведінкових факторів. Так, погано оптимізований контент:
- збільшує довжину сторінки, що призводить до низької глибини скролінгу, через що більшість користувачів просто пропустить частину інформації;
- погано впливає на швидкість завантаження сторінки, через що збільшується відсоток відмови;
- псує дизайн сайту, що призводить до зниження лояльності до компанії та бренду.
Дуже важливо оптимізувати й адаптувати контент у мобільній версії. Наприклад, замість того, щоб розміщувати зображення у великому розмірі в стовпчик, варто їх зменшити і розмістити по два в ряд. Завдяки цьому суттєво знизиться довжина сторінки, що позитивно вплине на глибину скролінгу. Потрібно пам’ятати і про оптимізацію тизерів товарів. Їх також можна розмістити по два в ряд.
Не варто переносити текст, зображення, графіку та інше в мобільну версію сайту в тому обсязі, в якому вони були в десктопній версії.
Слід зменшити розмір шрифту тексту та заголовків. Наприклад, якщо в десктопній версії сайту висота заголовків становить 32px, то в мобільній варто використовувати 20px або 24px.
Помилка 5. Повільна швидкість завантаження сторінок сайту.
Повільне завантаження сторінок сайту — одна з ключових причин поганої конверсії на будь-якому сайті, оскільки користувачі не люблять довго чекати. У них може скластися враження, що сайт просто не працює.
Також повільне завантаження знижує ефективність пошукового робота Google, тому на індексування веб-сторінок йде більше часу.
Стратегічна мета будь-якого сайту, яка впливає і на SEO, і на юзабіліті, — завантажуватися швидше за сайт конкурентів.
Якщо ви прискорите завантаження, то зможете підвищити кількість продажів. Так, дослідження показують, що оптимізація швидкості сайту веде до зростання кількості конверсій.
Для перевірки швидкості завантаження та оптимізації вашого сайту використовується сервіс Google PageSpeed Insights. Він також підкаже, що зробити, щоб підвищити швидкість завантаження на будь-яких пристроях. Серед головних рекомендацій:
- Використовувати сучасні формати зображень (Progressive JPEG, WebP).
- Увімкнути Gzip-стиснення.
- Увімкнути кешування браузера.
- Використовувати CDN.
- Використовувати відповідний розмір зображень.
- Видалити ресурси, що блокують відображення.
- Відкласти завантаження невикористаного контенту CSS.
- Скоротити час відповіді сервера (час до отримання першого байта).
- Зменшити розмір коду JavaScript.
- Зменшити розмір коду CSS.
- Використовувати CSS-спрайти.
Помилка 6. Вузькі банери на слайдерах.
Часто мобільна версія сайтів страждає від некоректності відображення банерів на слайдерах. Найчастіше вони виходять занадто вузькими, а інформацію на них практично неможливо прочитати. Це відбувається через використання банерів для десктопної версії, які просто пропорційно зменшили.
Вочевидь, екрани телефонів не такі великі, як екрани комп’ютерів чи планшетів. Саме тому зображення, які добре виглядають у десктопній версії, матимуть поганий вигляд у мобільній.
Цю проблему вирішує створення окремих банерів для перегляду з гаджета. Вони більші за висотою — щонайменше 200–250px, а шрифт повинен мати висоту мінімум 14px.
Уникайте перерахованих 6 помилок мобільної версії вашого сайту під час його проєктування — і він буде приводити вам нових клієнтів!
