Прежде чем перейти к статье, хочу вам представить, экономическую онлайн игру Brave Knights, в которой вы можете играть и зарабатывать. Регистируйтесь, играйте и зарабатывайте!
Привет, меня зовут Станислав Хрусталёв, я автор блога hardclient.com. Работаю в управлении клиентским опытом с 2009 года. Пишу на эту тему, собираю лучшие практики из мира Customer Experience, оцениваю сервисные модели компаний.
В этой статье мы разберем UX/UI фотографий на странице товара в интернет-магазине: внешний вид, типы контента, расположение, функциональность и интересные нестандартные кейсы. Как всегда, детально (чек-лист на 130+ пунктов) и с примерами.
Как и в предыдущих статьях, помимо позитивных референсов, здесь будет и много негативных примеров – учимся на чужих ошибках, чтобы не допускать их у себя. Есть идеи по дополнениям – обязательно пишите, буду рад обсудить. За выходом новых статей можно следить здесь и в Telegram.
Структура статьи
Для удобства разобьем весь чек-лист на этапы взаимодействия клиента с блоком фото товара. Внутри каждого из этапов все моменты будут структурированы по смысловым блокам. Итак, как клиент, я захожу на страницу товара и...
Замечаю фото товара
Переключаю фото в слайдере
Навожу курсор на фото
Открываю галерею
Приближаю фото в галерее
Переключаюсь между фото в галерее
Закрываю галерею
1. Замечаю фото товара
Основное изображение
Добавлено на страницу
Отсутствие изображения по товару может быть воспринято, как его отсутствие на складе. Это может значительно снизить вероятность совершения покупки.
Привычно расположено
Расположите изображение товара там, где клиент ожидает его увидеть – в левой верхней части страницы.
Достаточно большое
Не делайте фото товара мелким. Сделайте так, чтобы клиент легко мог ознакомиться с ним без необходимости открытия галереи.
Не выделяется чрезмерно
Везде важно знать меру. Фото товара на странице лучше дополнительно не выделять – рамками, цветом и т.д. Оно и так привлекает к себе внимание.
Вписывается в контейнер
Базовый момент, но встречается и у крупных игроков. Фото и миниатюры должны занимать 100% контейнера, чтобы не появлялась лишняя прокрутка.
Интересные статьи
Интересные статьи
