Розробка ідеї та натхнення навігаційного меню
Меню навігації на веб-сайті подібно дорожньому знаку на вулиці або директорії рівня в торговому центрі. Ви не можете дійти до місця призначення, не знаючи, де ви знаходитесь. Як і в реальному житті, навігація в веб-дизайні дуже важлива і відіграє важливу роль у зручності використання веб-сайту, а також в роботі з користувачами.
Сьогодні ви можете побачити безліч різних типів навігаційних меню з цікавими, креативними та незвичайними дизайном. Але як щодо ефективної навігації на веб-сайті, як би вона виглядала; як це повинно виглядати?
Сьогодні я хотів би поділитися своїми спостереженнями та знаннями про важливість навігації у веб-дизайні. Я розкрию кілька простих порад, які можна використовувати для покращення навігації та зручності використання веб-сайту. Там також буде кілька прикладів ефективних меню навігації, щоб дати вам деяке уявлення про те, як планувати свій наступний дизайн.
Інформаційна архітектура
Планування навігації має починатися з інформаційної архітектури. Дуже важливо сісти і мозковий штурм про інформаційну архітектуру веб-сайту. Ви повинні з'ясувати, які функції пропонує веб-сайт, що є найважливішим і що може бути розміщено на нижчих рівнях в ієрархії інформації..
Інформаційна архітектура включає функції, потреби користувачів, карта сайту, тестування та каркаси. Докладніше про інформаційну архітектуру ви можете прочитати в статті Cameron Chapman в інформаційній архітектурі 101: Методи і кращі практики.
Використання технологій, що підтримуються користувачем
Не використовуйте Flash, JavaScript, jQuery або що-небудь інше, що може заважати доступу до навігації веб-сайту у створенні навігаційної панелі, або принаймні переконайтеся, що вони в змозі граціозно деградувати..
Додаткові посилання на витончена деградація javascript, перевірити цю посаду на 10 корисних резервних методів для CSS і Javascript.
Використовуйте прості, зручні для користувача умови
Краще використовувати прості, очевидні і терміни, які легко зрозуміти ніж дотримуватися галузевих термінів для вашого навігаційного меню. Будь-яке посилання, яке приймає користувачів більше, ніж за секунду або дві, щоб з'ясувати, ймовірно, непридатне для використання.
Якщо користувачеві необхідно натиснути на посилання, щоб з'ясувати, до чого призводить посилання, це сприятиме поганому досвіду користувачів для ваших відвідувачів.
Приклади
Умови навігаційного меню сайту Лариси Несс легко зрозумілі і досить поширені. Користувачі не вважатимуть це заплутаним, оскільки вони вже мають досвід роботи з такими меню.
Ось ще один хороший приклад чистого і зрозумілого навігаційного меню веб-сайту з загальними термінами, що використовуються в csupport.
Креативне агентство Eighty8Four використовує термін "виставковий зал", який може заплутати відвідувачів. Цей термін може означати портфель або роботу, але це не зрозуміло, і відвідувачі не мають іншого вибору, крім як натиснути, щоб перевірити це.
Стандартизуйте дизайн навігації
Використовуйте ту саму модель навігації на всіх сторінках. Це дуже важливо, тому що без послідовного дизайну користувач може подумати, що він знаходиться на іншому веб-сайті. Переконайтеся, що ви використовуєте ту саму модель навігації, щоб користувачі могли легко переглядати ваш сайт, не втрачаючи його.
Bluegg, показаний нижче, використовує простий і чистий дизайн навігації, який залишається незмінним у всіх підсторінках. Єдиною відмінністю є колірний індикатор, який показує сторінку, на якій зараз перебуває відвідувач.
Вкажіть, де ви знаходитесь
Важливо, щоб користувач завжди знав, де він знаходиться. Ви можете це зробити зміна фону посилання, колір назви сторінки або перетворити текст на жирний шрифт у навігаційному меню, щоб він відрізнявся від інших.
Остін Істчідерс використовує інший колір і фон для позначення сторінки, на якій знаходиться користувач. Цей індикатор також може працювати як тонка зміна конструкції, наприклад, за допомогою a фон різних навігації що створює відчуття, що інші пункти меню знаходяться в глибині.
Медична хірургія використовує більш темний колір як індикатор для відкритої підсторінки. Простий, але ефективний.
Використовуйте веб-угоди
Це все про просту у використанні та інтуїтивно зрозумілу навігацію по сайту. Веб-конвенції значно полегшують дизайнерам обхід дизайну. Більшість користувачів натискатимуть на логотип веб-сайту, щоб повернутися на домашню сторінку, щоб створити свій логотип.
Якщо ви цього не зробите, ви змушуєте їх витрачати час на вивчення чогось нового або, в деяких випадках, незручності, не надаючи того, що вони очікують бути загальноприйнятими навігаційними нормами.
Докладніше про веб-угоди можна дізнатися тут:
- 10 конвенцій веб-дизайну
- Не повторюйте колесо веб-дизайну
- Дизайн з веб-конвенцій
Інжекційний дизайн розміщує логотип у верхньому лівому куті, що відповідає одному з найбільш використовуваних веб-умов сьогодні.
Створення Адамса використовує одну з найпоширеніших веб-угод - логотип розміщується в лівому верхньому куті веб-сайту та посилання на домашню сторінку.
Перевірте: залучіть третю сторону
Завжди перевіряйте свій дизайн навігації будь-якою особою, яка раніше користувалася Інтернетом. Можливо, вам доведеться залучити людей, які не були пов'язані з процесом проектування, щоб перевірити його. Спостерігайте за їхніми уподобаннями під час навігації через свій сайт і проаналізуйте час, який їм знадобилося, щоб знайти сторінки, для яких вони шукали.
Для більшої точності, залучати більше людей, збирати дані, аналізувати і узагальнювати їх для кращої підгонки. Виконайте післятестове обстеження, якщо це необхідно. Ви можете отримати деякі несподівані ідеї та вхідні дані, які в іншому випадку не будуть виявлені без цього тестового запуску.
Наведіть контекст
Щоб відповідати вмісту та навігації, користувач веб-сайту може швидко знайти потрібні речі. Можна розмістити невеликі піктограми, які стосуються вмісту, на який ви посилаєтеся, або короткі описи, щоб дати огляд того, про що йде сторінка.
Мій власний велосипед використовує прості іконки, щоб надати користувачам більше інформації про те, що вони можуть знайти в певній підсторінці.
Сара Парментер використовує короткі та приємні підписи під основну навігацію, щоб надати деяку інформацію про підсторінки, на які посилається головна навігація.
Цілі SEO
Google любить послідовну навігацію. Добре мати послідовну навігацію не тільки для користувачів, щоб зрозуміти і отримати уявлення про те, як переміщатися по вашому веб-сайту, а й для пошукових систем для індексування вашого веб-сайту.
Роботи пошукової системи проскакують через ваш веб-сайт, щоб індексувати ваш сайт і розміщувати посилання на сторінці результатів пошуку. Якщо ви хочете бути видимими, зверніть увагу на хороший дизайн навігації і отримайте більше трафіку.
Безкоштовні сценарії навігації (CSS і jQuery)
Ось короткий список останніх навігаційних меню, які можуть бути корисними для ваших проектів. Ці скрипти зроблять користувача вашим продуктом ще кращим, додавши деякі приємні можливості та зробивши його приємним у використанні.
Скрипт вертикальних новин, керований XML, за допомогою HTML і jQuery: vScroller
Фільтрація
Page Scroller
Портфоліо часової шкали
HorizontalNav
Меню мінімалістичної навігації CSS3
Ефект навігації кола з CSS3
Ефекти навігації за допомогою сітки jQuery
Ascensor
Створіть елегантне навігаційне меню CSS3
Вітрина красивої горизонтальної навігації
І останнє, але не менш важливе, навігаційне меню горизонтальної навігації. Перегляньте ці дивовижні веб-сайти та їх навігаційні меню, щоб знайти нові ідеї для своїх проектів.
Ch3mical
Блум Пошук Маркетинг Інк.
Алекс Перес
Лібор Зезулка
Hauska!
Золоті острови
Ніл Карпентер
Марк Томас
3D полістирол
Liechtenecker
Світ пригод
Фото Arbutus
OMDRL
4 Сосна Пиво
Мисливські вина
Сподіваюся, ви знайдете цю статтю корисною та інформативною. Якщо у вас є якісь думки або якщо ви не згодні, будь ласка, поділіться своєю думкою в розділі коментарів.
