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

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

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

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

Навігація з навігаційних шляхів

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

Де я?

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

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

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

Переваги

Скорочує дії

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

Потрібен мінімум місця

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

Кожен користувач знає, як працювати з навігаційними крихтами

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

Коли використовувати панірувальні сухарі?

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

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

Коли слід уникати їх використання

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

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

Види панірувальних сухарів

Є три типи навігаційних крихт, про які вам слід знати: розташування, шлях і атрибут.

1 На основі розташування

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

2 На основі шляху

Ці навігаційні сухарі є важливими для навігації по історії веб-сайту. Навігація на основі шляху в основному показує кожен шлях, який відвідав користувач, щоб досягти свого поточного місцезнаходження. Зазвичай такі посилання навігації генеруються динамічно. Хоча плагіни на основі шляху можуть бути корисними для користувачів, які витрачають багато часу на перегляд веб-сайтів, вони здебільшого спантеличують більшість користувачів. Оскільки більшість відвідувачів переглядають на власний розсуд, переходячи від однієї сторінки до іншої. Кнопка «Назад» у браузері вирішує більшість їхніх потреб щодо зміни шляху. Це робить його марним, особливо для тих типів відвідувачів, які приходять на сторінку сайту, яка вже знаходиться глибоко всередині веб-сайту.

3 На основі атрибутів

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

Рекомендації щодо навігації навігаційних шляхів

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

Уникайте повторюваних елементів

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

SEO-сумісність

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

Використовуйте навігаційні сухарі як альтернативну навігацію

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

Немає сенсу посилати поточну сторінку в навігації

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

Додайте роздільники

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

Ви можете використовувати знак › для позначення ієрархії, оскільки він зазвичай використовується у таких форматах категорій, як Одяг › Сорочки › Сорочки з коміром тощо. Інші символи включають стрілки (→), прямі кутові лапки (») та косі риски (⁄).

Ознайомтеся з розміром і заповненням панірувальних сухарів

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

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

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

Якого типу слід уникати?

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

Заключні думки

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