I am ready for a long road flight for work with a week- or months-long projects.
Проектируем фото в карточке товара
Лучшие практики UX/UI в мобильном e-commerce
140
гайдлайнов
Кто из нас будет покупать товары, не ознакомившись с фото? Думаю, таких меньшинство. Поэтому опыту взаимодействия с фото в карточках товаров в e-commerce приложениях стоит уделять особое внимание.
Сегодня мы в деталях разберем все, что связано с этой темой: как лучшие практики, так и ошибки, которые лучше не допускать. В этой статье – 140 гайдлайнов на базе ~150 просмотренных приложений.
Прокачивайте свою насмотренность, делитесь этим материалом с коллегами и не забудьте подписаться на мой канал в Telegram, чтобы быть в курсе выхода новых статей.
Сегодня мы в деталях разберем все, что связано с этой темой: как лучшие практики, так и ошибки, которые лучше не допускать. В этой статье – 140 гайдлайнов на базе ~150 просмотренных приложений.
Прокачивайте свою насмотренность, делитесь этим материалом с коллегами и не забудьте подписаться на мой канал в Telegram, чтобы быть в курсе выхода новых статей.
Структура статьи
Чтобы облегчить восприятие, статью я разбил на смысловые блоки в соответствии с этапами клиентского пути и функциональными элементами:
1. Открытие карточки товара
Скорость загрузки фото
При открытии карточки товара его фото должно отображаться без каких-либо задержек. Базовый момент, но антипримеры встречаются.
Sela
Анимация появления фото
Иногда фото играет важную роль в анимации появления карточки. В примере фото товара из листинга не пропадает, а расширяется и сдвигается, становясь частью карточки.
Lamoda
Placeholder – размытое фото
Если загрузки фото приходится ждать, в это время можно отображать размытое фото товара с анимацией загрузки. Нестандартное и интересное решение.
Rendez Vous
Placeholder – не отсутствие фото
Если клиенту все же приходится ждать загрузки фото, placeholder, который он видит в этот момент, не должен вводить в заблуждение, что фото по товару нет.
Лента Онлайн
Позиция слайдера при открытии
Если в карточках листинга предусмотрен скролл слайдера, слайдер в полноценной карточке товара при ее открытии должен устанавливаться на ту же позицию.
Циан
Без анимации прокрутки
Воздержитесь от какой-либо прокрутки слайдера при открытии карточки. Такая анимация может лишь дезориентировать пользователя и вызвать ненужные вопросы.
Kazan Express
2. Фото товара
По товару есть фото
Базовый момент: если по товару в карточке нет фотографий, это сильно снижает шансы на его продажу.
Юла
Достаточно для ознакомления
По товару должно быть достаточно фото, чтобы клиент мог в деталях ознакомиться с товаром и сформировать представление о нем.
Маркет Деливери
В хорошем качестве
Фото товара должны быть загружены в хорошем качестве, чтобы не исказить впечатление у клиента. Момент базовый, но антипримеры встречаются.
Линии Любви
Не обрезаются
Убедитесь, что товары на фото видны полностью. Заставлять клиента открывать галерею, чтобы посмотреть полное фото – не лучшая идея.
Лента Онлайн
Фото не пустые
Иногда меня спрашивают: зачем я добавляю пункты с таким заголовком? Но пока такие оплошности будут допускать крупнейшие компании, эти пункты будут в моем списке.
Эльдорадо
100% экрана по ширине
Первый и наиболее часто используемый вариант – это когда фото товара занимает всю полезную площадь экрана по ширине.
Авито
Несколько фото на экране
В кейсах, когда фото товара в вертикальной ориентации, чтобы блок не занимал весь экран, фото уменьшают в размере, и видимыми становятся уже почти 2 фото.
Lamoda
Единый размер фото
Для лучшего пользовательского опыта позаботьтесь о том, чтобы фото товаров были выполнены в едином размере. От такого исполнения лучше воздержаться:
Ozon
Выравнивание размера
Если вы не можете контролировать размер размещаемых фото и стилистика позволяет, их можно дополнять до единого размера за счет визуальных эффектов.
Циан
Дополнительный контент на фото
Часто на фото можно встретить не только товар, но еще и пояснения. Что думаете по этому поводу? Полезно или визуальный шум? Напишите в комментах.
Перекрёсток Впрок
Фото vs. реклама
Что может выступить в качестве визуального шума – так это наложение поверх фото рекламы, которая начинает отвлекать от самого товара.
Ozon
Элементы управления поверх фото
Часто можно встретить кейсы, когда поверх фото размещают различные кнопки. В принципе, это нормально, если они не перегружают интерфейс.
Wildberries
Смена при выборе варианта
Если по товару есть несколько визуально различающихся вариантов, при выборе варианта фото товара должно соответственно обновляться.
Додо Пицца
Параллакс при скролле карточки
При прокрутке карточки товара в слайдер можно добавить эффект параллакса: смотреться будет симпатично.
Sunlight
Фиксация при скролле карточки
Также встречаются кейсы, когда при прокрутке карточки товара фото фиксируется и остальной контент как бы перекрывает его.
O'STIN
3. Видео товара
Добавлены в карточку
С помощью видео можно лучше погрузить клиента в детали продукта и сформировать лучшее восприятие. Поэтому видеоконтент в карточках товаров встречается все чаще.
Rendez Vous
Как элемент слайдера
Часто видео можно встретить просто как элемент слайдера в карточке товара, наравне с фотографиями.
Sokolov
Как отдельный элемент
Однако кнопку просмотра видео также можно вынести в качестве отдельного элемента интерфейса, чтобы повысить заметность и шансы на его просмотр.
Все Инструменты
В контуре приложения
По возможности реализуйте воспроизведение видео, как составную часть карточки товара или галереи. Не переводите клиента в другие приложения или браузер.
Все Инструменты
Автовоспроизведение
Первый подход – автоматически начинать воспроизводить видео о товаре при его появлении на экране.
O'STIN
Воспроизведение по желанию
Клиенту также можно самому дать решить: хочет он просмотреть видео или нет. Но стоит учесть, что это предполагает дополнительное действие на его стороне.
Sokolov
Один тап до воспроизведения
Если видео воспроизводится по желанию, клиент должен быть в 1 касании от его запуска. В примере, чтобы просмотреть видео, необходимо сделать минимум 3 тапа.
Все Инструменты
Качество видео
Создавая видео о товаре по возможности подойдите к вопросу с умом и сделайте качественное, завлекающее видео.
По умолчанию без звука
Если в видео есть звук, учтите, что клиент может смотреть его в совершенно разных условиях. Поэтому по умолчанию его лучше отключить.
Wildberries
Субтитры
Исходя из предыдущего пункта, убедитесь, что видео будет понятно и без звука. Любые пояснения можно вынести в качестве субтитров.
Leroy Merlin
Пауза/продолжение при тапе
При тапе по воспроизводимому видео его можно останавливать, а при повторном тапе – продолжать показ.
Love Republic
Область для тапа
При этом активная область для нажатия может не ограничиваться лишь кнопкой play и охватывать всю площадь видео.
Самокат
Остановка зажатием
Также для остановки видео иногда используется механика зажатия (long press), схожая с той, что часто реализуется в сторис.
Sunlight
4. Прокрутка слайдера
Побуждение к прокрутке
Встречаются кейсы, когда клиента с помощью анимации обучают, что у слайдера есть скролл. Главное, чтобы это было ненавязчиво и лишь до первой его прокрутки клиентом.
ВкусВилл
Highlight смежных фото
В некоторых случаях слайдер проектируется таким образом, чтобы края смежных фото были видны – тем самым подсвечивая возможность прокрутки.
Циан
Длина свайпа
Длину жеста смахивания, требуемого для прокрутки можно сделать небольшой, чтобы слайдер прокручивался даже при легком свайпе.
Золотое Яблоко
Cell snapping
Хорошей практикой будет как бы привязывать фото к области видимого экрана, чтобы при свайпе слайдер прокручивался до полного отображения следующего фото.
Wildberries
Свайп для смены карточек?
Встречаются нестандартные кейсы, когда свайп в стороны отвечает за переход к карточке следующего товара. Как вам такое? Напишите в комментах.
O'STIN
Без прокрутки, если фото одно
Если в вашей карточке всего лишь одно фото, возможность скролла можно блокировать в принципе. Зачем она, если нечего прокручивать?
Лента
Highlight контента
Некоторые при прокрутке фото подсвечивают факты и отзывы, призванные повысить конверсию. Но есть риск, что они могут быть восприняты, как отвлекающий фактор.
FlowWow
Вертикальная прокрутка
В этом случае смену фото в слайдере по текущему товару можно реализовать через вертикальный свайп. Но, опять же, это нестандартная механика.
Love Republic
Выход за рамки коллекции
При попытке выхода за рамки слайдера можно не блокировать действие, а дать клиенту протянуть скролл, но затем плавно вернуть его к крайнему слайду.
Leroy Merlin
В конце – призыв к действию
Если контекст позволяет, при полной прокрутке слайдера в качестве последнего слайда можно разместить блок с призывом и кнопками действий.
Циан
В конце – схожие товары
Также можно встретить кейсы, когда при полной прокрутке слайдера с фото товара клиенту предлагают ознакомиться с похожими моделями.
O'STIN
Закольцованный слайдер
Закольцованный слайдер помогает клиенту быстро вернуться в начало с последней позиции. Главное – дать ему понять, что фото начали прокручиваться заново.
Wildberries
5. Page Control и альтернативы
Добавлен в карточку товара
Дополнив слайдер с фото товара элементом page control, вы как бы подскажете, что слайдер можно прокрутить.