Докладне керівництво по юзабіліті сайдбара

453

З цієї статті ви дізнаєтеся все про сайдбарах: чи потрібні вони, скільки бічних панелей має бути на сайті, з якого боку їх робити, які елементи в них бути.

Навіщо говорити про бокових панелях сайтів

Сайдбар або бічна панель — частина структури веб-сторінки, яка знаходиться з правого або лівого боку і містить функціональні, інформаційні та конверсійні елементи.

Докладне керівництво по юзабіліті сайдбара

У бічних колонках вебмастера публікують стандартні елементи. Ось приклади:

  • Навігаційне меню.
  • Кнопки фолловинга.
  • Віджети соціальних мереж.
  • Рекламні блоки.
  • Віджети останніх публікацій.
  • Віджети популярних публікацій.
  • Форми підписки.
  • Біографія автора або інформація про компанії.
  • Посилання на архіви.

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

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

У блогах «Текстерры», HubSpot і MOZ немає сайдбара. У «Шалених Котиків», Cossa і Webpromoexperts бічна панель праворуч. У «Стрічки.ру» і Nielsen повноцінний сайдбар ліворуч. Є приклади сайтів і блогів з двома бічними панелями.

А чи потрібні взагалі бічні панелі? Які функції вони виконують, як ефективно їх використати, яким повинен бути ідеальний сайдбар? Давайте розбиратися.

Докладне керівництво по юзабіліті сайдбара

Читайте також: Чек-лист з юзабіліті: 200+ пунктів на перевірку

Потрібна бічна панель на сайті

У «Шалених Котиків» бічна панель знаходиться праворуч. На внутрішніх сторінках в ній є форма підписки, інформація про «Котиках» та меню навігації по категоріям.

Докладне керівництво по юзабіліті сайдбара

Приблизно 40 або 45 % відвідувачів сайту колег не бачать бічну колонку. Вся справа в адаптивному дизайні: із-за нього на екранах мобільних сайдбар перетворюється в боттомбар. Простіше кажучи, бічна панель зміщується в нижню частину екрану мобільного пристрою.

Докладне керівництво по юзабіліті сайдбара
Навіть якщо на вашому сайті є сайдбар, майже половина користувачів його не бачить. На сайтах з адаптивним дизайном при перегляді з мобільних пристроїв бічна панель переміщається в нижню частину екрану.

Якщо користувачі смартфонів і планшетів не бачать сайдбар, чи потрібен він користувачам десктопів? Щоб відповісти на це питання, потрібно визначити функціональність цього елемента.

Бічна панель структурує сторінку при перегляді на екрані стаціонарного ПК. Завдяки цьому виділяються зона основного вмісту і допоміжна область. Структура допомагає користувачам миттєво сканувати сторінку і знаходити потрібні дані. Наприклад, відразу після приземлення на сторінку блогу в ЖЖ користувач знає, де знаходиться основна інформація, а де можна знайти меню, посилання на інші публікації та архіви.

Докладне керівництво по юзабіліті сайдбара

Читайте також: Як виправити типові помилки при роботі з WordPress

Завдяки бічній панелі власник сайту отримує можливість опублікувати на сторінці допоміжні елементи без шкоди для основного вмісту. Меню, конверсійні форми, списки останніх публікацій і навіть реклама менше відволікають користувача від читання, оформлення замовлень або інших дій головної сторінки.

У структурування сторінки є побічні ефекти. Користувачі активніше взаємодіють із зоною основного контенту, ніж з допоміжним блоком. Наприклад, на тестової майданчику з бічної колонкою праворуч клікабельність реклами AdSense під основним контентом становить 0,87 %.

Докладне керівництво по юзабіліті сайдбара

CTR рекламних блоків в сайдбарі не перевищує 0,1 %. У бічній колонці реклама знаходиться на першому екрані. Тобто користувач бачить її відразу після приземлення на сторінку. В області основного вмісту блок AdSense знаходиться під публікацією. Щоб побачити його, серферу потрібно скролл майже до кінця сторінки.

Докладне керівництво по юзабіліті сайдбара

Маркетолог Брайан Харріс протестував ефективність сайдбара на своєму блозі. Конверсія сторінки без бічній панелі зросла на 26 % порівняно з базовою сторінкою. За даними Харріса, CTR елементів в сайдбарі його блогу становить 0,3 %.

Фахівці маркетингового агентства Impact після видалення сайдбара зафіксували зростання конверсії сторінок блогу на 71 %.

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

Ще один недолік використання сайдбара — він все-таки відволікає від основного вмісту. Якщо бічна панель сайту перевантажена яскравими елементами, наприклад, фото, анімованої рекламою, конверсійними формами, відвідувач може не дочитати публікацію.

Наприклад, сайдбар в блозі відомого маркетолога Хайді Коен по здатності привертати увагу успішно змагається з зоною головного контенту. У бічній панелі цього ресурсу працюють цілих 14 елементів.

Докладне керівництво по юзабіліті сайдбара

Варто використовувати сайдбар? Так, якщо ви хочете поліпшити юзабіліті для користувачів десктопів. У бічній колонці можна помістити основне або додаткове навігаційне меню. Завдяки сайдбару ви отримуєте простір для публікації допоміжних віджетів, наприклад, плагінів соціальних мереж, форм підписки, архівів і посилань на популярні публікації.

Відмовтеся від бічній панелі, якщо хочете, щоб користувачі фокусували увагу виключно на головному контенті. Відсутність сайдбара робить максимально схожим перегляд сайту на екранах різних пристроїв. Тобто користувачу десктопа не доведеться звикати до відсутності бічній панелі при перегляді ресурсу на смартфоні.

Читайте також: Запитай користувача: огляд сервісу Askusers

Скільки сайдбаров повинно бути на сайті

Жодного або один. Використовувати більше однієї бічної колонки в епоху мобільного веба і перевантаженості користувачів інформацією не потрібно. Навіть один сайдбар займає десятки відсотків площі сторінки. Якщо використовувати дві бічні панелі, вони займають до половини корисного простору сторінки. Це погіршує умови для взаємодії з основним контентом.

Зверніть увагу на внутрішні сторінки сайту «Ведомостей». Повноцінна бічна колонка знаходиться праворуч. У лівій частині сторінки знаходяться врізки та анонси пов’язаних публікацій. Ці елементи схожі на другий сайдбар.

Докладне керівництво по юзабіліті сайдбара

В результаті головний контент виявляється буквально втиснутими між допоміжними об’єктами. Очевидно, що це негативно впливає на користувальницький досвід. Читачеві доводиться буквально шукати очима наступний абзац, оскільки він втрачається на тлі анонсів і врізок ліворуч. Крім того, анімована реклама, анонси та навіть яскраві кнопки шерінгу праворуч відволікають від читання.

Мені в буквальному сенсі боляче читати публікації на сайті «Ведомостей». Створюється враження, що це не ресурс солідного ділового видання, а олдскульний блог манімейкера з початку 2000-х.

Порівняйте внутрішні сторінки сайту «Ведомостей» зі сторінками публікацій «Лайфхакера». На цьому сайті одна бічна колонка праворуч. У ній є реклама і блок кращих публікацій. Анонси статей виносяться під публікацію в блок рекомендацій.

Докладне керівництво по юзабіліті сайдбара

Цікавим способом вирішив проблему сайдбара Олександр Алаєв. На головній сторінці блогу є бічна колонка зі стандартними віджетами. На сторінках публікацій сайдбара немає. Це дозволяє користувачам зосередитися на основному контенті.

Докладне керівництво по юзабіліті сайдбара

Читайте також: Підвищуємо конверсію: пошук по сайту як частина воронки продажів

Але Олександр допустив поширену помилку. Він використовував шаблон сторінки без бічної колонки, а не спеціальну тему без сайдбара. У результаті рядок вийшла занадто довгою, а це негативно позначається на читабельності контенту.

Не використовуйте більше одного сайдбара. Це погіршує користувальницький досвід: відволікає відвідувачів, знижує читабельність контенту.

Є прекрасні спростування останньої рекомендації. Зверніть увагу на десктопні версії сайтів Facebook і «Вконтакте». На першому є три сайдбара, а на другому два. Ресурси працюють більш ніж успішно. Але щоб бути успішним і зручним з двома бічними колонками, потрібно мати популярність і магнетизм «Фейсбук» і «Вконтакте».

Де повинен бути сайдбар: праворуч або ліворуч

Можливі обидва варіанти. Вибирайте зручніший у відповідності з типом сайту, потребами користувачів, завданнями, які повинна вирішувати бічна колонка.

За даними Nielsen, користувачі приділяють більше уваги верхній лівій частині сторінки. Відразу після приземлення відвідувачі миттєво сканують лендінгем. Руху погляду серфера по сторінці можна описати з допомогою F-патерну.

Докладне керівництво по юзабіліті сайдбара

Використовуйте бічну колонку праворуч, щоб користувачі фокусувалися на основному тексті сторінки. Ця рекомендація справедлива для контент-проектів: особистих і корпоративних блогів, галузевих ресурсів. Сайдбар праворуч використовують vc.ru, Cossa, «Лайфхакер» та інші популярні проекти.

Докладне керівництво по юзабіліті сайдбара

Тезисний обґрунтування використання правої бічної колонки:

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

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

Докладне керівництво по юзабіліті сайдбара

Бічна колонка зліва — відмінне рішення для веб-сервісів. Користувачам зручніше, коли меню керування та навігації знаходяться в лівій частині екрана. Зверніть увагу на сервіси Google і «Яндекса», наприклад, Gmail, Tag Manager, «Метрику». У веб-інтерфейсі цих служб навігаційні елементи знаходяться в лівому сайдбарі.

Докладне керівництво по юзабіліті сайдбара

Читайте також: Повне керівництво по оптимізації конверсії: як підвищити конверсію, залучити нових клієнтів і уникнути помилок

Лівий сайдбар часто використовують великі контент-проекти. Сайти ЗМІ поміщають на лівій бічній панелі меню навігації. Яскравий приклад — «Стрічка.ру». Також видання публікують бічній колонці посилання на актуальні або популярні публікації і рекламні блоки.

Докладне керівництво по юзабіліті сайдбара

Наступні тези пояснюють переваги бічній панелі зліва:

  • Користувач повинен звертати увагу на інформацію в боковій колонці навіть на шкоду основного вмісту.
  • Меню навігації і управління має бути на самому видному місці. Користувач зможе переміщатися по сайту, не відволікаючись від головної інформації.
  • Рекламний блок або конверсійна форма в сайдбарі зліва помітніше. Заради монетизації можна пожертвувати інтересами користувача.

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

Хочете аргумент на користь сайдбара зліва? В блозі Nielsen Norman Group бічна колонка розташована з лівого боку. Ця компанія собаку з’їла на юзабіліті сайтів.

Яку інформацію варто публікувати в сайдбарі

Бічна панель забирає площа біля основного вмісту веб-сторінки. Щоб жертва не була марною, публікуйте в сайдбарі корисні для користувачів функціональні елементи та інформацію. Що саме може знадобиться користувачеві в боковій колонці сайту?

Елементи навігації і управління

Це чи не єдиний елемент, який сам по собі виправдовує використання бічної колонки. Навігаційне меню покращує юзабіліті будь-якого сайту: від ЗМІ або блогу до інтернет-магазину і веб-сервісу.

Якщо єдиний або головне навігаційне меню знаходиться в боковій колонці, розташуйте його як можна вище. Завдяки цьому користувачі не заблукають на сайті, швидко знайдуть потрібні розділи і конкретні публікації.

У «Стрічки.ру» в боковій колонці знаходиться головне і єдине меню навігації. На сторінках категорій сайту «Зв’язкового» в сайдбарі знаходяться кілька навігаційних елементів. У бічній колонці сайту «Евросети» опубліковані навігаційні посилання на основні категорії товарів.

Докладне керівництво по юзабіліті сайдбара

Якщо основне меню сайту знаходиться в шапці сайту, у бічній колонці можна використовувати допоміжні навігаційні елементи. Наприклад, якщо в шапці є посилання на основні сторінки і розділи, в сайдбарі будуть корисними фільтри, посилання на рубрики публікацій, блоги конкретних авторів. На сайті madcats.ru головні навігаційні посилання у верхній частині сторінки, а меню категорій — в боковій колонці.

Докладне керівництво по юзабіліті сайдбара

Читайте також: 110 способів підвищити конверсію і кілька інструментів, які все псують

Соціальні віджети

Мова йде про кнопках фолловинга і віджетах спільнот. Блок «Стеж за мною» у верхній частині бічної колонки — хороша альтернатива соціальних кнопок в шапці сайту. В сайдбарі кнопки залишаються помітними, але не перевантажують хедер. Важлива перевага — на бічній панелі простіше додати заклик до дії. В шапці він займе багато місця.

Докладне керівництво по юзабіліті сайдбара

Наскільки ефективні кнопки підписки на новини в соцмережах? Вище згадувався експеримент у блозі VideoFruit, в ході якого клікабельність віджетів у сайдбарі склала 0,3 %. На тестової майданчику за 30 днів я отримав 10 переходів з блоку «Стеж за мною» соціальні паблики.

Докладне керівництво по юзабіліті сайдбара

CTR блоку кнопок в боковій колонці тестової майданчику за 30 днів склав 0,097 %. Низька клікабельність говорить про неефективність соціального віджета в якості інструменту залучення відвідувачів паблики тільки в конкретному випадку.

Наскільки все-таки доцільно публікувати блок фолловинга в сайдбарі? Можна міркувати так. Кнопки підписки на паблики в соціальних мережах на сайті потрібні. Вони повинні знаходитися на помітному місці. Зазвичай це шапка або верхня частина бічної колонки. В сайдбарі кнопки не займають багато місця, візуально не перевантажують хедер і не відволікають від основного вмісту.

У бічній колонці сайтів часто можна побачити віджети соціальних спільнот, наприклад, плагін «Сторінка» або віджет сторінки «Вконтакте». Соціальні плагіни цього типу зазвичай містять конверсійний елемент, наприклад, кнопку «Підписатися» або «Подобається».

Докладне керівництво по юзабіліті сайдбара

Завдяки візуальної привабливості і відносно великим розміром соціальні плагіни повинні бути більш ефективними у порівнянні з блоком «Йди за мною». Чи Так це насправді?

Для експерименту віджет сторінки «Вконтакте» був встановлений в бічну колонку тестового ресурсу. За період з 8 квітня по 7 травня сайт відвідали 10 234 людини. За цей період за допомогою віджету на сторінку підписався один користувач. CTR кнопки «Підписатися на новини» склав 0,009 %.

Докладне керівництво по юзабіліті сайдбара

Ще три людини перейшли з сайту в співтовариство «Вконтакте» за посиланнями віджета. Загальну картину це не змінює — для тестової майданчику соціальний плагін виявився неефективним інструментом.

На ілюстрації вище відображаються графіки переглядів користувачів «Вконтакте» і учасників групи. По всій видимості, лічильник вважає переглядом кожне відвідування сторінки з віджетом залогиненными «Вконтакте» користувачами.

Наприклад, 9 травня статистика зафіксувала 101 перегляд віджета користувачами «Вконтакте». Тестовий майданчик у цей день відвідали 350 осіб. Якщо б мова йшла про активних переглядах, з соціальним плагіном повинні цілеспрямовано взаємодіяти майже 30 % відвідувачів сайту. Це нереально.

Виходить, соціальні плагіни в сайдбарі марні? Немає, так як не можна екстраполювати результати тестового ресурсу з відвідуваністю 300 – 400 осіб на добу на всі сайти. Крім того, соціальний віджет служить не тільки для конверсії відвідувачів в підписники сторінки.

По-перше, плагін в сайдбарі може підвищити візуальну привабливість сторінки і зробити її більш інформативною. Зверніть увагу на трансляції стрічки в «Твіттері» на сайтах ЗМІ. По-друге, соціальний віджет можна вважати пузомеркі. Власник сайту демонструє відвідувачу популярність ресурсу в соцмережах.

Докладне керівництво по юзабіліті сайдбара

Читайте також: Як зробити калькулятор або форму для сайту: огляд 4 спеціальних конструкторів

Інформація про автора або про компанію

Розповідь про автора та ідейному натхненники можна побачити на бічних панелях ресурсів, пов’язаних з Нілом Патель: neilpatel.com і quicksprout.com. З російськомовних колег інформацію про компанії в колонці праворуч пропонують багаторазово згадані «Котики».

Докладне керівництво по юзабіліті сайдбара

Пан Патель стверджує, що його біографія в сайдбарі допомагає будувати спільноту і підвищує лояльність користувачів. Ніл допускає публікацію інформації про автора під статтею, але вважає цей спосіб неефективним. Він пояснює це тим, що не всі користувачі читають матеріал або перегортають сторінку до кінця.

Інформація про Пателе на його сайтах — це соціальні докази і продає елемент одночасно. Інші блогери і компанії можуть брати на озброєння цей інструмент. Обов’язково протестуйте різні варіанти зображень. Наприклад, портрет трьох котів на сайті «Котиків» виглядає набагато краще фото Пателя на сайті Quicksprout. Фото Нілу сильно відволікає від читання, а малюнок котів викликає позитивні емоції і не дратує.

Докладне керівництво по юзабіліті сайдбара

Конверсійні елементи

Як конверсійних елементів в сайдбарі найчастіше використовують форми підписки. Приклади можна побачити на сайтах і в блогах Webpromoexperts, Cossa, Searchengines.ru, Shopolog та інших.

Докладне керівництво по юзабіліті сайдбара

Ефективні форми підписки у бічній колонці? За даними сервісу розсилок Aweber, коефіцієнт конверсії форми підписки на конкретному сайті склала 0,4 %. Спливаюче вікно з формою підписки на цьому ж сайті забезпечило конверсію 5,5 %. Брайан Харріс VideoFuit зауважив, що статична форма підписки у сайдбарі забезпечує коефіцієнт конверсії 0,3 %. Плаваюча форма підписки у бічній колонці забезпечила зростання конверсії до 0,8 %.

Тобто коефіцієнт конверсії форми підписки у представлених випадках склав менше 1 %. Варто публікувати конверсійний елемент в боковій колонці з урахуванням низької ефективності цього інструменту? Вирішуйте самі. Тільки не забудьте про згаданих вище експериментах VideoFruit і Impact, в ході яких відмова від сайдбара підвищив коефіцієнт конверсії сторінок на десятки відсотків.

Реклама

Сайти ЗМІ і блогери дуже часто публікують у сайдбарах рекламу. Більш того, системи контекстної реклами вважають розміщення блоків у сайдбарі ефективним. AdSense рекомендує публікувати оголошення на бічній панелі одразу під меню навігації.

Докладне керівництво по юзабіліті сайдбара

Читайте також: 9 помилок в верстці статті, з-за яких ви втрачаєте читачів

За моїми спостереженнями, рекламні блоки AdSense в сайдбарі неефективні. За кілька місяців тестування прямокутник 300 250 забезпечив CTR 0,06 %, а хмарочос 300 на 600 забезпечив клікабельність 0,11 %. Реклама в блоці рекомендованого контенту, який знаходиться під публікацією, забезпечила CTR 0,87 %.

Нільсен стверджує, що звичка вебмайстрів розміщувати рекламу в правій бічній колонці змушує користувачів уникати всіх елементів в сайдбарі. Тому експерти Nielsen не рекомендують публікувати на бічній панелі не тільки рекламу, а й будь-які візуальні елементи, які нагадують банери і оголошення.

До речі, на початку 2016 року Google видалив зі сторінок пошукової видачі правий сайдбар з оголошеннями. Найбільший пошуковик у світі показує оголошення над і під результатами пошуку. Тільки для деяких запитів в правому сайдбарі відображаються оголошення Google PLA.

У рунеті більше 20 % серферів використовують блокувальники реклами. Коли програма блокує оголошення, зовнішній вигляд бічній панелі псується. Наприклад, це відбувається, якщо код оголошення вставлений в стандартний віджет WordPress «Текст». У цьому випадку користувачі бачать в сайдбарі порожній контейнер віджета.

Докладне керівництво по юзабіліті сайдбара

За даними рекламної платформи Infolinks, відвідувачі сайту швидше помічають, охоче взаємодіють і вважають менш настирливу рекламу, яка розташована не у традиційних зонах публікації оголошень. Це означає, що розташовану в сайдбарі рекламу користувачі вважають настирливої і не помічають її.

Чи є аргументи на користь публікації оголошень на бічній панелі? Так. По-перше, текстовий блок в сайдбарі практично не заважає сприймати основний контент. Публікувати його збоку буде чесніше по відношенню до читача, ніж вставляти комерційні посилання в текст публікації.

По-друге, якщо опублікувати блок AdSense в боковій колонці так, щоб він знаходився на першому екрані, ви отримаєте дохід навіть без кліків користувачів. Система часто крутить у блоках, які знаходяться на першому екрані, оголошення з оплатою за покази.

Рекламна модель монетизації сайтів і блогів вмирає. Це ще один привід відмовитися від розміщення банерів в боковій колонці.

Анонси вмісту

Складно знайти бічну панель без анонсів контенту. Віджети останніх, популярних, коментованих публікацій є на сайтах практично будь-якого ЗМІ.

Докладне керівництво по юзабіліті сайдбара

Мета публікації добірки контенту зрозуміла: користувач переходить за посиланнями, глибина перегляду і час сесії збільшується. У видавця з’являється більше можливостей залучити відвідувача у взаємодію і сконвертувати його.

Але блок популярних публікацій на бічній панелі може відволікати користувача від читання поточної публікації. Видавець пропонує відвідувачу перейти по посиланню в той момент, коли він ще не переглянув поточну сторінку.

Приклад абсурдного використання анонсу контенту можна знайти на сайті Autonews. Користувач бачить блок пов’язаних публікацій із заголовком «Читайте також» поряд з хедлайном основний публікації.

Докладне керівництво по юзабіліті сайдбара

На сайті CNN такої помилки немає. Рекомендований вміст з’являється в боковій колонці якраз навпроти останнього розділу головною публікації.

Докладне керівництво по юзабіліті сайдбара

Наскільки ефективні анонси контенту в боковій колонці? На тестової майданчику CTR віджета пов’язаних публікацій Relap в сайдбарі склала 2,04 %. Аналогічний показник для віджета під основним контентом склав 32,49 %.

Докладне керівництво по юзабіліті сайдбара

Читайте також: Hot or not: 15 сервісів для створення теплових карт

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

  • Не анонсируйте контент за допомогою банерів. Якщо анонс схожий на рекламу, користувачі будуть його уникати.
  • Не розміщуйте збірки у верхній частині бічної колонки. Дозвольте відвідувачу прочитати основну публікацію, а потім пропонуйте йому інший контент.
  • Подбайте про релевантності контенту. На новинних сайтах доречно опублікувати блок «Свіжі публікації», в блозі підійдуть пов’язані статті, а в інтернет-магазині можна анонсувати схожі товари.
  • Експерти Nielsen рекомендують акуратно використовувати на бічній панелі мініатюри зображень. Вони роблять анонс схожим на рекламу і зменшують CTR.
  • Пропонуйте користувачам збірки корисного чи вічнозеленого контенту.
Докладне керівництво по юзабіліті сайдбара

Чого точно не повинно бути в сайдбарі

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

Хмара тегів

Цей віджет родом з минулого, коли мета-тег keywords ще працював, а вебмастера додавали по п’ять міток до кожної публікації. Хмара тегів займає багато місця, а для навігації використовувати його незручно.

Докладне керівництво по юзабіліті сайдбара

Віджет «Останні записи» на головній сторінці блогу

Свіжі публікації можна анонсувати на головній і в розділах корпоративного сайту, на новинних ресурсах, на сторінках рубрик і публікацій. На головній сторінці блогу користувач бачить список постів у зворотному хронологічному порядку, тому додатковий віджет тут не потрібен.

Докладне керівництво по юзабіліті сайдбара

Віджет «Календар»

З точки зору елемента навігації календар марний. Зате він займає багато місця.

Докладне керівництво по юзабіліті сайдбара

Віджет «Мета» на сайтах під управлінням CMS WordPress

Цей візуальний елемент варто використовувати тільки в одному випадку: якщо ви хочете, щоб на сайті зареєстровані користувачі. В інших випадках посилання на адмінку і WordPress.org на сайті не потрібні. А RSS-фід можна анонсувати по-іншому.

Докладне керівництво по юзабіліті сайдбара

Лічильники, пузомірки

Якщо ці елементи і потрібні, місце їм у футері.

Докладне керівництво по юзабіліті сайдбара

Читайте також: Що робити, коли сверблять руки: поради та лайфхаки для просунутих користувачів WordPress

Блок «Останні коментарі»

Віджет «Свіжі коментарі» захаращує сайдбар і погіршує юзабіліті сайту.

Докладне керівництво по юзабіліті сайдбара

Зверніть увагу, за допомогою системи коментування Disqus можна відображати актуальні дискусії під головною публікацією.

Докладне керівництво по юзабіліті сайдбара

Не публікуйте на бічній панелі будь-які елементи, які можуть відволікати аудиторію від основного вмісту.

Що робити, якщо ви не уявляєте сайт без бічній панелі

Подумайте двічі. Згадайте, що близько половини відвідувачів вашого сайту не бачать сайдбар. На екранах мобільних пристроїв він перетворюється в боттомбар. Зверніть увагу на дослідження, виконані з допомогою айтрекинга. Нільсен стверджує, що з-за реклами у користувачів розвинулася сліпота по відношенню до всіх елементів в бічних колонках. За даними VideoFruit, CTR будь-якого віджетів у сайдбарі не перевищує 0,3 %.

Якщо ви все-таки не відмовляєтеся від бічній панелі, зробіть її максимально корисною для аудиторії. Публікуйте в сайдбарі навігаційні елементи: основне або допоміжне меню, список рубрик, фільтри товарів. Якщо в шапці немає форми пошуку, помістіть її у верхню частину бічної колонки. Також запропонуйте користувачам збірки контенту, соціальні віджети. Поекспериментуйте з блоками реклами.

Слідкуйте, щоб в боковій колонці сайту було не більше 3 – 5 елементів або віджетів. Переконайтеся, що сайдбар не забирає надто багато простору в області основного вмісту. Рекомендована ширина бічної панелі — від 20 до 40 % від загальної ширини сторінки. Якщо ви використовуєте кілька сайдбаров, їх сукупна ширина не повинна бути більше 40 %.

В коментарях поділіться досвідом використання бічної колонки. Ваші користувачі переходять за посиланнями в сайдбарі, натискають на оголошення? З якого боку знаходиться бічна панель на вашому сайті? Чи готові ви повністю відмовитися від сайдбара?