60–70% трафика интернет-магазинов приходит с мобильных устройств. Плохой мобильный UX = потеря большинства потенциальных покупателей.
Ключевые принципы мобильного UX
Данные исследований
По данным Data Insight (2024), объём российского e-commerce достиг 8,1 трлн ₽ (+36% год к году). 74% российских покупателей совершают онлайн-покупки не реже раза в месяц. Доля мобильных покупок превысила 62% в 2024 году (Яндекс.Маркет).
Размер кнопок
Минимальный размер кликабельного элемента — 44×44 пикселя (Apple HIG). Меньше — пользователь промахивается пальцем.
Кнопка «В корзину»: должна быть большой и располагаться под большим пальцем (нижняя часть экрана).
Шрифты
Минимальный размер шрифта для мобильных: 14px для основного текста, 12px для вторичного.
Мелкий текст → пользователь масштабирует страницу → плохой UX.
Отступы
На мобильном нужны большие отступы между элементами — для удобства тапа.
Навигация
Гамбургер-меню: стандарт для мобильных. Важно: — Меню должно открываться быстро — Категории видны без излишней вложенности — Поиск всегда доступен
Нижняя навигация: для мобильного приложения или PWA — фиксированная нижняя панель (Главная / Каталог / Корзина / Профиль).
Каталог на мобильном
Сетка: 2 товара в ряд (на маленьком экране) → 3 на среднем планшете.
Превью товара: на мобильном меньше места — показывайте только главное фото и цену.
Фильтры: не боковая колонка, а кнопка «Фильтры» → открывается на весь экран.
Карточка товара на мобильном
- Фото занимает весь экран (свайп для переключения)
- Кнопка «В корзину» фиксированная внизу
- Описание сворачивается (раскрывается по тапу)
- Таблица характеристик горизонтально прокручивается
Checkout на мобильном
Поля формы: — Клавиатура автоматически меняется под тип поля (числа для телефона, email для email) — Автозаполнение работает (телефон, email из браузера)
Оплата: — Apple Pay / Google Pay — один тап без ввода данных карты — Если нет — максимально простая форма
Типичные ошибки мобильного UX
| Ошибка | Последствие |
|---|---|
| Всплывающее окно на входе | Пользователь уходит |
| Горизонтальная прокрутка | Ломает восприятие |
| Мелкие ссылки и кнопки | Промахи, разочарование |
| Видео с автовоспроизведением | Тормозит, раздражает |
| Попап подписки через 5 секунд | Отталкивает |
| Неработающие поля формы | Потеря заказа |
Проверка мобильной версии
- Google PageSpeed Insights (мобильная оценка)
- Chrome DevTools → режим эмуляции мобильного
- Реальное тестирование на нескольких смартфонах
Разрабатываем магазин с mobile-first подходом: мобильная версия тестируется на реальных устройствах.
Часто задаваемые вопросы
Можно ли запустить интернет-магазин самостоятельно?
На конструкторах (Тильда, Ecwid) — да, но с ограниченным функционалом. Для полноценного магазина с каталогом, корзиной и интеграциями требуются технические знания или помощь разработчика.
Какие ошибки чаще всего допускают при создании магазина?
Типичные ошибки: запуск без проработанной структуры каталога, игнорирование мобильной версии, слабые описания товаров и отсутствие аналитики с первого дня. Также часто недооценивают стоимость продвижения после запуска.
Как подготовить товарный каталог к запуску?
Начните со структуры категорий, ориентируясь на поисковые запросы покупателей, а не на логику склада. Каждая карточка товара должна содержать уникальное описание, несколько фотографий и технические характеристики.
Как увеличить продажи в интернет-магазине?
Рост продаж достигается комбинацией факторов: быстрая загрузка страниц, удобная навигация, качественные описания товаров, работа с отзывами и SEO-продвижение. Также важны email-маркетинг и ретаргетинг для возврата посетителей.
Читайте также
Хотите понять, сколько может приносить собственный интернет-магазин?
Мы разрабатываем интернет-магазины для товарного бизнеса и помогаем выстроить систему продаж: от структуры и каталога до продвижения, аналитики и стабильных заказов.
Оставьте заявку — разберём вашу нишу, покажем, где сейчас теряется маржа, и оценим потенциал собственной платформы продаж.
