hardclient scroll to top
hardclient telegram
Подписывайтесь на мой новый канал: рассказываю об интересных фичах из мира e-commerce каждый день
Zero Block
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
create your own block from scratch

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

30 гайдлайнов

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

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

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

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

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

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

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

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

Пример: Lamoda
hardclient

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

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

Пример: Rendez Vous
hardclient

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

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

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

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

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

Пример: Циан
hardclient

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

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

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