Разработка интернет-магазина

Быстрый просмотр товара

Быстрый просмотр товара

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

Пример — тот же известный всем магазин Ягодки. При наведении курсора на карточку товара появляется кнопка «Быстрый просмотр».

Кнопка «Быстрый просмотр»

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

Модальное окно быстрого просмотра

При этом кликнув по изображению или названию товара можно перейти на его страницу. В таком поп-апе могут быть фото товара – несколько штук, вид с разных ракурсов, краткое описание, таблица размеров, способы доставки, гарантии, цена, кнопка «Купить», логотип бренда, размерный ряд, ссылка на таблицу размеров и т.д. Есть кнопка «подробнее о товаре». Нажимаем на эту кнопку/ссылку и переходим на отдельную страницу с товаром. На странице с товаром, естественно, описание более полное, добавляются другие параметры товара в развернутом виде.

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

Размеры и цвета на скриншоте:

Размеры и цвета на скриншоте

Подобная функциональность есть на сайте La Moda, Ситилинк и многих других.

Подобная функциональность

Ясно и понятно — где быстрый просмотр.

В рассмотренном примере поведение на сайте интуитивно понятно – есть кнопка «Быстрый просмотр».

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

А вот пример не совсем очевидного быстрого просмотра.

Сайт https://groupprice.ru. Это, по сути, маркетплейс.

При нажатии на изображение и название товара на главной странице ВСЕГДА открывается модальное окно практически на весь монитор.

С главной страницы нельзя сразу перейти на страницу товара! Только через поп-ап быстрого просмотра!

Только через поп-ап

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

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

Преимущества быстрого просмотра

Не нужно заходить в каждый товар, чтобы рассмотреть основные детали! Это экономит время!

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

Пример на скриншоте – фото, цвет на выбор, выбор размеров, сразу можно купить!

Пример на скриншоте

Другими словами, для тех, кому нужно быстро и конкретно; учитывать такой поведенческий фактор очень даже стоит. Потому что 50% народа не любит долго принимать решений, живут по принципу: пришёл, увидел и купил.

Второе преимущество, которое выходит из первого.

Сокращается количество времени для принятия решения о покупке.

Третье преимущество – как следствие первых двух.

Сокращается количество действий при покупке, особенно при выборе одежды с размером: открыл быстрый просмотр, выбрал размер, добавил в корзину. Все действие происходит в одном окне. На что обратить внимание при проектировании такого pop-up окна:

- В модальном окне обязательно должна быть ссылка или кнопка, при нажатии на которую происходит переход на полноценную страницу товара!

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

- Должна быть заметна кнопка «Купить» или «Добавить в корзину».

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

Итоги

В целом pop-up быстрого просмотра должно содержать всю самую необходимую информацию и инструменты для покупки. Если у товара есть развернутое текстовое описание с множеством изображений и видео, это уже показываем непосредственно на странице товара — нельзя объять необъятное.