Головна » Блог » CRO | Юзабіліті і підвищення конверсії сайту » Топ-6 помилок мобільної версії сайту, які знижують його конверсію

Топ-6 помилок мобільної версії сайту, які знижують його конверсію

19.02.2020

Владислав Воронін, middle UX-дизайнер отдела CRO и аналитики Webpromo


 

Перш ніж розбирати заявлені 6 помилок мобільної версії сайту, розберемося, навіщо взагалі потрібна мобільна версія. Згідно з останніми даними, частка тих користувачів, які заходять в інтернет з мобільних пристроїв, перевищує частку тих, які заходять з ПК, в 3 рази. І всі вони очікують побачити зручний і інформативний сайт, який максимально схожий на свою десктопну версію.

Але припустимо, у вас є мобільна версія сайту. Чому ж тоді вона погано конвертує? Швидше за все, справа в помилках, які були допущені при її створенні. Користувачі просто відчувають труднощі при пошуку інформації на сайті, при натисканні CTA-кнопок, при завантаженні сторінок та ін.

У цій статті ми розберемо 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. Він також надасть рекомендації, що потрібно зробити, щоб прискорити швидкість завантаження на будь-яких пристроях:

  1. Використовувати сучасні формати зображень (Progressive JPEG, WebP).
  2. Включити Gzip-стиснення.
  3. Включити кешування браузера.
  4. Використовувати CDN.
  5. Використовувати відповідний розмір зображень.
  6. Видалити ресурси, які блокують відображення.
  7. Відкласти завантаження невикористаного контенту CSS.
  8. Скоротити час відповіді сервера (час до отримання першого байта).
  9. Зменшити розмір коду JavaScript.
  10. Зменшити розмір коду CSS.
  11. Використовувати CSS-спрайт.

Помилка 6. Вузькі банери на слайдерах.

У багатьох мобільних версій сайтів є проблема коректності відображення банерів на слайдерах. Найчастіше вони виходять занадто вузькими, а інформацію на них практично неможливо прочитати. Це відбувається через використання банерів для деськтопной версії, які просто пропорційно зменшили.

Очевидно, що екрани телефонів не такі великі, як екрани комп’ютерів або планшетів. Саме тому зображення, які добре виглядають в деськтопной версії, будуть погано виглядати в мобільній.

Цю проблему вирішує створення окремих банерів для мобільної версії. Вони повинні бути більше по висоті, складаючи як мінімум 200-250px, а шрифт повинен мати висоту мінімум 14px.

Уникайте перерахованих 6 помилок мобільної версії вашого сайту при його проектуванні – і він буде приводити вам нових клієнтів!

Последние материалы рубрики

Як розробити лендінг в сервісі SendPulse

Як розробити лендінг в сервісі SendPulse

Раніше ми розглянули анатомію лендінгу, етапи його підготовки. Для вибору посадкової сторінки вам не знадобляться знання коду або...

Spark Ads — новий нативний формат реклами для брендів в TikTok

Spark Ads забезпечує більш високі результати від проведення рекламних кампаній при мінімальному бюджеті. Новий нативний формат об'єднує...

Як створити і використовувати воронки продажів в маркетингу? Відстежуємо воронку за допомогою Google Analytics

Як створити і використовувати воронки продажів в...

Що таке воронка продажів, як створити і використовувати, для чого відстежувати ваші воронки в Google Analytics? Все, що ви хотіли дізнатися про...

Landing Page від А до Я Підготовка ефективного лендінгу: 8 кроків до високих продаж

Підготовка ефективного лендінгу: 8 кроків до високих...

Перед розробкою лендінгу потрібно продумати весь шлях потенційного клієнта. Як? Конвертувати ліди в клієнтів із залученням трафіку?...

Залишились питання?
Наші експерти готові відповісти на них

 

Зв’яжіться за вказаним нижче телефоном з нашим менеджером або скористайтеся послугою «Зателефонуйте мені». Ми зв’яжемося з вами найближчим часом.

Кожен в команді— майстер своєї справи
Ціную Webpromo за гнучкість
Команда Webpromo, як продовження нашого відділу маркетингу
Спокійний за просування своїх проєктів в інтернеті