Мобильная версия магазина: как довести пользователя до покупки, часть первая

Мы в Mojo много писали про интернет-магазины, но это ещё не весь Commerce. Настало время сменить «e» на «m» и поговорить о мобильных интерфейсах. В этой статье сосредоточимся на минусах смартфонов, особенностях разработки контента и нюансах мобильного чек-аута.

В прошлом цикле мы дали матчасть по дизайну десктопной версии. Если ещё не читали — самое время. При классическом подходе большинство проблем мобильная версия заимствует у «настольной».

Мы анонсировали этот цикл статей раньше, и результат голосования в финале был однозначным.

Обещали — выполняем. Спустя 3 месяца. Лучше поздно, чем никогда.

С мобильных устройств идёт 65% всего трафика электронной коммерции, но конверсии в продажи отстают.

Люди реже добавляют товары в корзину с телефонов. Пользователи выбирают позиции в магазинах со смартфона, но покупают уже дома через десктопную версию.

Размер мобильных устройств — основной барьер для работы с сайтами. Даже дисплей с диагональю почти 7" не сравнится с компьютерным монитором.

Экран «мобилки» вмещает меньше контента. С телефонов пользователи дольше читают тексты свыше 400 слов. Им чаще приходится напрягать кратковременную память, чтобы вспомнить предыдущий абзац.

Прерывистое восприятие. Смартфону труднее удерживать внимание пользователя — людей отвлекают события во внешней среде.

Нельзя работать со множеством вкладок на одном экране одновременно. Одна страница сайта должна вмещать решение всех пользовательских задач.

Сенсорный экран. Если на дисплее много активных элементов, их легче случайно задеть. Кроме того, сенсор реагирует не только на касание пальцев.

Переменная мощность сигнала. Качество связи не на высоте даже в крупных городах. Сигнал пропадает в общественном транспорте, подземных переходах, магазинах. Я ежедневно вижу 3G «с двумя палочками» в некоторых районах.

Каждая загрузка страницы заставляет ждать, а люди этого не любят.

В смартфонах есть функции, которые сделают покупки комфортнее. Камеры сканируют штрих-коды и автоматически заполняют данные банковских карт. C GPS можно не запоминать почтовые индексы и адреса. Заполнять формы на мобильных сложнее, так что возьмите готовые, если сможете.

Отдельная радость — мобильные платежи. Минимум действий — взять телефон и набрать небольшой текст. Кроме того, обработку данных из SMS можно полностью автоматизировать.

Mobile first подход — это разработка интерфейсов продуктов, в первую очередь, для смартфонов.

Количество мобильных пользователей растёт каждый год — только за 2019 прибавилось 124 миллиона. Трафик десктопа падает, поэтому дизайнеры используют Mobile First. Тренд на него задал Google в 2015 году, когда внедрил новый алгоритм ранжирования, и сайты без мобильной версии начали терять позиции в поисковой выдаче.

Гугл обращает внимание на скорость загрузки мобильной версии сайта, шрифты, структурное меню, навигацию, удобство кликабельных элементов, оптимизацию изображений и видео под смартфон.

«Миниатюрный» дизайн труднее сделать удобным. Десктоп вмещает больше функций, контента и рекламы без ущерба для пользовательского опыта. Масштабировать мобильный интерфейс под компьютерный монитор кажется логичным решением.

Не стоит забывать, что Mobile First — это не только mobile. Пользователи не оценят перенос неадаптированной мобильной версии на другую платформу.

Размер экрана мобильных устройств и их пропускная способность заставляют безжалостно расставлять приоритеты между контентом и функциями.

Mobile First больше ориентирован на информативность сайта и улучшает пользовательский опыт. Люди приходят в интернет-магазин, чтобы выбрать товар и купить его, а не рассматривать кнопки, любоваться меню и мечтать о детях, таких же красивых, как паттерны на фоне. Кстати, у нас есть проект, который мы делали по Mobile First.

Пользователи игнорируют контент, который похож на рекламу или находится в традиционных для нее местах. В смартфонах всё, что визуально выпадает из общего оформления, подсознательно воспримут за продающий контент.

Под раздачу попадают большие изображения, графика, анимации и т. д. Не стоит выделять информацию для повышения её значимости. Скорее всего, это даст обратный эффект.

Какой-то универсальной формулы расчёта не существует. Или мы о ней не слышали. На просторах интернета много гайдлайнов, но рекомендации в них различаются. Если вы владеете тайным знанием — моргните два раза в комментариях.

Про корзину, в том числе в «мобилке», мы уже рассказывали. Добавим несколько рекомендаций:

Разрешите пользователям удалять товары, устанавливая «0» напротив позиции. Это достаточно распространенный паттерн поведения.

Добавьте возможность восстановить товар в корзине. Не заставляйте пользователей снова искать карточку товара в магазине после случайного удаления.

Поддерживайте завершение покупок с разных устройствах. Убедитесь, что сессию можно возобновить на другом девайсе после входа в систему. Пользователи должны знать об этой функции при создании учетной записи — дополнительная мотивация для регистрации.

Распространено мнение, что не стоит добавлять промокод на страницу оформления заказа. Это может увести человека в гугл на поиски бонусов. Пользователь прервёт завершение покупки и, возможно, не вернётся к ней уже никогда.

Можно добавить скидку прямо в корзину.

В этом исследовании обнаружили, что скидки удерживают покупателя на сайте. Если предложить ему бонус, он не пойдёт искать более выгодное предложение в другом месте. Внутренние ссылки на собственные рекламные акции снизят партнёрские сборы и дадут покупателям ощущение выгоды.

Люди не любят неожиданности в чеке. Когда расходы внезапно увеличиваются, пользователи бросают свои корзины и ищут товары в другом месте. Каждая оставленная покупка — неполученная прибыль.

Покажите итог заказа на видном месте вверху страницы завершения покупки.

Выделите доставку и скидку. Из-за маленького экрана пользователи могут пропустить небольшие суммы. Не заставляйте юзеров прокручивать страницу вниз, чтобы найти нужную информацию.

Один вид огромной формы, которую нужно заполнять своими руками, вводит пользователей в ступор. Покупатель сто раз подумает, так ли ему нужны бамбуковые носочки «по самой вкусной цене».

Уберите все опциональные поля, сведите их общее количество к минимуму, обеспечьте автоматическое заполнение. Ответьте на вопрос: «зачем бизнесу эта информация?», прежде чем вставить новую форму. Если ответ покажется неубедительным для вас — пользователь тем более сочтёт эту строку лишней.

Люди беспокоятся о конфиденциальности, поэтому не любят оставлять свои данные.

Поясняйте пользователям, зачем вам нужна информация, которую вы собираете. «Курьер не сможет связаться с вами без номера телефона» у пропущенного поля повышает шанс, что человек его всё-таки заполнит.

Позаботьтесь о сохранении всех данных, которыми поделился пользователь. Второй раз он вряд ли будет так же снисходителен.

Мы уже давали рекомендации по дизайну форм в статье про десктопную версию. Они актуальны и для «мобилки».

Примера форматирования у поля недостаточно. Пользователи всё равно будут совершать ошибки.

Маска ввода номера телефона заранее даст понять, нужно ли указывать код страны, города и т.д.

Поле номера карты лучше форматировать маской с пробелами.

Есть региональные различия в вводе данных. Например, формат даты в США — ММ/ДД/ГГ, в Европе — ДД/ММ/ГГ, а в Канаде и Японии — ГГГГ/ММ /ДД.

Длина телефонных номеров в разных странах отличается: в Германии номера от 7 до 11 цифр, а код города варьируется от 2 до 5 цифр. Практически невозможно сделать маску ввода, которая верно отобразит ожидаемый пользователем формат. Учитывайте это, если работаете на международном рынке.

Используйте календари для выбора диапозона дат или близких событий, например, желаемого дня доставки. Оставьте возможность ввести дату вручную, если пользователю так удобнее.

Для каждого поля выберите правильную клавиатуру.

Используйте цифровую клавиатуру для банковских карт или номеров телефонов. Для электронных адресов используйте буквенную клавиатуру с символами «@» и «.». Также должны быть стрелки вверх и вниз, чтобы облегчить быстрый переход к другим формам.

Предоставьте широкий выбор платежей. Так вы обратитесь к более широкой аудитории и гарантируете, что люди не откажутся от покупок.

Важно, чтобы интернет-магазин поддерживал мобильные платежи. В России популярны ApplePay, GooglePay, SamsungPay и бесконтактные кошельки. На зарубежном рынке предложений ещё больше.

• с мобильных устройств покупать сложнее;
• при работе с контентом помните о баннерной слепоте и размере кликабельных элементов;
• выделяйте все дополнительные расходы и бонусы в саммари заказа;
• сохраняйте данные: кто владеет информацией — тот владеет сердцами покупателей;
• заполняйте поля за пользователей там, где это возможно, но не усердствуйте;
• не спрашивайте лишнего;
• интегрируйте мобильные системы платежей в интернет-магазин.

Мобильную навигацию оставили на вторую часть. Статья про неё уже в ближайшее время — подписывайтесь на Mojo, чтобы не пропустить.

«+1» в комментариях просить не будем, а вот вопросы обсудим с радостью.

#интернетмагазин #мобильныйинтерфейс #ecommerce #mcommerce