Як проєктувати "хлібні крихти": повний посібник

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

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

Як люди орієнтуються у цифровому просторі

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

Сайт Australia Post – приклад того, як кілька видів навігації (глобальна навігація, основна навігація, хлібні крихти, бічна панель та вкладки) мають працювати разом. Користувачі можуть переходити з одного рівня на інший, легко повертатися назад за допомогою хлібних крихт, рухатися вперед горизонтальною навігацією, пересуватись по зв'язаних сторінках за допомогою бічної панелі і перемикатися між розділами за допомогою вкладок.

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

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

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

Хоча ми часто фокусуємося на таких метриках, як показник відмов чи час, проведений на сторінці, вони не дають змоги побачити повну картину. Той факт, що хтось проводить на сторінці 4 хвилини, не обов'язково свідчить про успіх; а той факт, що хтось йде протягом 30 секунд, не обов'язково говорить про провал.

Щоб оцінити, наскільки добре відвідувачі сайту розуміють та використовують навігацію (і пошук), необхідно відстежити, наскільки успішно вони справляються зі своїми завданнями. Сприймайте це як KPI вашого дизайну. Зверніть увагу на такі метрики:

• Відсоток виконаних завдань,
• Час виконання завдань,
• Запити до служби підтримки,
• Кількість негативних відгуків,
• Вірогідність наданих даних.

Навігація, яка дозволяє рухатися вперед

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

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

Навігація, яка дозволяє рухатись назад

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

У таких випадках ми зрештою рухаємось назад. Ми повертаємося, щоб спробувати зорієнтуватися, вибрати маршрут та знову рухатися вперед.

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

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

Поточний рівень навігації (в такому випадку Sparen und Anlegen) не було виділено за умовчанням. Користувачі могли побачити, де вони знаходяться, тільки при наведенні курсора в меню, що розкривається (сторінка Online Weltpapier Sparplan), що створювало додаткові труднощі при пересуванні сайтом.

Навігація, яка дозволяє пересуватись горизонталлю

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

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

Коли «хлібні крихти» потрібні

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

Так, наприклад, справа з The Economist. Сайт містить багато розділів, але тут немає багаторівневої навігації. Насправді інформаційна архітектура досить плоска: майже весь контент розміщується одному рівні. 

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

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

Коли користувач потрапляє на сайт New England Journal of Medicine, йому важко зорієнтуватися та зрозуміти, де саме він знаходиться в інформаційній ієрархії. Тут немає чіткого позначення поточного розділу. Куди йти, якщо ви хочете вивчити більше статей на задану тему? Як виявилося, слово Perspective над заголовком насправді є клікабельною назвою розділу, але оскільки його набрано світло-сірим шрифтом, воно не виглядає як інтерактивний елемент.

У багатьох складних проєктах є той чи інший різновид «хлібних крихт». Їх часто додають, щоб допомогти користувачам, які потрапили на сайт зі сторінки результатів пошуку або зі стрічки новин. Такі відвідувачі не мають жодного попереднього уявлення про сайт та про те, як він організований. "Хлібні крихти" допомагають людям швидко зрозуміти, куди вони потрапили й зорієнтуватися в контенті.

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

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

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

Коротка історія заплутаних «хлібних крихт»

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

Але в який бік вони мають насправді вказувати? На попередній пункт (ліворуч) чи наступний (вправо)?

На сайті Стокгольмського університету стрілки, що розділяють «хлібні крихти», дивляться вліво. Оскільки користувачі вивчають їх праворуч наліво, іконки фактично вказують, у якому розділі знаходиться сторінка чи підрозділ.

Аналогічно виглядають стрілки на сайті TVM. Останній пункт позначений як "Поточна сторінка" (Huidige pagina). Швидше за все, деякі користувачі подумають, що цей підпис належить до того посилання, на яке вказує стрілка.

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

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

Розміщуйте «хлібні крихти» під основною навігацією 

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

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

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

Крім того, тут виникає плутанина із заголовком розділу. Ми бачимо під «хлібними крихтами» напис Standard shipping, але він не відображається в ланцюжку посилань. Насправді це лише один із підрозділів на поточній сторінці, а її заголовок розташовується на банері (Domestic prices). Виходить, «хлібні крихти» належать до банера, а не до підрозділу під ним. Це може спантеличити деяких користувачів.

На сайті Allianz.de, навпаки, «хлібні крихти» розташовуються поверх основного зображення. Вони більш помітні та їх простіше пов'язати із заголовком сторінки. Єдине, що я додала б, — підкреслення, що вказують на те, що перед нами набір посилань.

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

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

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

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

«Хлібні крихти» повинні бути видимими без прокручування

Однак навіть якщо "хлібні крихти" розташовуються над основним заголовком, це не гарантує, що досвід користувачів буде комфортним. Чим далі ми відсуваємо їх від верхньої частини сторінки, тим складніше їх помітити. Це може здатися перебільшенням, але погляньте на скриншот нижче (сайт LVK.fi). Чи зможете визначити, де ховаються «хлібні крихти»?

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

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

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

Зворотний приклад – сайт фінансового холдингу UBS. Користувачам не потрібно прокручувати сторінку, щоб побачити контент. Навігація послідовна та логічна. Люди можуть відразу вивчити вміст розділів у бічній панелі. Тому можна обійтися і без "хлібних крихт". Так, тут немає гарної обкладинки, але іноді, якщо ми хочемо донести до аудиторії важливу інформацію, зображення можуть заважати. Нудно? Можливо. Але ефективно.

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

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

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

Не відключайте «хлібні крихти»

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

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

На сайті Sparkasse (стара версія, зараз виправили) «хлібні крихти» Startseite (Домашня сторінка) та Karten (Карти) є посиланнями, а розділи між ними – ні. Для такого рішення можуть бути вагомі причини, але воно суперечить очікуванням користувачів.

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

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

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

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

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

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

Якою має бути остання «хлібна крихта»?

Як ми з'ясували в попередньому розділі, одна маленька деталь, яка часто відрізняє дизайн «хлібних крихт», — наявність/відсутність текстової позначки поточної сторінки. Зрештою, вона і так позначена заголовком, який розташовується безпосередньо під ними, чи потрібно його дублювати? 

Ось два приклади: у першому (DocuSign Developer) «хлібні крихти» включають поточну сторінку, а в другому – ні (Stripe Docs).

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

На сайті KBC зв'язок між заголовком і «хлібними крихтами» може бути не таким очевидним, як у попередніх прикладах. Якби ми прибрали текстову мітку поточної сторінки, то користувачі могли б припустити, що вони знаходяться на сторінці Self Banking, хоча це не так. Зверніть увагу, що заголовок у «хлібних крихтах» збігається із заголовком сторінки.

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

Не обрізайте текст і використовуйте акордеони

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

Frontier Motor Insurance  замінює деякі пункти крапкою. Попри видалення заголовка, посилання залишається і по ньому можна натиснути. Обрізаючи «хлібні крихти», подібним чином ми ускладнюємо користувачам розуміння повного шляху.

Один із варіантів — відображати «хлібні крихти» цілком у кілька рядків. Звичайно, у цьому випадку вони займуть чимало місця по горизонталі та вертикалі. Тому так робити найчастіше не рекомендується.

В ідеалі варто зробити «хлібні крихти» видимими настільки, наскільки це необхідно, без шкоди для контенту.

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

На сайтах City of Düsseldorf і Federal Statistical Office Switzerland користувачам досить складно розібратися, як взаємодіяти з навігацією через велику кількість стрілок, що вказують у різні боки.

Хороший компроміс – розмістити всі "хлібні крихти" в один рядок, без перенесення. Наприклад, Deutschland Auswärtiges Amt вибирає саме такий підхід: щоб побачити весь навігаційний ланцюжок, користувачам необхідно свайпнути вліво. Так назви розділів не обрізаються, але для того, щоб їх прочитати, потрібна горизонтальне прокручування. Той самий патерн вибирає ADAC.

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

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

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

«Бічні хлібні крихти»

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

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

По суті, це альтернатива бічним панелям, яка займає менше місця і з'являється лише тоді, коли це потрібно.

City of Düsseldorf використовує схожий шаблон. На перший погляд здається, що у списку, що випадає, з'являються не пов'язані з поточної сторінки, а родинні розділи батьківської категорії, проте це не так. Дивно, але останній елемент у навігаційному ланцюжку — не поточна сторінка, а розділ «Інші теми», який також є список, що випадає.

Звичайно, не обов'язково використовувати «бічні хлібні крихти» лише на останньому рівні. На сайті Federal Administration of Statistics їх можна знайти у кожному з пунктів глобальної навігації. Вони допомагають користувачам переміщатися між пов'язаними сайтами. На жаль, на мобільних пристроях вони повністю зникають.

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

Лише «хлібних крихт» недостатньо

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

Розгляньмо, як можна ефективно поєднувати різні рішення.

Горизонтальне нашарування

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

Бічна панель навігації

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

Теги

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

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

New England Journal of Medicine використовує і теги, і бічну панель навігації. Пов'язані статті відображаються у бічній панелі, а теги – наприкінці сторінки. І хоча постійним користувачам сайту це рішення може здаватися звичним, для випадкових відвідувачів воно не є таким очевидним.

"Хлібні крихти"

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

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

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

Підсумковий чек-ліст

Отже, ось кілька важливих рекомендацій, які слід враховувати під час проєктування «хлібних крихт»:

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