12 правил та інструментів побудови зручної навігації на сайті
Зробити ознайомлення із контентом сайту комфортним, утримати увагу відвідувача та підштовхнути його до потрібних вам дій? У цьому вам допоможе робота над навігацією та структурою сайту! Без них будь-який дизайн не вартий нічого, вони – основа вашого сайту.
У цьому матеріалі ми розповімо, як навігація сайту визначає шлях користувача та як крок за кроком побудувати структуру сайту.
Структура сайту
Перед тим, як почати роботу над сайтом, обов’язково подумайте про відвідувачів вашого сайту та вирішіть, які дії їм потрібно зробити для досягнення потрібної вам мети.
Наприклад, ваш користувач потрапляє на головну сторінку сайту — але оскільки ваш продукт дорогий, то йому потрібно дізнатися більше про товар. Для цього він може відвідати FAQ. Або навпаки — ціна товару не вирішальний чинник оформлення покупки, але на ринку багато підробок. У такому разі переконати клієнта допоможе сторінка із сертифікатами оригінальності.
Щоб передбачити обсяг робіт та упорядкувати сторінки майбутнього сайту, попрацюйте над структурою сайту. Структура сайту — це логічні взаємозв’язки між сторінками у вигляді ієрархічного дерева.
У створенні структури сайту вам допоможуть діаграми зв’язків (mind maps). Кожен новий рівень мапи веде до сторінок, які логічно походять із попередніх сторінок або пов’язані з ними гіперпосиланнями.
Якщо вам не вистачає ідей під час роботи над структурою — відвідайте сайти ваших конкурентів. Виділіть типи сторінок, що повторюються, створіть рубрикатор із перерахуванням таких тематичних сторінок.
На Weblium. Упорядкувати структуру на вашому сайті ви зможете за допомогою навігатора. Через нього ви можете робити вкладення сторінок, швидко створювати, видаляти та копіювати сторінки.
Шлях клієнта
Взаємодія користувача із сайтом має бути природною. Як тільки користувач поставить собі запитання (що я роблю на цій сторінці і для чого мені з нею знайомитися?) — ваші шанси втратити відвідувача зростають.
Ви можете сформувати кілька ланцюжків дій користувача. Цей порядок дій називається шляхом клієнта (customer journey map). Тобто, формуючи шлях клієнта, ви деталізуйте припущення з роботи над мапою сайту.
Наприклад, для сайту з навчальними курсами шляхів може бути кілька. Опишемо один із можливих варіантів.
- Користувач потрапляє на головну сторінку через пошуковий запит курсів графічного дизайну та вивчає головну сторінку.
- Відвідувач ще погано знає вас, тому йому важливий не лише зміст курсів, а й формат навчання. Для цього він відвідує сторінку з описом вашої методики.
- Далі, якщо йому подобається формат навчання, він захоче більше дізнатися про лекторів курсу. Переходить на сторінку з біографіями лекторів та кураторів курсів.
- Коли користувач переконався в компетентності ваших фахівців, він готовий обрати програму, яка його цікавить, і відправити запит через форму на сторінці конкретного курсу.
Усі дії користувач здійснює, переходячи за посиланнями.
На Weblium. З нашим конструктором перенаправляти користувача на інші сторінки ви можете: додавши посилання в текст через редактор тексту або зробивши клікабельними зображення та картки.
Система гіперпосилань
Досвід користувача має бути безперервним. На кожній сторінці відвідувачу потрібно давати вибір: здійснити цільову дію (наприклад, відправити форму для замовлення послуг), повернутися до попередньої сторінки або перейти на головну, вивчити сервісні сторінки (порядок роботи, умови доставки тощо), ознайомитися з іншими послугами або товарами.
Для цього вам потрібно або передбачити гіперпосилання заздалегідь. Або пам’ятати, що необхідно їх додати під час роботи над сторінками сайту. Якщо ви зробили 2 попередні кроки, то посилання на сторінках не будуть перепоною.
Під час планування кожного блоку або кількох блоків на сторінках вкажіть посилання, які потрібно розмістити. Завжди пропонуйте користувачеві шляхи дослідження вашого сайту.
На Weblium. Наш конструктор сайтів блоковий. Тобто ви додаєте блоки на сторінки, а вже в них — контент. Усі логічні блоки у вас перед очима — ви ніколи не забудете додати до них елементи цільових дій чи посилання.
Заклики до дії або цільові дії
Зазвичай користувачі роблять дії на перших екранах сторінок вашого сайту. Якщо ваша сторінка велика, вам потрібно розміщувати кілька кнопок із закликами до дій.
Створюйте елементи здійснення цільових дій кожні 3–4 екрани. Бажано не перенаправляти користувача для цього на іншу сторінку.
Розглянемо приклад такого розташування елементів. Ви маєте окремий лендинг, присвячений одному товару. На ньому:
- Розташуйте кнопку покупки на першому екрані. Це важливо для тих клієнтів, які відвідують сторінку для того, щоби здійснити покупку саме зараз.
- Далі розкажіть про ваші переваги, особливості товару та правила догляду за ним. Розмістіть екран із двома кнопками. Першу використайте для покупки цього товару, другу — одночасно для покупки та оформлення розширеної гарантії.
- Згодом розмістіть технічні специфікації, додайте відгуки задоволених клієнтів та присвятіть окремий екран додатковим товарам. Насамкінець додайте перехід до покупки або форму у вигляді pop-up з розширеними опціями покупки (наприклад, з додатковими товарами) та оформлення замовлення (наприклад, з вибором розширеної гарантії або доставкою до дверей).
На Weblium. Наша бібліотека містить 250 створених для вас готових блоків. Ви знайдете блоки з формами чи закликами до дій у відповідних рубриках бібліотеки.
Адреси сторінок
Спираючись на структуру вашого сайту, ви можете створити унікальні адреси сторінок. Ці адреси можуть дублювати заголовки сторінок або коротко описувати їхній зміст.
По-перше, зрозумілі адреси сторінок — це ще одна підказка. Користувач знає, яку сторінку він відвідує. По-друге, відвідувач розумітиме, у якій категорії сайту він знаходиться (мається на увазі такий різновид адрес: назва.сайту/ усі-послуги/ послуга-№ 2).
На Weblium. Швидко відредагувати адреси сторінок у нашому конструкторі можна безпосередньо в редакторі. Для цього відкрийте меню навігатора, виберіть потрібну сторінку та змініть її адресу.
Хедер як основне навігаційне меню
Хедер (шапка сайту) — це меню-рядок, яке розташовується вгорі сайту та містить швидкі переходи до важливих сторінок. Завдяки хедеру користувач може перейти до потрібної інформації, якщо поточна сторінка не цікава.
Є кілька питань, на які потрібно звернути увагу під час створення хедера.
Тільки найважливіше в хедері. Вкажіть у хедері контактну інформацію, години роботи вашої компанії, телефон. Додайте корисні сторінки (наприклад, усі послуги, найпопулярнішу послугу, про нас, магазин) та кнопку для швидкого оформлення замовлення. Стати в пригоді можуть і переходи у ваші соцмережі.
Не перевантажуйте ваш хедер. Найкращі результати демонструють навігаційні меню із 4–6 посиланнями. Користувач побачить головне, але не загубиться у варіантах вибору.
Використовуйте повноекранне меню у виняткових випадках. У вас є можливість зробити меню у вигляді лайтбоксу — повноекранного pop-up із системою посилань. Коли користувач бачить таке меню, йому потрібно ознайомитися із ним і витратити час на вибір потрібного варіанту. Зусилля лякають користувачів. Робіть такі меню для сайтів, якщо користувачі мотивовані вивчати ваш сайт.
Найчастіше виконати завдання повноекранного меню можна альтернативними способами. Наприклад, створіть сторінку з переліком усіх послуг чи товарів, а посилання на цю сторінку розмістіть у шапці вашого сайту.
Списки з випаданням у хедері — ще один виняток. У вас є можливість створити клікабельний елемент зі списком, який розгортається, у шапці сайту. Наприклад, користувач натискає на елемент «Товари▼» і з’являється нижче перелік товарів. Робіть у хедері не більше одного списку. Навігація буде корисною, але не громіздкою.
Дбайте про мобільну версію навігаційного меню. Завжди передбачайте, як зміст хедера відобразиться мобільній версії сайту. Зміст шапки сайту має розміщуватися повністю в меню без додаткового гортання.
Активний логотип. Не забудьте зробити логотип у хедері клікабельним. При натисканні на нього користувач має потрапити на домашню сторінку вашого сайту.
На Weblium. Усі налаштування хедера та редагування його елементів здійснюються в меню управління. Змінювати шапку сайту в редакторі Weblium зможете одразу після її додавання з бібліотеки готових блоків. Мобільна версія навігаційного меню створюється автоматично на основі повної версії. Хедер підтримує додавання будь-якого з елементів конструктора. Усього їх 50. Перелік сторінок та списки створюються в окремому підменю управління шапкою сайту.
Навігаційне меню лендингу
Для лендингу — сайту, який складається з однієї сторінки — ви також можете передбачити хедер. Оскільки переходи на інші сторінки сайту неможливі, ви направите користувача до окремих ділянок сторінки. Його блоків.
Для цього потрібно використовувати якірні посилання. Завдяки натисканню на таке посилання користувач потрапляє на потрібну ділянку сторінки.
Таке навігаційне меню краще зробити як липкий хедер. Липкий хедер, фіксується у верхній частині сторінки, а зміст під ним гортається. Липкий хедер завжди перед очима користувача.
На Weblium. Кожному блоку сайту на Weblium автоматично присвоюється посилання на якір. Це посилання ви й можете вказувати для переходів за кліком. Можливість липкого хедера вмикається одним натисканням у налаштуваннях шапки сайту.
Футер або підвал сайту
Футер (підвал сайту) — це блок знизу сторінки з додатковою корисною інформацією та рубриками сторінок. Переглянувши всю сторінку, користувач вивчить підвал сайту і зможе перейти до важливої йому інформації.
Рубрики підвалу сайту можуть бути як клікабельними, так і не клікабельними. Але вже самі назви сторінок працюють як гіперпосилання. Ви можете виділити, наприклад, такі рубрики в підвалі сайту:
про компанію (про нас, публічна оферта, переваги), послуги або товари (переходи до найважливіших послуг або товарів), інтернет-магазин та його окремі категорії, корисні для користувача сторінки (підказки щодо вибору товару або перелік готових рішень), блог та посилання в соцмережі.
На Weblium. У бібліотеці готових блоків ви знайдете кілька варіантів підвалу сайту. Потім ви відредагуєте його вміст таким же чином, як і в хедері.
Кнопка вгору та віджет чату
Ці два елементи навігації допоможуть відвідувачу заощадити час на здійсненні дій.
Кнопка вгору. За допомогою кнопки швидкого прокручування сторінки вгору ви допоможете відвідувачу повернутися на початок сторінки. Якщо користувач дізнався все необхідне і вже час робити покупку, він зможе швидко повернутись до першого екрану з кнопкою замовлення.
Віджет чату. За допомогою віджету чату відвідувач не просто зможе звернутися до підтримки, а й перейти до месенджера або зателефонувати вам. Завдяки такому віджету клієнту не доведеться шукати в підвалі чи шапці сайту ваш телефон або посилання на бот у месенджері.
На Weblium. Додати кнопку «вгору» ви зможете за п’ять хвилин, скориставшись інструкцією з нашої бази знань. Серед сторонніх інтеграцій є онлайн-чати. Їх можна під’єднати в налаштуваннях сайту.
Навігація в інтернет-магазині
Інтернет-магазин — це каталог товарів. Ви мусите всіма способами скоротити шлях клієнта до бажаного товару. У цьому вам допоможуть чотири інструменти: категорії товарів, хлібні крихти, вікно пошуку товарів та рекомендовані товари.
Категорії товарів. Усі товари з вашого магазину можна відсортувати за категоріями. Наприклад, у вашому магазині кросівок кореневою категорією буде «Всі кросівки». Категоріями другого рівня: «Жіночі кросівки», «Чоловічі кросівки», «Дитячі кросівки». Розташувати переходи в категорії ви можете на сторінках у вигляді карток або вітрин товарів, а у футері та хедері у вигляді посилань.
Хлібні крихти. Це категоризація ваших товарів у вигляді тексту. Найчастіше хлібні крихти знаходяться у верхній частині сторінки товарів чи їхніх сторінках категорій. Вони мають такий вигляд «Всі товари🠂 Категорія товару🠂 Підкатегорія товару🠂 Назва товару». За допомогою хлібних крихт користувач зможе повернутися до рубрики магазину і продовжити вивчати каталог.
Пошук товарів. Обов’язково додайте можливість швидко знаходити товари за їхньою назвою. Не всі хочуть довго вивчати каталог. Декому потрібно просто дізнатися, чи є у вас потрібний товар.
Рекомендовані товари. Для кожної сторінки товару ви можете додати спеціальний блок із рекомендованими товарами. Якщо товар не зацікавив користувача, він може швидко перейти до вивчення іншого (схожого чи додаткового товару).
На Weblium. Вказувати категорії для товарів ви зможете в налаштуваннях інтернет-магазину. Категорії та підкатегорії товарів автоматично використовуються для формування хлібних крихт. У налаштуваннях шаблону сторінки товару ви додасте хлібні крихти як окремий елемент. Пошук товаріву магазині можна додати в будь-яке місце вашого сайту. Рекомендовані товари можна вказати в налаштуваннях товару або зробити формування товарів автоматичним.
Правила збалансованого досвіду користувача
Є перевірені правила, які роблять вивчення сайту природним і комфортним. Вони визначають досвід користувача (user experience). Розкажемо про важливі для побудови навігації правила.
Будьте одноманітними. Для схожих дій використовуйте однакові елементи. Наприклад, якщо кнопка купівлі виглядає як класична кнопка, а для тарифів використовується текстове посилання — дотримуйтесь однакового оформлення цих елементів на всіх сторінках.
Використовуйте поширені зразки. Ваш сайт не перший для користувача. До вас він відвідав тисячі сайтів, знову відкривати для себе світ інтернету він не буде. Тому використовуйте стандартні рішення у вебдизайні. Наприклад, найчастіше гіперпосилання виконані синім або блакитним кольором, а також підкреслюються або виділяються жирним. Робіть їх такими самими.
Робіть дії передбачуваними. Користувач мислить дорогою від точки А до точки Б. Якщо дії не призводять до передбачуваного результату, відвідувач розчаровується та закриває сайт. Наприклад, якщо ви розміщуєте кнопку «Замовити дзвінок», а після кліку на неї відкривається велика форма для замовлення дзвінка замість одного поля з номером телефону — користувач відмовиться від броні розмови.
На Weblium. Наша база знань містить докладні ілюстровані інструкції. З ними ви не тільки вивчите можливості конструктора, а й познайомитеся з прикладами правильної організації навігації на сайті.
Покращення навігації на сайті
Після запуску сайту ви зможете вивчати поведінку відвідувачів та на основі отриманих даних покращувати навігацію. З цим ви впораєтеся завдяки інструментам аналітики та тепловим мапам.
Google. Під’єднавши аналітику до сайту, ви побачите кількість відвідувань на певних сторінках. Так ви краще зрозумієте користувача і зможете додати в елементи навігації корисні користувачеві сторінки або прибрати непотрібні.
Теплові мапи. Теплові мапи показують взаємодії користувача із конкретними сторінками. Цей інструмент демонструє ділянки, на які натискає користувач. Наприклад, ви можете побачити, що ваші відвідувачі практично ніколи не гортають певну сторінку до кінця. Отже, потрібно скоротити сторінку, а переходи за посиланнями додати в попередню частину.
На Weblium. Аналітика від Google та теплові мапи Hotjar під’єднуються до сайту на Webium як сторонні розширення. Зробити це ви можете із налаштувань сайту.
Готові створити свій сайт?
Структура сайту та навігація на ньому — це основа, на яку нанизується контент і дизайн. Тепер ви озброєні теорією і зможете розпочати створення свого чудового сайту.