Главное Свежее Вакансии Образование
Выбор редакции:
7 095 4 В избр. Сохранено
Авторизуйтесь
Вход с паролем

​4 совета, которые заставят кнопки социальных сетей работать на вас

Простые советы от shubalab.com, которые помогут увеличить количество лайков и репостов с материалов на вашем сайте. Разбираем кейсы на примерах крупных сайтов рунета.

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

Это наталкивает на вопрос, каким же должен быть дизайн кнопок социальных сетей? Задумывались ли вы, что расположение иконок социальных сетей на странице, их размер и цвет оказывают влияние на пользователей и побуждают поделиться ссылкой? Дизайнеры не просто так используют схожие методики при создании этих кнопок. За ними скрывается весьма интересная, но в то же время несложная теория.

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

1. F-образный шаблон размещения информации

b_559faf617cc2d.jpg

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

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

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

Отличная иллюстрация вышесказанного - статья от shubalab.com на сайте Spark.ru, посвященная «Трендам веб-дизайна на ближайший год». Кнопки соц.сетей расположены именно там, где невозможно их не заметить – слева, вверху страницы, после заголовка и лида статьи. Здесь учтен принцип F-образного чтения веб-страниц. В первую очередь посетители читают название статьи а сразу после этого замечают возможность поделиться статьей. Как результат – у статьи на сегодняшний день 151 «расшаривание» Вконтакте, 249 «лайков» на Фэйсбуке и 29 твитов.

2. Стандарты

b_559fafd0bc04d.jpg

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

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

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

  • кнопка «Facebook» должна быть выполнена в цвете #3C5B97 и иметь отличительную букву «F»;
  • кнопка «Вконтакте» должна быть выполнена в цвете #5B7FA6, также следует разместить белый логотип в виде букв «VK»;
  • иконку «Twitter» следует залить цветом #55ACEE и разместить на ней узнаваемое изображение птички;
  • кнопка «LinkedIn», как правило, должна иметь цвет #008CC9 и логотип платформы «in»;
  • для логотипа «Pinterest» следует использовать оттенок #BD081C и изобразить закругленную букву «P».

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

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

3. Фиксированные кнопки

b_559fb02e20cba.jpg

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

Хороший, но не идеальный пример фиксированных кнопок социальных сетей можно увидеть на сайте Meduza.io. Статьи имеют «липкие» кнопки, которые постоянно остаются в верхней левой части страниц, независимо от прокручивания вниз.

4. Социальное доказательство

b_559fb04239c07.jpg

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

А если хотите не думать о том, где разместить кнопки социальных сетей − закажите разработку сайта на сайте shubalab.com. Всех читателей наших статей на Спарк.ру ждет скидка 15%. Чтобы ее получить, используйте слова «Социальные кнопки» в комментариях к заказу. Ждём от вас отзывов и писем!

Для того, чтобы первыми получать информацию о всех статьях и скидках от shubalab − подписывайтесь на нашу рассылку http://eepurl.com/bmB4X1

+1
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Симулятор бизнес-процессов
Сервис имитационного моделирования и оптимизации бизнес-процессов
Prolis Labkk
"Обратите внимание, где чаще всего вы замечаете кнопки социальных сетей. Они расположены в верхней левой части страницы многих сайтов." - кто же начинает шарить страницы еще до их прочтения? Боты.
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Алекс Шуб
Например те, кто читает очень много статей и «коллекционируют» их у себя в ленте. Думаю, что категорий людей, кто так делает - гораздо больше.
Ответить
AgriChain
AgriChain - комплексная онлайн система IT-решений для управления агробизнесом
Панченко Андрей
Нормальный такой ход - "А если хотите не думать о том, где разместить кнопки социальных сетей − закажите разработку сайта на сайте shubalab.com"
Ответить
MonoChat
Агрегатор сообщений из мессенджеров. Для службы поддержки и отдела продаж.
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.