Важливо, щоб відвідувачі на сайті швидко орієнтувалися та переміщалися сторінками. Завдяки сайдбару спрощується навігація, користувачам легше визначити необхідну рубрику чи контент.
Якщо потрібно поліпшити юзабіліті веб-сайту, в архітектуру варто вписати сайдбар. Якщо ж важливіше, щоб відвідувачі помічали лише основний контент сайту та не відволікалися на різні віджети та списки, краще обійтись без нього. Давайте розглянемо, що таке sidebar, навіщо він потрібний на сайті і як зробити його ефективним.
Приклад сайту із сайдбаром зліва
Що таке сайдбар, для чого він потрібний. Види сайдбарів
Сайдбар (sidebar) — це бічна панель сайту, яка візуально розмежована з контентом на сторінці. Завдяки її блокам відвідувачі розуміють, що та де розташовано на сайті. Ширина бічної панелі зазвичай менша за ширину основного блоку з контентом.
Між собою панелі відрізняються розташуванням. Найчастіше їх розміщують праворуч або ліворуч від основного контентного блоку на сторінці.
Особливості різних видів:
- Лівий сайдбар привертає більше користувальницької уваги, що можна пояснити, адже ми читаємо зліва направо.
- Найчастіше можна зустріти сайт із правим сайдбаром, який не відволікає увагу користувачів від контенту сторінки.
- Набагато менше сайтів із двома бічними панелями — з одного боку або з обох одразу.
- В інтернет-магазинах через особливості їхнього функціоналу буває більше двох бічних панелей одразу. Розробникам доводиться адаптувати такі сайти під десктопи та мобільні пристрої.
- На деяких сайтах роблять повністю або частково плаваючий sidebar – така панель постійно на увазі у користувача.
- Часто можна зустріти сайти без сайдбарів.
У сайдбарі розміщується інформація, за допомогою якої відвідувачу сайту найпростіше зрозуміти, що він тут знайде. Тому зазвичай бічна панель є наскрізною для всіх сторінок.
З яких елементів складається сайдбар
- Підписка на розсилку. Формує лояльну аудиторію, інформує читачів про новий контент, акції, знижки на товари та послуги.
- Список розділів та рубрик. Дозволяє користувачеві орієнтуватися у вмісті сайту і знаходити сторінку з статтями або товарами/послугами, що цікавлять.
- Перелік популярних статей, до якого входять статті з максимальною кількістю дочитувань та коментарів.
- Список нових статей. Нові публікації швидше індексуються і просуваються в пошукових системах при додаванні наскрізних посилань на них до сайдбару.
- Рядок пошуку. Користувач, який за ключовими словами знайде на сайті потрібну статтю, з більшою ймовірністю затримається та прочитає супутні матеріали. Це покращує поведінкові фактори та позитивно впливає на SEO.
- Кнопки соціальних мереж (Instagram, Twitter, Facebook тощо), додані до сайдбару, також допомагають просуванню сайту. Коли користувачі діляться статтями в соцмережах, інші користувачі переходять на посилання, читають матеріали, переміщаються сайтом. Це покращує поведінкові фактори та дозволяє ресурсу з більшою ймовірністю зайняти верхні рядки пошукової видачі.
- Call-to-action або заклик до дії. Кнопка з CTA, форма замовлення послуг або посилання на каталог, розміщені на сторінці, підвищують можливість того, що відвідувач сайту виконає конверсійну дію: замовить товар, залишить свій e-mail, номер телефону тощо.
Який сайдбар краще – лівий чи правий
Лівий sidebar традиційний для соцмереж та особистих кабінетів. Він інформативний та призначений для навігації за профілем. Навігація по сайту класично розміщується у верхній частині сторінки. Також він часто використовується на великих порталах, наприклад, на сайтах засобів масової інформації.
- Інформація в лівій бічній панелі повинна бути важливішою за контент сторінки, тоді відвідувач зверне на неї увагу. Меню навігації, розміщене там, де його одразу помітять, дозволить користувачеві поглинати контент сайту та не відволікатися.
- Верхня ліва частина сторінки є місцем, яке першим бачать відвідувачі сайту. Тому форма підписки, кнопка із закликом до дії чи рекламний блок, розміщені у лівому сайдбарі, будуть максимально ефективними.
- Для користувачів звичніше бічна панель, розташована праворуч. Її варто використовувати, якщо важливо, щоб відвідувачі сайту насамперед вивчали його основний контент. Зазвичай у правому сайдбарі розміщують список схожих, нових чи популярних статей, новини, акції та рекламні блоки.
Чого не варто публікувати у сайдбарі
Будь-які непотрібні компоненти сайдбара погано впливають на юзабіліті сайту. Вони відволікають відвідувачів від основного контенту, роблять сторінку менш привабливою, а часом знижують швидкість її завантаження:
- Хмара тегів. Незручно для навігації та займає зайве місце.
- Віджет “Календар”. Не використовується при навігації на сайті, проте займає місце.
- Блок “Останні коментарі”. Не приносить особливої користі, але погано впливає на юзабіліті сайту. Він не допомагає орієнтуватися користувачам, не дає потрібної інформації, а лише відволікає їхню увагу від дійсно важливого контенту.
- Лічильники та пузомірки. Ці елементи, як правило, розміщуються у футері.
Як краще оформити сайдбар
Сайдбар займає значну частину сторінки, тому він повинен складатися тільки з корисних елементів. Що потрібно враховувати:
- Компоненти сайдбара повинні бути добре помітні на десктопній версії сайту. Якщо це мобільна версія, користувачеві все одно доведеться прокручувати екран до потрібного місця.
- Сайдбар слід вписати в дизайн всього сайту, натомість виділити його графічно, щоб він не зливався з блоком контенту.
- Для заголовків у сайдбарі використовують шрифт дещо більший за основний.
- У заголовках розділів прописують ключові запити високої та середньої частотності – це покращує SEO сайту.
- Інформацію у бічній панелі розміщують з урахуванням її важливості. Так, у верхній частині сайдбару мають у своєму розпорядженні найзначніші компоненти: розділи сайту, перелік рубрик, посилання на профілі компанії в соціальних мережах, рядок пошуку і т.п.
- Якщо для важливої інформації не вистачає одного сайдбару, можна користуватися двома, розмістивши їх з боків від блоку з контентом. Але варто пам’ятати: що більше бічних панелей, то менше місця для самого контенту.
Які висновки можна зробити
Чи використовувати бічну панель залежить від типу сайту:
- Для хорошої навігації на сайті інтернет-магазину потрібен щонайменше один сайдбар – лівий. У ньому можна розмістити перелік посилання каталог товарів, фільтр пошуку та ін.
- Якщо це корпоративний сайт, йому також не обійтися без бічної панелі, на якій розташовуватиметься путівник за контентом. Тут користувач, що зацікавився, може швидко знайти контакти компанії, її соцмережі, інформацію про продукцію, що випускається, або пропоновані послуги та ін.
- Сайдбар не потрібен на лендингу, адже суть посадкової сторінки полягає в одній фразі “Одна сторінка – одна мета”, а перелік рубрик ліворуч або праворуч відверне увагу користувача. Посилання переходу до того чи іншого розділу лендинг зазвичай розміщуються у верхньому меню.
- На контентному сайті сайдбар, скоріше, корисний. Тут можна розмістити рядок пошуку по сайту, щоб покращити його юзабіліті, а перелік нових статей допоможе збільшити кількість їх переглядів. Форма підписки дозволить одержати нових передплатників e-mail-розсилки.
З якого боку розташувати сайдбар, ліворуч чи праворуч, залежить від завдань, які він вирішує. Не варто перевантажувати його віджетами. Бічна панель, складена тільки з корисних елементів, суттєво покращить юзабіліті сайту та допоможе його просуванню у пошукових системах.
