Sidebar

Что такое Sidebar (сайдбар)

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

Что размещают в сайдбаре

Содержимое элемента определяет владелец сайта. Популярные варианты размещаемой информации:

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

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

Правила создания
качественной боковой панели

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

• Все элементы сайдбара должны быть видны, если речь о компьютерной версии сайта. На мобильных устройствах скроллинг для поиска необходимого элемента уже считается обычным явлением.
• Играет роль оформление боковой зоны. Она должна вписываться в общий дизайн, выделяясь на фоне зоны с контентом. Следует использовать нейтральные.
• Все заголовки в сайдбаре размещают по центру, весь остальной текст выравнивается по левому краю. Нередко используется шрифт на 10-15% больше, чем основной.
• Необходимо придерживаться принципа расположения информации по степени важности. В самом верху размещаются наиболее востребованные элементы (меню с разделами, кнопка поиска информации).
• В случае, когда вся важная информация не помещается в рамках одного бокового меню, следует использовать два сайдбара. Наиболее популярное решение – расположить их слева и справа от основного контента.