юзабилити

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

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

/p>Поп-ап, который предлагает некую ценность. Для того, чтобы увеличить конверсию сайта, привлечь новых покупателей, стоит использовать поп-ап с призывом /например, получить скидку за подписку или -20% с каждой 2-ой покупки. Действие такого баннера не должно быть сразу с первых страниц посещения сайта, а с того момента, когда посетитель собирается покинуть интернет-ресурс.

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

Поп-ап с закрывающим целевым действием. Такой поп-ап, как правило, это всплывающая корзина, которая призывает завершить целевое действие, а именно — завершить покупку, перейти к оформлению.

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

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

Всегда стоит помнить, что поп-ап должен быть и в мобильной версии сайта.

Как наиболее проще отобразить состояние корзины на сайте? С помощью каких стилистических приемов можно и нужно решить подобный вопрос. Как раз об этом и пойдет речь в этой статье.

Вы зашли за покупкой на интересующий сайт. Выбрали себе товар. Положили в корзину. И тут вдруг вам захотелось еще чего-нибудь к своей покупке. Товар себе лежит в корзине, а вы ходите по страницам в поисках чего-то интересного. Находите, кладете в корзину. И дальше себе пошли! Ну чем не супер-маркет Только в привычной и уютной обстановке. Но все же ходить в магазины в реальности настоятельно рекомендую. Нет ничего лучше прогулки на свежем воздухе и избавление от лишних денег.

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

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

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

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

Самое главное – это определиться, какая корзина в твоем интернет-магазине у тебя будет: сверху справа или сбоку справа. И в том и в другом случае считаю, что оба варианта очень удачны и удобны. Вот только чаще всего пользуются корзиной сверху справа, под значком корзины. Это более привычно.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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