Дизайн
Mojo

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

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

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

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

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

Трафик ≠ продажи

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

14% пользователей считают покупки с десктопа безопаснее. Retail Systems Research: 2020 Retailer Website Performance Evaluation

Размер имеет значение

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

Vivo Nex 3 Liveinternet

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

Средние оценки понимания прочитанных простых и сложных статей по устройствам. Nielsen Norman Group

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

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

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

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

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

Если ваш интернет-магазин грузится дольше 3 секунд, то половина покупателей уйдет к конкурентам.

Немного о плюсах

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

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

Mobile first

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

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

Трафик десктопа упал на 6,8% с декабря 2018 года. Digital 2020: Global digital overview

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

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

Mobile First = Content First

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

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

Сайт для «Ювелирторга» Mojo

Баннерная слепота

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

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

Пользователь искал портативный генератор и проигнорировал раздел, похожий на рекламу. Блок сильно отличался от белого фона страницы и изображений на остальной части экрана. Nielsen Norman Group

Размер кликабельных элементов

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

В своей практике мы используем элементы не меньше 40х40 px, но на должность последней инстанции не претендуем.

Оформление заказа

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

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

В мобильной версии HP можно убирать товары из корзины, выбирая «0», но отсутствие контрастной кнопки «удалить» — не лучшее решение.

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

«Связной» предлагает отменить удаление товара.

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

Промокоды

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

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

Lamoda автоматически применяет скидку при добавлении товара в корзину.

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

Отчёт о заказе

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

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

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

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

Заполнение полей

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

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

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

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

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

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

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

Кстати, Эндрю Койл опубликовал обновлённый список практик оформления полей. Это must-read для владельцев бизнеса, маркетологов и веб-дизайнеров.

Используйте маски ввода

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

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

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

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

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

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

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

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

Обеспечьте автоматическое заполнение полей на основе сохраненных данных пользователей.

Способы оплаты

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

Интернет-магазины редко принимают оплату за рамками банковских карт и PayPal.

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

Итоги

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

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

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

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

{ "author_name": "Mojo", "author_type": "self", "tags": ["\u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441","\u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442\u043c\u0430\u0433\u0430\u0437\u0438\u043d","mcommerce","ecommerce"], "comments": 11, "likes": 42, "favorites": 334, "is_advertisement": false, "subsite_label": "design", "id": 162376, "is_wide": true, "is_ugc": true, "date": "Tue, 29 Sep 2020 12:46:49 +0300", "is_special": false }
0
11 комментариев
Популярные
По порядку
Написать комментарий...
2

классная статья!
как бороться с проблемой несоответствия размеров интерфейса для каждого устройства? создавать много разных версий затратно, но выходит это необходимо, чтобы все одинаково работало с разных устройств

Ответить
2

Вопрос скорее к разработке, чем к дизайну. Чаще всего, мы разрабатываем 2-3 версии дизайна сайта, чтобы обеспечить максимальную адаптивность

Ответить
1

Поумничаю :). Рисуется 3-4  мобильного макета + десктоп версия, у устройства обычно диапазон разрешений скажем десктоп версия покрывается экраны от 1280 (ширина) до бесконечности (условно), ну как минимум 4К , а мобильные версии до 960/1200. Промежуточные значения не так важны, под конкретный самсунг не рисуют, а интерфейс, если у мобильного высокое разрешение просто масштабируется в 2/3/4 раза.

Грубо говоря, главное, что бы кнопка была кликабельна для пальца, а уже сохранить ей пропорции и увеличить в 2/3 раза не проблема.

Ответить
1

Размер кликабельных элементов, кнопок для мобильной версии: читал, что средний размер подушечки пальца — 45х45.
Значит и кнопки для мобильной версии делать не меньше 45х45.
Вроде и Google Lighthouse 6.3. рекомендует размер 47х47.

Ответить
1

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

Раньше везде было написано, что Apple рекомендует 44х44px. Сейчас в Human Interface Guidelines есть минимальная высота и 30px. Мы предлагаем делать не меньше, чем 40x40px. Больше — пожалуйста, мы не против :)

Помните о законе Фиттса и о том, что область нажатия всегда должна быть больше кнопки.

Ответить
1

Функция отмены в корзине — топ. В остальном в статье чисто базовые принципы

Ответить
1

Повторенье — мать ученья :)

Ответить
0

А что, еще кто-то программирует с нуля магазины??? Я по наивности думал, что берут платформу, готовую тему на нее и вперед.

Ответить
1

Думаем, такие энтузиасты существуют. 

Ответить
0

Пример со связным классный, но не самый практичный. «Отменить удаление» - двойное отрицание заставляет лишний раз задуматься о сущности патерна. Ну это уже вопрос к микрорайтингу.
А статья классная, спасибо. 

Ответить

Комментарии

null