M-commerce: листинг товаров, оформление карточки товара в мобильной версии сайта

KISLOROD продолжает цикл материалов о мобильных интерфейсах интернет-магазина:

Сегодня обсудим листинг товаров в категории и карточку товара в мобильной версии сайта.

Мы подробно писали о реализации листинга товаров и превью на десктопе. Главные отличия мобильных устройств — ограниченный размер экрана и отсутствие возможности навести курсор на элемент. Это усложняет работу с превью и каталогом товаров в мобильной версии сайта. Рассмотрим, как упростить пользователям жизнь.

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

Например, на сайте ormatek.com часть информации (описание, характеристики) не выводится в превью в мобильной версии. На скриншоте ниже слева — превью товара в мобильной версии, справа — превью в десктопной версии сайта.

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

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

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

1) Видимый вывод — контент или функционал вложен в подразделы или дочерние страницы. Доступ к содержимому осуществляется через видимые элементы навигации — кнопки или ссылки.

2) Скрытый вывод — контент и функционал предоставляются только тогда, когда пользователь использует определенные мобильные жесты.

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

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

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

На сайте citilink.ru для просмотренных товаров используется другой цвет текста:

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

Испытуемые не понимали, куда тапать — на весь элемент, название, картинку? Некоторые настолько терялись, что отказывались от просмотра карточки товара в мобильной версии. В одном из экспериментов только 20% испытуемых поняли, куда нажать.

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

Например, на сайте ostin.com все превью — одна ссылка:

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

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

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

Три проблемы реализации и их решения:

1) Маленькие и близко расположенные варианты товара

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

2) Вывод не всех торговых предложений

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

3) Неявное изменение

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

Мы подробно писали о том, что должна включать карточка товара на десктопе. Эти рекомендации актуальны и для мобильных устройств. Не будем повторяться, сконцентрируемся на главных аспектах реализации карточки товара в мобильной версии. Они связаны с правильным представлением контента, особенно изображений — ключевого элемента карточки для мобильных пользователей. По данным Baymard Institute, 56% пользователей, попадая на карточку товара, первым делом рассматривали изображения.

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

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

Для полноты информации, 26% сайтов в исследовании Baymard Institute в карточке товара ссылались на сторонние страницы, на которых размещалась более развёрнутая информация по теме.

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

1) Заинтересованные пользователи не находили контент, не замечая ссылку

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

2) Возврат к основной странице приводил к потере ориентации на сайте

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

Если в карточке товара много информации, можно использовать аккордеоны:

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

При этом важно правильно реализовать решение:

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

Листать изображения товаров удобнее привычными жестами — реализуйте это через свайп.

Кроме традиционного изображения товара на белом фоне можно:

1) Использовать UGC-контент (фотографии и видео пользователей) — это даст широкое представление о продукте и выступит как социальное доказательство. Правда, придется стимулировать пользователей бонусами добавлять контент, а также модерировать его силами проекта.

2) Помочь оценить размер товара, показывая его вместе с предметами известного размера. Маленькие товары можно показывать в руке, сумку — с содержимым, вещи — на моделях.

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

4) Подключать эмоции, демонстрируя товар с людьми и животными.

5) Помочь определить совместимость продуктов, показав крупным планом элементы совместимости (кабели, разъемы, компоненты).

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

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

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

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

Во время тестирования Baymard Institute, пользователи постоянно переворачивали телефон горизонтально, чтобы рассмотреть изображения лучше. Но 52% сайтов не увеличивали изображения пропорционально, что не соответствовало ожиданиям испытуемых.

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

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

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

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

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

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

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

Этой статьей мы завершаем цикл статей об m-commerce. Но впереди еще много интересного, поэтому подписывайтесь на этот блог и наш телеграм-канал, чтобы не пропускать контент.

Если есть вопросы — смело задавайте в комментариях. И не забудьте поставить лайк (+1), если понравился материал.