Проєктуємо навігацію: 17 найкращих практик

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

Зробіть навігацію видимою

1. Відобразіть навігацію на великих екранах

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

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

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

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

2. Розташуйте меню там, де його звикли бачити користувачі

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

Типи меню та очікуване розташування:

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

3. Виберіть для посилань кольори, що контрастують із фоном

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

❌ Навігація сайту Gus Modern практично непомітна на тлі слайдів каруселі, що змінюють один одного.

4. Не відкривайте меню на весь екран у десктопній версії

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

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

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

Допоможіть користувачам визначити їхнє поточне розташування

5. Перейдіть до поточного розташування користувача в меню

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

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

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

6. Додайте локальне меню для пов'язаного контенту

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

✅ Департамент міського планування Нью-Йорка: Локальна навігація у лівій бічній панелі спрощує дослідження розділів сайту та допомагає користувачам швидко переміщатися між пов'язаними сторінками

Уявіть доступні опції у зручному форматі

7. Використовуйте чіткі, конкретні та знайомі формулювання для позначення посилань

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

8. Подбайте про сканованість

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

9. Для великих сайтів показуйте кілька рівнів навігації у підменю

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

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

10. Використовуйте візуальні підказки у довгих меню

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

✅ Control Voltage використовує невеликі зображення для диференціації розділів. Але оскільки ці зображення досить маленькі, однотипні та деталізовані, вони не дуже покращують ситуацію. Спрощені іконки принесли б більше користі. У будь-якому випадку текстові мітки мають пріоритетне значення

Спростіть взаємодію

11. Зробіть посилання досить великими, щоб легко було потрапити мишкою або пальцем.

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

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

12. Чітко позначте підменю за допомогою стрілок

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

✅ Стенфордський університет розміщує прості стрілки поруч із пунктами, які розкривають підменю (наприклад, Programs)

13. Відкрийте підменю по кліку (а не при наведенні)

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

14. Уникайте багаторівневих каскадних меню; замість них використовуйте мегаменю чи окремі сторінки

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

Якщо ваше підменю має кілька рівнів, використовуйте або мегаменю (яке здатне вмістити 2–3 рівні інформації), або окремі сторінки з додатковими опціями.

❌ R Studio використовує багаторівневі каскадні меню. З ними важко взаємодіяти, що призводить до помилок: часто люди випадково закривають меню або вибирають не той пункт

15. По можливості використовуйте липкі меню на довгих сторінках

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

16. Оптимізуйте доступ до часто використовуваних пунктів

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

17. Уникайте інноваційних чи надто оригінальних рішень

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

❌ На сайті Adobe CXM відсутня традиційна навігація, замість неї ми бачимо ліворуч маленькі крапки, які перекидають користувача у довільне місце на сторінці. Коли люди не знають, куди вони потраплять, вони не мають стимулу взаємодіяти з елементами управління

🖤

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