Сайдбар на сайте: что такое, как его сделать и добавить

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

Почему не стоит отказываться от сайдбара?

Sidebar визуально разграничен с основным контентом на странице портала, поэтому сразу привлекает внимание посетителя. Такая панель позволяет:

Повысить конверсию. Не заметить отдельную колонку, расположенную слева или справа, попросту невозможно. Разместив в этой части экрана навигационные элементы (например, меню сайта или разделы), вы облегчите пользователю поиск нужной информации, а значит — увеличите шансы на то, что необходимые целевые действия будут выполнены.
Структурировать информацию. Никто не хочет тратить на поиск нужного раздела сайта много времени. Используйте сайдбар для того, чтобы посетителям было легче ориентироваться внутри портала.
Разместить рекламные баннеры. На страницах часто не хватает места для рекламных баннеров. Сайдбар — это отличное место для того, чтобы добавить дополнительные блоки, не слишком отвлекая пользователей от основного содержимого ресурса.
Персонифицировать контент. Колонку справа от основного контента можно использовать для размещения рекомендаций. Оставьте здесь ссылки на статьи блога, связанные с темой основного текста, или похожие товары, если речь идет о карточке. Так можно значительно увеличить глубину просмотра веб–ресурса.
Попасть в топ поисковой выдачи. Сайты с удобной навигацией и продуманным юзабилити всегда занимают более высокие позиции в результатах поиска. Поэтому сайдбар положительно влияет и на SEO–продвижение.

Итак, зачем нужен sidebar мы определились. Осталось решить, с какой стороны размещать колонки — слева или справа?

Выбираем место для колонки

Расположение этого элемента интерфейса на странице во многом зависит от ее содержимого. Веб–дизайнеры разделяют сайдбары по:

Местоположению

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

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

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

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

Степени подвижности

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

Что стоит добавить в сайдбар?

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

Навигация и управление

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

Виджеты социальных сетей

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

Информация об авторе или компании

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

Конверсионные элементы

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

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

Оформление sidebar: общие правила

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

Ширина колонок в развернутом виде не должна превышать 30% от общей ширины страницы, а их высота — пересекать границы экрана.
Оставьте левый сайдбар для меню, а правый — для дополнительной информации. Большинству пользователей привычно именно такое положение блоков.
Выделяйте отдельные компоненты боковых панелей контрастными цветами, чтобы они не сливались с другими элементами сайта и были хорошо видны. Не забывайте, что оттенки, используемые в этой области, должны сочетаться с выбранной для портала цветовой палитрой.
Чтобы привлечь внимание пользователей, не отвлекая от просмотра основного контента, выбирайте для колонок шрифт на 20% больше.
Не забывайте об адаптивности: обязательно проверьте, насколько читаем текст в данной области с разных устройств и экранов. Не злоупотребляйте колонками, если ваш сайт просматривают в основном со смартфонов или гаджетов, или отдайте предпочтение скрытым сайдбарам.

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