Сайт на мобільному: 7 помилок які відштовхують клієнтів

Більше половини веб-трафіку у світі — мобільний. В Україні ця частка ще вища: більшість користувачів відкривають сайти з телефону, часто в дорозі, часто з поганим з’єднанням, завжди з обмеженим терпінням. При цьому значна частина сайтів досі будувалася з логікою «спочатку десктоп, мобільна версія якось сама». Результат передбачуваний: користувач відкриває сайт, стикається з незручністю і закриває. Без заявки, без дзвінка, без повернення. Нижче — сім конкретних причин чому це відбувається.

1. Сайт довго завантажується — і користувач іде ще до першого екрану

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

Причини повільного завантаження на мобільному зазвичай типові: незтиснені зображення, важкі скрипти які блокують рендеринг, відсутність кешування, хостинг без CDN. Сайт який на десктопі відкривається за секунду — на мобільному з LTE може вантажитися чотири-п’ять секунд. На 3G — ще довше.

Швидкість завантаження впливає не тільки на поведінку користувача, а й на позиції в Google. Пошуковик враховує Core Web Vitals — метрики швидкості і стабільності завантаження — як фактор ранжування. Повільний мобільний сайт програє конкурентам і в пошуку, і в конверсії одночасно.

2. Дрібний текст і елементи які неможливо натиснути пальцем

Класична проблема сайтів без нормальної адаптації: текст який треба масштабувати щоб прочитати, і кнопки розміром з нігтик. Користувач збільшує сторінку, намагається влучити пальцем у потрібний елемент, промахується, натискає не те і закриває сайт із роздратуванням.

Google рекомендує мінімальний розмір тексту для мобільного — 16px. Інтерактивні елементи — кнопки, посилання, іконки — мають бути не менше 48×48 пікселів у зоні натискання. Це не естетика, це фізіологія: середня подушечка пальця займає саме таку площу.

Окрема проблема — посилання в тексті розміщені занадто близько одне до одного. Користувач хоче натиснути одне — потрапляє на сусіднє. Після двох-трьох таких промахів терпіння закінчується.

3. Спливаючі вікна які перекривають весь екран

Попапи на десктопі — вже межа між корисним і дратівливим. На мобільному — майже завжди катастрофа. Вікно яке відкривається відразу після завантаження сторінки і перекриває весь екран телефону не залишає користувачу вибору: або розбиратися як його закрити, або одразу закрити сайт.

Google з 2017 року знижує позиції сторінок де агресивні попапи перекривають основний контент на мобільних. Це стосується насамперед вікон які з’являються одразу або через кілька секунд після входу на сторінку.

Якщо попап необхідний — він має займати не більше 30% екрану, мати добре помітну кнопку закриття розміром достатнім для натискання пальцем, і з’являтися не одразу а після певної взаємодії з сторінкою. Підписка на розсилку яка вискакує через три секунди після входу на сайт — це не маркетинг, це привід піти.

4. Форми які незручно заповнювати з телефону

Форма заявки — кінцева точка конверсії. Якщо вона незручна на мобільному — всі попередні зусилля по залученню трафіку витрачені даремно. І тут є кілька типових пасток.

• Занадто багато полів. Заповнювати десять полів на телефоні — це справжнє випробування. Кожне зайве поле знижує ймовірність що форму дозаповнять до кінця. Для першого контакту достатньо імені і телефону.
• Неправильна клавіатура. Якщо поле для телефону не викликає цифрову клавіатуру — це помилка в розмітці. Якщо поле для email не викликає клавіатуру з символом @ — те саме. Дрібниця яка дратує і сповільнює.
• Дрібні чекбокси і перемикачі. Елементи форми розраховані на мишку — на мобільному в них неможливо влучити пальцем без масштабування.
• Відсутність автозаповнення. Сучасні браузери вміють підставляти ім’я, телефон, email. Якщо форма блокує цю функцію — користувач змушений вводити все вручну.

5. Горизонтальний скрол і зламана верстка на вузькому екрані

Горизонтальний скрол на мобільному сайті — майже завжди ознака того що верстка не адаптована, а просто стиснута. Елементи виходять за межі екрану, з’являється смуга прокрутки знизу, і щоб побачити повний контент треба гортати вбік. Для більшості користувачів це рівнозначно зламаному сайту.

Причини бувають різні: фіксована ширина блоків у пікселях замість відсотків, зображення без max-width: 100%, таблиці які не перебудовуються під вузький екран, вбудовані iframe з фіксованими розмірами.

Зламана верстка також включає: текст який накладається на зображення, кнопки які виходять за межі контейнера, меню яке не вміщується в екран і відображається в одну нечитабельну рядок. Все це сигналізує користувачу: цим сайтом не займалися. І довіра до бізнесу падає разом із бажанням залишити заявку.

6. Відео і анімації які гальмують або не відтворюються

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

Відео яке автоматично запускається при завантаженні сторінки — одна з найбільш дратівливих речей на мобільному. Особливо якщо воно зі звуком. Особливо якщо людина відкриває сайт у транспорті або на нараді.

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

Правило просте: будь-який важкий медіаконтент на мобільному має бути виправданий і оптимізований. Відео — стискати, автовідтворення — вимикати або залишати без звуку, анімації — перевіряти на реальних пристроях а не тільки в браузері на комп’ютері.

7. Навігація розрахована на мишку а не на палець

Десктопне меню з випадаючими підпунктами які відкриваються при наведенні курсора — на мобільному просто не працює. Немає hover-стану, немає курсора. Є палець і тап. Якщо меню не переосмислене під мобільний сценарій — користувач не може дістатися потрібного розділу.

Поширені проблеми з навігацією на мобільному:

Бургер-меню яке відкривається але не закривається при натисканні поза ним. Пункти меню розміщені так щільно що важко влучити в потрібний. Відсутність кнопки «повернутися нагору» на довгих сторінках — і користувач змушений гортати назад вручну. Липке меню яке займає занадто багато місця і перекриває контент на маленькому екрані.

Навігація на мобільному має бути простою і мінімалістичною. Основні розділи — доступні в один тап. Другорядне — прибрати або сховати. Мета: щоб користувач міг дістатися будь-якої сторінки сайту за два-три дотики без роздратування і масштабування.

Як зрозуміти що з вашим сайтом є проблеми: базова самоперевірка

Перш ніж залучати фахівців — є кілька безкоштовних інструментів які дають чітку картину стану мобільної версії.

• Google PageSpeed Insights — перевіряє швидкість завантаження і Core Web Vitals окремо для мобільних і десктопу. Показує конкретні проблеми і рекомендації. Адреса: pagespeed.web.dev.
• Google Search Console — якщо сайт підключений, у розділі «Зручність для мобільних» показує сторінки з помилками адаптації: дрібний текст, елементи що виходять за межі екрану, надто близько розташовані посилання.
• Реальний тест на телефоні. Відкрийте свій сайт на смартфоні — бажано не на останньому флагмані, а на середньому пристрої. Пройдіть шлях клієнта: знайдіть потрібну послугу, прочитайте опис, заповніть форму. Де виникає дискомфорт — там і є проблема.
• Тест у різних браузерах. Chrome, Safari, Samsung Internet поводяться по-різному. Те що виглядає нормально в одному — може зламатися в іншому.

Мобільна версія сайту — це не опція і не доопрацювання. Це основна точка контакту з більшістю ваших потенційних клієнтів. Сайт який погано працює на телефоні — це не технічна проблема, це проблема продажів. Кожна з семи помилок описаних вище коштує бізнесу реальних клієнтів щодня. Почніть із самоперевірки — і побачите де саме ідуть втрати.