I am ready for a long road flight for work with a week- or months-long projects.
ФОТО НА СТРАНИЦЕ ТОВАРА
ЛУЧШИЕ ПРАКТИКИ UX/UI В E-COMMERCE
136
ГАЙДЛАЙНОВ
В этой статье мы разберем UX/UI фотографий на странице товара в интернет-магазине: внешний вид, типы контента, расположение, функциональность и интересные нестандартные кейсы. Как всегда, детально (чек-лист на 130+ пунктов) и с примерами.
Как и в предыдущих статьях, помимо позитивных референсов, здесь будет и много негативных примеров – учимся на чужих ошибках, чтобы не допускать их у себя. Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
Как и в предыдущих статьях, помимо позитивных референсов, здесь будет и много негативных примеров – учимся на чужих ошибках, чтобы не допускать их у себя. Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. Подписывайтесь на выход новых статей в Telegram и делитесь этим постом с друзьями и коллегами.
СТРУКТУРА СТАТЬИ
Для удобства разобьем весь чек-лист на этапы взаимодействия клиента с блоком фото товара. Внутри каждого из этапов все моменты будут структурированы по смысловым блокам. Итак, как клиент, я захожу на страницу товара и...
29 детальных чек-листов по e-commerce доступны в моем Telegram.
1. ЗАМЕЧАЮ ФОТО ТОВАРА
ОСНОВНОЕ ИЗОБРАЖЕНИЕ
Добавлено на страницу
Отсутствие изображения по товару может быть воспринято, как его отсутствие на складе. Это может значительно снизить вероятность совершения покупки.
Привычно расположено
Расположите изображение товара там, где клиент ожидает его увидеть – в левой верхней части страницы.
Достаточно большое
Не делайте фото товара мелким. Сделайте так, чтобы клиент легко мог ознакомиться с ним без необходимости открытия галереи.
Не выделяется чрезмерно
Везде важно знать меру. Фото товара на странице лучше дополнительно не выделять – рамками, цветом и т.д. Оно и так привлекает к себе внимание.
Вписывается в контейнер
Базовый момент, но встречается и у крупных игроков. Фото и миниатюры должны занимать 100% контейнера, чтобы не появлялась лишняя прокрутка.
Соответствует фото в листинге
Чтобы не создавать когнитивную нагрузку, сделайте так, чтобы фото, отображаемое на странице по умолчанию, соответствовало фото в карточке товара в листинге.
Соответствует реальности
Мало что может быть хуже, чем сначала сформировать у клиента ожидания от продукта, а затем доставить товар, отличающийся по внешнему виду.
Первое фото репрезентативно
Фото по умолчанию должно быть максимально репрезентативно: его увидят 100% клиентов, зашедших на страницу, в то время как пролистывать фото будут не все.
Без текста о несоответствии
Если рядом с фото есть текст о том, что оно может не соответствовать реальности, это может лишь отпугнуть и вселить ощущение, что клиент покупает кота в мешке.
Загружено в хорошем качестве
Базовый момент, но не все с этим справляются. Фото товара не должны пикселить и размываться. Не только в стандартном состоянии, но и при увеличении.
Не обрезается
Если на фото есть какие-либо контентные элементы, они должны вписываться в контейнер полностью и не должны обрезаться.
Контент центрирован
Размещайте ключевой контент в центре фото, чтобы облегчить фокусировку внимания клиента и не создавать необоснованных пустых областей.
Без водяных знаков
Избавьте фото товаров от водяных знаков либо делайте их менее заметными: если знаки перекрывают контент, это лишь ухудшает его восприятие.
Пояснения
При этом фото может сопровождаться краткими пояснениями по особенностям товара – либо как часть фото, либо в виде контекстной подсказки, либо рядом с фото.
Мобильная оптимизация
Если на фото есть текст, убедитесь, что его легко прочитать в мобильной версии сайта. Например, можно загружать специальные версии фото с текстом большого размера.
Несколько фото в слайдере
Если фото товаров вертикальные, их в слайдере можно отображать по два. Смотреться это может достаточно органично, а информативность при этом выше.
Фотоколлаж
Если фото – ключевой элемент, влияющий на восприятие товара, их можно не прятать в слайдер, а расположить в виде коллажа, упрощая клиенту ознакомление с контентом.
Поиск похожих товаров по фото
Некоторые предлагают найти товары, схожие по фото с просматриваемым, тем самым повышая шансы на то, что клиент найдет то, что ему нужно, и останется доволен.
Live презентация
Некоторые предлагают показать товар в моменте и ответить на вопросы через видео-чат. Идея интересная, но главное, чтобы все действительно работало, как ожидается.
Просмотр в AR
В случае с некоторыми товарами (например, мебель или одежда) просмотр в дополненной реальности позволяет лучше погрузить в детали предложения.
КОНТЕНТ БЛОКА
Достаточное количество
Разместите достаточное количество фото товара, чтобы клиент мог сформировать представление о нем. В противном случае это может снизить вероятность покупки.
Сам товар
В качестве одной из фотографий разместите товар без каких-либо дополнительных объектов, чтобы клиент понимал, что он покупает.
Контекст использования
По некоторым категориям товаров (например, в одежде или товарах для дома) можно добавить фото их использования, чтобы улучшить восприятие товара клиентом.
Ключевые особенности
Добавьте фото особенностей товара, чтобы заострить на них внимание клиента. Главное убедитесь в том, что клиенты понимают, что именно вы подсвечиваете.
Крупный план
По некоторым товарам можно также добавить фото крупным планом, чтобы клиент мог ознакомиться, например, с фактурой ткани на одежде.
Товар с комплектующими
Добавьте в блок фото комплекта поставки, чтобы лучше управлять ожиданиями клиента относительно того, что он получит.
Отображение размеров
Для некоторых товаров (например, для мебели) на фото также можно добавить размеры, чтобы сделать его более информативным.
Без характеристик
По возможности не выносите характеристики в фото товара, особенно если они трудно читаются – для характеристик есть свой раздел.
Товар в упаковке
Если товар доставляется в презентабельной упаковке, разместите соответствующее фото на его странице, чтобы лучше управлять ожиданиями клиента.
Только выбранный вариант
Если есть несколько вариантов товара и выбран конкретный вариант, не показывайте клиенту фото других вариантов, чтобы не вводить его в заблуждение.
Только релевантный контент
Избегайте размещения контента, не подсвечивающего продукт. Какие-либо вторичные элементы можно разместить отдельно, но не в рамках подборки фото.
Фото от клиентов
Фото товара от клиентов позволит повысить доверие к нему, особенно если он еще не широко распространен, и у клиента могут возникнуть сомнения в его качестве.
Видео-обзоры
Чтобы лучше погрузить клиента в детали предложения, помимо фото-контента в блок можно добавлять видео-обзоры или презентации.
Обзор 360
Некоторые участники рынка также снабжают страницы товаров обзорами 360, которые позволяют детально их разглядеть. Особенно применимо к техническим продуктам.
Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram
МИНИАТЮРЫ
Отображаются
Помимо основного, отображайте также миниатюры других фото так, чтобы лучше подсветить, что по товару доступно несколько изображений.
В направлении прокрутки
Разместите миниатюры рядом с фото так, чтобы направление прокрутки совпадало с расположением миниатюр.
Не наезжают на фото
По возможности отображайте миниатюры или навигационные элементы не на фото так, чтобы они не перекрывали собой контент.
Достаточного размера
Сделайте размер миниатюр достаточным для того, чтобы контент на них легко воспринимался.
Выстроены в один ряд
Даже если фото много, старайтесь придерживаться знакомых клиенту паттернов интерфейса и выстраивайте миниатюры единым списком в 1 ряд.
Активный элемент хорошо выделен
В явной форме выделяйте активную миниатюру, чтобы облегчить клиенту навигацию по подборке фото. Например, с помощью рамки или нулевой прозрачности.
Реагируют на наведение курсора
Сделайте миниатюры интерактивными так, чтобы они реагировали на наведение курсора, давая понять, что на них можно нажать.
Не реагируют выцветанием
Избегайте выцветания миниатюры при наведении курсора или ее активации: такая реакция может быть воспринята, как неактивность элемента.
Прокрутка с помощью тачпада
Поддержка прокрутки миниатюр с помощью тачпада при наведенном курсоре может сделать навигацию более удобной.
Скролл страницы vs. миниатюр
Если реализована прокрутка миниатюр с помощью тачпада, во время прокрутки блокируйте скролл самой страницы.
Миниатюры грузятся сразу
Если список миниатюр не вписывается в отведенную область, исключите случаи, когда клиент при ее прокрутке видит пустые миниатюры, которые не успели загрузиться.
Список не закольцован
В отличие от слайдера, список миниатюр не должен быть закольцован, т.к. отражает общее число фото. В противном случае он может ввести клиента в заблуждение.
Page control / progress bar
В некоторых случаях также могут использоваться элементы page control или progress bar. Главное, чтобы они гармонично вписывались и не выбивались из интерфейса.
ВИДЕО ОБЗОР
Выделен среди миниатюр
Так как видео – другой тип контента, да и обзоры есть далеко не по всем товарам, имеет смысл дополнительно выделить его, чтобы привлечь внимание клиента.
Иконка понятна
Снабдите кнопку перехода к обзору иконкой, которая бы легко считывалась и не вызывала дополнительных вопросов у клиента. Например, воспроизведение.
Авто-запуск
Если клиент уже кликнул по кнопке, обозначив свое намерение, сделайте так, чтобы при загрузке видео запускалось автоматически и не требовало доп.действий.
Вписывается в область экрана
Сверстайте экран таким образом, чтобы видео полностью вписывалось в область, отведенную под него, и не появлялись ненужные пустые блоки.
Не в отдельной галерее
Не делите контент на 2 отдельные галереи: позвольте клиенту в рамках одной галереи просматривать как фото, так и видео.
Видео доступно
Базовый момент, но все же встречается. Если вы размещаете видео на сторонних площадках, регулярно контролируйте его доступность.
ОБЗОР 360
Выделен среди миниатюр
Обзоры товара 360 также встречаются нечасто, поэтому лучше выделять их, чтобы привлечь внимание клиента.
Рядом с основным фото
Так как обзор 360 выполняет схожую функцию с фотографиями, разместите их рядом, чтобы упростить процесс ознакомления. Подобное к подобному.
Иконка понятна
Добавьте в кнопку обзора 360 иконку, которая бы явно давала понять, что это такое. На flaticon есть множество хороших примеров по запросу 360.
Быстро загружается
С учетом того, что фактически обзор 360 – это множество фото, оптимизируйте процесс его загрузки, чтобы клиенту не пришлось ждать слишком долго.
Возможность авто-прокрутки
Сделайте возможной авто-прокрутку так, чтобы клиент мог ознакомиться с обзором 360 без совершения каких-либо действий.
Скорость авто-прокрутки
Скорость авто-прокрутки достаточна для того, чтобы клиент успевал ознакомиться с деталями, но при этом не утомлялся в ожидании следующего фото.
Возможность ручной прокрутки
Также реализуйте возможность для клиента самостоятельно ознакомиться с обзором и прокрутить его в нужные стороны с желаемой скоростью.