Содержание · 9
Зоны досягаемости, клавиатура, перекрывающая половину экрана, и жесты браузера. Разбираем специфику мобильной электронной коммерции.
Зона большого пальца
При удержании телефона одной рукой комфортно достижима нижняя треть экрана и центр. Верхние углы требуют перехвата — и именно туда по традиции ставят самые важные элементы вроде корзины.
Отсюда практическое решение: основные действия — внизу, вторичные — вверху.
Клавиатура
Программная клавиатура занимает 40–50% высоты экрана. Всё, что нужно видеть во время ввода, должно помещаться в оставшуюся половину — иначе человек печатает вслепую.
Особенно критично для полей ввода промокода и адреса: подсказки и ошибки часто оказываются под клавиатурой.
Цели касания
Минимальный размер интерактивного элемента — 44 × 44 пикселя, между соседними целями нужен зазор не меньше 8 пикселей. Иконки 24 пикселя без увеличенной области нажатия — постоянный источник промахов.
Особенно страдают счётчики количества в корзине и крестики закрытия.
- Минимум 44 × 44 px на любую цель касания.
- Зазор между целями от 8 px.
- Увеличенная область нажатия у мелких иконок.
- Никаких действий, зависящих от наведения.
Липкие элементы
Sticky-кнопка «Купить» внизу карточки — одно из немногих решений, которое надёжно повышает конверсию на мобильном. Но липких элементов не должно быть много: шапка, баннер согласия и панель внизу вместе съедают половину экрана.
Правило: одновременно закреплён только один элемент, и он занимает не больше 15% высоты экрана.
Половину экрана телефона занимает клавиатура, а верхнюю треть трудно достать большим пальцем. Покупку проектируют в оставшемся.
Что делает страницу товара медленной на телефоне
Мобильная покупка ломается не только на форме — она ломается раньше, на странице товара, и почти всегда по одной причине: страница тяжела там, где сеть слабее всего. Галерея из двенадцати снимков в полном размере, встроенное видео, виджет отзывов и три сторонних счётчика — на настольном подключении это незаметно, на мобильной сети в помещении это секунды до первого экрана, и часть покупателей уходит, не увидев цены.
Порядок важнее веса: цена, наличие и кнопка покупки должны появляться первыми, до галереи и до отзывов. Технически это значит, что главный снимок грузится с высоким приоритетом, остальные — по мере прокрутки, а всё стороннее откладывается до того, как страница стала интерактивной. Проверять это надо не в эмуляторе, а на настоящем телефоне с включённым ограничением скорости.
Что проверить на живом телефоне
- Видно ли цену и кнопку без прокрутки на экране 375 пикселей шириной.
- Не прыгает ли вёрстка, когда догружаются картинки и виджеты: сдвиг под пальцем — это случайное нажатие.
- Работает ли покупка при отключённых сторонних скриптах: рекламные блокировщики стоят у заметной доли покупателей.
- Открывается ли клавиатура нужного типа: числовая для карты и телефона, почтовая для адреса.
- Не перекрывает ли липкая панель поле ввода, когда клавиатура поднята, — самая частая поломка формы на телефоне.
Где именно теряется покупатель
Мобильная воронка обрывается в трёх предсказуемых местах, и все три относятся к вводу, а не к просмотру. Первое — регистрация до покупки: требование завести аккаунт отсекает заметную долю тех, кто уже готов платить. Второе — длинная форма адреса без подсказок. Третье — ввод карты в момент, когда клавиатура закрывает и поле, и кнопку.
Общее у этих мест одно: телефон плохо приспособлен для ввода данных и хорошо — для выбора. Всё, что можно превратить из ввода в выбор, стоит превратить: адрес из подсказок, способ доставки из списка, оплату из сохранённого способа.
Что проверить на живом устройстве
Эти пять проверок занимают четверть часа и находят больше, чем большинство отчётов аналитики: аналитика показывает, где люди уходят, но не показывает, почему.
- Пройдите путь от карточки до оплаты одной рукой, не перехватывая телефон.
- Проверьте, видна ли кнопка подтверждения при открытой клавиатуре.
- Посмотрите, что происходит при повороте экрана в середине формы.
- Проверьте возврат назад из оплаты: сохранилась ли корзина.
- Откройте страницу на медленной сети и посмотрите, что видно в первые две секунды.
Что в итоге
Мобильная покупка ломается на мелочах: маленькие цели касания, клавиатура поверх формы и слишком много закреплённых панелей.
Ставьте главное действие внизу, держите шрифт в полях не меньше 16 пикселей и оставляйте одну липкую панель, а не три.
Коротко
- Почему покупки бросают чаще с телефона?
- Из-за трения ввода: длинные формы, неудобная клавиатура, потеря введённого при возврате. Половина проблемы решается автозаполнением и платёжными кошельками, которые снимают ручной ввод карты.
- Нужна ли регистрация перед покупкой?
- Нет, и это одна из самых дорогих ошибок. Гостевое оформление с предложением сохранить данные после оплаты даёт и заказ, и учётную запись — но в правильном порядке.
Карточка товара
Фотографии, цена, варианты, доставка и кнопка. Разбираем порядок элементов, работу с галереей и то, где чаще всего теряется покупатель.ДальшеЧитайте также
Посмотреть примеры
Нашли ошибку или неточность в атрибуции? Напишите нам
Обсуждение
Загружаем…