Створення дизайну меню сайту: як зробити навігацію зручною
Дизайн розвивається з блискавичною швидкістю, і якщо раніше меню завжди було стандартизовано: статична смуга з текстом, при натисканні на який відбувається перехід на певні сторінки, то тепер є величезна різноманітність меню і це круто! Але іноді бажання виділитися і зробити меню креативним виходить за рамки першорядного завдання — зручність навігації для користувача.
Навіщо потрібно меню на сайті та чому важливо продумати його дизайн
Меню сайту – це елемент дизайну, призначений для навігації. Тобто він повинен допомагати користувачеві переміщатися сайтом, а не плутати його.
Розглянемо основні фактори, на що впливає грамотна розробка меню сайту:
Навігація
Створюючи меню та проектуючи вкладеність сторінок, ви показуєте користувачеві структуру сайту, щоб він розумів ієрархію. Для цього необхідно продумувати пункти: основні / другорядні / назви розділів тощо.
Завдяки цьому, користувач не заблукає і зможе в пару кліків перейти на розділ сайту, що цікавить.
Конверсія
Комфортний пошук розділів та важливих сторінок підвищує конверсію сайту. Можна створити логіку та вести користувача так, як потрібно компанії, відокремлюючи важливі розділи сайту від другорядних. Якщо користувач може вільно та комфортно переміщатися, знаходити потрібну інформацію, він із меншою ймовірністю залишить сайт.
SEO-оптимізація
Навігація важлива не лише для користувачів, а й для пошукових роботів. Скануючи сайт, робот аналізує його структуру. Меню допомагає йому зрозуміти вкладеність сторінок та їхню вагу. Тому важливо розробляти меню, оптимізувати його під просування.
Вимоги до меню
Завдання маркетолога, UX/UI-дизайнера запакувати та вивести новий продукт на ринок. У разі високої конкуренції необхідно виділити бренд серед сотні однотипних компаній, у яких допомагає унікальний дизайн.
Дослідження, проведене компанією KoMarketing, показало, що 50% користувачів, опитаних під час інтерв’ю, використовують навігаційне меню при знайомстві з сайтом, і 37% залишають його в перші хвилини через незручну навігацію. Тому креатив – це круто, але в основі розробки меню сайту має бути зручність.
Структура
Важливо не плутати зі структурою сайту, це різні речі. Загальна структура сайту показує взаємозв’язок блоків та сторінок: звідки можна перейти і яку сторінку. Структура меню – відображає навігацію по значним сторінкам (рідко по блоках, наприклад, на лендінг).
Тобто, в основному, навігація будується на транзитних сторінках, наприклад, в меню може бути закладена сторінка “Портфоліо” з усіма проектами, а не конкретно “Проект 1”, “Проект 2” і т. д. В окремих випадках, коли сайт невеликий, у меню може бути відображена повна схема сайту.
Важливо: не намагайтеся вставити в меню всі сторінки та розділи. Це перевантажує та обтяжує його. І замість швидко знайти потрібний розділ на сайті, користувач змушений довго шукати потрібний розділ в меню. Основна мета цього елемента дизайну – навігація. А якщо там борщ із сотні розділів, то губиться сама суть меню, воно стає марним.
У цій роботі важливо задати цілі, чого ви хочете досягти: підвищення конверсії або подання інформації. Виходячи з мети, визначайте послідовність пунктів, назву та ієрархію.
- Назви пунктів
Основне завдання назв пунктів – простота розуміння. Тут не потрібно виводити нові тренди, намагатися виділитися на тлі конкурентів та створювати цілі гасла. Якщо користувачеві буде незрозуміло, куди веде цей розділ, він просто загубиться і не знайде потрібну сторінку.
| Приклади поганих назв | Приклади хороших назв |
| LP SMART | Кейтеринг |
| Чому обирають нас | Переваги |
Якщо пункт меню не вдається описати в рамках одного слова, не страшно, можна зробити ємну пропозицію з 2-3 слів. Але враховуйте візуальну складову: поганий тон у дизайні, якщо назва пункту розпадатиметься на 2 або 3 рядки:
Назви мають бути лаконічними, в ідеалі складатися з одного слова та бути максимально зрозумілим для користувача: «Що станеться, коли я натисну на …». Не місце для фантазії.
- Функціональність
Крім переходів на сторінки сайту, в меню потрібно передбачити функціональність та мікроанімацію, яка допоможе користувачеві при взаємодії із сайтом. Важливо: не забувайте робити всі елементи клікабельними або відобразіть, що зараз пункт неактивний, наприклад, це можна зробити менш насиченим кольором.
Використовуйте підкреслення або інші способи виділення, щоб показати користувачам, де вони зараз знаходяться або hover-ефект, щоб відобразити на який елемент вони навели курсором миші.
Додатково в меню можуть бути вбудовані такі функції:
- Дзвінок під час натискання на номер телефону або іконку;
- Відкриття pop-up вікон із формою;
- Відкриття пошти для надсилання листа при на натискання на іконку або адресу електронної пошти;
- Відкривання меню другого рівня.
- Логотип
Закладіть у меню логотип компанії, при натисканні на який користувач перекидатиме на Головну сторінку. Користувачі вже звикли до такого сценарію, і відчувають незручності, коли логотип у шапці неклікабельний.
Завдяки цьому способу вам не доведеться розробляти окремо пункт «Головна», що економить місце. Єдине, якщо вік вашої аудиторії 45-50+ варто передбачити це рішення.
- Кількість пунктів
Якщо ви розробляєте класичне, відкрите меню, не намагайтеся впхнути туди безліч розділів, це буде некомфортно і виглядатиме перевантажено. У такому випадку використовуйте меню-бургер. У горизонтальному меню оптимальна кількість пунктів 5-7.
- Пріоритетність
Розташуйте об’єкти в меню на основі ієрархії. Пам’ятайте, що користувачі підсвідомо зчитуватимуть логіку та важливість об’єктів на передньому плані або більшого розміру.
- Розмір
Меню має бути максимально великим для будь-якого екрана, будь то монітор або телефон користувача. Текст буде читабельним, а клікабельність елементів є зручною.
- Іконки
Використовувати графічні елементи в меню можна, але не варто занадто захоплюватися. Згадаймо правило — пункти мають бути зрозумілі, що у разі навішування безлічі ікон може бути складним.
Класичне горизонтальне меню — спосіб навігації, що найчастіше використовується. Користувачі звикли до цього візуалу, тому такий варіант підходить більшості сайтів.
Статичне горизонтальне меню
Недолік такого рішення полягає в обмеженій кількості пунктів: у відкритому доступі можна зробити лише 5-7 категорій, у більшій кількості меню виглядатиме перевантажено та некомфортно у використанні.
Якщо в меню є списки, що випадають, обов’язково відобразіть це візуально. Не використовуйте безліч списків, що випадають: якщо потрібна складна навігація, діліть категорії на рівні або використовуйте інше меню.
Фіксоване горизонтальне меню
Від класичного статичного відрізняється тільки тим, що воно скроліться і при прокручуванні сторінки. Використовуйте фіксоване меню, якщо сторінка сайту дуже довга, щоб користувачеві не довелося крутити коліщатком мишки, щоб знову дістатися початку і перейти до іншого розділу, це бісить чи не так?)
Або зробіть прокручування сторінки до початкової точки одним натисканням кнопки ↑.
Подвійне горизонтальне меню
Така технологія досить рідкісна, але також має попит для:
- Розробки основного меню та для особистого кабінету;
- Розробка додаткового меню для зручності навігації.
Хлібні крихти
Навігаційні ланцюжки використовуються на багатосторінкових сайтах, порталах, в інтернет-магазинах для додаткової комфортної навігації. Хлібні крихти виглядають як рядок із посиланнями на всі попередні розділи, які привели користувача до поточної сторінки.
Багаторівневе мега-меню
Мега-меню працює за наступним принципом: в основний розділ (пункт меню) вкладено звичайне меню другого рівня, з підрозділами і під-підрозділами. У ніші логістики чи автозапчастин просто мастхев.
Бургер меню
Меню, яке викликається при натисканні на іконку, що зазвичай складається з 3х горизонтальних ліній. Користувачі давно звикли бачити його на мобільних пристроях, але тепер бургер часто зустрічається і в робочому столі. У такому рішенні є свої плюси та мінуси: з одного боку, бургер дає більше можливостей та менше обмежень у плані дизайну, з іншого — не кожній цільовій аудиторії буде зрозуміло, що це і як ним користуватися.
Якщо хочете використовувати меню-бургер на десктопах, мисліть логічно: завжди запитуйте себе — а чим воно допоможе користувачеві і чи можна обмежитися стандартним горизонтальним? Якщо відповідь так, використовуйте більш звичну реалізацію навігації для користувачів.
- Використання спліт-екранів для навігації
Тренд, який прийшов до нас із заходу і виглядає дуже естетично. У перекладі з англійської, Split Screen – це поділ екранів, тобто, це конфігурація, коли дизайнер має намір ділить екран на 2 і більше частин.
Даний метод допомагає у зручності навігації, підвищує інтерес до вивчення контенту та підштовхує користувачів натискати на кнопки.
Висновок
Тож проектуючи меню, пам’ятайте: у пріоритеті зручність користувача та швидка навігація. Яким би прикольним не було меню, якщо користувач має труднощі з навігацією, то цінність цього елемента дизайну — нульова.
