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

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

Лучшие практики UX/UI в мобильном e-commerce

140

гайдлайнов

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

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

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

Станислав Хрусталёв

Автор hardclient.com

Структура статьи

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

Открытие карточки товара
Фото товара
Видео товара
Прокрутка слайдера
Page control и альтернативы
Появление галереи
Формат галереи
Прокрутка галереи
Миниатюры
Зум фото в галерее
Закрытие галереи
Прочие интересные фичи

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

6 гайдлайнов

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

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

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

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

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

Пример • Lamoda

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

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

Пример • Rendez-Vous

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

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

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

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

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

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

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

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

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

Фото товара

15 гайдлайнов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • Lamoda

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

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

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

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

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

Пример • Циан

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

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

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

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

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

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

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

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

Пример • Wildberries

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

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

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

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

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

Пример • Sunlight

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

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

Пример • O'STIN

Видео товара

13 гайдлайнов

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

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

Пример • Rendez-Vous

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

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

Пример • Sokolov

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

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

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

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

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

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

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

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

Пример • O'STIN

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

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

Пример • Sokolov

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

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

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

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

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

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

Субтитры

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

Пример • Leroy Merlin

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

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

Пример • Love Republic

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

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

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

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

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

Пример • Sunlight

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

13 гайдлайнов

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

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

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

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

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

Пример • Циан

Длина свайпа

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

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

Cell snapping

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

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

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

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

Пример • O'STIN

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

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

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

Highlight контента

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

Пример • Flowwow

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

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

Пример • Love Republic

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

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

Пример • Leroy Merlin

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

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

Пример • Циан

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

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

Пример • O'STIN

В конце – UGC

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

Пример • Ozon

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

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

Пример • Wildberries

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

14 гайдлайнов

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

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

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

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

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

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

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

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

Пример • O'STIN

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

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

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

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

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

Пример • Sunlight

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

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

Пример • Rendez-Vous

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

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

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

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

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

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

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

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

Пример • Rendez-Vous

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

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

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

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

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

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

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

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

Пример • Циан

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

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

Пример • Lamoda

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

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

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

Будьте в курсе выхода новых статей – подпишитесь на мой канал в Telegram

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

10гайдлайнов

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

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

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

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

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

Пример • Циан

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

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

Пример • Ozon

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

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

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

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

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

Пример • Lamoda

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

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

Пример • Ozon

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

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

Пример • Love Republic

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

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

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

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

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

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

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

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

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

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

3 варианта

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

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

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

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

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

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

Коллаж

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

Пример • FlowWow

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

15 гайдлайнов

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

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

Пример • Auto.ru

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

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

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

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

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

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

Cell snapping

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

Пример • Wildberries

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

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

Пример • Ozon

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

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

Пример • Ozon

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример • Циан

Миниатюры

14 гайдлайнов

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

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

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

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

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

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

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

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

Пример • Sokolov

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

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

Пример • Ozon

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

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

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

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

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

Пример • METRO

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

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

Пример • Ozon

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

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

Пример • Ozon

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

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

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

Highlight видео

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

Пример • Ozon

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

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

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

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

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

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

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

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

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

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

19 гайдлайнов

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

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

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

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

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

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

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

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

Пример • Kazan Express

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

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

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

Двойной тап

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

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

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

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

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

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

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

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

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

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

Пример • Rendez Vous

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

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

Пример • Sokolov

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

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

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

Scrollbar'ы при зуме?

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

Пример • No One

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

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

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

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

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

Пример • Kazan Express

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

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

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

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

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

Пример • Kari

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

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

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

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

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

Пример • Ozon

Haptic feedback при зуме

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

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

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

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

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

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

15 гайдлайнов

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

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

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

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

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

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

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

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

Пример • Юла

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

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

Пример • Love Republic

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

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

Пример • Lamoda

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

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

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

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

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

Пример • Kazan Express

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

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

Пример • Ozon

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

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

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

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

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

Пример • Ozon

Длина свайпа

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4 гайдлайна

Фото 360°

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

Пример • Rendez-Vous

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

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

Пример • Lamoda

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

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

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

To be continued...

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

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

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

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

Все статьи по e-commerce