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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Есть нюансы:

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

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

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

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

3. Life Style

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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