Навігація по сайту: дизайн і юзабіліті

1. Розміщення навігаційних елементів
2. Текстові посилання: переваги і помилки
3. Контрасти в колірній схемі
4. Рішення з випадає меню
5. висновок

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

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

Розміщення навігаційних елементів

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

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

1. зрозумілість
2. легкість
3. Мінімальна почуття розчарування

Помітна очевидність - це норма. Неприпустима ситуація, коли відвідувач не здогадується про КЕП елементів первинної (меню) або вторинної (прямий перехід до сторінок) навігації. Одним словом:

Чи не змушуйте користувача пристосовуватися до інтерфейсу - повертатися назад, втрачаючи час у пошуках ...

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

Текстові посилання: переваги і помилки

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

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

Неясна логічна структура робить вміст розділів неочевидним для користувача, змушуючи перебирати їх поспіль в пошуку цікавлять матеріалів. Для юзабіліті сайту це, природно, мінус. Елементарний приклад подібного невдалого рішення в навігації (для сайту агенції Eighty8Four) ми вже розглядали в статті Дизайн меню сайту: ідеї, поради та приклади , Але вони поміняли дизайн, виправивши цю помилку.

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

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

Спрощуємо призначений для користувача інтерфейс

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

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

Контрасти в колірній схемі

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

Рішення з випадає меню

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

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

Автоматичне згортання випадаючих списків при найменшому невірному русі іноді вимагає мавпячої спритності для управління сайтом

Чому таке відбувається? Користувачі хочуть витрачати мінімум свого часу на навігацію і для доступу до пунктів підміню переміщують курсор по найкоротшому шляху - діагонально. Мимовільний вихід покажчика миші за межі призводить до хляпанню меню. При більшій кількості рівнів меню, починаються проблеми. Дивіться самі: (http://gig-pro.ru)

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

Wikimart (Ліве вертикальне меню) Меню, що випадає збоку із списком підкатегорій з посиланнями підкатегорій (див. Збільшення простору за останній посиланням списку). Ще приклади:
http: /www.mvideo.ru
http: /www.ebuyer.com
http: /molotok.ru

Є й винятки, коли випадаюче меню покращує юзабіліті, дозволяє реалізувати багаторівневу ієрархію категорій товарів або розділів сайту. Mega Drop Down меню - найкраще рішення для великих веб-сайтів або порталів. Тут воно стає помічником користувача, оскільки на сайтах великої тематики завжди утруднена навігація. Якщо тільки користувачеві не надано можливості доступу до всіх пунктів меню в одному місці (МЕГА меню). сайт Tesco.com хороший приклад навігації з розширеною структурою меню, яке часом не схлопивается.

Щоб пункти меню розташувати вірно, згадайте правило:

Людина запам'ятає перше і останнє з того, що бачив або читав набагато краще, ніж всю проміжну інформацію

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

висновок

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