Естетично привабливі та цікаві навігаційні меню великою мірою визначають успіх сайту. Вони допомагають вашим відвідувачам легко діставатися з пункту А в пункт Б — аж до найбільш бажаного пункту під назвою «конверсія».
Якщо ваш сайт побудовано на Drupal, вам пощастило. Адже він має безліч корисних модулів для створення сучасних меню та покращення навігації сайту. Сьогодні розглянемо, як створити чудовий дизайн навігації сайту за допомогою одного з них — Drupal-модуля Menu Item Extras.
Найкращі практики для дизайну навігації сайту
Навігаційні меню працюють найефективніше, коли вони побудовані згідо з найкращими практиками в дизайні. Ось декілька з них:
- Призначення лінків має бути зрозумілим
Користувачам має бути ясно з першого погляду, що вони побачать, коли перейдуть за конкретним лінком в меню. Для цього використовуйте чіткі назви пунктів, написані простою і зрозумілою мовою, а також іконки або інші елементи дизайну для посилення візуального ефекту.
- Кількість пунктів меню першого рівня не має перевищувати 7
Уникайте перевантаженості меню, щоб людей не збивала з пантелику надмірна кількість опцій. Звісно, все залежить від особливостей сайту, але оптимальна рекомендація в UX-дизайні — не створювати більше 7 пунктів першого рівня.
- Навігаційне меню повинно привертати увагу
Основне меню сайту повинно мати такий дизайн, який би привернув увагу користувачів. Використовуйте достатню контрастність, чіткі шрифти, іконки та картинки для посилення візуального ефекту і багато іншого.
- Меню має бути розміщене в очікуваному місці
Навігація має бути розміщена там, де користувачі очікують її побачити. Зазвичай її очікують вгорі або в правому чи лівому верхньому кутку сайту. Навігація в футері також популярна.
- Мобільна навігація має бути зручною
Забезпечте такий дизайн навігації, щоб меню було легко використовувати на мобільних пристроях. В умовах обмеженого простору там затосовуються спеціальні рішення на кшталт гамбургер-меню. Респонсивна навігація підлаштовується під різні мобільні пристрої.
Покращений дизайн навігації сайту з Drupal-модулем Menu Item Extras
Як мінімум декілька з вищеперелічених рекомендацій допоможе втілити Drupal-модуль Menu Item Extras. З ним можна зробити, щоб призначення лінків було більш очевидним, а навігаційне меню виділялося і привертало увагу відвідувачів Drupal-сайту.
Модуль Menu Item Extras дає змогу додавати інші поля до пунктів меню. Це означає, що звичайні лінки меню можуть виглядяти цікавіше та привабливіше завдяки додаванню Drupal-полів (пов'язаних з пунктами меню зображень, іконок, фонів і так далі).
Увімкнення Drupal-модуля Menu Item Extras
Після встановлення модуля Menu Item Extras в переліку модулів з'являється також додатковий модуль — Menu Item Extras Demo Base. Отже, вмикаючи основний модуль, можна за бажанням увімкнути і додатковий, якщо вам потрібне готове демо для ознайомлення з можливостями дизайну навігації.
Додавання поля «зображення» до навігаційного меню
Ми можемо додати поле до будь-якого меню, яке ми оберемо у “Structure — Menus” (основна навігація, футер, меню акаунта користувача, будь-яке кастомно створене меню і так далі). Керування полями відбувається так само, як з контент-типами в Drupal. Давайте додамо поле "image" в основне меню.
Ми можемо налаштувати його вигляд для користувачів у "Manage display" — наприклад, сховати ярлик (назву поля) і обрати спеціальний стиль зображення (image style), аби всі наші картинки меню були послідовними у дизайні.
Додавання зображень до лінків меню
А тепер, додаючи лінки меню, ми побачимо нове поле для зображення. Давайте додамо кілька таких лінків меню до основної навігації сайту. Вказуємо назву лінка, існуючий URL з контентом, слідкуємо за тим, що батьківський лінк був тим, що нам потрібен (Main Navigation), і додаємо зображення.
Давайте тепер подивимось, як виглядає наша головна сторінка з новим дизайном навігації. Меню із зображеннями стало виглядати набагато більш заманливо. Не клікнути неможливо!
Звісно, це лише груба чернетка, і ваш дизайн навігації виглядатиме краще після роботи експертів з фронтенду.
Перегляньте відео про те, як ми додавали картинки до навігаційного меню за допомогою модуля Menu Item Extras у Drupal 8.
Замовте професійний дизайн навігації сайту
Варіанти для дизайну навігації безкінечні. Доручіть нашим експертам з Drupal-розробки і UX-дизайну створити для вас дизайн навігації сайту, що приваблюватиме ваших потенційних клієнтів і впевнено вестиме їх по сайту. Напишіть нам!