Подписывайтесь на мой новый канал: рассказываю об интересных фичах из мира e-commerce каждый день

ФОТО НА СТРАНИЦЕ ТОВАРА

ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
136
ГАЙДЛАЙНОВ
В этой статье мы разберем UX/UI фотографий на странице товара в интернет-магазине: внешний вид, типы контента, расположение, функциональность и интересные нестандартные кейсы. Как всегда, детально (чек-лист на 130+ пунктов) и с примерами.

Как и в предыдущих статьях, помимо позитивных референсов, здесь будет и много негативных примеров – учимся на чужих ошибках, чтобы не допускать их у себя. Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
Партнер Experience.Partners
Автор сайта HardClient.com
СТРУКТУРА СТАТЬИ
Для удобства разобьем весь чек-лист на этапы взаимодействия клиента с блоком фото товара. Внутри каждого из этапов все моменты будут структурированы по смысловым блокам. Итак, как клиент, я захожу на страницу товара и...
29 детальных чек-листов по e-commerce доступны в моем Telegram.

1. ЗАМЕЧАЮ ФОТО ТОВАРА

ОСНОВНОЕ ИЗОБРАЖЕНИЕ

Добавлено на страницу

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

Привычно расположено

Расположите изображение товара там, где клиент ожидает его увидеть – в левой верхней части страницы.
hardclient
hardclient

Достаточно большое

Не делайте фото товара мелким. Сделайте так, чтобы клиент легко мог ознакомиться с ним без необходимости открытия галереи.
hardclient

Не выделяется чрезмерно

Везде важно знать меру. Фото товара на странице лучше дополнительно не выделять – рамками, цветом и т.д. Оно и так привлекает к себе внимание.

Вписывается в контейнер

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

Соответствует фото в листинге

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

Соответствует реальности

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

Первое фото репрезентативно

Фото по умолчанию должно быть максимально репрезентативно: его увидят 100% клиентов, зашедших на страницу, в то время как пролистывать фото будут не все.
hardclient

Без текста о несоответствии

Если рядом с фото есть текст о том, что оно может не соответствовать реальности, это может лишь отпугнуть и вселить ощущение, что клиент покупает кота в мешке.
hardclient

Загружено в хорошем качестве

Базовый момент, но не все с этим справляются. Фото товара не должны пикселить и размываться. Не только в стандартном состоянии, но и при увеличении.
hardclient

Не обрезается

Если на фото есть какие-либо контентные элементы, они должны вписываться в контейнер полностью и не должны обрезаться.
hardclient

Контент центрирован

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

Без водяных знаков

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

Пояснения

При этом фото может сопровождаться краткими пояснениями по особенностям товара – либо как часть фото, либо в виде контекстной подсказки, либо рядом с фото.
hardclient
hardclient

Мобильная оптимизация

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

Несколько фото в слайдере

Если фото товаров вертикальные, их в слайдере можно отображать по два. Смотреться это может достаточно органично, а информативность при этом выше.
hardclient

Фотоколлаж

Если фото – ключевой элемент, влияющий на восприятие товара, их можно не прятать в слайдер, а расположить в виде коллажа, упрощая клиенту ознакомление с контентом.
hardclient

Поиск похожих товаров по фото

Некоторые предлагают найти товары, схожие по фото с просматриваемым, тем самым повышая шансы на то, что клиент найдет то, что ему нужно, и останется доволен.
hardclient

Live презентация

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

Просмотр в AR

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

КОНТЕНТ БЛОКА

Достаточное количество

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

Сам товар

В качестве одной из фотографий разместите товар без каких-либо дополнительных объектов, чтобы клиент понимал, что он покупает.
hardclient

Контекст использования

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

Ключевые особенности

Добавьте фото особенностей товара, чтобы заострить на них внимание клиента. Главное убедитесь в том, что клиенты понимают, что именно вы подсвечиваете.
hardclient

Крупный план

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

Товар с комплектующими

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

Отображение размеров

Для некоторых товаров (например, для мебели) на фото также можно добавить размеры, чтобы сделать его более информативным.
hardclient

Без характеристик

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

Товар в упаковке

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

Только выбранный вариант

Если есть несколько вариантов товара и выбран конкретный вариант, не показывайте клиенту фото других вариантов, чтобы не вводить его в заблуждение.
hardclient

Только релевантный контент

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

Фото от клиентов

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

Видео-обзоры

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

Обзор 360

Некоторые участники рынка также снабжают страницы товаров обзорами 360, которые позволяют детально их разглядеть. Особенно применимо к техническим продуктам.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

МИНИАТЮРЫ

Отображаются

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

В направлении прокрутки

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

Не наезжают на фото

По возможности отображайте миниатюры или навигационные элементы не на фото так, чтобы они не перекрывали собой контент.
hardclient

Достаточного размера

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

Выстроены в один ряд

Даже если фото много, старайтесь придерживаться знакомых клиенту паттернов интерфейса и выстраивайте миниатюры единым списком в 1 ряд.
hardclient

Активный элемент хорошо выделен

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

Реагируют на наведение курсора

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

Не реагируют выцветанием

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

Прокрутка с помощью тачпада

Поддержка прокрутки миниатюр с помощью тачпада при наведенном курсоре может сделать навигацию более удобной.

Скролл страницы vs. миниатюр

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

Миниатюры грузятся сразу

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

Список не закольцован

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

Page control / progress bar

В некоторых случаях также могут использоваться элементы page control или progress bar. Главное, чтобы они гармонично вписывались и не выбивались из интерфейса.

ВИДЕО ОБЗОР

Выделен среди миниатюр

Так как видео – другой тип контента, да и обзоры есть далеко не по всем товарам, имеет смысл дополнительно выделить его, чтобы привлечь внимание клиента.
hardclient

Иконка понятна

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

Авто-запуск

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

Вписывается в область экрана

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

Не в отдельной галерее

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

Видео доступно

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

ОБЗОР 360

Выделен среди миниатюр

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

Рядом с основным фото

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

Иконка понятна

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

Быстро загружается

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

Возможность авто-прокрутки

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

Скорость авто-прокрутки

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

Возможность ручной прокрутки

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