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

Это последняя статья из цикла о mCommerce от Mojo. Рассказываем, как уместить весь контент на странице продукта и что делать, когда товара нет в наличии. Бонус для маркетологов — рекомендации по обработке негативных отзывов.

В первой части мы рассказали, почему с «мобилки» покупают реже, хотя трафик в mCommerce растёт. Разобрались, что делать с контентом, корзиной и чек-аутом.

Во второй статье рассмотрели мобильную навигацию. Рассказали, как оформлять «хлебные крошки» и карусели.

В третьей определили функции и must-have контент для мобильного футера. Также описали распространённые типы поисковых запросов в интернет-магазинах.

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

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

1. Как оформить контент в карточке товара

2. Что делать, когда товара нет в наличии

3. Зачем и как указывать стоимость доставки в карточке товара

4. Почему нужно отвечать на отрицательные отзывы

5. Как лучше внедрять функцию живого чата в «мобилке»

6. Как поддерживать мобильные жесты в работе с изображениями

7. Выводы

Нам с вами нужно:

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

Тестирование Baymard показало, что люди перед покупкой концентрируются на важных для них данных.

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

2. Сделать контент лаконичным, чтобы всё влезло на мобильный дисплей и не давило на пользователя.

Как вы поняли из цикла статей, в дизайне «мобилки» всегда есть два стула, и нужно усидеть на обоих.

26% мобильных интернет-магазинов переносят часть карточки товара в подстраницы.

Почему так делать нельзя:

• контент бесполезен, если его никто не видит

Во время тестирования пользователи пропускали ссылки на подстраницы. Информации не хватало, и люди отказывались от покупки.

• переход «Назад» с подстраниц усложняет навигацию

Пользователи не замечали кнопку «Назад» и «хлебные крошки». Иконки со стрелкой недостаточно — не экономьте на тексте в навигации.

В итоге посетители нажимали кнопку «Назад» на устройстве и попадали в список продуктов — на 2 шага назад.

Baymard предлагает использовать аккордеоны. По их мнению:

1. Страница выглядит не так устрашающе — большая часть контента свернута.
2. Пользователь сориентируется по заголовкам. «Лишняя» информация будет скрыта.
3. Пользователи с меньшей вероятностью упустят из виду разделы по сравнению с горизонтальными вкладками.

4. Так мы контролируем длину карточки. Пользователи легко получат доступ к футеру или кросс-навигации.

Как всегда, есть нюансы:

• аккордеон нужно использовать почти для всех разделов

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

Кросс-навигацию, рекламу, информацию о компании, специальные предложения и промо-акции можно вынести отдельно.

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

1. Аккордеоны точно так же скрывают контент, как и подстраницы. Риск, что пользователь пропустит часть данных, сохраняется. Разница лишь в том, что аккордеонами проще пользоваться.
2. Нам нравится, когда часть информации показана, а часть свёрнута в раздел «Подробнее». Эта механика лучше заголовков формирует ожидания пользователей от контента и при этом не шокирует объёмами. В некотором смысле это тоже подвид аккордеона, только интерактивный.

3. Есть кейсы, где «классические» аккордеоны бессильны. Например, посетитель открывает 100 отзывов и думает, что осилит их все. Устаёт уже после 20. Теперь, чтобы вернуться и закрыть аккордеон, придётся отлистать всё обратно.

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

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

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

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

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

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

«Нет в наличии» на странице продукта — это тупик UX. Хуже только, когда покупателя без объяснений перенаправляют на страницу категорий товаров или выдают ошибку 404.

Посетитель не продвинется по сайту, если он настроен на покупку конкретной вещи.

Сообщение о поступлении

Кнопка «Узнать о поступлении» не помогает пользователям. Если товар есть в других магазинах, человек не ждёт сообщений на почте. С другой стороны, это позволит ритейлеру узнать email клиента и в какой-то момент вернуть его на сайт рассылкой.

Предложить сохранить товар в вишлист — тоже не идеальное решение. 75% сайтов требуют создать учётную запись, чтобы воспользоваться этой функцией. Регистрация в 30% случаев приводит к отказу от покупки даже на крупных сайтах из списка Fortune 500.

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

Поделитесь своими кейсами работы с вишлистом в комментариях.

Если товара нет в наличии

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

Мы в карточках размещаем сообщение, когда товар появится в магазине и через сколько его доставят. Лучше это делать рядом с местом, где была кнопка «Купить» — оно привлекает больше внимания пользователей.

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

Да, кто-то не захочет ждать. Для этой аудитории продвигайте альтернативные продукты.

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

К слову, сроки доставки важны и для товаров в наличии, так что их нужно указывать во всех карточках.

Если продукт снят с производства

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

Снова не забывайте предлагать альтернативные и новые модели продукта.

Лучше отображать их как замену раздела «Купить» или между основной навигацией и содержимым карточки товара.

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

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

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

Есть несколько способов рассчитать ориентировочную стоимость доставки. По убыванию эффективности с точки зрения UX:

1. Если у доставки фиксированная стоимость, просто укажите её.
2. Определите город пользователя по IP. По его местоположению можно рассчитать цену автоматически.
3. Позвольте пользователям сохранять адреса доставки в личном кабинете. Используйте предыдущий адрес посетителя, если он вошел в учётную запись.
4. Покажите диапазон минимально возможных сборов за доставку. Например: «Стандартная доставка: 300–600 рублей (в зависимости от пункта назначения)».

В разделе со стоимостью доставки всегда показывайте город, область или регион. Например, «Ориентировочная цена доставки для Московской области: 600 рублей».

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

Эту часть статьи мы посвящаем читателям, которые спорят в комментариях к нашим «Дизайн-прожаркам», что отзывы не интересуют покупателей.

95% пользователей полагаются на отзывы, чтобы оценить продукты или узнать больше о них.

53% специально ищут отрицательные отзывы.

37% позитивно воспринимают любые ответы интернет-магазина на отрицательные отзывы.

Почему отрицательные отзывы — это хорошо:

• они ускорят поиск альтернативного продукта на сайте. Сравнив все «за» и «против», пользователь будет достаточно уверен в выборе и с большей вероятностью завершит заказ.

Направляйте клиентов к товарам, которые понравятся им в долгосрочной перспективе, а не уговаривать их сделать неудачную покупку. Лояльный покупатель вернётся снова и принесёт больше денег.

• отрицательные отзывы повышают достоверность общего рейтинга товара. Пользователи ищут негативные комментарии, когда не верят только положительным;
• отрицательные отзывы — механизм обратной связи;
• для сайтов с несколькими брендами негативные отзывы помогут выявить поставщиков, с которыми стоит прекратить работу. Монобрендовым магазинам отрицательные отзывы помогут доработать продукт и пересмотреть производство.

Отвечайте на отрицательные отзывы

Во время тестирования Baymard 37% пользователей сказали, что лучше думают о компаниях, которые отвечают на негатив покупателей. Обратная связь интернет-магазина толкает людей пересмотреть своё отношение к товару, сайту и бренду в целом.

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

1. Используйте отступы, чтобы визуально «вложить» ответ в отзыв.
2. Отображайте ответ в другом стиле, например, с другим цветом фона, другим стилем шрифта и т. д.
3. Поставьте логотип компании, должность и имя отвечающего — это «очеловечит» бренд. Такая механика особенно важна, если на вашем сайте возможен диалог, а не просто ответ со стороны компании. Людям сложнее выливать негатив на конкретного человека, чем на «бездушную машину производства». К сожалению, это тоже не панацея.

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

В «мобилке» fab-кнопка чата может блокировать контент и функции страницы. Всё становится ещё сложнее, если чат появляется повсеместно на сайте — в результатах поиска, в карточках, в корзине и т. д.

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

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

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

Тестирование Baymard показало, что это те области, куда обращает внимание большинство пользователей.

Поддерживать мобильные жесты на сайте — гигиенический минимум для mCommerce. Пользователи уже привыкли использовать двойной тап и «щипок», чтобы масштабировать изображения на страницах продуктов. Однако в исследовании Baymard 2016 года 40% сайтов не поддерживали эти действия.

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

Причина: покупатели чувствовали, что не могут в достаточной степени оценить качество или функции продукта. Им было некомфортно покупать товар.

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

Низкое разрешение не считается

Хотя 4% протестированных сайтов технически поддерживали жесты для масштабирования, фотографии были низкого качества.

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

Предупредите, что масштабирование поддерживается

Показывайте тултип «Поддержка масштабирования» или иконку жеста. Лучше, чтобы сообщение исчезало через несколько секунд. Если выбираете статичное оповещение, важно, чтобы оно не заслоняло изображение.

Учтите, что не все пользователи понимают значение термина «тап». Лучше писать «Двойное касание для увеличения» или использовать иконку жеста.

Для тех, кто пролистал в самый низ:

• используйте «интерактивные» аккордеоны, чтобы структурировать контент на странице продукта;
• позвольте клиентам заказывать товары, которых временно нет на складе, увеличивая срок доставки. Не забывайте оповещать покупателей, когда продукт появится в магазине и сколько времени займёт пересылка;
• указывайте стоимость доставки в карточке товара — пользователи не любят внезапного увеличения общей суммы в чек-ауте и бросают корзины;
• отвечайте на отрицательные отзывы — это повышает лояльность аудитории;
• дважды подумайте, прежде чем внедрять fab-кнопку с живым чатов в мобильном сайте. Лучше поместить чат в хедер или футер.
• поддерживайте жесты двойного тапа и «щипка» для масштабирования изображений в «мобилке». Оповещайте пользователей об этих функциях.

Спасибо за то, что осилили весь цикл статей. Надеемся, это был полезный экспириенс. Возможно, вы даже были в нём юзером, ба-дум-тс: )

Ждём ваших вопросов и поздравлений в комментариях.

Это не конец — впереди ещё много контента про дизайн и не только. Подписывайтесь на Mojo, чтобы не пропустить новые публикации.

Не забудьте «+1», если было полезно.

#магазины