Для многих магазинов смартфон давно стал основным источником трафика. Люди открывают сайт в транспорте, в очереди, на диване перед телевизором, листают каталог, сохраняют товары в избранное. Но когда доходит до оплаты, значительная часть переключается на компьютер или откладывает покупку. Этот разрыв между долей визитов и долей заказов — прямая мера неудобства мобильной версии.
Мобильный магазин нельзя считать уменьшенной копией десктопного. Другой размер экрана, управление пальцем вместо курсора, нестабильная связь, отвлекающая обстановка и короткие сессии требуют иной логики интерфейса. То, что на большом мониторе выглядит аккуратно, на смартфоне превращается в мелкие ссылки, горизонтальную прокрутку и формы, которые невозможно заполнить.
В этой статье соберём главные правила для мобильной версии интернет-магазина: от шапки и меню до оплаты. Они помогут сделать покупку на смартфоне такой же лёгкой, как на компьютере, а в ряде случаев — ещё быстрее.
Почему мобильный опыт особенный
Несколько факторов отличают мобильного покупателя. Во-первых, внимание: он делает дело одной рукой, его легко отвлечь. Во-вторых, ввод: клавиатура занимает половину экрана, длинные формы утомляют. В-третьих, связь: мобильный интернет бывает медленным, и тяжёлая страница не откроется. В-четвёртых, контекст: человек часто просто присматривается и вернётся позже, поэтому ему нужны инструменты, чтобы сохранить выбор.
Всё это приводит к принципу, о котором мы подробно писали в статье про подход mobile first: проектировать нужно начиная со смартфона, а затем расширять интерфейс на большие экраны, а не наоборот. Тогда на мобильной версии остаётся только важное, и это улучшает и десктоп тоже.
Шапка и навигация
На малом экране шапка занимает дорогое место. Её задача — дать логотип, доступ к меню, поиску и корзине. Остальное лучше убрать или перенести в меню.
- Логотип слева, значок корзины со счётчиком справа, поиск — иконкой или полем под шапкой.
- Меню-«бургер» открывается на весь экран или боковой панелью; категории показываются списком с вложенностью по нажатию.
- Шапка при прокрутке вниз скрывается, а при прокрутке вверх возвращается, чтобы не занимать место.
- Нижняя панель навигации с основными разделами (каталог, поиск, избранное, корзина, профиль) удобна для крупных магазинов: до неё легко дотянуться большим пальцем.
- Телефонные номера и мессенджеры выносятся в понятные кнопки связи; для вашего бизнеса важно проверить, что все они нажимаются без ошибок.
Общие причины, по которым навигация подводит посетителей, мы разбирали в статье про навигацию по сайту. На смартфоне они проявляются острее.
Главная страница и каталог
На главной мобильной версии покупатель должен за секунды понять, что продаёт магазин и куда идти. Первый экран — не огромный баннер, а понятный заголовок, быстрый доступ к категориям и поиску. Блоки с акциями, хитами и новинками располагаются вертикально, горизонтальные карусели используются осторожно: их легко не заметить.
В каталоге особенно важны размер и плотность карточек. Два товара в ряд — стандарт для одежды и аксессуаров, где важно фото. Один товар в ряд лучше для техники и мебели с длинными названиями и характеристиками. Нужно, чтобы на карточке в списке помещались фото, название, цена, рейтинг и кнопка добавления. Подробно принципы построения каталога описаны в материале про проектирование каталога.
Фильтры и сортировка
Боковая колонка с фильтрами на смартфоне невозможна. Вместо неё — кнопки «Фильтры» и «Сортировка» над списком. Панель фильтров открывается на весь экран, выбранные параметры отображаются чипсами, а внизу закреплена кнопка «Показать N товаров». Подробнее об этом — в статье про фильтры и поиск в интернет-магазине.
Бесконечная прокрутка или пагинация
Бесконечная лента удобна для просмотра, но у неё есть слабые места: сложно добраться до футера, теряется положение при возврате, затруднена индексация. Компромисс — кнопка «Показать ещё», которая подгружает следующую порцию и сохраняет положение, а адрес страницы обновляется.
Карточка товара на смартфоне
Карточка в мобильной версии строится как вертикальный поток. Сначала галерея с жестами свайпа и счётчиком кадров, затем название, цена и наличие, выбор вариантов, закреплённая кнопка покупки. Описание, характеристики, доставка и отзывы складываются в раскрывающиеся блоки, чтобы не превращать страницу в бесконечное полотно.
Полный разбор блоков и ошибок есть в статье о том, как сделать карточку товара, которая продаёт. А для мебельного магазина «Древо» мы отдельно проектировали мобильный сценарий выбора размеров и материалов — посмотреть результат можно в кейсе по интернет-магазину мебели.
Размеры и удобство нажатий
Палец гораздо менее точен, чем курсор. Минимальный размер интерактивного элемента — порядка сорока пикселей по каждой стороне, а между соседними кнопками необходим промежуток, чтобы не попасть не в то. Особое внимание стоит уделить:
- кнопкам изменения количества товара плюс и минус;
- чекбоксам и переключателям в фильтрах;
- иконкам удаления и избранного на карточках;
- ссылкам в тексте: они не должны располагаться вплотную друг к другу;
- элементам вблизи краёв экрана, где мешают системные жесты.
Размер шрифта основного текста — не менее шестнадцати пикселей; иначе мобильные браузеры могут приближать страницу при фокусе на поле, нарушая вёрстку. Принципы читаемости и контраста мы описывали в статье про контраст и читаемость.
Корзина и оформление заказа
Здесь мобильная версия чаще всего проигрывает десктопу. Причины понятны: длинные формы, мелкие поля, ввод адреса и данных карты. Чтобы сократить потери, применяйте набор приёмов.
- Минимум полей: имя, телефон, адрес и способ получения — остальное по возможности убрать.
- Правильные типы клавиатуры: цифровая для телефона, почтовая для адреса электронной почты.
- Автозаполнение браузера и подсказки адреса вместо ручного ввода.
- Закреплённая кнопка «Оформить заказ» внизу экрана.
- Быстрые способы оплаты в одно касание: платёж через банковское приложение, система быстрых платежей, сохранённые карты.
- Гостевой заказ без обязательной регистрации.
- Вход по коду из СМС вместо пароля.
Всё это подробно рассматривается в статье про корзину и оформление заказа, а варианты платёжных сервисов — в материале про онлайн-оплату.
Скорость мобильной версии
Мобильные устройства слабее компьютеров, а канал связи нестабилен. Поэтому скорость становится критичным требованием. Тяжёлые изображения, лишние скрипты, всплывающие окна и сторонние виджеты быстро делают страницу медленной. Что стоит сделать в первую очередь:
- отдавать изображения подходящего размера и в современных форматах, а ниже первого экрана подгружать отложенно; технические детали — в статье про оптимизацию изображений;
- сократить и отложить сторонние скрипты: аналитику, чаты, виджеты;
- использовать кэширование и сжатие;
- избегать смещений вёрстки при загрузке: резервировать место под картинки и баннеры;
- применять шрифты с ограниченным набором начертаний.
Влияние скорости на результат мы разбирали в статье про скорость загрузки сайта: каждая лишняя секунда на смартфоне заметно сокращает число дошедших до покупки.
Всплывающие окна и баннеры
На смартфоне всплывающее окно закрывает весь экран, а крестик часто слишком мал. Поисковые системы могут понизить страницы с навязчивыми межстраничными окнами, а покупатели просто уходят. Правила простые: не показывайте окна сразу при заходе, не перекрывайте основное содержимое, делайте кнопку закрытия крупной и заметной. Подписку на рассылку и согласие на использование файлов cookie лучше показывать компактной плашкой внизу.
Поиск и быстрые действия
Мобильному покупателю проще один раз ввести запрос, чем идти по цепочке категорий. Поле поиска нужно сделать заметным, с подсказками и историей запросов, с голосовым вводом, если он поддерживается. Рядом полезны быстрые действия: сохранить в избранное, добавить в сравнение, поделиться ссылкой в мессенджере, позвонить или написать в чат. Именно возможность поделиться ссылкой на товар в мессенджере часто решает сделку, когда человеку нужно посоветоваться.
Жесты и привычные паттерны
Пользователи смартфонов привыкли к определённым жестам: свайп по галерее, вытягивание вниз для обновления, закрытие шторки движением вниз, возврат свайпом от края. Интерфейс не должен конфликтовать с ними. Не ставьте важные кнопки у самых краёв, не создавайте горизонтальную прокрутку, внутри которой находится вертикальная, и не блокируйте возврат назад. Лучшие решения повторяют знакомое поведение приложений, чтобы человеку не нужно было учиться.
Доступность на мобильных
Люди используют смартфоны на ярком солнце, одной рукой, с увеличенным шрифтом системы. Интерфейс должен выдерживать масштабирование, иметь достаточный контраст, не опираться только на цвет для передачи смысла и быть удобным для экранных читалок. Это не только забота об отдельных группах: удобство для всех растёт. Базовые правила рассмотрены в материале про доступность сайта.
Тестирование на реальных устройствах
Эмулятор в браузере полезен, но не заменяет реальный телефон. Проверяйте магазин на нескольких устройствах: на недорогом аппарате с небольшим экраном, на большом современном смартфоне, на планшете, в разных браузерах и в разных ориентациях. Пройдите полный путь: поиск, фильтр, карточка, корзина, оплата. Проверьте на медленном соединении, включив ограничение скорости. Попросите нескольких людей, не связанных с проектом, выполнить покупку и наблюдайте, где они запинаются; метод описан в статье про юзабилити-тестирование своими силами. Более общая методика проверки перед выпуском — в материале про тестирование сайта.
Аналитика мобильного трафика
Разделяйте данные по типам устройств. Сравните конверсию, глубину просмотра, время сессии и показатель отказов на смартфонах и компьютерах. Если разрыв большой, смотрите воронку по шагам для мобильных: где отваливаются пользователи. Записи сессий покажут, какие элементы вызывают «яростные клики» и непонимание. Об инструментах и метриках мы писали в статье про веб-аналитику.
Типичные ошибки мобильных магазинов
- Десктопная версия просто уменьшена, а не переработана.
- Слишком мелкие элементы управления и тесные кнопки.
- Фильтры в виде узкой колонки или перегруженное меню.
- Тяжёлые страницы, медленно открывающиеся через мобильную сеть.
- Длинные формы без автозаполнения и правильной клавиатуры.
- Навязчивые всплывающие окна.
- Скрытая или неудобная кнопка покупки.
- Отсутствие тестирования на реальных устройствах.
Мобильное приложение или адаптивный сайт
Иногда магазины задумываются о собственном приложении. Для большинства малых и средних проектов хорошо продуманный адаптивный сайт эффективнее: он не требует установки, индексируется поисковыми системами и стоит дешевле. Приложение оправдано при высокой частоте повторных покупок, развитой программе лояльности и большой лояльной аудитории. Как работает адаптивность и почему важна качественная вёрстка, мы рассказывали в статье про адаптивную вёрстку.
Итог
Мобильная версия интернет-магазина — не вторичное ответвление, а основная витрина для большей части посетителей. Компактная навигация, удобный каталог и фильтры, продуманная карточка товара, быстрое оформление заказа, высокая скорость и тестирование на реальных устройствах превращают смартфон из зоны потерь в зону роста. Если вы хотите проверить, насколько удобен ваш магазин на телефоне, закажите UX-аудит или обсудите с нами новый проект на странице разработки интернет-магазинов. Написать нам можно через раздел контактов.
