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

Что такое виджеты

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

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

Основные функции виджетов:

• привлекают внимание пользователя. Это одна из самых важных функций элемента. Главная цель сайта - продать товар или услугу, поэтому формы, с помощью которых можно собрать данные пользователей и совершить целевое действие нужно выводить на первый план;
• собирают информацию о пользователях. В формах можно оставить заявку на обратный звонок, подписаться на рассылку и прочее;
• добавляют сайту интерактивности. С помощью виджетов дизайнеры создают визуальный контент, с которым может взаимодействовать пользователь. Это могут быть различные графики и диаграммы, статистика и прочее. Также такие элементы помогают наглядно представить информацию и облегчить восприятие контента пользователем;
• подстраиваются под потребности пользователя. Так как виджет - своеобразное web-приложение, с помощью элемента можно настроить контент таким образом, чтобы информация на сайте была максимально подстроена под нужды клиента. Таким образом взаимодействуют с посетителями сайтов рекомендательные системы, блоки после статей «Читать еще» и прочее.

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

Примеры виджетов и их значение в дизайне

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

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

Поп-апы

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

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

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

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

• яркие цветовые оттенки;
• изображения людей;
• крупная типографика;
• качественные иллюстрации;
• интерактивные элементы внутри окна.

Интересный прием можно встретить на сайте компании, занимающейся SEO-продвижением сайта. Дизайнеры оформили предложение в виде колеса фортуны, которое выезжает слева экрана и предлагает пользователям испытать удачу:

Поп-ап оформлен в яркой цветовой гамме, есть элемент интерактивности, также внимание пользователя привлекает сама идея о том, что можно что-то выиграть, а не просто получить скидку. В окне расположено поле для введения e-mail - главная цель поп-апа.

Вызвать интерес у пользователя можно не только интерактивными элементами. Интернет-магазин онлайн-касс предлагает клиентам проверить, сможет ли менеджер перезвонить через 40 секунд после заявки:

Совет: чтобы не раздражать пользователей, сделайте заметным элемент, с помощью которого закрывается окно.

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

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

Чат-боты

Еще один способ задержать пользователя на сайте - онлайн-консультанты. Это специальный виджет, который обычно встраивается в нижний угол экрана. С помощью него можно собирать заявки вместо веб-форм, переписываться с клиентами онлайн, побуждать пользователя к целевому действию (например, совершить звонок по указанному номеру для консультации). Иногда боты сопровождаются звуком.

При создании дизайна такого виджета рекомендуется учитывать следующее:

1. Так как чат-бот представляет собой форму для переписки, нужно продумать оформление онлайн-консультанта как чат с человеком. Для этого используются небольшие поля, иконки со значками отправки сообщения.
2. Чтобы создать иллюзию общения с живым человеком, консультанта подписывают как реального человека и вставляют фотографию. Лучше не использовать заезженные стоковые фото улыбающихся людей, а найти изображение, максимально приближенное к реальности.
3. Цветовая гамма такого виджета, в отличие от поп-апов, не должна сильно отличаться от концепции всего сайта. Лучше использовать анимацию (например, иллюзию того, что сообщение только пришло), чем яркую цветовую гамму, которая не вписывается в дизайн ресурса.

Такой чат мы используем на сайте IDBI:

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

Социальные сети

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

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

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

Интерактивные элементы

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

1. Онлайн-калькуляторы

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

На примере показан калькулятор, расположенный на сайте приема металлолома. Чтобы упростить задачу по расчету стоимости, разработчики предлагают клиенту легко рассчитать будущую прибыль с помощью специальной формы.

2. До/после

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

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

3. Звонок

Форму обратного звонка можно спрятать в такой интерактивный элемент:

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

Рекомендательные системы

Еще один тип полезного виджета - рекомендательные системы для клиентов. Данные элементы используют в основном блоги и интернет-магазины. Анализируя историю покупок, предприниматель может спрогнозировать дальнейшие действия клиентов и подобрать товары, которые могут заинтересовать пользователя.

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

Рекламные предложения

Кроме поп-апов для рекламы можно использовать отдельные виджеты, которые встроены в структуру сайта. Например, графики и диаграммы, которые показывают рост продаж и предлагают посетителям (в данном случае целевая аудитория - предприниматели) попробовать воспользоваться услугами.

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

Не забывайте тестировать виджеты на реальных пользователях. Разрабатывая дизайн можно создавать несколько вариантов и проверять их действия на клиентах. Меняйте размеры, время запуска, звуковое сопровождение (если есть), формулировку оффера, и оставляйте только эффективные варианты.

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

Студия дизайна IDBI использует в своих работах виджеты для улучшения конверсии сайтов и повышения прибыли своих клиентов. Мы тщательно подходим к созданию дизайна: продумываем оффер, оформление, рассчитываем оптимальное время запуска, улучшаем формы для обратной связи. Чтобы продажи были максимальными, мы создаем несколько версий виджетов и тестируем их в реальном времени. Также занимаемся разработкой баннеров и слайдеров, виджетов под конкретное событие. Наши работы доступны в разделе «Портфолио».