Навігація на сайті і структура сайту: 13 порад, щоб людина знаходила потрібне

Ти відкриваєш власний сайт із телефона й пробуєш знайти сторінку, яку сам замовляв пів року тому. Меню під бургером, у ньому дев’ять пунктів, два з них називаються «Рішення» і «Продукти», і ти вже не пам’ятаєш, чим вони відрізняються. Ти знайдеш, бо знаєш, що сторінка там є. Людина, яка прийшла з Google уперше, цього не знає. Вона повернеться до видачі й відкриє наступний сайт.

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

Досвід людини (юзабіліті сайту). Людина приходить із задачею: «потрібен інвертор на 5 кВт», «скільки коштує монтаж станції для магазину». Хороша структура сайту дає відчуття, що вона на правильній дорозі. Погана змушує вгадувати, а кожне вгадування коштує уваги, якої в людини з трьома відкритими вкладками конкурентів небагато.

Заявки й продажі. Товар, якого не знайшли, не продасться. Типова ситуація: популярний акумулятор лежить у «Комплектуючих», бо так було зручно менеджеру, який наповнював каталог. Покупець шукає його в «Системах зберігання енергії», не знаходить і йде туди, де знайшов.

Пошукова оптимізація. Google знаходить сторінки за посиланнями і радить, щоб на кожну важливу сторінку вело посилання хоча б з однієї іншої сторінки сайту (Google Search Central). Структура не замінює SEO-просування, але без неї контент і технічні правки працюють впівсили.

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

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

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

Погано в нашому умовному прикладі: «Головна, Про компанію, Продукти, Рішення, Обладнання, Послуги, Проєкти, Новини, Партнерам, Контакти». «Продукти», «Рішення» й «Обладнання» людина не розрізняє, а «Новини» й «Партнерам» потрібні меншості.

Краще: «Каталог, Готові станції, Монтаж, Реалізовані об’єкти, Доставка й оплата, Контакти». Кожен пункт відповідає на окреме питання.

Для великого каталогу Nielsen Norman Group радить мега-меню замість багаторівневих спадних списків (NN/g, Mega Menus). У мега-меню людина бачить усі підкатегорії одразу, а з третього рівня каскаду курсор зісковзує, і все закривається.

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

Так це влаштовано на нашому сайті: головне меню grandma.agency має шість пунктів (Послуги, Кейси, Чому ми, Про нас, Блог, Контакти) і окрему кнопку для зв’язку.

Хлібні крихти - це рядок над заголовком на кшталт «Головна › Каталог › Інвертори › Гібридні інвертори». Він відповідає на два питання: «де я?» і «куди піднятися на рівень вище?». Найбільше користі від них там, де структура глибока: у магазинах і каталогах. Людина прийшла з Google просто на картку інвертора і хоче побачити інші гібридні моделі. Один клік, і вона в потрібній категорії, без повернення на головну.

Правила з досліджень NN/g (NN/g, Breadcrumbs):

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

Що бачить Google. Якщо продублювати крихти розміткою BreadcrumbList у JSON-LD (щонайменше два елементи), Google може показати ланцюжок у видачі замість адреси сторінки (Google Search Central). Уточнення, якого немає в більшості старих статей: із січня 2025 року Google не показує крихти в мобільній видачі, там видно лише домен. На комп’ютерах вони лишились, і розмітку Google радить не прибирати (Google Search Central Blog, 2025). Тож розмітка корисна, але головний сенс крихт усе одно для людини на сайті. Як додати й перевірити таку розмітку, ми розібрали в статті про Schema.org і розширені сніпети.

Так це влаштовано на нашому сайті: сторінки послуг мають розмітку BreadcrumbList з ланцюжком «Головна › Послуги › назва послуги».

Найвідоміша порада про навігацію: людина має дістатися будь-якої сторінки максимум за три кліки, інакше піде. Звучить переконливо, але даними не підтверджується. Nielsen Norman Group прямо називає правило хибним: жодне опубліковане дослідження його не підтвердило, найраніша знайдена згадка була в книзі 2001 року без доказів, а в тесті Джошуа Портера 2003 року люди не кидали задачу частіше після третього кліку і не ставали менш задоволеними (NN/g, 2019).

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

Що працює натомість:

• Зрозумілий наступний крок. NN/g називає це «запахом інформації»: назва посилання має підказувати, що за ним. П’ять кроків, у кожному з яких людина впевнена, кращі за три, у кожному з яких вона вгадує.
• Короткий шлях для головних задач. «Підібрати станцію для будинку» і «замовити монтаж» доступні з головної та ключових сторінок, а не лише через каталог.
• Сторінки-хаби. Для складного вибору: «Станції для бізнесу» з готовими комплектами, підбором за навантаженням і реалізованими об’єктами.
• Швидке завантаження. Клік, після якого треба чекати, дратує більше за три швидкі.

Для більшості сайтів телефон уже головний пристрій. Для Google теж: він індексує й оцінює сайт за мобільною версією і радить, щоб у ній був той самий основний вміст, заголовки й розмітка, що й на комп’ютері, а місце економили акордеонами й вкладками, а не вирізанням блоків (Google Search Central).

На телефоні меню майже завжди ховають під бургер. Це нормально, але має ціну. У дослідженні NN/g 2016 року приховане меню знижувало використання навігації і на комп’ютерах, і на телефонах (на телефонах менше). На одному з тестових сайтів із комбінованим меню навігацією скористались 89% учасників, на сайті з повністю прихованим 44% (NN/g, 2016).

Що з цього взяти:

• Якщо пунктів чотири-п’ять, подумай, чи можна показати їх на екрані без бургера.
• Якщо бургер потрібен, зроби його помітним і підпиши словом «Меню».
• Головні дії (пошук, телефон, кошик) винеси поза бургер.
• У кнопки легко влучити пальцем, а номер телефону відкриває дзвінок одним дотиком.

Перевірка за десять хвилин: візьми телефон, вимкни Wi-Fi і пройди три головні задачі сайту. Для нашого прикладу: знайти гібридний інвертор на 5 кВт, дізнатися ціну монтажу, залишити заявку. Записуй, де завагався або промахнувся. Якщо сторінки вантажаться довго, почни зі швидкості: найкраща навігація не врятує сторінку, яка відкривається десять секунд.

Так це влаштовано на нашому сайті: на телефоні шість пунктів меню ховаються під кнопку-бургер.

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

Часто пишуть, що окреме посилання «Головна» застаріло, бо всі знають про логотип. NN/g каже обережніше: клікабельний логотип розуміють не всі, особливо менш досвідчені люди, тому варто мати і логотип-посилання, і явне посилання на головну. Ним може бути перший елемент хлібних крихт. А в головному меню пункт «Головна» зазвичай зайвий (NN/g, Homepage Links).

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

Сторінка «Монтаж сонячної станції для бізнесу» може містити етапи, ціни, терміни, обладнання, гарантію, об’єкти й питання. Людина, якій потрібна лише ціна, не повинна гортати сім екранів.

• Зміст з якорями. Список розділів на початку, кожен веде до свого заголовка. На довгих сторінках його можна зафіксувати збоку.
• Позначка поточного розділу. Колір чи підкреслення показують, де людина зараз і скільки лишилось.
• Заголовки, які пояснюють. «Скільки коштує монтаж» краще за «Наш підхід до ціноутворення»: людина сканує очима, а не читає.
• Кнопка «Нагору» на дуже довгих сторінках, особливо на телефоні.
• Без глухого кута внизу. Сторінка закінчується наступним кроком: заявкою, пов’язаною послугою, прикладом об’єкта.

Перевір кожен якір: заголовок після переходу не має ховатися під зафіксованою шапкою.

Так це влаштовано на нашому сайті: статті блогу мають зміст із якорями на кожен розділ.

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

• Вхід за задачею, а не за товаром. Поруч із «Інверторами» й «Акумуляторами» дай «Підібрати станцію для будинку» і «Станція для бізнесу». Це навігація мовою покупця.
• Фільтри, які відповідають на реальні питання. Не лише «Бренд» і «Ціна», а й «Потужність», «Скільки годин без світла», «Однофазна мережа». Галузевий термін у фільтрі поясни підказкою.
• Чат, за яким хтось є. Запрошення можна підлаштувати під сторінку: на картці інвертора «Допомогти підібрати акумулятор до цього інвертора?», а не загальне «Чим можу допомогти?». Кнопки швидких відповідей економлять час на формулювання.
• Форма на неробочий час. Якщо вночі в чаті нікого, чесно скажи про це і запропонуй залишити контакт. Чат, що мовчить до ранку, гірший за відсутній.

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

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

Типові проблеми:

• Внутрішній жаргон. «Рішення», «Продукти», «Напрями»: для компанії це різні відділи, для покупця одне й те саме.
• Маркетингові назви. «Енергія свободи» замість «Готові сонячні станції». Красиво, але так ніхто не шукає.
• Синоніми в різних місцях. У меню «Монтаж», у футері «Встановлення», у тексті «Інсталяція», і людина не впевнена, що це одне.

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

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

Для Google внутрішні посилання - головний спосіб знайти сторінку й зрозуміти, про що вона. Google радить робити текст посилання описовим, коротким і пов’язаним з обома сторінками, перевіряти, чи зрозумілий він без контексту, і не писати «тут» чи «детальніше». Ідеальної кількості посилань на сторінку немає (Google Search Central).

Останній рядок важливіший, ніж здається: Google не може надійно взяти адресу з елемента без href, тож «посилання», яке працює лише через скрипт, для пошуковика може не існувати. І регулярно шукай биті посилання: товар зняли, категорію перейменували, і десяток статей веде в нікуди. Це частина технічного аудиту, як його провести, ми розписали в статті про SEO-аудит перед контентом.

Людина ставить фільтри: від 5 кВт, гібридний, в наявності. Відкриває четвертий інвертор, дивиться характеристики й натискає «Назад». І бачить каталог без фільтрів, прокручений на самий верх.

Baymard Institute пише, що люди сприймають кожну зміну фільтра чи сортування як новий екран і чекають, що «Назад» знімає фільтри по черзі. 27% сайтів у їхньому дослідженні цього не роблять, а 59% порушують хоча б одне з чотирьох очікувань щодо кнопки «Назад» (Baymard Institute, 2020). Після повернення з картки товару люди чекають опинитися на тому самому місці в списку. 13% сайтів відкидають їх на початок, і в тестах Baymard це прямо призводило до того, що люди кидали сайт (Baymard Institute, 2020).

Що записати в задачу розробнику:

• «Кожен фільтр і сортування змінюють адресу сторінки, щоб “Назад” і посилання на відфільтрований список працювали».
• «Після повернення з картки товару людина опиняється на тому самому місці в каталозі».
• «”Назад” закриває спливаюче вікно чи швидкий перегляд, а не веде зі сторінки».
• «У багатокроковому замовленні “Назад” повертає на попередній крок, і введені дані не зникають, зокрема після помилки чи оновлення сторінки».

Як це реалізувати, вирішує розробник. Тобі достатньо пройти ці сценарії самому.

Сторінка 404 з’являється, коли адреси не існує: товар видалили, посилання надрукували з помилкою, після редизайну змінились адреси. Сама помилка не катастрофа. Катастрофа - сіра серверна сторінка з написом «Not Found» і більше нічим.

Що має бути на хорошій сторінці 404:

• Людська фраза про те, що сталось, без «Ви ввели неправильну адресу».
• Шапка і меню сайту, щоб людина лишалася на сайті.
• Шлях далі: головна, основні розділи, популярні категорії чи товари.
• Пошук. NN/g радить його на сторінці помилки ще з 1998 року (NN/g), і порада не застаріла.
• Спосіб написати: «Не знайшли, що шукали? Напишіть нам».

Технічна деталь: сторінка помилки має віддавати справжній код 404. Якщо вона виглядає як помилка, а сервер відповідає «200, все гаразд», Search Console позначить її як «м’яку 404» (Google Search Central).

Суміжні стани. Технічні роботи (503): коротко поясни, що сайт оновлюється, і коли орієнтовно повернеться. Код 503 каже Google, що проблема тимчасова, і пошуковик сповільнює обхід, але якщо помилки тривають довго, сторінки можуть випасти з індексу. Порожня категорія чи фільтр без результатів: запропонуй зняти фільтр або покажи схожі товари.

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

Так це влаштовано на нашому сайті: сторінка 404 на grandma.agency віддає код 404, зберігає шапку з меню і пропонує перейти на головну, до послуг, кейсів, блогу або написати нам.

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

• Видиме поле вгорі сторінки. На сайті з великим каталогом краще поле введення, ніж лупа, яку ще треба помітити. На телефоні поле можна згорнути, але лупа лишається в шапці.
• Підказки під час введення. Людина вводить «інв», сайт пропонує категорії й популярні моделі.
• Помилки й синоніми. «Інвертер», «inverter», «перетворювач» ведуть туди ж, куди «інвертор». Список синонімів поповнюй з реальних запитів.
• Не лише товари. Люди шукають «доставка», «гарантія», «монтаж Київ». Відповідь «Товарів не знайдено» на такі запити виглядає дивно.
• «Нічого не знайдено» без глухого кута. За Baymard Institute, близько половини магазинів роблять цю сторінку так, що вона дратує і веде до відмов. Вони радять показувати пов’язані категорії, альтернативні запити, популярні товари й контакти для допомоги (Baymard Institute).

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

Якщо власний пошук зробити складно, є готові рішення, наприклад Google Programmable Search Engine, який шукає по вказаних сайтах на основі технологій Google. Для блогу чи сайту послуг цього може вистачити. Магазину з фільтрами, наявністю і цінами зазвичай потрібен пошук, вбудований у платформу.

Знижка, підписка, чат, cookies, «встановіть наш застосунок», і все в перші п’ять секунд поверх контенту, який людина прийшла читати. Вікно - сильний інструмент, тому ним так легко зловживати.

Google описує, що саме заважає: вікна на весь екран, які закривають вміст, рекламні діалоги, що перебивають доступ до контенту (включно із закликами встановити застосунок), і переадресація на окрему сторінку для згоди чи введення даних. Натомість радить невеликі банери. Обов’язкові вікна, як-от перевірка віку там, де цього вимагає вміст, під рекомендації не підпадають (Google Search Central).

Чи карає Google за такі вікна? У 2017 році Google запровадив окремий сигнал ранжування проти нав’язливих вікон на мобільних. Зараз у документації сказано, що окремого сигналу «досвіду на сторінці» немає, а крім Core Web Vitals інші аспекти досвіду напряму позиції не підвищують (Google Search Central). Водночас Google попереджає, що нав’язливі вікна ускладнюють пошуковикам розуміння вмісту і можуть погіршити результати в пошуку, а на незручні сайти люди рідше повертаються. Тож головна причина не дратувати людину вікнами - сама людина, а не страх фільтра.

Як користуватися вікнами без шкоди:

• Не одразу. Показуй пропозицію, коли людина вже щось подивилась.
• Одне за раз. Якщо вже висить банер cookies, знижка почекає.
• Легко закрити. Хрестик видно, у нього легко влучити, а закрите вікно не повертається на кожній сторінці.
• Банер замість вікна. Для акції «безкоштовний монтаж до кінця місяця» часто вистачає смужки над шапкою.
• По темі сторінки. На картці акумулятора доречне «Допомогти підібрати інвертор?», а не підписка на новини компанії.

Пройди список з телефона і з комп’ютера:

• Меню з кількох пунктів, кожен відповідає на окреме питання; великий каталог розкривається мега-меню.
• Хлібні крихти на категоріях, товарах і послугах, з розміткою BreadcrumbList.
• Кожен крок до головних задач зрозумілий, кліки ніхто не рахує.
• Мобільне меню помітне, головні дії поза бургером.
• Логотип веде на головну з будь-якої сторінки.
• Довгі сторінки мають зміст з якорями і закінчуються наступним кроком.
• Є вхід «за задачею» і чат або форма, за якими хтось є.
• Назви розділів зрозумілі людині поза компанією.
• Посилання в тексті стоять там, де виникає питання.
• «Назад» повертає до тих самих фільтрів і місця в списку.
• Сторінка 404 віддає код 404, має меню, пошук і шлях далі.
• Пошук видно, він розуміє помилки, а «нічого не знайдено» пропонує вихід.
• Спливаючі вікна не з’являються з першої секунди і легко закриваються.

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

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