Навігаційні засоби веб-сайту

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

Ключові слова: веб-сайт, користувач, навігація, кнопка, посилання, функціональність, зручність, принципи ефективності.

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

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

Аналіз останніх досліджень і публікацій. Беручи до уваги те, що веб-дизайн — це відносно молодий напрям в проектно-художній творчості, то і кількість бібліографічних джерел лімітована, більшість з яких присвячена лише веб-програмуванню. А серед авторів, що досліджували різноманітні аспекти графічної складової веб-дизайну можна відмітити роботи: Д. Бородаєва, в якій науковець розглядав сайт як об'єкт графічного дизайну; А. Бєляєва, що досліджував особливості графічної моделі інтернет-версій періодичних видань; Н. Кузнєцової, що розглядала веб-дизайн в контексті інструментарію моделювання віртуального простору сучасної культури. Праця Д. Віна «Искусство веб-дизайна» має в собі ідею системного підходу до вивчення веб-дизайну та осмислення його як феномену Інтернету разом з наведенням паралелей між веб-дизайном та дизайном друкованих видань. Монографіяросійського веб-дизайнера Д. Кірсанова «Вебдизайн: книга Дмитрия Кирсанова» спрямована саме на вирішення практичних завдань щодо веб-дизайну, починаючи з теоретичних основ візуального дизайну і закінчуючи інтернеттехнологіями і прийомами практичної роботи над веб-сайтом. В роботі Е. Платонової «Интернет-реклама как объект и субъект культуротворчества» в якості складової сайту розглядається саме реклама.

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

Мета статті. Головною метою цієї роботи є комплексний аналіз особливостей, вимог та принципів ефективності у проектуванні засобів навігації веб-сайту, а також розкриття значимості тої ролі, яку відіграє навігація при користуванні не тільки окремим сайтом, а і всім Інтернетом в цілому.

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

Як стверджує Д. Бородаєв, Інтернет являє собою інформаційний простір з навігаційною системою, де користувач пересувається, активізуючи систему гіперпосилань, які встановлюють прямий зв’язок між запитом (ключовим словом/ поняттям — своєрідним інформаційним кодом) та відповіддю (його дешифруванням та розгорнутою інформацією з даної теми) [2, с. 14].

А веб-сайт, який складається з веб-сторінок, є головною складовою інформаційної структури Інтернету [2, с. 9].

Д. Кірсанов обґрунтовує необхідність навігаційної системи в кожному веб-сайті: «Якщо нелінійність змісту — головна відмінність веб-сайту від більш традиційних видів публікацій, то навігаційна система — це необхідний для кожного сайту засіб орієнтування і переміщення в цьому нелінійному просторі» [4, с. 205].

Так само, як і інші компоненти веб-сайту, навігація на сайті теж повинна виконувати свої певні специфічні функції. Список таких функцій наводить П. Макінтайр, зазначаючи, що навігація має виконувати наступне [5, с. 68]:

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

За словами Д. Бородаєва, при навігації по Інтернету користувачі стикаються з труднощами визначення свого місцезнаходження та можливостями вибору, що надаються навігаційними системами різноманітних веб-сайтів [2, с. 9]. Тому чіткі принципи навігації по веб-сайту забезпечують можливість швидко з’ясувати розташування відомостей та можливостей, закладених у вебсайті [2, с. 11].

Як вважає Д. Кірсанов, роль логічної і якісно виконаної навігаційної системи сайту тісно пов’язана з особливою роллю його головної сторінки [4, с. 205]. Далі науковець пояснює свою думку: «Якщо тільки що прийшовшого на першу сторінку користувача ви зможете переконати зробити хоча б один крок всередину сайту, ймовірність того, що в кінці кінців він зацікавиться і розгляне ваш сайт більш детально, різко зростає. І зрозуміло, бажання користувача клацнути по якому-небудь посиланню дуже сильно залежить від того, як це посилання сформульоване, оформлене і розміщене» [4, с. 205−206].

Для того, щоб навігація ефективно виконувала свої функції і якнайбільше допомагала в користуванні веб-сайтом, існують певні загальні принципи, які лежать в основі проектування навігації. Як вказує П. Макінтайр, вони полягають в тому, що потрібно [5, с. 69]:

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

Також науковець наводить деякі додаткові принципи, які стверджують, що потрібно [5, с. 123−124]:

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

Навіть дотримуючись цих принципів, веб-дизайнер все одно залишається з певною свободою вибору відносно того, яким чином розробити навігацію, і також залишається значна кількість варіантів її розробки, кожен з яких потрібно зважити, а потім обрати найдоречніший з них, який відповідає стилю, структурі та призначенню вебсайту. З цього приводу слушно зауважує В. Головач: «Єдині принципи побудови навігаційних систем можуть бути застосовані багатьма різними шляхами, головне — провести аналіз вимог до навігаційної системи і підійти до справи творчо» [3, с. 60].

А. Борисенко відзначає, що система навігації залежить від структурної схеми вузла [1, с. 99]. Далі він пише, що спосіб доступу до інформації для клієнта необхідно зробити простим і зрозумілим. Відвідувачі повинні чітко розуміти, в якій частині Web-вузла вони знаходяться, як перейти до наступного або попереднього розділу, як повернутись на домашню сторінку [1, с. 99].

Це питання ретельно розглядає Д. Бородаєв:

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

«При розгляді питань навігації та основ інформаційного проектування було з’ясовано, що інтерфейс веб сторінки має допомогти користувачу отримати відповідь на три фундаментальних питання навігації: «Де я знаходжусь?», «Де я вже був?», «Куди я можу піти?» [2, с. 12].

На подібні фундаментальні питання теж вказує Д. Кірсанов: «Кожна сторінка сайту повинна, крім всіх інших висунутих до неї вимог, відповідати відвідувачеві на два неминучо виникаючих у нього питання — «де я знаходжусь?» і «куди мені звідси йти?» [4, с. 205].

Багато авторів наводять приклади основних питань, на які повинна відповідати навігація. До цих авторів також відноситься А. Борисенко:

«В гарній системі навігації повинні бути присутні не тільки посилання на інші сторінки Webвузла — необхідна також інформація про місцезнаходження користувача. Відвідувач повинен знати відповіді на наступні навігаційні питання:

• — Де я знаходжусь?
• — Куди можу піти?
• — Як туди добратись?
• — Як повернутись на первісне місце?" [1, с. 100]

А далі він звертає увагу на те, що потрібно, для того, щоб дати відповідь на ці питання:

«Щоб користувач міг відповісти на ці питання, надайте йому наступну інформацію:

• — Поточну сторінку і тип відображаємо! на ній інформації.
• — Місцезнаходження користувача по відношенню до інших сторінок Web-вузла.
• — Зв'язні, прості для розуміння посилання.
• — Методи альтернативні кнопці оглядача Back (Назад), що дозволяють користувачам повернутися до стартової точки" [1, с. 100].

Я. Нільсен, натомість більш детальніше розглядає можливі способи дати відповідь на ці питання. Пояснюючи, як відповісти на питання «Де я знаходжусь?», він говорить, що поточне місцезнаходження користувача повинно бути показано на двох рівнях [6, с. 232]:

• — відносно всього Інтернету в цілому;
• — відносно структури сайту.

За його словами, користувачі не дізнаються, на якому сайті вони знаходяться, до тих пір поки ви не скажете їм про це [6, с. 232]. Далі він пояснює, що саме потрібно робити для цього: «Правило номер один — це поміщати логотип (або інший ідентифікатор сайту) на кожній сторінці. Логотип повинен мати постійне місце розташування (бажано в лівому верхньому кутку, якщо мова сайту передбачає читання зліва направо) і повинен бути організований як посилання на першу сторінку.

Місцезнаходження відвідувача на сайті зазвичай вказується таким чином: зображується структура сайту і виділяється той сектор, в якому розміщена поточна сторінка" [6, с. 232−233].

Пояснюючи як відповісти на питання «Де я вже був?», він говорить наступне: «Навігаційні механізми сучасних браузерів надають деяку допомогу в цьому питанні. Кнопка Назад (Back) відправляє на попередню сторінку, список History показує сторінки, які ви відвідали останніми, а посилання, якими ви вже користувались, відзначаються іншим кольором» [6, с. 235].

А відповісти на питання «Куди я можу піти?», на думку науковця, нескладно, користуючись представленими можливостями навігації та посилань. Крім того, якщо користувач зрозуміє структуру сайту, у нього з’явиться загальне уявлення про сторінки, які він не бачить зараз і куди може потрапити [6, с. 235].

Засоби навігації можна поділити на основні, які мають бути присутні на кожній сторінці сайту, і допоміжні. До основних навігаційних засобів П. Макінтайр відносить [5, с. 75−76]:

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

А допоміжні засоби, як вказує науковець, включають в себе: вбудовані посилання, тізери, «хлібні крихти», карти сайту, функцію пошуку та другорядні меню [5, с. 103]. Вбудовані посилання, за його словами, являють собою текстові посилання, які знаходяться в межах звичайного тексту і які можна впізнати тільки по деяким змінам форматування, таким як підкреслення та зміна кольору. Тізер — це будь-який боковий елемент призначений для того, щоб привернути увагу відвідувача. Тізери, зазвичай, використовується для оголошення про продаж товарів або для показу фрагментів новин [5, с. 118].

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

Далі П. Макінтайр розглядає функцію пошуку і зауважує, що добре розроблені внутрішні функції пошуку на сайті можуть дати користувачу швидкий доступ до необхідної інформації. Також він відмічає, що у більшості випадків, інтерфейс пошуку на кожній сторінці має бути якомога простішим і складатися в основному з текстового поля для введення пошукового запиту [5, с. 114−115].

Д. Кірсанов, крім того, ще розглядає навігацію в межах однієї сторінки, як допоміжний навігаційний засіб:

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

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

«Як домогтися того, щоб навіть самому недосвідченому користувачу було ясно, що це саме кнопка, а не просто напис або картинка?» [4, с. 208] Далі він наголошує на наступному: «Ідентифікація „клікабельних“ областей повинна відбуватися миттєво і абсолютно підсвідомо, — щоб до того моменту, коли відвідувач ознайомиться зі змістом сторінки, рука його вже сама підводила мишку до кнопки» [4, с. 208−209].

П. Макінтайр, розглядаючи такі елементи веб-сайту, як навігаційні зображення, вказує, що вони, як правило, мають наступні ознаки [5, с. 96]:

• — симетричні форми, зокрема, кола, прямокутники, овали і закруглені прямокутники;
• — ярлики, які здаються навігаційними;
• — 3Б скоси, які змушують елемент виглядати наче піднята або натиснута кнопка;
• — тіні, які збільшують реальний вигляд кнопки;
• — ефекти наведення миші;
• — значок, який зображає реальні предмети, наприклад, принтер для значка друку сторінки;
• — ізоляція від ненавігаційного контенту, а також групування символів.

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

Ще він зазначає, що до навігаційних зображень також відносяться навігаційні іконки (маленькі, стилізовані зображення або символи, які займають мінімум місця на екрані) і зображувальна карта (одне зображення з декількома ділянками, які виконують роль посилань) [5, с. 97−98].

Найбільш поширений навігаційний засіб — це меню. За словами П. Макінтайра, меню служать не тільки в якості навігації, але також і як вираження базової архітектури сайту; чітка структура меню допомагає відвідувачу побудувати ментальну карту сайту [5, с. 103]. До основних типів розміщення меню він відносить [5, с. 104]:

• — перевернуте Ь-образне розміщення з головною навігацією зазвичай у верхній частині «Ь»;
• — горизонтальне головне меню з допоміжною панеллю меню під ним для локальної навігації;
• — випадне меню для локальної навігації.

Також ним вказується, що зовнішній вигляд меню може бути позначений [5, с. 105−106]:

• — розміщенням елементів в межах рамки або блоку іншого фонового кольору;
• — розміщенням текстових посилань у вертикальному списку.

Ієрархія меню може бути вузькою, але глибокою, з лише декількома варіантами вибору в кожному меню, або широкою, але неглибокою, з численними варіантами вибору в кожному меню [5, с. 106].

П. Макінтайр відмічає, що для великих сайтів використовуються багаторівневі, розширювані, інтерактивні меню, які часто називаються випадними або каскадними меню, в залежності від їх візуальних характеристик [5, с. 108]. А послідовні меню часто розміщені в нижній частині сторінки і використовуються в тих випадках, коли сторінки призначені для читання послідовно, наприклад, для великої статті, яка охоплює декілька сторінок [5, с. 110].

Висновки і пропозиції. Отже, резюмуючи, відзначимо, що навігація — це необхідний засіб орієнтування і переміщення в межах окремого веб-сайту та в межах всієї мережі Інтернет. Для максимально ефективного функціонування навігація повинна бути простою, видимою та цілісною, доступною для відвідувачів з різним рівнем технічної кваліфікації, а також повинна орієнтовувати відвідувача стосовно його точки місцезнаходження і відповідати на такі питання користувача: «Де я знаходжусь?», «Де я вже був?», «Куди я можу піти?». А відповідь на ці питання можуть дати такі основні навігаційні засоби: логотип сайту та заголовок сторінки; посилання на сторінку, що містить контактну інформацію; посилання на головну сторінку; посилання на важливі сторінки сайту.

Список літератури

• 1. Борисенко А. А. Web-дизайн. Просто как дважды два / А. А. Борисенко. М.: Эксмо, 2008. 320 с.
• 2. Бородаєв Д. В. Веб-сайт як об'єкт графічного дизайну: автореф. дис… канд. мистецтвознавства: 05.01.03 / Д. В. Бородаєв. Харківська державна академія дизайну і мистецтв. Харків, 2004. 20 с.
• 3. Головач В. В. Дизайн пользовательского интерфейса / В. В. Головач. 141 с.
• 4. Кирсанов Д. Веб-дизайн: книга Дмитрия Кирсанова / Д. Кирсанов. СПб.: Символ-Плюс, 2004. 376 с.
• 5. McIntire, Penny. Visual Design for the Modern Web. Berkeley: New Riders, 2008, 352 p.
• 6. Нильсен Я. Веб-дизайн: книга Якоба Нильсена / Я. Нильсен. Пер. с англ. СПб.: Символ-Плюс, 2001. 512 с.