Блог Нетологии

Советы и обзоры для новых высот в карьере, бизнесе и жизни

Специально для блога «Нетологии» арт-директор и совладелец веб-студии ETERA Владислав Почукалин рассказал, как добиться от виджетов соцсетей наилучших показателей.

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

Сделайте блок максимально заметным

1. Размещайте виджет в часто просматриваемых областях экрана
Внимание пользователя не распределено равномерно по областям экрана. На сайте есть как «слепые зоны», которые редко попадают в область зрения, так и места, куда смотрят почти все. Это необходимо учитывать при выборе места для размещения виджета.

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

тепловая карта

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

В этом смысле блок соцсетей наиболее заметен или в левой половине экране, или в правом и левом верхних углах.

Правая часть экрана является «слепой зоной». Здесь виджеты соцсетей лучше не размещать.

Хорошее решение — «привязать» кнопки к правому или левому верхнему углу экрана, так, чтобы они всегда находились в поле зрения пользователя. Правда, это будет несколько навязчиво.

2. Используйте свободное пространство

Свободное или пустое пространство — это область вокруг элемента дизайна (в нашем случае вокруг кнопок соцсетей). Удаленность от других объектов визуально выделяет элемент, делает его более заметным. И напротив, чем меньше свободная зона, тем сильнее блок теряется в общей массе элементов сайта.

Чтобы было понятнее, рассмотрим три примера:

мало места
Слишком маленькое свободное пространство

слишком много места
Слишком большое свободное пространство

оптимально места
Оптимальный вариант

В первых двух примерах расстояние выбрано неудачно. В первом случае кнопки сильно «жмутся» к тексту, а во втором — слишком удалены, теряется визуальная связь. В третьем примере подобрано наилучшее расстояние: виджет выделяется, при этом не выглядит оторванным.

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

Поработайте над дизайном

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

protest
В интернет-магазине Protest блок «Поделиться» органично вписывается в общий дизайн и расположен в заметной зоне — правом верхнем углу


кнопки справа
Кнопки закреплены с правой стороны экрана и поэтому всегда на виду. Благодаря серому цвету они не выбиваются из визуального ряда


плитки ony
Весь дизайн сайта ONY выполнен в плиточном стиле. Используются крупные шрифты. Большие логотипы соцсетей на плитке, занимающей всю ширину экрана, выглядят заметно и стильно


cthst ryjgrb yf cthjv
Аккуратные и симпатичные кнопки. Но есть проблема: они серые, как и другие элементы вокруг. Из-за этого виджеты почти не выделяются


невозможно не заметить
Крупные квадраты, большое свободное пространство, сильный контраст. Невозможно не заметить


кнопки на круге
Необычное оформление в виде круга. Визуально «мягко» и привлекательно


виджет прямо на одежде
Нестандартное решение. Виджет сделан в виде ссылки и размещен прямо в списке моделей одежды


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

Хитрости

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

2. Бонус
Предложите пользователям награду за лайк. Это может быть как финансовая выгода (например, скидка), так и нематериальный бонус.

Например, магазин сантехники пообещал, что если группы компании в соцсетях соберут 10 000 подписчиков, креативный директор переплывет Москву-реку на ванне (кстати, так и случилось).

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

Чтобы узнать, как этот способ будет работать конкретно для вашего сайта, лучше всего сравнить результаты без всплывающего окна и с ним. Тут не обойтись без A/B-тестирования.

Об авторе

Владислав Почукалин,
арт-директор и совладелец веб-студии ETERA

comments powered by Disqus

Видеокурсы по маркетингу и менеджменту

Присоединяйтесь к нам в соцсетях!

Сообщите о предложении или проблеме