Контакты
Московская область, г.Подольск, пр-т 50 лет Октября, д.4Б.
Что такое поп-ап? Это всплывающее окно квадратной или прямоугольной формы, цель которого, донести до нас важную информацию и тем самым вовлечь в воронку некоего процесса: продажи, опроса и т.д. Поп-апы бывают разных видов. Рассмотрим на примере интернет-магазина.
Информационный поп-ап. Вы находитесь в карточке товара или с каталога добавляете товар в корзину /в сравнение, закладки/ Появляется прямоугольный или квадратный баннер с сообщением, что ваш товар добавлен в корзину /в сравнение, закладки/
/p>Поп-ап, который предлагает некую ценность. Для того, чтобы увеличить конверсию сайта, привлечь новых покупателей, стоит использовать поп-ап с призывом /например, получить скидку за подписку или -20% с каждой 2-ой покупки. Действие такого баннера не должно быть сразу с первых страниц посещения сайта, а с того момента, когда посетитель собирается покинуть интернет-ресурс.Рекламный поп-ап. Вы заходите в любой интернет-магазин. Иногда бывает такое, что сразу же выскакивает на затемненном экране яркий баннер и к чему-нибудь призывает. Как доказывает практика, такой рекламный поп-ап просто раздражает и отнимает драгоценное время на изучение ассортимента.
Поп-ап с закрывающим целевым действием. Такой поп-ап, как правило, это всплывающая корзина, которая призывает завершить целевое действие, а именно — завершить покупку, перейти к оформлению.
Строение поп-апа. Прямоугольник или квадрат белого или светлого фона. На нем находится картинка, далее призыв к действию или повествование, закрывающий элемент, переходная ссылка или кнопка.
Поп-ап должен соответствовать стилистике сайта, должен быть неброским, но запоминающимся, креативным.
Всегда стоит помнить, что поп-ап должен быть и в мобильной версии сайта.
Как наиболее проще отобразить состояние корзины на сайте? С помощью каких стилистических приемов можно и нужно решить подобный вопрос. Как раз об этом и пойдет речь в этой статье.
Вы зашли за покупкой на интересующий сайт. Выбрали себе товар. Положили в корзину. И тут вдруг вам захотелось еще чего-нибудь к своей покупке. Товар себе лежит в корзине, а вы ходите по страницам в поисках чего-то интересного. Находите, кладете в корзину. И дальше себе пошли! Ну чем не супер-маркет Только в привычной и уютной обстановке. Но все же ходить в магазины в реальности настоятельно рекомендую. Нет ничего лучше прогулки на свежем воздухе и избавление от лишних денег.
Продолжаю повествование. В корзине лежат у вас покупки, дожидаются оформления заказа. Есть несколько способов отобразить состояние корзины и посмотреть, что вы туда положили.
Самый классический способ – отображение поп-апа при покупке /рисунок1/ После закрытия модального окна в шапке сайта меняется состояние корзины. Появляется циферка с количеством единиц товара. При нажатии на корзину пользователь попадает на отдельную страницу с заказом. На этой странице нужно завершить действие, оформить заказ и оплатить покупку.
Если пользователь не решил все окончательно оформить, а только смотрит, что у него по сумме и сколько товаров было положено в корзину. Значит нужна всплывающая корзина. Она должна отображать требуемые параметры: сумма, количество.
Второй способ – всплывающая корзина в правом верхнем углу под значком корзины . Небольшое модальное окно, на котором маленькое фото товара, название, количество, итого и обязательно кнопки «Оформить заказ» и «Продолжить покупки».
Третий способ – всплывающая корзина сбоку справа на всю высоту монитора. Там отображаются те же атрибуты: цена, название, количество, кнопки «Оформить заказ», «Купить в 1 клик», «Продолжить покупки» и обязательно закрывающий элемент. /рисунок 3/
Самое главное – это определиться, какая корзина в твоем интернет-магазине у тебя будет: сверху справа или сбоку справа. И в том и в другом случае считаю, что оба варианта очень удачны и удобны. Вот только чаще всего пользуются корзиной сверху справа, под значком корзины. Это более привычно.
Наиболее удобная считается вертикальная корзина сбоку справа. У нее больше площадь, есть воздух между графическими и смысловыми объектами, а значит и читаемость, удобство и конверсия будет гораздо выше.
Еще хочется обратить ваше внимание на состояние корзины при скролле страницы вниз. Пользователь добавил товар в корзину. Решил посмотреть на этой же странице похожие товары, перечитать характеристики. Состояние корзины отображается в верхней панели под меню. Название, маленькое фото, цена.
Есть еще вариант, когда такая же панель отображается на всю ширину монитора, но внизу. Не очень такая корзина заметна. Всегда ее ищешь глазами, причем каждый раз. Подведем итог – наилучший способ отображения всплывающей корзины верх справа, справа на всю высоту то есть та корзина, которая будет перед глазами у пользователя.
Один из частых вопросов, которые нам задают — на какой системе управления (CMS — Content Management System) сделать корпоративный сайт. При этом не важно, это небольшое ИП или крупная компания с собственным производством и сетью продаж. Ответ на это вопрос зависит от масштабов бизнеса, какое количество информации будет присутствовать на сайте, какой планируется функционал, необходимость дальнейшего масштабирования, возможности по SEO и ряд других задач.
Рассмотрим несколько наиболее популярных решений, которые подходят под большинство запросов.
Универсальное решение для различных задач, которое подойдет как небольшому бизнесу, так и крупным предприятиям из любой сферы деятельности.
Одним из преимуществ данной системы управления является возможность реализации множества задач, начиная от простого информационного сайта, заканчивая корпоративным порталом, включающим в себя различные разделы — данные о продукции, новости, статьи, документы, личный кабинет для пользователей, внутреннюю CRM и многое другое. Естественно, ничего просто так не работает по принципу «установил и включил» — требуется настройка и доработка тех или иных компонентов. Это же касается и взаимодействия с 1С.
Ввиду сложности внутренней архитектуры разработка нового функционала на данной платформе достаточно высока. Дизайн сайта, внешний вид. Имеются как готовые шаблоны, так и можно разработать свой вариант с уникальным дизайном. Подойдет для информационного сайта, может использоваться как средний или крупный интернет-магазин.
Если основное направление вашей работы — продажа товаров, данная CMS может стать отличным выбором. Сама платформа — это интернет-магазин, при этом имеется информационный раздел, в котором можно разместит данные о компании.
Из преимуществ следует отметить относительно недорогую стоимость разработки нового функционала под любые задачи, наличие множества готовых модулей для функционала интернет-магазина, как платных, так и бесплатных — это хорошая возможность не изобретать велосипед, а использовать готовое решение. Администрировать как интернет-магазин, так и информационную часть достаточно легко при наличии определенного уровня подготовки.
Дизайн сайта, внешний вид. Доступны как бесплатные, так и платные шаблоны, сама система достаточно гибкая и дефолтный шаблон можно переделать под свои потребности, под свой дизайн. Подойдет для сайта компании, основа которого — интернет-магазин любого масштаба.
Данная система является моровым лидером по количеству сайтов, которые работают под ее управлением. В первую очередь из-за простоты установки и дальнейшего администрирования.
Вполне подойдет для информационного сайта, включая сайт компании.
Следует также отметить, что данная CMS наиболее часто подвергается взломам и попыткам взлома. Периодически выходят патчи безопасности, которые решаю проблему, но за этим необходимо следить и принимать все возможные меры. Возможности дизайна сайта. Предлагается очень большое количество бесплатных и платных шаблонов, позволяющих быстро запустит проект.
Подойдет для небольшого информационного сайта, имеется расширение для небольшого интернет-магазина.
Система управления с открытым исходным кодом, также популярная во всем мире, как и Вордпресс. Имеет удобную административную часть и также является хорошим вариантом для создания сайта компании. Сама система является бесплатной, а модули к ней есть как бесплатные, так и распространяемые на платной основе. Имеется множество расширений — каталоги, интернет-магазины, модули с различным функционалом.
Если вы решили использовать эту CMS для сайта, советуем и шаблон сайта, и необходимый функционал разрабатывать «под себя», чтобы избежать дальнейших проблем с масштабируемостью и безопасностью. Подойдет для небольшого информационного сайта.
Требуется быстрый запуск корпоративного сайта в дальнейшем не планируется масштабировать — можно использовать Worpress или Joomla.
Для сайта компании и при этом интернет-магазина подойдет Opencart или Битрикс.
Если корпоративный сайт будет содержать множество разделов, каталогов и другой функционал, следует использовать 1С-Битрикс.
В своем сегодняшнем посте хочу рассказать вам про быстрый просмотр товара. Вы часто сталкиваетесь с таким функционалом в разных интернет-магазинах и на маркетплейсах.
Пример — тот же известный всем магазин Ягодки. При наведении курсора на карточку товара появляется кнопка «Быстрый просмотр».
При клике по ней открывается модальное окно быстрого просмотра.
При этом кликнув по изображению или названию товара можно перейти на его страницу. В таком поп-апе могут быть фото товара – несколько штук, вид с разных ракурсов, краткое описание, таблица размеров, способы доставки, гарантии, цена, кнопка «Купить», логотип бренда, размерный ряд, ссылка на таблицу размеров и т.д. Есть кнопка «подробнее о товаре». Нажимаем на эту кнопку/ссылку и переходим на отдельную страницу с товаром. На странице с товаром, естественно, описание более полное, добавляются другие параметры товара в развернутом виде.
В открывающемся модальном окне представлено достаточно информации о товаре, чтобы мы могли принять решение его купить. Если необходимо больше, переходим на страницу товара.
Размеры и цвета на скриншоте:
Подобная функциональность есть на сайте La Moda, Ситилинк и многих других.
Ясно и понятно — где быстрый просмотр.
В рассмотренном примере поведение на сайте интуитивно понятно – есть кнопка «Быстрый просмотр».
В других проектах есть интуитивно понятные иконки — изображение лупы, глаза и т.д.
А вот пример не совсем очевидного быстрого просмотра.
Сайт https://groupprice.ru. Это, по сути, маркетплейс.
При нажатии на изображение и название товара на главной странице ВСЕГДА открывается модальное окно практически на весь монитор.
С главной страницы нельзя сразу перейти на страницу товара! Только через поп-ап быстрого просмотра!
Это пример явной недоработки при проектировании интернет-магазина. Я хочу сразу подробности изучить, а меня заставляют открывать модальное окно.
Возможно, замысел в том, чтобы пользователи совершали больше действий на сайте, улучшая «поведенческий фактор» что ценится поисковыми системами.
Не нужно заходить в каждый товар, чтобы рассмотреть основные детали! Это экономит время!
Открывается быстро, не нужно скролить страничку и пересматривать тучу данных, есть основной набор параметров для принятия решения о покупке.
Пример на скриншоте – фото, цвет на выбор, выбор размеров, сразу можно купить!
Другими словами, для тех, кому нужно быстро и конкретно; учитывать такой поведенческий фактор очень даже стоит. Потому что 50% народа не любит долго принимать решений, живут по принципу: пришёл, увидел и купил.
Второе преимущество, которое выходит из первого.
Сокращается количество времени для принятия решения о покупке.
Третье преимущество – как следствие первых двух.
Сокращается количество действий при покупке, особенно при выборе одежды с размером: открыл быстрый просмотр, выбрал размер, добавил в корзину. Все действие происходит в одном окне. На что обратить внимание при проектировании такого pop-up окна:
— В модальном окне обязательно должна быть ссылка или кнопка, при нажатии на которую происходит переход на полноценную страницу товара!
— Если у товара есть опции, например, размеры или цвета, возможность их выбора должна быть обязательно представлена.
— Должна быть заметна кнопка «Купить» или «Добавить в корзину».
Этот список можно продолжать, включив сюда и читабельность шрифтов, и быстродействие и множество других параметров. Остановимся пока что на самом основном.
Итоги
В целом pop-up быстрого просмотра должно содержать всю самую необходимую информацию и инструменты для покупки. Если у товара есть развернутое текстовое описание с множеством изображений и видео, это уже показываем непосредственно на странице товара — нельзя объять необъятное.
Для удобства пользования все товары в каталоге располагаются плиткой. Есть вариант расположения карточек списком — но это крайне неудобно. Именно расположение плиткой таких карточек дает больше возможности охватить товаров.
Карточка должна быть доступной, понятной и приятной:) Должна содержать основные параметры: отличное фото, изображение товара, название, основная характеристика, цена, кнопка «купить» или «заказать».
Также очень важно, чтобы карточка товара в каталоге была «отзывчивой». То есть при наведении на карточку менялось изображение главное на вариации товара, а также открывались доступные дополнительные функции.
Яркий пример отзывчивой карточки в интернет-магазине Ozone, Sokolov, Sunlighte, La Redoute.
Возможно, мы в этой статье рассмотрим очевидные вещи, однако, считаем данный вопрос важным при заказе и дальнейшей разработке корпоративного сайта.
Достаточно часто к нам обращаются заказчики, которым необходим сайт компании, но как он должен выглядеть и что и как необходимо разместит на сайте, представление имеют очень приблизительное. Часто сайт компании уже есть, и заказчик предлагает только улучшить его немного и все, успех обеспечен. Часто это не совсем так, и, чтобы добиться хорошего результата, требуется создание сайта с нуля.
Данный материал — это очень сжатое описание последовательности работ, по каждому из пунктов можно написать несколько статей, будем считать его введением в разработку корпоративного сайта.
Итак, приводим содержание подготовительного этапа, его содержимое подтверждено многими успешными проектами.
Для начала просто необходимо встретится и непосредственно или в режиме онлайн обсудить сам проект. Какие есть исходные данные, что планируется сделать, что уже сделано, какие задачи предстоит решить. Здесь важно определить, какое место на рынке занимает компания, особенности ведения бизнеса, сильные и слабые стороны. Тем больше информации, тем лучше.
Целевая аудитория — ваши потенциальные клиенты, потребители товара или услуги. В зависимости от особенностей вашего продукта требуется выявить, что действительно хочет видеть посетитель вашего сайта, что требуется для принятия решения о покупке или сотрудничестве.
Анализ рынка — это и потенциальная потребность в ваших услугах и товарах, и компании-конкуренты, предлагающие аналогичные продукты. Требуется проанализировать сайты конкурентов, и на основе полученных данных сформировать свою презентацию на своем сайте.
Правильная структура сайта, как это не банально звучит — одна из составляющих успешного проекта. Разработать ее поможет сбор семантического ядра и кластеризация (группировка) запросов. Далее выстраивается структура сайта, страницы его должны включать собранные семантические запросы.
Это документ, в котором прописан перечень работ и их последовательность. Дизайн, функциональность, разработка контента. Естественно, всё упомянуть и зафиксировать невозможно, особенно если это касается будущего дизайна сайта, но по крайней мере, задаются конкретные рамки. С функциональностью достаточно просто: конкретно и подробно описывается, как должен работать тот или иной программный модуль. Разработка контента на примере текстов: указываются их критерии — объем, тематика, поисковые запросы и другие данные.
Достаточно важный момент, это необходимо как заказчику, так и исполнителю. Данный документ — это, по сути, календарный план проекта, под каждый этап выделяется определенное количество дней. Обе стороны четко понимают, что сейчас делается и когда возможен финал той или иной стадии.
Подготовительный этап пройден — произведен анализ рынка, оценены конкуренты, их сильные и слабые стороны, выбрана стратегия — как сделать сайт лучше, чем у оппонентов, разработана структура и составлено ТЗ. Также определена стилистика будущего дизайна на основе предпочтений заказчика и особенностей конкретной тематики.
Начинаем основную работу, придерживаясь разработанного Технического задания и графика работ.
Обращайтесь к нам, если требуется создание сайта любой тематики. Обсудим ваши задачи, составим план и начнем работу.
Корпоративный сайт компании — это общий термин, которым называется веб-ресурс, ваш проект, где представлена ваша компания, со всеми необходимыми атрибутами — описанием, преимуществами, продуктами, контактными данными и т.д.
Нет жестких требований — каким именно по функционалу и по объему информации должен быть корпоративный сайт. Все упирается в объем информации, который та или иная компания планирует разместить для презентации будущим партнерам или клиентам.
Рассмотрим несколько вариантов сайтов компаний, которые чаще всего встречаются.
Данный вид сайта как правило, небольшой по объему, главная страница его является презентационной, включает в себя текст о компании, корпоративные ценности, информацию об основном руководящем составе, список и расширенные данные об основных услугах. Может содержать несколько страниц с основными данными о совей деятельности, обязательно страницу «Контакты».
Это многостраничные сайты, с множеством разделом, каждый раздел посвящен определенному виду деятельности — продажи, услуги и т.д. Каждый раздел может иметь достаточно сложную отличающуюся структуру и содержать разные типы данных — текст, табличные материалы, фотогалереи, файлы для скачивания и т.д.
Пример такого сайта — сайт того или иного завода, или небольшого производства, в каталоге которого представлена производимая продукция. В зависимости от тематики страницы каталога могут иметь различную структуру для наиболее оптимальной презентации данных потенциальному клиенту. Данные о компании могут быть представлены как на главной странице, так и на отдельной странице «О компании», где подробно расписана вся история развития.
Достаточно частный случай, когда корпоративный сайт совмещен с интернет-магазином, с каталогом товаров или услуг с возможностью оформления заказа он-лайн. В этом случае существует информационный раздел, включающий в себя различные данные о деятельности компании, и каталог интернет-магазина с возможностью выбрать и заказать определенный продукт.
Какой сайт создавать в том или ином случае, какая должна быть его структура и функциональность, дизайн? Все зависит от итоговых задач, которые он должен выполнять. Возможно, на начальном этапе достаточно презентация деятельности компании в целом. Далее потребуется создание каталога услуг, далее — создание отдельного сервиса. Поэтому, начиная реализацию того или иного проекта по созданию корпоративного сайта, мы рекомендуем посмотреть на несколько шагов вперед в будущее и подумать о дальнейшем масштабировании. Отсюда появляется вопрос о выборе платформы, правильной разработке структуры и другие немаловажные задачи.
Обращайтесь к нам, обсудим ваш проект, соединим ваш опыт в бизнесе и наш в веб-разработке.