Посетителю нужно быстро понять, где на сайте искать нужный раздел и как перейти на другую страницу. В этом помогает боковая панель: благодаря ей проще найти нужную рубрику или контент. Вопрос в том, подходит ли она конкретному сайту.
Если нужно улучшить юзабилити, сайдбар стоит вписать в архитектуру сайта. Если посетитель должен видеть только основной контент и не отвлекаться на виджеты и списки, лучше обойтись без него. Решение зависит от типа сайта, задач страниц и состава самой панели.
В статье рассказано, что такое сайдбар и какие бывают виды, какие элементы в нем размещать и каких избегать, как его оформить и сделать. Отдельно показано, для каких сайтов он нужен: от интернет-магазина до блога и лендинга.
- Что такое сайдбар и какие бывают виды
- Как сайдбар улучшает юзабилити сайта
- Из каких элементов состоит сайдбар
- Какой сайдбар выбрать, левый или правый
- Чего не стоит размещать в сайдбаре
- Как лучше оформить сайдбар
- Для каких сайтов нужен сайдбар
- Коротко о главном
Что такое сайдбар и какие бывают виды
Сайдбар (sidebar) — это боковая панель сайта, визуально отделенная от основного контента. Блоки панели помогают посетителю ориентироваться на сайте: перейти в нужный раздел и найти нужный материал. Ширина боковой панели обычно меньше ширины основного блока с контентом.
Панели различаются расположением и числом: их размещают справа или слева от основного контентного блока, а на некоторых сайтах используют сразу несколько. Основные виды сайдбаров показаны на примерах ниже.
- Левый сайдбар расположен слева от основного контента.
- Правый сайдбар стоит справа от основного контента.
- Две боковые панели находятся с одной стороны или с обеих сразу.
- В интернет-магазинах из-за особенностей функционала панелей бывает больше двух. Разработчикам приходится адаптировать такие сайты под десктопы и мобильные устройства.
- Плавающий сайдбар полностью или частично остается на экране при прокрутке страницы, поэтому панель все время на виду у пользователя.
- Сайт без сайдбара устроен без боковых панелей: на странице остается только основной контент.
Как сайдбар улучшает юзабилити сайта
Сквозная боковая панель, которая обычно присутствует на всех страницах, позволяет перейти в нужный раздел без возврата на главную и отделяет вспомогательное содержимое от основного. Информация в сайдбаре помогает посетителю сразу понять, что он найдет на сайте. Это часть общего подхода к UX сайта, при котором навигация подчинена задачам посетителя.
Для интернет-магазина или, например, сайта юридического агентства в сайдбаре уместны ссылка на корзину либо кнопка заказа товаров и услуг. Так посетитель сразу видит, как перейти к покупке или заказу.
%201.png)
%201.png)
%201.png)
%201.png)
%201.png)
.jpg)
Из каких элементов состоит сайдбар
Состав панели зависит от задач сайта: в ней размещают элементы для навигации, поиска, подписки, связи с компанией и целевого действия.
- Подписка на рассылку. Позволяет посетителю получать по e-mail новые материалы и предложения компании.
- Список разделов и рубрик (боковое меню). Помогает ориентироваться в содержимом сайта и находить страницу с интересующими статьями, товарами или услугами.
- Список популярных статей — блок с самыми востребованными материалами сайта.
- Перечень новых статей. Ссылки на новые материалы в сайдбаре — обычные внутренние ссылки: по ним посетители и поисковые роботы находят свежие страницы.
- Строка поиска. Помогает посетителю быстро найти на сайте нужную статью или товар по ключевым словам.
- Кнопки социальных сетей («ВКонтакте» и другие площадки, где компания ведет аккаунты) — ссылки на профили компании, по которым посетитель переходит в сообщества, а также возможность поделиться статьей.
- Call-to-action, или призыв к действию. Кнопка с CTA, форма заказа услуг или ссылка на каталог призваны побудить посетителя выполнить действие: заказать товар, оставить свой e-mail, номер телефона и т. п.
- Информация об авторе или компании и контакты. Короткий блок о том, кто ведет сайт, с контактными данными или формой обратной связи.
Реклама в сайдбаре и баннерная слепота
Баннерная слепота — это склонность пользователей игнорировать элементы страницы, которые они воспринимают как рекламу, правильно или ошибочно. В статье 2018 года компания Nielsen Norman Group, которая исследует пользовательский опыт, описала тест с отслеживанием взгляда: 26 участников искали на одной и той же странице, как снять этикетку с банки, читали текст, а на рекламу в верхнем баннере и правой колонке смотрели очень мало или не смотрели вовсе. Исследователи отмечают, что сегодня правую колонку используют не только под рекламу.
Реклама влияет и на соседние блоки. В том же исследовании участница, увидев спонсорские материалы в правой колонке, сочла рекламой весь раздел и больше к нему не возвращалась. Поэтому рекламу не стоит смешивать с навигацией и полезными ссылками, а на российском сайте ее еще и маркируют: по статье 18.1 закона «О рекламе» реклама в интернете должна содержать пометку «реклама» и указание на рекламодателя, а для ее распространения нужен идентификатор рекламы, который присваивает оператор рекламных данных.
Какой сайдбар выбрать, левый или правый
Сторона зависит от задачи панели. Левый сайдбар используют в личных кабинетах и соцсетях, где он нужен для навигации по профилю, а также на крупных порталах, например на сайтах СМИ. Правый сайдбар подходит для дополнительных материалов рядом с основным контентом.
Выбирая сторону, полезно учитывать, куда смотрят посетители. По данным Nielsen Norman Group за 2017 год, на обычных сайтах, без учета страниц выдачи поисковых систем, 80 % фиксаций взгляда приходилось на левую половину экрана. В исследовании участвовали более 120 человек. Левые панели навигации при этом фиксировались лишь изредка, поэтому сама по себе сторона не гарантирует, что блок заметят.
- В левом сайдбаре размещают навигацию и каталог: меню, список разделов, фильтр поиска. Информация в нем остается вспомогательной, а основной контент страницы не теряет главной роли.
- В правом сайдбаре размещают перечень похожих, новых либо популярных статей, новости и акции. Рекламные блоки, если они нужны, отделяют от этих подборок.
- Форму подписки или кнопку с призывом к действию ставят там, где их заметит посетитель именно на этой странице. Место подбирают под задачу страницы и проверяют на практике.
Чего не стоит размещать в сайдбаре
Сайдбар не стоит перегружать: бесполезные элементы отвлекают посетителей от основного контента, делают страницу менее привлекательной, а лишние виджеты порой замедляют ее загрузку.
- Облако тегов. Плохо подходит для навигации и занимает место. В исследовании Halvey и Keane 2007 года участники быстрее находили заданный тег в простом списке, чем в облаке, поэтому вместо облака лучше поставить компактный список рубрик.
- Виджет «Календарь». Как правило, не помогает ориентироваться на сайте, но занимает место.
- Блок «Последние комментарии». Обычно не дает посетителю нужной информации и отвлекает от основного контента. Вместо него можно показать популярные статьи.
- Счетчики посещаемости и рейтинги. Это служебные элементы: посетителю они, как правило, ничего не дают, поэтому их размещают в футере сайта.
Для каждого блока в сайдбаре стоит задать вопрос, что посетитель сможет с ним сделать: перейти в раздел, найти материал, подписаться, связаться. Если ответа нет, блок лучше убрать.
Как лучше оформить сайдбар
Сайдбар вписывают в дизайн сайта и графически выделяют, чтобы он не сливался с блоком контента. Занимая заметную часть страницы, он должен состоять только из полезных элементов.
- Для заголовков в сайдбаре используют шрифт несколько крупнее основного.
- Информацию в боковой панели размещают с учетом ее важности. В верхней части сайдбара располагают самые значимые компоненты: разделы сайта, перечень рубрик, ссылки на профили компании в социальных сетях, строку поиска и т. п.
- Обычно хватает одной панели. Если для важной информации не хватает места, можно использовать две, разместив их по бокам от блока с контентом, но чем больше боковых панелей, тем меньше места для самого контента.
- Ширину панели подбирают так, чтобы основной блок оставался заметно шире.
Боковая панель на мобильных устройствах
На узком экране панель нельзя оставить сбоку, поэтому ее переносят под основной контент или убирают в меню. Как сайты адаптируют под смартфоны, показывает материал про мобильные версии сайтов.
Google индексирует сайты по мобильной версии и советует, чтобы на смартфоне был тот же контент, что и на десктопе. Дизайн может отличаться, но контент лучше не удалять, а переносить в аккордеоны или вкладки. Поэтому полезные ссылки и блоки сайдбара на смартфоне сворачивают, а не удаляют.
Откройте сайт на смартфоне и пройдите путь к ключевой странице через мобильное меню. Если нужной ссылки из сайдбара там нет, верните ее в свернутом виде.
Как сделать сайдбар и добавить виджеты
В HTML боковую колонку можно оформить элементом aside. По определению справочника MDN Web Docs для веб-разработчиков, он обозначает часть документа, косвенно связанную с основным содержимым, и часто выглядит как боковая панель или врезка.
В классических темах WordPress сайдбар — это область для виджетов: ее регистрируют в файле functions.php, а виджеты добавляют в разделе «Внешний вид → Виджеты» или в настройщике темы. В блочных темах, например Twenty Twenty-Five, областей виджетов в прежнем виде нет: боковую колонку настраивают в редакторе сайта через паттерны и части шаблона. Тема может размещать сайдбар слева или справа либо обходиться без него. Варианты расположения панели видны на примерах из подборки бесплатных тем для WordPress.
Для каких сайтов нужен сайдбар
Нужен ли сайдбар, зависит от типа сайта и задачи его страниц. В таблице показано, какие элементы уместны на сайтах разных типов.
| Тип сайта | Нужен ли сайдбар | Что разместить |
|---|---|---|
| Интернет-магазин | Как правило, нужен хотя бы один — левый, для навигации по каталогу | Ссылки на каталог товаров, фильтр поиска, ссылка на корзину |
| Корпоративный сайт | Полезен как путеводитель по контенту | Контакты компании, соцсети, информация о выпускаемой продукции или предлагаемых услугах |
| Блог и контентный сайт | Обычно полезен | Строка поиска по сайту, перечень новых статей, форма подписки на e-mail-рассылку |
| Лендинг | Как правило, не нужен: суть посадочной страницы в одной фразе «Одна страница — одна цель», а перечень рубрик отвлекает от нее | Ссылки на разделы лендинга обычно размещают в верхнем меню |
Коротко о главном
- Сайдбар — боковая панель, которая помогает ориентироваться на сайте. Боковая панель нужна там, где посетителю важна навигация, и не нужен там, где важна одна цель страницы.
- Виды различаются расположением и числом панелей, обычно хватает одной.
- В сайдбаре размещают навигацию, поиск, подписку и призыв к действию, а облако тегов, календарь и счетчики лучше оставить за его пределами.
- Рекламу в колонке часто пропускают, а соседние блоки могут принять за рекламу, поэтому ее отделяют от навигации, а на российском сайте еще и маркируют по закону «О рекламе».
- Сайдбар полезен магазину, корпоративному сайту и блогу, а лендингу он, как правило, не нужен.
.png)
.png)
Комментарии (5)
Оставить комментарий