Найкращі практики та приклади навігації по бренду

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

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

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

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

Типи розвалу

Шлях

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

Розташування

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

Clearleft Ltd

Атрибут

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

Cars.com

Навіщо використовувати сухарі?

• Велика юзабіліті

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

• Легко відстежити

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

• Усуньте додаткові кліки

  Breadcrumbs дозволяють користувачам переходити з одного рівня веб-сайту на інший без використання “вперед” або “назад” на браузері. Крім того, сухарі виключають необхідність постійного звернення до основної навігації.

• Показує ієрархію користувачів

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

• Візуально приємний

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

• Надає додаткову довідку

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

• Знизити ставки відмов

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

• Створює інтерес

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

Краща практика

• Використовуйте Breadcrumbs у верхній частині сторінки

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

• Використовуйте хлібні крошки послідовно

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

• Хлібні тріски повинні деградувати

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

• Стилізовані хлібні крошки належним чином

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

• Чітко класифікуйте сторінки

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

• Чітко відокремте кожен рівень

  Переконайтеся, що користувачі можуть розрізняти різницю між кожним колом. Найбільш поширеним роздільником між рівнями є символ "більше ніж" (>). Інші хороші роздільники включають котирування з правим подвійним кутом (»), косими рисами (/) і стрілками (→). Якщо використовується звичайний текст, використовуйте лише один. (»Є більш привабливим і ефективним, ніж >>)

• Виділіть поточну сторінку

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

• Не створювати посилання на поточну сторінку

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

• Не використовувати хлібні кроки як заголовок сторінки

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

• Хлібні кроки не замінюють первинну навігацію

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

Великі приклади хлібних крихт

Vitra Direct

Велосипеди Trek

Illy

SiteInspire

Міа і Меггі

Intridea

Дизайн людей

Roxy

Блік

SitePoint

Ціль

Walmart

1-800-Квіти

Найкраща покупка

Amazon.com

Амбари і благородні

Кінець земель

Apple

Google

Чейз

AbsolutePunk.net

Littman Bros. Освітлення

Guardian.co.uk

ОБЛАСТЬ 17

Wufoo

Дівчина скаути середнього Теннессі

Колектив Глазго

Первісток

Bell Canada

Grooveshark

Devlounge

Про автора - Шей Хоу є професійним дизайнером Інтернету та інтерфейсу користувача, що проживає в Чикаго, штат Іллінойс. Він пише про веб-дизайн у своєму власному блозі на лекціях і хотів би почути від вас на Twitter. Будь ласка, не соромтеся, повідомте йому привіт!