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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Відсоток виконаних завдань,
  • Час виконання завдань,
  • Запити до служби підтримки,
  • Кількість негативних відгуків,
  • Вірогідність наданих даних.
Crafts Council: На сайтах із простою інформаційною архітектурою «хлібні крихти» можуть бути інтегровані в заголовки

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

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

Stripe Docs поєднує кілька напрямків навігації: користувачі можуть легко пересуватись вперед, назад та в межах одного рівня за допомогою основного меню, бічної панелі, локальної навігації (якірні посилання) та «хлібних крихт»

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

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

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

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

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

Стара версія сайту Deutsche Bank: у навігації не виділена та сторінка, на якій знаходиться користувач у конкретний момент

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

Поточний рівень навігації не був виділений за замовчуванням та підсвічувався лише при наведенні курсора. (Зараз це виправили)

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

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

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

Австрійська поштова служба: бічна навігація представлена ​​праворуч на панелі «Додаткова інформація»

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

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

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

The Economist: Оскільки навігація на сайті досить плоска, достатньо вказати, до якої категорії належить конкретна сторінка

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

The Economist не використовує "хлібні крихти", але чітко вказує, де користувач знаходиться наразі - ми бачимо назву розділу поряд із заголовком. Єдине, не одразу зрозуміло, що це посилання

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

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

New England Journal of Medicine: Важко сказати, де саме знаходиться користувач в ієрархії сайту. Не відразу зрозуміло, що слово Perspective над заголовком це посилання. «Хлібні крихти» були б тут до речі

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

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

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

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

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

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

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

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

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

На сайті Стокгольмського університету роздільники направлені вліво

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

Стрілки на сайті TVM також вказують ліворуч

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

На сайті KBC стрілки направлені праворуч

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

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

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

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

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

На сайті Gothaer "хлібні крихти" з'являються в нижній частині сторінки

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

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

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

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

На сайті Allianz.de «хлібні крихти» відображаються поверх основного зображення

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

На сайті SwissLife «хлібні крихти» також розміщені поверх зображення на першому екрані

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

Сайт SDU із виділеною областю для «хлібних крихт». Стрілки між посиланнями спрямовані праворуч

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

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

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

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

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

Де ж ховаються «хлібні крихти» на сайті LVK.fi

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

Користувачам доводиться прокручувати сторінку щоразу, коли вони хочуть вивчити контент

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

Університет Гетеборга відводить під навігацію більшу частину екрану 

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

Сайт UBS: Користувачам не потрібно прокручувати сторінку, щоб побачити контент 

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

На сайті Signal Iduna "хлібні крихти" з'являються прямо під основною навігацією: прокручування не потрібно

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

Сайт BAG Switzerland: Чому б не використовувати дві групи «хлібних крихт»? Одні – для переходу між пов'язаними сайтами, інші – для переміщення по розділах усередині сайту

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

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

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

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

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

Сайт Sparkasse (стара версія): Деякі «хлібні крихти» доступні, інші – ні 

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

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

Сайт Deutsche Bahn: Деякі люди можуть подумати, що остання "хлібна крихта" - це батьківський розділ поточної сторінки

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

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

Виправлена ​​версія сайту сайту Deutsche Bahn: підкреслення відразу все змінює

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

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

"Хлібні крихти" на сайті Gov.uk не включають поточну сторінку

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

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

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

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

Ліпоруч: DocuSign Developer , праворуч: Stripe Docs

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

На сайті KBC «хлібні крихти» відображаються під головним банером

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

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

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

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

На сайті TFF.no деякі «хлібні крихти» обрізаються

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

DHL , Australia Post, SCB.se : «Хлібні крихти» переносяться на кілька рядків і займають чимало місця

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

TVM, University of Antwerp, Syddansk Universitat: у мобільній версії видимої залишається лише одна «хлібна крихта»

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

Сайт Swisscom: «хлібні крихти» залишаються видимими у десктопній версії, але зникають у мобільній

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

Стрілки всюди! Спроектувати навігацію всередині «хлібних крихт» – досить складне завдання

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

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

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

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

Сайт Європейської комісії: «хлібні крихти» із вбудованим акордеоном

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

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

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

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

«Бічні хлібні крихти» на сайті ADAC

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

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

«Бічні хлібні крихти» на сайті City of Düsseldorf

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

«Бічні хлібні крихти» на сайті Federal Administration of Statistics

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

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

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

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

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

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

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

Горизонтальне нашарування на BBC: ми можемо переміщатися між розділами на кожному рівні навігації, а також швидко визначити свою поточну позицію в ієрархії

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

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

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

Теги

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

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

New England Journal of Medicine використовує теги, але вони з'являються лише у нижній частині статті

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

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

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

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

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

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

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

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