Быстрый просмотр товара
![Быстрый просмотр товара](/images/blog/fast_see.png)
В своем сегодняшнем посте хочу рассказать вам про быстрый просмотр товара. Вы часто сталкиваетесь с таким функционалом в разных интернет-магазинах и на маркетплейсах.
Пример — тот же известный всем магазин Ягодки. При наведении курсора на карточку товара появляется кнопка «Быстрый просмотр».
![Кнопка «Быстрый просмотр»](/images/articles/110224/1.jpg)
При клике по ней открывается модальное окно быстрого просмотра.
![Модальное окно быстрого просмотра](/images/articles/110224/2.jpg)
При этом кликнув по изображению или названию товара можно перейти на его страницу. В таком поп-апе могут быть фото товара – несколько штук, вид с разных ракурсов, краткое описание, таблица размеров, способы доставки, гарантии, цена, кнопка «Купить», логотип бренда, размерный ряд, ссылка на таблицу размеров и т.д. Есть кнопка «подробнее о товаре». Нажимаем на эту кнопку/ссылку и переходим на отдельную страницу с товаром. На странице с товаром, естественно, описание более полное, добавляются другие параметры товара в развернутом виде.
В открывающемся модальном окне представлено достаточно информации о товаре, чтобы мы могли принять решение его купить. Если необходимо больше, переходим на страницу товара.
Размеры и цвета на скриншоте:
![Размеры и цвета на скриншоте](/images/articles/110224/3.jpg)
Подобная функциональность есть на сайте La Moda, Ситилинк и многих других.
![Подобная функциональность](/images/articles/110224/4.jpg)
Ясно и понятно — где быстрый просмотр.
В рассмотренном примере поведение на сайте интуитивно понятно – есть кнопка «Быстрый просмотр».
В других проектах есть интуитивно понятные иконки — изображение лупы, глаза и т.д.
А вот пример не совсем очевидного быстрого просмотра.
Сайт https://groupprice.ru. Это, по сути, маркетплейс.
При нажатии на изображение и название товара на главной странице ВСЕГДА открывается модальное окно практически на весь монитор.
С главной страницы нельзя сразу перейти на страницу товара! Только через поп-ап быстрого просмотра!
![Только через поп-ап](/images/articles/110224/6.jpg)
Это пример явной недоработки при проектировании интернет-магазина. Я хочу сразу подробности изучить, а меня заставляют открывать модальное окно.
Возможно, замысел в том, чтобы пользователи совершали больше действий на сайте, улучшая «поведенческий фактор» что ценится поисковыми системами.
![](/images/articles/110224/1.jpg)
Преимущества быстрого просмотра
Не нужно заходить в каждый товар, чтобы рассмотреть основные детали! Это экономит время!
Открывается быстро, не нужно скролить страничку и пересматривать тучу данных, есть основной набор параметров для принятия решения о покупке.
Пример на скриншоте – фото, цвет на выбор, выбор размеров, сразу можно купить!
![Пример на скриншоте](/images/articles/110224/3.jpg)
Другими словами, для тех, кому нужно быстро и конкретно; учитывать такой поведенческий фактор очень даже стоит. Потому что 50% народа не любит долго принимать решений, живут по принципу: пришёл, увидел и купил.
Второе преимущество, которое выходит из первого.
Сокращается количество времени для принятия решения о покупке.
Третье преимущество – как следствие первых двух.
Сокращается количество действий при покупке, особенно при выборе одежды с размером: открыл быстрый просмотр, выбрал размер, добавил в корзину. Все действие происходит в одном окне. На что обратить внимание при проектировании такого pop-up окна:
- В модальном окне обязательно должна быть ссылка или кнопка, при нажатии на которую происходит переход на полноценную страницу товара!
- Если у товара есть опции, например, размеры или цвета, возможность их выбора должна быть обязательно представлена.
- Должна быть заметна кнопка «Купить» или «Добавить в корзину».
Этот список можно продолжать, включив сюда и читабельность шрифтов, и быстродействие и множество других параметров. Остановимся пока что на самом основном.
Итоги
В целом pop-up быстрого просмотра должно содержать всю самую необходимую информацию и инструменты для покупки. Если у товара есть развернутое текстовое описание с множеством изображений и видео, это уже показываем непосредственно на странице товара — нельзя объять необъятное.