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

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

Ранее в сериале

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

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

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

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

В новом эпизоде

I. Какой контент отображать в каталоге, чтобы сделать покупки удобнее

II. Что написать в карточке товара, чтобы у пользователя не осталось вопросов

III. Зачем нужен список совместимых продуктов и где его размещать

IV. 6 способов показать продукт и почему UGC решает

V. На что смотрят пользователи в первую очередь и почему нельзя скупиться на качество фото

VI. Как внедрять цветовые свотчи и для чего они нужны

VII. Почему миниатюры в галерее лучше обычной карусели с индикаторами

Каталог

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

Всё просто: если человек увидит со смартфона урезанный ассортимент, он решит, что в интернет-магазине больше ничего нет. Мы упоминали в первой статье тип пользователей «смотрю на мобилке, покупаю с десктопа». Возможно, в скором времени раскроем тему подробнее в новой статье.

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

В десктопной версии «Связной» в каталоге меняет изображения при наведении курсора на товар. Совет от нас: фотки должны меняться по клику пользователей, а не автоматически
В мобильной версии изображения не меняются. Контент одинаковый — функции разные. Но мы против такой механики — в каталоге должен быть доступ к разным фотографиям

Страница товара

Мобильная страница товара обязательно должна включать:

  • название продукта;
  • масштабируемые изображения;
  • цену и все дополнительные расходы;
  • цену за единицу, если вы продаёте одинаковые товары в разных объёмах. Писали об этом прошлой части цикла;
  • параметры продукта: цвет, размер, количество;
  • наличие товара;
  • понятный способ добавить товар в корзину;
  • характеристики продукта. Они должны быть ясны пользователям. Пишите человеческим языком и не забывайте про тултипы для отраслевых терминов;
  • список сопутствующих товаров (аксессуаров, товаров в комплекте, похожих товаров);
  • рейтинг и отзывы покупателей.

Желательно добавить:

  • сортировку или фильтрацию по рейтингу;
  • видео с товаром;
  • функции «Добавить в избранное» и «Сравнить».

Дополнительные функции:

  • виртуальная примерка;
  • UGC — фото и видео отзывы покупателей;
  • фото 360°;
  • пошаговые обучающие видео или анимации.

Совместимые продукты

В «мобилке» всегда показывайте список совместимых продуктов. Вспоминаем статью о навигации и кросс-продажах.

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

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

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

O’STIN показывает сопутствующие и похожие товары на странице продукта

Мы рекомендуем пополнить список ещё и недавно просмотренными. Да, показывать всё одновременно.

Один из наших проектов

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

«М.Видео» предлагает аксессуары в корзине под кнопкой «Продолжить»

Помните о рисках: дополнительные товары в корзине могут увести пользователя обратно к изучению продуктов. Он прервёт покупку и может уже не завершить её.

Мы упрощаем хедер и футер в корзине и не отображаем дополнительные товары, чтобы не отвлекать пользователя Один из наших проектов

1. Пользовательский контент

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

Aliexpress

Есть нюансы:

  • изображения нужно модерировать — мало ли, чем решит похвастаться клиент. Возможно, совсем не новой покупкой;
  • придётся давать бонусы. Если вы не поощряете клиентов за отправку изображений, вы не получите достаточно пользовательского контента без развитого комьюнити;
  • если берёте фотографии клиентов из других источников (например, соцсетей) — всегда спрашивайте разрешение авторов. Молчаливое использование чужого контента плохо отразится на репутации компании;
  • стимулируйте создание UGC — проводите конкурсы и акции с условием прислать вам фото с комментарием.

UGC (user-generated content) — сложная история, но им нужно заниматься. Мы писали в прошлой части цикла45% пользователей делают онлайн-покупки потому, что могут видеть чужие обзоры. Хорошая механика — добавить пользовательский контент в галерею к обычным фотографиям. Это увеличит лояльность покупателей. Кейс AliDropship показывает, что UGC работает лучше любой рекламы.

2. Покажите компоненты

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

«М.Видео»

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

3. Life Style

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

4. Изображения с текстурой товара

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

H&M

5. Размер и пропорции товара

42% пользователей пытаются оценить размер продукта по его изображениям. Просто таблицы с характеристиками предмета недостаточно. Например, при поиске рюкзака покупателю может быть сложно представить, что именно в него поместится. Даже приписка «Вместимость: до 8 литров» вряд ли ему поможет, если он не собирается носить в нём исключительно тары.

Выход: показывать рюкзак полным.

Пользователь сможет примерно прикинуть: если влез шлем, то футляр с зеркальной камерой тоже поместится. Опирайтесь на ЦА: если магазин спортивный — показывайте рюкзаки с инвентарём. Когда демонстрируете косметичку, не нужно класть в неё эспандер. Для всех продуктов в интернет-магазине требуется хотя бы одно изображение в контексте использования. Так легче определить габариты и вместимость предмета.

6. Живая среда

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

Правда, есть риск сместить внимание с продукта.

Масштабируемые изображения

Во время тестирования Baymard 56% первых действий пользователей в интернет-магазине были связаны с изображением.

При этом на 25% сайтов нет фотографий в широком разрешении или возможности их приблизить. Плохой контент становился причиной отказа от покупки.

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

HOYZ масштабирует изображения при переключении из портретного режима в альбомный

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

Цветовые свотчи

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

Wayfair пишет, сколько расцветок товара доступно, но этого мало

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

Сопутствующие проблемы:

1. Мелкие и близко расположенные кнопки

Попробуй попади «Парфюм-Лидер»

Минимальная зона нажатия свотчей на «мобилке» должна быть не менее 7мм x 7мм, а минимальное расстояние между элементами — 2мм.

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

2. Отображение не всех вариантов

У первого товара в списке 11 вариантов расцветок, но в свотчах отображено только 3

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

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

Многоточия — не самые удачные индикаторы карусели. Пользователю неясно, что за ними кроется

3. Не видно изменений

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

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

Галерея

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

Puma не показывает индикаторы или миниатюры, заводя пользователя в тупик

Только 24% мобильных сайтов используют миниатюры, чтобы показать изображения. Классическая карусель с индикаторами, например, точками или полосами — более распространённая история. Это способ сохранить ценную площадь экрана для контента.

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

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

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

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

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

По-прежнему не забывайте сообщать, что помимо видимых миниатюр в галерее есть дополнительные. Используйте визуальные подсказки: индикаторы в виде стрелок или усечение/«затухание» половины последнего изображения.

Выводы

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

  • контент в десктопной и мобильной версиях сайта должен быть одинаковым. Функции — на ваше усмотрение;
  • в карточке товара делайте фокус на изображении — это самое важное для мобильных пользователей;
  • не скупитесь на качество контента — позвольте покупателям приближать фотографии. Позаботьтесь о пропорциональном масштабировании;
  • не отображайте количество расцветок товара текстом — используйте интерактивные свотчи. Помните: размеры элементов должны быть не меньше 7мм х 7мм, а расстояние между ними — не меньше 2 мм. Если свотчей много — подключайте карусель.
  • показывайте миниатюры изображений в галерее, всё лучше индикаторов.

Следующая статья про «мобилку» — последняя. Расскажем, зачем отвечать на отзывы, почему подсайты в карточке товара — зло, дадим лайфхаки про доставку. Подписывайтесь на Mojo, чтобы не пропустить.

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

0
15 комментариев
Написать комментарий...
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Antro
Автор

Хотите, скинем селфи в личку? :)
На самом деле, мы сейчас занимаемся редизайном сайта. Там будет больше и о проектах, и о команде. Спасибо за обратную связь 💙

Ответить
Развернуть ветку
Вася Пражкин

Ну какие селфи в личку в 2020-м? Дайте просто ссылку на онлифанс да и все.

Ответить
Развернуть ветку
Antro
Автор

А что это такое? 🤔

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Antro
Автор

Мы полностью согласны и работаем над этим 🙂

Ответить
Развернуть ветку
aagrrrrrr

Зачем? Никогда не понимал этих прекрасных лиц на сайтах про технический сервис. Чем это поможет в выборе исполнителя?

Ответить
Развернуть ветку
Вася Пражкин

Когда что-то у Вас перестанет работать, Вы сможете распечатать фото виновных, повесить на стену и кидать туда дротики. Это немного скрасит Ваше ожидание, пока Mojo чинит сайт.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Antro
Автор

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Darya

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

Ответить
Развернуть ветку
Кирилл Вихарев

7мм, а минимальное расстояние между элементами — 2мм

А можно в пикселях? Или в em?

Ответить
Развернуть ветку
Antro
Автор

В пикселях размер свотча не меньше 32х32, расстояние —  не меньше 14 px.

Ответить
Развернуть ветку
12 комментариев
Раскрывать всегда