Навігація у вебсайтах

Сьогодні більшість музичних творів, кінострічок, серіалів, книжок, статей та багатьох інших творів вже стали частиною всесвітньої павутини. І щодня в ній з’являється новий зміст. Навіть щосекунди. Цьому неабияк сприяє модель веб 2.0, відповідно до якої зміст сайтів створюють їхні відвідувачі. Так, відповідно до ресурсу omnicoreagency.com, лише на Facebook користувачі щодня завантажують 350 мільйонів світлин. Це близько 4000 світлин щосекунди.

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

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

Слово навігація походить від латинського слова navigare, що означає «керувати кораблем». Але насправді, цей термін з самого початку означає не просто керування, а ще спрямування корабля до цілі.

Мореплавцям з цим допомагали зорі, сонце, мапи, компас та ціла низка засобів та навичок. З часом процес навігації почали пов’язувати з пошуком шляху в принципі, не лише на морі.

Тепер навігація — це орієнтація в тому чи іншому просторі або системі. А конкретний інструмент, який вам із цим допомагає, є засобом навігації.

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

В контексті вебсайтів навігація може бути:

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

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

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

В цьому матеріалі ми зосередимось саме на внутрішній навігації та її засобах.

Засоби навігації вебсайту

Загальна навігація

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

Посилання

Про посилання (або ж гіперпосилання) ми вже згадували в одному з попередніх матеріалів, коли описували типові текстові елементи та способи їхнього оформлення.

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

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

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

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

Меню сайту

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

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

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

  • невідвідана сторінка,
  • відвідана сторінка
  • поточна сторінка,
  • стан наведення,
  • стан натискання.

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

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

Для навігації в межах презентаційних сайтів одного головного меню цілком достатньо, адже там порівняно небагато розділів — як правило, 5-7. Але в деяких сайтах, особливо в інтернет-магазинах, структура дещо складніша.

Тому існує поняття глибина сайту — тобто, визначення кількості рівнів.

Наприклад, сторінка Apple MacBook на сайті інтернет-магазину належить до розділу ноутбуків Apple, які своєю чергою входять до розділу ноутбуків, які є частиною розділу комп’ютерної техніки. Це означає цілих чотири рівні вебсайту!

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

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

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

Карта сайту

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

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

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

Якщо ви не були активним інтернет-користувачем в 90-і, то, радше за все, в цьому матеріалі бачите цю іконку ледь не вперше. Річ у тім, що певної миті візуальними картами сайту користуватись перестали. Чому? Тому що для простих сайтів наявність такого розділу вже була зайвою. А для складних ресурсів — марною, бо структура таких сайтів надто складна для сприйняття.

Приблизно отак виглядає карта для інтернет-магазину:

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

До речі, попри те, що для відвідувачів сайтів зручнішою є навігація у формі меню, пошукові роботи й досі користуються картою сайтів. Вона зберігається у спеціальному файлі, що так і називається sitemap і має розширення xml.

Xml — це скорочено від англійського Extensible Markup Language, тобто «розширювана мова розмітки». Цю мову запропонував консорціум W3C як мову розмітки ієрархічно структурованих даних для обміну між різними застосунками.

В ньому структура сайту виглядає так:

Пошук

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

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

З точки зору оформлення, пошук — це, найчастіше, елементарна форма, що складається з простого поля та кнопки.

Навігація «хлібні крихти»

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

У звичайних презентаційних сайтах недоцільно використовувати таку навігацію. А от для інтернет-магазинів вона є дуже корисною.

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

Локальна навігація

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

Псевдопосилання

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

Псевдопосилання може використовуватись для переходу до певного інформаційного блоку на даній сторінці або виконання якоїсь дії (по суті, виконує роль кнопки).

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

Меню розділу (чи сторінки)

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

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

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

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

  • Активний блок,
  • Неактивний блок,
  • Стан наведення,
  • Стан натискання.

Для стану наведення часто є характерним показ назви як активного, так і неактивного блоку.

Вкладки

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

Як правило, вкладки зображаються аналогічно до фізичних вкладок, які можна зустріти в каталогах — це прямокутні блоки або ж блоки з невеличкими заокругленнями на кутах. При цьому, в активної вкладки таке ж тло, як і в блоку, з яким вона пов’язана, і немає однієї рамки.

На завершення

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

·
7145
·
5
·
dislikesosogoodsuper 128
Наступна стаття
Сітки у вебсайтах
1547
Головна