Больше половины заказов в большинстве магазинов приходит с телефонов, а проектируют интерфейс всё ещё «под десктоп с уменьшением». В итоге на мобильном кнопки мелкие, фильтр разъезжается, а до корзины в верхнем углу не дотянуться одной рукой. Каждое такое неудобство — это выпавший из воронки покупатель.
Эта статья — практическое руководство по жестам и навигации мобильного магазина на 1С-Битрикс: как устроена зона большого пальца, где уместны свайпы, зачем нижнее меню, как сделать удобными фильтр и корзину и что даёт PWA. Если параллельно нужно ускорить процессы за витриной, поможет аудит и оптимизация 1С.
Коротко
- Проектируйте под одну руку: ключевые действия — в удобной зоне большого пальца, внизу и по центру.
- Жесты ускоряют, но не заменяют кнопки: любое действие должно иметь видимый элемент.
- Нижнее меню (таб-бар) с 4–5 разделами держит навигацию всегда под рукой.
- Фильтр — отдельный полноэкранный слой; зоны нажатия — крупные, с отступами.
Почему мобильный UX решает выручку
Мобильный покупатель находится в других условиях: маленький экран, одна свободная рука, часто спешка и нестабильная связь. То, что на десктопе почти незаметно, на телефоне превращается в барьер. Мелкая кнопка «в корзину», фильтр, ломающий вёрстку, длинная форма заказа — каждый такой момент повышает вероятность, что человек закроет вкладку.
При этом мобильный трафик обычно и больше, и «горячее»: люди заходят с телефона в момент возникновения потребности. Значит, потери на мобильном UX бьют по выручке сильнее, чем кажется по доле трафика. Хорошая новость в том, что базовые принципы мобильной навигации известны и предсказуемо повышают конверсию — их надо просто применить.
Зона большого пальца и одноручное управление
Большинство людей держат телефон одной рукой и управляют большим пальцем. У пальца есть комфортная зона досягаемости — нижняя и центральная части экрана, — и есть неудобные области, прежде всего верхние углы. Это физическая данность, вокруг которой и строят раскладку элементов.
- Удобная зона (низ, центр). Сюда — частые и важные действия: «в корзину», «оформить», открыть меню, применить фильтр.
- Нейтральная зона (середина). Контент, карточки, текст — то, что читают, а не нажимают постоянно.
- Неудобная зона (верхние углы). Сюда — редкие или необратимые действия, чтобы снизить случайные нажатия.
Практический вывод: главную кнопку действия в карточке и корзине держат внизу, часто «липкой» (sticky), чтобы она была под пальцем при любой прокрутке. Это одно из самых сильных улучшений мобильной конверсии при минимуме усилий.
Нижнее меню и глобальная навигация
Классический бургер-меню прячет всю навигацию за одной иконкой в углу — не лучший выбор для магазина, где между разделами ходят постоянно. Нижнее меню (таб-бар) решает это: ключевые разделы всегда на экране, в удобной зоне, с привычной по приложениям логикой.
| Элемент таб-бара | Роль | Комментарий |
|---|---|---|
| Каталог | Вход в разделы и товары | Основной путь к покупке |
| Поиск | Быстрый поиск товара | Для тех, кто знает, что ищет |
| Корзина | Переход к оформлению | Со счётчиком количества позиций |
| Кабинет | Заказы, избранное, профиль | Повторные покупки и статусы |
| Ещё | Прочие разделы | Разгружает таб-бар от лишнего |
Достаточно 4–5 пунктов с иконкой и короткой подписью. Бургер при этом не отменяется — в него уходят второстепенные разделы (о компании, доставка, контакты). Такая двухуровневая навигация покрывает и частые, и редкие сценарии, не перегружая экран.
Жесты: где помогают, где мешают
Жесты делают интерфейс быстрым, но у них есть фундаментальный недостаток — они невидимы. Пользователь не догадается о свайпе, если ему не подсказать. Поэтому золотое правило: жест ускоряет действие, но никогда не остаётся единственным способом его выполнить.
- Свайп по галерее товара. Естественный жест листания фото — почти без риска, привычен всем.
- Свайп между вкладками. Переключение «Описание / Характеристики / Отзывы» листанием — удобно, если есть и обычные вкладки.
- Свайп для удаления из корзины. Допустим, но с явной кнопкой-дублёром и обязательной отменой.
- Pull-to-refresh. Привычное обновление потянув вниз — уместно в списках заказов и каталоге.
Размеры зон нажатия и отступы
Палец — не курсор: он крупный и неточный. Мелкие элементы впритык друг к другу приводят к промахам, а промах в интернет-магазине — это раздражение и потерянное действие. Поэтому размеры зон касания и отступы между ними — не косметика, а прямой фактор удобства и конверсии.
- Комфортный размер касания. Ориентир — около 44–48 пикселей по стороне для кнопок и ссылок-действий.
- Отступы между элементами. Достаточный зазор, чтобы соседние кнопки не «слипались» под пальцем.
- Приоритет главного действия. Основная кнопка крупнее и контрастнее второстепенных.
- Читаемый шрифт. Текст не мельче комфортного для чтения без масштабирования.
Особенно это критично в трёх местах активного взаимодействия: фильтр, карточка товара и корзина. Именно там пользователь много нажимает, и именно там промахи дороже всего обходятся в деньгах.
Каталог и умный фильтр на телефоне
Каталог — сердце магазина, и на мобильном у него свои правила. Список товаров делают в одну-две колонки с крупными изображениями и понятной ценой, а не пытаются впихнуть десктопную сетку. Пагинацию часто заменяют подгрузкой по мере прокрутки, чтобы не заставлять целиться в мелкие номера страниц.
Отдельная боль — умный фильтр. На десктопе он живёт сбоку, на телефоне места нет. Правильное решение — вынести фильтр в отдельный полноэкранный слой, который открывается по кнопке и применяется явным действием:
- Кнопка «Фильтр» со счётчиком. Видно, сколько условий уже выбрано.
- Полноэкранный слой. Фильтр не ломает вёрстку каталога и не мешает прокрутке.
- Число найденных товаров. Показываем результат до применения, чтобы человек не выбирал вслепую.
- Быстрый сброс. Одно нажатие очищает все условия.
Технически это адаптация штатного компонента catalog.smart.filter под мобильный шаблон. Про устройство самого фильтра и его данные полезно почитать наши материалы по каталогу, а производительность выборок мы разбираем в статье про D7 и ORM.
Карточка товара и корзина
Мобильная карточка товара строится вертикально и по приоритету: сверху — галерея со свайпом, затем название, цена и наличие, потом главная кнопка действия. Кнопку «в корзину» делают липкой внизу экрана, чтобы она всегда была под пальцем при любой длине карточки. Характеристики, описание и отзывы уводят во вкладки или «гармошку», чтобы не растягивать страницу в бесконечную ленту.
Корзина на мобильном должна быть предельно понятной: крупные превью, явные плюс/минус для количества, видимая итоговая сумма и большая кнопка оформления внизу. Удаление позиции лучше сделать явной кнопкой с отменой; свайп можно добавить как ускорение, но не как единственный путь. Любое действие в корзине — обратимое, иначе случайная ошибка стоит магазину заказа.
Формы и оформление заказа
Оформление заказа — самый уязвимый экран на мобильном: длинная форма на маленьком экране убивает конверсию быстрее всего. Здесь важны мелочи, которые в сумме дают большой эффект:
- Правильные клавиатуры. Для телефона — цифровая, для email — с «@», это ускоряет ввод и снижает ошибки.
- Автозаполнение. Подстановка имени, адреса, данных из ранее сохранённого профиля.
- Минимум полей. Только то, без чего заказ не оформить; остальное — потом.
- Понятные ошибки. Подсветка проблемного поля рядом с ним, а не общий отказ вверху.
- Прогресс. Видно, сколько шагов осталось до завершения.
Оформление тесно связано с учётом: заказ должен без ручного труда попасть в 1С со всеми данными покупателя и способом доставки. Чтобы заявки с телефона сразу уходили в работу, обмен и обработку заказов настраивают в рамках автоматизации продаж и склада на 1С.
Адаптивный шаблон и PWA в 1С-Битрикс
Технически мобильный магазин на 1С-Битрикс строят на адаптивном шаблоне: одна вёрстка подстраивается под ширину экрана через отзывчивую сетку и медиазапросы. Отдельная «мобильная версия» на поддомене сегодня почти не используется — её сложнее поддерживать и синхронизировать с десктопом.
Следующий шаг — PWA поверх адаптивного шаблона. Прогрессивное веб-приложение добавляет:
- Иконку на домашний экран. Магазин открывается как приложение, без адресной строки.
- Офлайн-кэш. Сервис-воркер хранит статику, страницы открываются быстрее и при плохой связи.
- Пуш-уведомления. Возврат покупателя без установки нативного приложения.
PWA даёт «приложенческие» ощущения без разработки под каждую платформу. При этом стабильная работа сервис-воркера и кэша требует аккуратной инфраструктуры — про это полезна статья про хостинг и инфраструктуру BitrixVM, а про безопасную отдачу данных наружу — материал про REST и вебхуки.
Скорость как часть навигации
Навигация — это не только раскладка, но и отзывчивость. Если после нажатия ничего не происходит секунду, пользователь нажимает ещё раз или уходит. Поэтому скорость мобильного магазина — прямая часть UX:
- Быстрый первый экран. Каталог и карточка отдаются без долгого ожидания, критичный контент — сразу.
- Отзывчивость на касание. Визуальный отклик на нажатие, чтобы действие ощущалось выполненным.
- Кэш и композит. Статика отдаётся мгновенно, динамика (корзина, наличие) догружается.
- Лёгкие изображения. Картинки в современных форматах и нужного размера под экран.
Системно скорость на 1С-Битрикс поднимают композитным сайтом и кэшированием, а инфраструктуру под нагрузку готовят отдельно. Как деплой и окружение влияют на стабильность, мы разбираем в статье про CI/CD и деплой в Битрикс.
Частые ошибки
- Десктоп «сжали» в мобильный. Мелкие кнопки и плотная сетка вместо отдельной мобильной раскладки.
- Главное действие вверху. Кнопка «в корзину» в неудобной зоне, до неё трудно дотянуться.
- Жест без кнопки. Единственный способ действия — свайп, о котором никто не догадывается.
- Фильтр ломает вёрстку. Умный фильтр не адаптирован, растягивает страницу и мешает прокрутке.
- Длинная форма заказа. Десяток полей и неправильные клавиатуры убивают оформление.
- Мелкие зоны нажатия. Ссылки впритык — постоянные промахи пальцем.
- Медленный отклик. Нет реакции на касание, пользователь жмёт повторно и злится.
Чек-лист мобильного UX
- Раскладка под одну руку. Главные действия — в удобной зоне большого пальца, кнопка действия липкая.
- Нижнее меню. Таб-бар с 4–5 разделами; редкое — в бургере.
- Жесты продублированы. Каждое действие имеет видимую кнопку; необратимое — с отменой.
- Зоны нажатия крупные. Комфортный размер касаний и отступы между элементами.
- Фильтр в слое. Полноэкранный фильтр со счётчиком и числом найденных.
- Форма заказа короткая. Минимум полей, правильные клавиатуры, автозаполнение.
- Скорость и PWA. Быстрый первый экран, кэш, при необходимости PWA поверх шаблона.
- Проверено на устройствах. Тест на реальных телефонах, а не только в эмуляторе.
Вывод
Мобильный магазин — это не уменьшенный десктоп, а отдельная среда со своими правилами: одна рука, маленький экран, зона большого пальца. Проектируйте под неё — держите главные действия внизу, делайте зоны нажатия крупными, выносите фильтр в слой, а форму заказа сокращайте до минимума. Жесты добавляйте как ускорение, но всегда дублируйте кнопками.
Технически всё это строится на адаптивном шаблоне 1С-Битрикс, при необходимости — с PWA поверх него. А чтобы удобный интерфейс не упирался в ручную обработку заказов за витриной, свяжите магазин с учётной системой: тогда заявка с телефона проходит весь путь до отгрузки без потерь и задержек.
