hardclient scroll to top
hardclient telegram

Проектируем фото в карточке товара

Лучшие практики UX/UI в мобильном e-commerce
140
гайдлайнов
Кто из нас будет покупать товары, не ознакомившись с фото? Думаю, таких меньшинство. Поэтому опыту взаимодействия с фото в карточках товаров в e-commerce приложениях стоит уделять особое внимание.

Сегодня мы в деталях разберем все, что связано с этой темой: как лучшие практики, так и ошибки, которые лучше не допускать. В этой статье – 140 гайдлайнов на базе ~150 просмотренных приложений.

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

Автор hardclient.com
Структура статьи
Чтобы облегчить восприятие, статью я разбил на смысловые блоки в соответствии с этапами клиентского пути и функциональными элементами:

Открытие карточки товара

6 гайдлайнов

Скорость загрузки фото

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

Антипример Sela
hardclient

Анимация появления фото

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

Пример Lamoda
hardclient

Placeholder – размытое фото

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

Пример Rendez-Vous
hardclient

Placeholder – не отсутствие фото

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

Антипример Лента Онлайн
hardclient

Позиция слайдера при открытии

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

Антипример Циан
hardclient

Без анимации прокрутки

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

Антипример Kazan Express
hardclient

Фото товара

15 гайдлайнов

По товару есть фото

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

Антипример Юла
hardclient

Достаточно для ознакомления

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

Антипример Маркет Деливери
hardclient

В хорошем качестве

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

Антипример Линии Любви
hardclient

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

Убедитесь, что товары на фото видны полностью. Заставлять клиента открывать галерею, чтобы посмотреть полное фото – не лучшая идея.

Антипример Лента Онлайн
hardclient

Фото не пустые

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

Антипример Эльдорадо
hardclient

100% экрана по ширине

Первый и наиболее часто используемый вариант – это когда фото товара занимает всю полезную площадь экрана по ширине.

Пример Авито
hardclient

Несколько фото на экране

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

Пример Lamoda
hardclient

Единый размер фото

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

Антипример Ozon
hardclient

Выравнивание размера

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

Пример Циан
hardclient

Дополнительный контент на фото

Часто на фото можно встретить не только товар, но еще и пояснения. Что думаете по этому поводу? Полезно или визуальный шум? Напишите в комментах.

Пример Впрок
hardclient

Фото vs. реклама

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

Антипример Ozon
hardclient

Элементы управления поверх фото

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

Пример Wildberries
hardclient

Смена при выборе варианта

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

Пример Додо Пицца
hardclient

Параллакс при скролле карточки

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

Пример Sunlight
hardclient

Фиксация при скролле карточки

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

Пример O'STIN
hardclient

Видео товара

13 гайдлайнов

Добавлены в карточку

С помощью видео можно лучше погрузить клиента в детали продукта и сформировать лучшее восприятие. Поэтому видеоконтент в карточках товаров встречается все чаще.

Пример Rendez-Vous
hardclient

Как элемент слайдера

Часто видео можно встретить просто как элемент слайдера в карточке товара, наравне с фотографиями.

Пример Sokolov
hardclient

Как отдельный элемент

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

Пример Все Инструменты
hardclient

В контуре приложения

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

Антипример Все Инструменты
hardclient

Автовоспроизведение

Первый подход – автоматически начинать воспроизводить видео о товаре при его появлении на экране.

Пример O'STIN
hardclient

Воспроизведение по желанию

Клиенту также можно самому дать решить: хочет он просмотреть видео или нет. Но стоит учесть, что это предполагает дополнительное действие на его стороне.

Пример Sokolov
hardclient

Один тап до воспроизведения

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

Антипример Все Инструменты
hardclient

Качество видео

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

Пример Х
hardclient

По умолчанию без звука

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

Антипример Wildberries
hardclient

Субтитры

Исходя из предыдущего пункта, убедитесь, что видео будет понятно и без звука. Любые пояснения можно вынести в качестве субтитров.

Пример Leroy Merlin
hardclient

Пауза/продолжение при тапе

При тапе по воспроизводимому видео его можно останавливать, а при повторном тапе – продолжать показ.

Пример Love Republic
hardclient

Область для тапа

При этом активная область для нажатия может не ограничиваться лишь кнопкой play и охватывать всю площадь видео.

Пример Самокат
hardclient

Остановка зажатием

Также для остановки видео иногда используется механика зажатия (long press), схожая с той, что часто реализуется в сторис.

Пример Sunlight
hardclient

Прокрутка слайдера

13 гайдлайнов

Побуждение к прокрутке

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

Пример ВкусВилл
hardclient

Highlight смежных фото

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

Пример Циан
hardclient

Длина свайпа

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

Пример Золотое Яблоко
hardclient

Cell snapping

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

Антипример Wildberries
hardclient

Свайп для смены карточек?

Встречаются нестандартные кейсы, когда свайп в стороны отвечает за переход к карточке следующего товара. Как вам такое? Напишите в комментах.

Пример O'STIN
hardclient

Без прокрутки, если фото одно

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

Антипример Лента
hardclient

Highlight контента

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

Пример FlowWow
hardclient

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

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

Пример Love Republic
hardclient

Выход за рамки коллекции

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

Пример Leroy Merlin
hardclient

В конце – призыв к действию

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

Пример Циан
hardclient

В конце – схожие товары

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

Пример O'STIN
hardclient

В конце – UGC

Интересная идея – в конце подборки фото сделать плавный переход от контента компании к пользовательскому контенту из отзывов о товаре.

Пример Ozon
hardclient

Закольцованный слайдер

Закольцованный слайдер помогает клиенту быстро вернуться в начало с последней позиции. Главное – дать ему понять, что фото начали прокручиваться заново.

Пример Wildberries
hardclient

Page control и альтернативы

14 гайдлайнов

Добавлен в карточку товара

Дополнив слайдер с фото товара элементом page control, вы как бы подскажете, что слайдер можно прокрутить.

Антипример Wildberries
hardclient

Выведен за рамки фото

Лучше если page control будет выведен за рамки фото. Это позволит избежать риска, что он будет плохо заметен на пестром или неконтрастном фоне.

Антипример METRO
hardclient

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

Вне зависимости от того, каким смахиванием – в стороны или вертикальным – будет реализована смена слайдов, расположите page control по направлению свайпа.

Пример O'STIN
hardclient

Точки хорошо заметны

При этом, разместив page control за рамками фото, сделайте цвет самих кнопок достаточно контрастным по отношению к фону, чтобы они были лучше заметны.

Антипример ВкусВилл
hardclient

Текущая точка выделяется

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

Пример Sunlight
hardclient

Highlight типов контента

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

Пример Rendez-Vous
hardclient

Отображаемое число точек

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

Пример Золотое Яблоко
hardclient

Уменьшение точек по краям

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

Пример Спортмастер
hardclient

Синхронное обновление

При переключении слайдера смена активной точки в page control должна происходить синхронно, без каких-либо задержек.

Пример Rendez-Vous
hardclient

Анимация обновления

Изменение состояния page control можно производить с помощью анимации. Это позволит сделать реакцию интерфейса на действия клиента чуть более плавной.

Пример Яндекс.Маркет
hardclient

Автоскролл в page control

Клиента также можно не утруждать прокручивать фото товара самому: встречаются кейсы, когда page control выполняет и роль индикатора автопрокрутки.

Пример Рив Гош
hardclient

Альтернатива: нумерация

В качестве альтернативы page control также может выступать обычный счетчик текущего слайда и общего числа фото. Иногда это даже более информативно.

Пример Циан
hardclient

Альтернатива: scrollbar

Также можно встретить и scrollbar. Он подходит в тех случаях, когда на экране видно более одного фото, и текущий слайд определить сложно.

Пример Lamoda
hardclient

Альтернатива: миниатюры

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

Пример Л'Этуаль
hardclient

Появление галереи

10гайдлайнов

При тапе по фото

Наиболее часто встречающаяся механика – привязка появления галереи к событию тапа по фото товара в карточке.

Пример МегаМаркет
hardclient

Реакция на касание

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

Пример Циан
hardclient

Анимация движения

Часто появление галереи реализовано с помощью анимации выезжающей из нижней части экрана карточки.

Пример Ozon
hardclient

Анимация проявления

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

Пример ВкусВилл
hardclient

Анимация увеличения

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

Пример Lamoda
hardclient

Синхронная анимация

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

Пример Ozon
hardclient

Скорость анимации

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

Пример Love Republic
hardclient

Фото при появлении галереи

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

Пример М.Видео
hardclient

Без анимации прокрутки

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

Антипример METRO
hardclient

Ранняя загрузка фото

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

Антипример Лента Онлайн
hardclient

Формат галереи

3 варианта

Горизонтальный слайдер

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

Пример СпортМастер
hardclient

Вертикальная галерея

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

Пример Золотое Яблоко
hardclient

Коллаж

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

Пример FlowWow
hardclient

Прокрутка галереи

15 гайдлайнов

С помощью свайпа

Базовый момент: первый метод прокрутки галереи – с помощью смахивания фото влево и вправо.

Пример Auto.ru
hardclient

При тапе по миниатюрам

Если вы используете миниатюры, при нажатии на миниатюру должна происходить прокрутка к соответствующему фото.

Пример Детский Мир
hardclient

С помощью кнопок прокрутки?

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

Пример Снежная Королева
hardclient

Cell snapping

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

Пример Wildberries
hardclient

Угол жеста меньше 45°

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

Пример Ozon
hardclient

Угол жеста больше 45°

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

Пример Ozon
hardclient

Анимация при свайпе

Свайп предполагает смахивание чего-либо. Поэтому фото при свайпе лучше именно смахнуть и не заменять иной анимацией. В примере при свайпе происходит выцветание:

Антипример Комус
hardclient

Фоновая загрузка фото

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

Антипример ВкусВилл
hardclient

Тайминг смены миниатюры

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

Антипример Ozon
hardclient

Прокрутка при зуме

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

Антипример Aswear
hardclient

Возврат к 100% зуму

Если клиент приблизил фото, перелистнул слайдер к следующему фото и вернулся назад, первое фото лучше возвращать в изначальное состояние – к 100% зуму.

Антипример Sunlight
hardclient

Скролл галереи vs. слайдера

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

Антипример Lichi
hardclient

Закольцовывание галереи

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

Антипример Love Republic
hardclient

Кнопки действий

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

Пример Эльдорадо
hardclient

Скрытие кнопок

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

Пример Циан
hardclient

Миниатюры

14 гайдлайнов

Добавлены в галерею

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

Пример Детский Мир
hardclient

В нижней части экрана

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

Антипример Street Beat
hardclient

Размер миниатюр

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

Пример Sokolov
hardclient

Прокрутка миниатюр

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

Пример Ozon
hardclient

Размещены в один ряд

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

Антипример Дром База
hardclient

Highlight активной миниатюры

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

Пример METRO
hardclient

Обрезание крайней миниатюры

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

Пример Ozon
hardclient

Когда миниатюра центрируется

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

Пример Ozon
hardclient

Когда миниатюра не центрируется

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

Антипример METRO
hardclient

Highlight видео

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

Пример Ozon
hardclient

Нажатие на миниатюру

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

Пример Детский Мир
hardclient

Page control вместо миниатюр?

Иногда миниатюры в галерее заменяют на page control. Это делает элемент менее информативным и делает быстрое переключение невозможным.

Антипример Л'Этуаль
hardclient

Нумерация вместо миниатюр?

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

Антипример Lamoda
hardclient

Зум фото в галерее

19 гайдлайнов

Зум предусмотрен

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

Антипример Лента
hardclient

Фото вписываются в экран

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

Антипример Love Republic
hardclient

Разведение и сведение пальцев

Наиболее распространенная механика зума фото в галерее – развести или свести два пальца для увеличения и уменьшения соответственно.

Пример Kazan Express
hardclient

Активная область зума

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

Антипример Иль де Боте
hardclient

Двойной тап

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

Пример Впрок
hardclient

Зум анимирован

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

Антипример FixPrice
hardclient

Плавность анимации

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

Антипример Street Beat
hardclient

Центрирование при двойном тапе

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

Пример Rendez Vous
hardclient

Прогрессивный зум?

Есть кейсы, когда при нескольких повторных двойных тапах фото продолжает увеличиваться, и лишь в конце возвращается к 100% зуму. Как вам такое? Напишите в комментах.

Пример Sokolov
hardclient

Реакция на двойной тап

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

Антипример Мой Spar
hardclient

Scrollbar'ы при зуме?

В редких кейсах при увеличении фото в галерее появляются scroll bar'ы. Как вам? Полезно или они просто добавляют визуальный шум? Напишите в комментах.

Пример No One
hardclient

Фото занимает весь экран

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

Пример Яндекс.Маркет
hardclient

Кнопка закрытия видна

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

Пример Kazan Express
hardclient

Миниатюры видны

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

Пример ВкусВилл
hardclient

Уровень зума достаточен

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

Пример Kari
hardclient

Зум vs. качество фото

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

Антипример Впрок
hardclient

Импульс при перемещении

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

Пример Ozon
hardclient

Haptic feedback при зуме

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

Пример Детский Мир
hardclient

Выход за крайние состояния зума

Не ограничивайте клиента крайними состояниями зума во время жеста. Вместо этого можно анимированно вернуть его в макс./мин. состояние после того, как жест закончен.

Пример Спортмастер
hardclient

Закрытие галереи

15 гайдлайнов

Нажатием на кнопку закрытия

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

Пример МегаМаркет
hardclient

Смахивание вниз

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

Антипример Лента Онлайн
hardclient

Смахивание вверх

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

Пример Юла
hardclient

Закрытие через левый edge swipe

Если галерея – это экран в рамках navigation controller'а, ее закрытие можно реализовать через свайп слева направо по левой границе экрана (выполняет функцию возврата назад).

Пример Love Republic
hardclient

Закрытие через pinch

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

Пример Lamoda
hardclient

Закрытие не при тапе по фото

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

Антипример igooods
hardclient

Закрытие после пролистывания?

Есть еще одна нестандартная механика: закрывать галерею при пролистывании всех ее слайдов. Что думаете по этому поводу? Напишите в комментах.

Пример Kazan Express
hardclient

Исчезание миниатюр

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

Пример Ozon
hardclient

Финальная точка при смахивании

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

Антипример Ozon
hardclient

Движение с выцветанием

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

Пример Ozon
hardclient

Длина свайпа

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

Антипример Яндекс.Маркет
hardclient

Расположение кнопки закрытия

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

Антипример Авито
hardclient

Кнопка закрытия хорошо видна

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

Антипример Kazan Express
hardclient

Кнопка закрытия интерактивна

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

Пример Лента Онлайн
hardclient

Кнопка закрытия одна

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

Антипример Л'Этуаль
hardclient

Прочие интересные фичи

4 гайдлайна

Фото 360°

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

Пример Rendez-Vous
hardclient

Похожие товары по фото

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

Пример Яндекс.Маркет
hardclient

Комплементарные товары

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

Пример Lamoda
hardclient

Загрузка своего фото?

Механика в каком-то плане интересная, но спорная: зачем предлагать загрузить свое фото товара клиенту, который его не покупал?

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

Надеюсь, этот материал поможет вам прокачать насмотренность, а кому-то из вас – еще и поправить недочёты, сделав блок с фото в карточках товаров лучше.

Следующие материалы будут с таким же высоким уровнем детализации. Продолжаем создавать крупнейшую базу знаний по UX/UI в e-commerce.

Если было полезно, буду рад, если подпишетесь на мой Telegram и поделитесь ссылкой на этот пост с коллегами – я это очень ценю. Успехов и будем на связи!
Все статьи по e-commerce