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