Статистика по российскому рынку говорит однозначно: 60–70% трафика на большинство сайтов приходит с мобильных устройств. При этом конверсия на мобильном в среднем в 2–3 раза ниже, чем на десктопе. Это значит, что большинство компаний теряют значительную часть клиентов просто потому, что их сайт неудобен на смартфоне.
Обидно: люди уже пришли. Они нашли вас. Но уходят, не купив — потому что мешает мобильная версия.
Почему конверсия на мобильном ниже
Три основных причины:
Технические проблемы. Медленная загрузка, горизонтальная прокрутка, мелкие кнопки — технические барьеры, которые не дают завершить покупку.
UX-проблемы. Форма с десятью полями, неудобный checkout, скрытое меню — вопросы проектирования, которые на мобильном критичнее, чем на десктопе.
Контекст использования. Мобильный пользователь часто смотрит на ходу, с отвлечениями, на маленьком экране. Он требует большей ясности и меньше терпения к сложностям.
Главный миф: «у нас адаптивный дизайн, значит с мобильным всё хорошо». Адаптивный дизайн — это только начало. Адаптивный ≠ удобный. Сайт может «не ломаться» на мобильном и при этом быть ужасным для использования.
15 типичных проблем мобильного юзабилити
Проблема 1: мелкие кнопки и ссылки
Минимальный размер касаемой области для пальца — 44×44 пикселя (рекомендация Apple Human Interface Guidelines). Если кнопки меньше — люди промахиваются, касаются не того, раздражаются.
Проверьте: все кнопки «В корзину», «Оставить заявку», ссылки в меню, иконки навигации — достаточно ли они большие?
Проблема 2: горизонтальная прокрутка
Если страница имеет горизонтальную прокрутку на мобильном — это критическая ошибка. Пользователи воспринимают это как «сломанный» сайт и уходят.
Причины: элемент с фиксированной шириной (таблица, изображение, блок с overflow:hidden), неправильно настроенный viewport. Решение: в CSS проверить, нет ли элементов с width > 100vw, убедиться, что viewport meta тег стоит правильно.
Проблема 3: мелкий шрифт в форме
Размер текста в полях формы менее 16px заставляет iOS Safari автоматически зумировать страницу при клике на поле — это неприятный сбой UX. Минимальный размер шрифта в формах на мобильном: 16px.
Проблема 4: всплывающее окно на весь экран на мобильном
Поп-ап, который занимает весь экран смартфона и непросто закрывается — катастрофа. Это одна из ведущих причин немедленного ухода с сайта. Google учитывает навязчивые интерстициалы (pop-up на весь экран) при ранжировании мобильных страниц.
Правило: на мобильном поп-апы должны занимать максимум 50% экрана, иметь очевидную и крупную кнопку закрытия (X крупный, в правом верхнем углу), не появляться сразу при входе.
Проблема 5: долгая загрузка изображений
На мобильном (особенно при 4G или слабом WiFi) изображения без оптимизации грузятся долго. Стандартный фотоконтент сайта должен быть адаптирован под мобильный: другой размер (ширина не более 750px для мобильного), меньший вес.
Решение: атрибут srcset — указывает браузеру загружать разные изображения для разных разрешений экрана. Для CMS — плагины автоматической генерации мобильных версий картинок.
Проблема 6: номер телефона некликабелен
На смартфоне номер телефона должен открывать приложение «Телефон» при нажатии. Если номер просто написан текстом без tel: ссылки — это упущенная конверсия.
Решение: оборачивайте номер в ссылку <a href="tel:+7XXXXXXXXXX">+7 (XXX) XXX-XX-XX</a>. Это занимает 30 секунд и даёт заметный рост звонков.
Аналогично для email: <a href="mailto:email@example.com">.
Проблема 7: сложный checkout на мобильном
Процесс оплаты на мобильном — самая болезненная точка e-commerce. Типичные проблемы: маленькие поля ввода карты, нет автозаполнения (Apple Pay, Google Pay), нужно вводить много текста с мобильной клавиатуры.
Решения: интеграция СБП (покупатель переходит в банковское приложение для оплаты — удобно и привычно на мобильном), поддержка Apple Pay / Google Pay, минимизация полей формы.
Проблема 8: скрытое меню-«гамбургер» без очевидного назначения
Три горизонтальных полоски (гамбургер-меню) — стандарт для мобильного, но не все пользователи понимают, что это меню. Особенно старшая аудитория.
Решение: рядом с иконкой добавьте слово «Меню». Или используйте нижнее закреплённое меню с иконками для ключевых разделов (особенно для приложений и сложных сайтов).
Проблема 9: нет sticky CTA
На мобильном пользователь прокручивает длинную страницу товара вниз — кнопка «Купить» осталась вверху. Нужно прокручивать обратно. Многие просто уходят.
Решение: фиксированная кнопка внизу экрана («Купить», «Оставить заявку», «Позвонить»), которая всегда видна при прокрутке. Увеличивает конверсию мобильных страниц на 15–35%.
Проблема 10: хлебные крошки и длинный текст не помещаются
Длинные хлебные крошки (Главная → Каталог → Электроника → Смартфоны → Apple → iPhone 15 Pro) на мобильном создают горизонтальный скролл или переносятся в несколько строк, занимая треть экрана.
Решение: сокращайте хлебные крошки на мобильном (показывайте только текущий раздел и «Назад»), или скрывайте промежуточные уровни.
Проблема 11: автозапуск видео со звуком
Видео на сайте с автозапуском и звуком на мобильном — гарантированный способ разозлить пользователя и получить немедленный уход, особенно если человек смотрит в публичном месте.
Правило: видео должно запускаться только без звука, с возможностью включить. Лучше — только по нажатию на кнопку Play.
Проблема 12: нечитаемые таблицы
Таблицы сравнения или характеристик, сделанные для десктопа, на мобильном либо становятся очень мелкими (нечитаемыми), либо создают горизонтальный скролл.
Решения: карточный вид вместо таблицы на мобильном (CSS media queries), горизонтальный скролл только внутри блока таблицы (overflow-x: auto на контейнере), аккордеон вместо таблицы.
Проблема 13: нет автозаполнения полей
Браузеры умеют автоматически заполнять поля формы — имя, email, телефон, адрес — если правильно указан атрибут autocomplete. Если не указан — пользователь каждый раз вводит всё вручную.
Добавьте атрибуты: autocomplete="name", autocomplete="email", autocomplete="tel", autocomplete="street-address". Это уменьшает время заполнения формы на мобильном в 2–3 раза.
Проблема 14: неправильный тип клавиатуры
Для поля телефона должна открываться цифровая клавиатура, для email — клавиатура с @ и точкой, для числовых полей — цифровая.
Реализация: атрибут type="tel" для телефона, type="email" для email, inputmode="numeric" для цифровых данных.
Проблема 15: нет состояния загрузки при отправке формы
Пользователь нажал «Отправить» на мобильном. Ничего не происходит (или происходит медленно). Он нажимает ещё раз. И ещё. В итоге — несколько дублирующихся заявок или ошибка. Раздражение и недоверие.
Решение: кнопка должна менять состояние после нажатия (показывать спиннер или надпись «Отправляем...») и блокироваться от повторного нажатия.
Как проверить мобильное юзабилити
| Способ | Что даёт | Стоимость |
|---|---|---|
| DevTools Chrome (F12 → Toggle device) | Быстрая проверка, не заменяет реальный телефон | Бесплатно |
| Реальный смартфон | Реальный опыт пользователя | Бесплатно |
| Google Mobile-Friendly Test | Техническая проверка от Google | Бесплатно |
| Тестирование на нескольких устройствах (BrowserStack) | Разные ОС, размеры, браузеры | от $29/мес |
| Запись сессий мобильных пользователей (Вебвизор/Hotjar) | Реальное поведение реальных пользователей | от 0 руб. |
Главное правило: всегда тестируйте на реальном устройстве. Эмулятор в браузере не передаёт реальное поведение сенсорного экрана, скорость реальной сети и особенности мобильных браузеров.
Приоритизация правок
Не нужно исправлять всё сразу. Оцените каждую проблему по двум параметрам: влияние на конверсию (высокое/среднее/низкое) и сложность исправления (просто/сложно).
| Проблема | Влияние | Сложность | Приоритет |
|---|---|---|---|
| Номер некликабелен | Высокое | Просто | Сделать сегодня |
| Мелкие кнопки | Высокое | Просто | Сделать сегодня |
| Поп-ап на весь экран | Высокое | Просто | Сделать сегодня |
| Нет sticky CTA | Высокое | Средне | На этой неделе |
| Шрифт в форме < 16px | Высокое | Просто | Сделать сегодня |
| Горизонтальная прокрутка | Высокое | Среднее | На этой неделе |
| Slow load (картинки) | Высокое | Среднее | На этой неделе |
| Нет Apple/Google Pay | Среднее | Сложно | В следующем спринте |
| Autocomplete атрибуты | Среднее | Просто | Сделать сегодня |
Начните с тех, где высокое влияние и низкая сложность. За один день можно сделать кликабельным номер телефона, увеличить шрифт в форме, убрать навязчивый поп-ап и добавить sticky кнопку. Это даст ощутимый прирост конверсии без серьёзных затрат на разработку.
Мобильное юзабилити — не разовый проект, а постоянный процесс. Добавляете новый блок на сайт — проверьте его на телефоне сразу. Раз в квартал просматривайте мобильные сессии в Вебвизоре. Спрашивайте реальных клиентов, удобно ли им пользоваться вашим сайтом с телефона.