Принципи ефективної системи навігації. Веб-навігація: покращуємо та вдосконалюємо Односторінкова точкова навігація

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

Найбільш популярними і все ще актуальними «путівниками» сайтами є роловери (Від англ. rollover). Вони можуть бути обіграні графікою, або просто являти собою текстове гіперпосилання. Роловери, як правило, допомагають відповісти користувачеві на питання «Де я вже був?».

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

Зручна навігація це:

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

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

Веб-дизайн з України. Насолоджуватися робочим столом з елементами навігації можна довго.

Сайт акторки Сари Хайленд (Sarah Hyland) є справжнім відображенням її особистості. Ескізи, використані як меню, підходять для цієї сторінки ідеально!

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

Креативна агенція оригінальна у всьому. Навігаційне меню у вигляді шкали вимірів.

Яскравий сайт бюро подорожей з не менш барвистим меню.

Незвичайний сайт людини із незвичайним захопленням. Веб-проект картографа-аматора.

Пункти меню начебто намальовані від руки, правда?

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

Інтернет-проект для розміщення портфоліо. При натисканні на будь-який з пунктів меню картинка «утоплюється».

Ще одне оригінальне подання меню.

Все геніальне просто.

Не меню, а суцільна мозаїка. Незвичайно та практично.

Кожна фігурка на сторінці щось та таїть у собі.

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

Найоригінальніше hand-made ательє.

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

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

Якою має бути навігація

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

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

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

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

Даний вид навігації найкраще працює на невеликих сайтах, де у навігації представлено лише кілька пунктів.

Приклади:

Прихована навігація

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

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

Інші приклади:

Гібридна навігація

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

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

Приклади:

Системна навігація

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

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

Приклади:

Експериментальна навігація

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

WWW (WorldWideWeb) - це лише частина послуг, які має Інтернет. Крім WWW, за допомогою Інтернету можна скористатися електронною поштою, FTP-сервісом, телеконференціями та іншими послугами. Російською мовою WWW перекладають по-різному, від « Всесвітня павутина» до «ППП - Повсюдно Протягнута Павутина».

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

WWWпобудована на технології, основою якої покладено гіпертекст, тобто. текст із посиланнями. Розробка цієї технології в основному проводилася у Європейській лабораторії фізики елементарних частинок (CERN) у Женеві. Зараз можна говорити не про гіпертекстовий, а про гіпермедійне середовище, тобто. мережа перестала бути текстовою, у ній з'явилося дуже багато графіки, музики тощо. Сайти будуються за новими технологіями, наприклад Flash, тобто не містять тексту як такого.

Переміщення від сайту до сайту або від сторінки до сторінки здійснюється за допомогою гіперпосилань.

Для адресації WWW використовується URL. У загальному вигляді URL записується як

протокол://адреса сервера (hostdomain):[порт]/шлях/ім'я_файлу

Розглянемо, наприклад, адресу: http:// www. rea. ru/ new/ index. htm. Тут:

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

www. rea. ru- адреса сервера, де www - вузол, на якому розміщено сайт, геа таru- імена доменів другого та третього рівня;

new- каталог (шлях) до шуканого файлу;

index. htm- ім'я файлу, де htm- Його тип.

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

Часто в полі введення адреси браузера достатньо ввести лише адресу сервера ( www. rea. ru). Протокол HTTP буде дописано за замовчуванням. Також за замовчуванням буде відкрито файл index із кореневого каталогу.

Браузери

Браузери(Browser) - це програми-браузери, за допомогою яких можна переглядати ресурси WWW. Також за допомогою браузерів можна переглядати HTML-файли та деякі інші типи файлів, не будучи підключеним до мережі.

Браузери можуть інтерпретувати адреси (URL), маркери мови HTML, а також розуміти кілька Інтернет - протоколів, таких як HTTP, FTP.

До найпопулярніших браузерів відносяться Microsoft Internet Explorer, Netscape Navigator, Opera.

2.6. Сімейство програм Microsoft для роботи в Інтернеті

Сімейство програм корпорації Microsoft для роботи в Інтернеті було створено за досить короткий термін - з 1995 по 1997 і спочатку поступалося за популярністю програмам фірми Netscape Communications. Однак після випуску серії програм InternetExplorer, а потім інтеграції їх в операційну систему Windows 98, становище різко змінилося. Особливо це стосується російськомовної частини Інтернету. Вважається, що понад 70% користувачів зараз працюють із програмами Internet Explorer. Кожна програма сімейства призначена для вирішення конкретного завдання, але їх інтерфейс користувача дуже схожий, що полегшує процес вивчення. До сімейства програм для роботи з Інтернетом входять:

оглядач InternetExplorer- програма перегляду документів WWW, локальної мережіабо інтрамережі;

програма для обміну повідомленнями та роботи з групами новин OutLookExpress;

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

програма NetShow, що дозволяє відтворити в Інтернеті мультимедійні документи;

програма FontPageExpress- Редактор документів на мові HTML.

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

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

Помилка №1: нестандартний стиль

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

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

Помилка №2: універсальні написи пунктів меню

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

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

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

Помилка №3: ​​меню, що випадає

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

Багатьом з вас напевно доводилося буквально ловити меню, що випадає. Один незграбний рух - і він тікає від вас! І ось ви, зібравшись із силами, знову шукаєте, гукаєте, а там – сюрприз! - ще один перелік варіантів дій. Подібні наздоганяння дуже дратують! Задумайтеся, можливо не варто зайвий раз балакати нерви своїм потенційним клієнтам?

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

Помилка №4: велика кількість пунктів меню

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

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

Помилка №5: недоречне розташування пункту меню для оформлення замовлення

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

Концентрація уваги значно вища на початку списку (ефект первинності) та наприкінці (ефект новизни). Ось чому правильно розставляти найважливіші пункти на початку навігації, другорядні – у центрі. Пункт меню «Контакт» слід розмістити в кінці навігації TOP в крайньому правому кутку.

Бонусна підказка: посилання – forever, кнопки – ніколи!

У випадку, якщо ви відстали від тенденцій веб-дизайну років на 8 і досі використовуєте графічні навігаційні кнопки замість текстових посилань, тоді ми наводимо 5 причин переглянути свої звички:

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

А тепер, як ми обіцяли: 5 прикладів навігації сайту без помилок.