Мобільна версія сайту: типові помилки мобільного UX

2 листопада 2026LightSEO7 хв читання

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

Про нас

Хто ми і як працюємо

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

Коротко

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

Чому мобільна версія визначає результат

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

Google застосовує індексацію за мобільною версією (mobile-first indexing): для оцінки сторінки пошукова система переважно використовує її мобільний варіант. Якщо на мобільній версії бракує тексту, зображень чи розмітки, які є на комп'ютерній, ці матеріали можуть втратити вагу в пошуку.

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

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

Навігація й дотики

Розмір і відстань між елементами

Палець менш точний за курсор миші. Настанови Apple та Google для мобільних інтерфейсів рекомендують розмір інтерактивних елементів приблизно 44–48 пікселів у кожному вимірі та помітні відступи між ними. Дрібні посилання в тексті, тісні пункти меню й кнопки впритул одна до одної призводять до випадкових натискань і роздратування.

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

Телефон і месенджери

Номер телефону оформлюють як посилання з протоколом tel, тоді дзвінок починається одним дотиком. Так само працюють посилання на месенджери. Фіксована кнопка зв'язку внизу екрана скорочує шлях до розмови, якщо вона не закриває текст і кнопки форми.

Пошук і навігаційний ланцюжок

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

Каруселі, випадаючі списки й фіксовані елементи

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

Текст, зображення й таблиці

Читабельність на малому екрані забезпечують кілька базових правил.

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

Окремо перевірте сторінки з великими таблицями цін чи характеристик: саме вони найчастіше виходять за межі екрана.

Приклад: сторінка послуги на смартфоні

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

Форми й зв'язок

Форма – місце, де втрачаються заявки. Хороша мобільна форма коротка, має підписи над полями, що не зникають під час введення, і показує помилки біля потрібного поля.

Поле телефону відкриває цифрову клавіатуру, поле пошти – клавіатуру із символом @ (типи полів tel та email).
Автозаповнення браузера підставляє ім'я, телефон і адресу.
Поле телефону приймає номер у будь-якому звичному форматі й не вимагає вводити дужки та дефіси вручну.
Кнопка відправлення помітна й не ховається за клавіатурою.
Захист від спаму без складних картинок: підійдуть невидимі перевірки або прості завдання.
Після відправлення людина бачить підтвердження і розуміє, що буде далі.

Корисно запропонувати кілька способів зв'язку: форму, дзвінок і месенджер. Одні люди не люблять розмовляти телефоном, інші не хочуть заповнювати поля, тому вибір способу збільшує шанс отримати звернення.

Швидкість і елементи поверх сторінки

Швидкість

Мобільні мережі бувають нестабільними, пристрої різняться за потужністю. Великі зображення, важкі шрифти й сторонні скрипти сповільнюють сторінку. Google у публічних рекомендаціях виділяє показники Core Web Vitals: швидкість показу основного вмісту (LCP), реакцію на дії користувача (INP) і стабільність макета (CLS). Їх значення видно в PageSpeed Insights і в Search Console.

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

Банери й вікна

Банери cookies, підписки й рекламні вікна, що закривають екран, заважають дочитати сторінку. У публічних рекомендаціях Google зазначено, що нав'язливі вікна після переходу з пошуку можуть погіршувати оцінку сторінки. Робіть банер компактним, із кнопкою закриття, на яку легко натиснути, і не показуйте підписку одразу після відкриття.

Як перевірити мобільну версію і з чого почати виправлення

Відкрийте основні сторінки на двох-трьох реальних смартфонах із різними розмірами екрана.
Пройдіть ключові сценарії: головна, каталог або послуга, форма, оплата, дзвінок.
Використайте режим пристрою в браузері для швидкого огляду, пам'ятаючи, що він не замінює реальний телефон.
Запустіть PageSpeed Insights і перегляньте звіт про основні показники вебу в Search Console.
Порівняйте в аналітиці конверсію на смартфонах і комп'ютерах; різкий розрив вказує на проблему.

Порядок виправлення

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

Типові помилки

Дизайн розробляють під комп'ютер, мобільний варіант додають наприкінці, коли змінювати структуру вже пізно.
Перевірка лише в емуляторі браузера на новому флагманському телефоні.
Частину тексту й зображень приховують на мобільній версії, хоча на комп'ютері вони є.
Додають чати, віджети й аналітику без перевірки їх впливу на швидкість.
Ігнорують дані аналітики за пристроями: рішення ухвалюють за враженням.
Не повторюють перевірку після оновлення шаблону, плагінів чи банера cookies.
Вікно підписки з'являється одразу після відкриття сторінки, ще до першого прокручування.
Кнопки дзвінка й заявки є лише внизу довгої сторінки.

Питання і відповіді

Чи потрібна окрема мобільна версія сайту?

Зазвичай ні. Сучасний підхід – адаптивний дизайн: одна адреса й один набір контенту, який перебудовується під розмір екрана. Окрема мобільна версія на іншій адресі ускладнює підтримку та SEO.

Як перевірити, чи сайт зручний на смартфоні?

Відкрийте основні сторінки на реальному телефоні й пройдіть ключові сценарії. Додатково використайте PageSpeed Insights, звіт про основні показники вебу в Search Console та перевірку URL. Набір інструментів Google змінюється, тому звіряйтеся з актуальною довідкою.

Який розмір шрифту обрати для мобільної версії?

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

Чи завжди потрібне меню-бургер?

Ні. Для невеликого сайту з кількома розділами підійде видима навігація. Бургер доречний, коли пунктів багато; найважливіші дії все одно виносять на видне місце.

Як мобільна версія пов'язана з рекламою?

Платна реклама часто веде на сторінки, які люди відкривають зі смартфона. Якщо сторінка незручна, ви платите за клік, і форму ніхто не заповнює. Перед запуском реклами перевірте посадкову сторінку на телефоні.

Висновок

Мобільна версія визначає, чи залишить людина заявку з телефона. Почніть з основних сценаріїв: знайти потрібне, зателефонувати, заповнити форму, оплатити, і виправляйте те, що заважає найбільше. Після змін перевіряйте сайт на телефоні ще раз: оновлення шаблонів і плагінів нерідко ламають мобільний вигляд. Результат вимірюйте за конверсією на смартфонах. LightSEO – digital-агентство з Мукачева, яке з 2015 року створює сайти й інтернет-магазини та займається SEO, тому може допомогти перевірити мобільну версію. Технічні проблеми, що впливають на видимість, виявляє SEO-аудит сайту. Новий адаптивний сайт можна замовити як корпоративний сайт під ключ.