Часто, заходячи на якийсь цікавий (або не дуже) сайт можна зустріти ряд красивих кнопочок в ряд з написами на них. Без праці можна здогадатися, що це і є навігаційна система сайту. А що незрозумілого? Ось ця, з написом «Продукція», наверняки розповідає ніж фірма багата, а ось ця — «Контакти», як з ними зв’язатися. А тепер вимкнемо в настройках броузера показ графіки… Рамка… рамка.. Мда…
Господа вебдизайнеры! Пам’ятайте, що не всі користувачі живуть у Москві, де й лінії хороші і доступ по діалапу недорогий… Часто користувач, щоб заощадити зайву копійку, захистивши себе від безлічі непотрібної реклами, вимикає відображення малюнків у своєму браузері. Саме в цей момент виникає питання: Про що думав дизайнер, створюючи навігацію на сайті за допомогою зображень, навіть без атрибуту alt?
Навігація по сайту здійснюється за допомогою графічних і текстових посилань. Говорячи про пересування по сайту, ми маємо на увазі дизайн і реалізацію навігаційної системи, яка зазвичай розташовується вгорі, внизу або на одній з бічних сторін веб-сторінки (іноді зустрічаються всі три способи розташування навігації на одній сторінці).
Ось прийшов час поговорити про переваги і недоліки того або іншого варіанта.
Типи посилань
1. Текстові посилання — найбільш проста форма навігації. Зазвичай це 1-3 слова, які описують те, куди приведе ця посилання. Наприклад: карта сайту, зв’язок з нами, посилання, гостьова книга і т. д.
Переваги:
Висока швидкість завантаження. Читаність у всіх броузерах. Легка масштабованість і редагування. Допомагають в ранжируванні запитів з пошукових систем.
Недоліки:
Некоммуникативность (можуть бути неправильно истолкованны користувачем). Складно добитися точного розміру (різні броузери по-різному интерпритируют ті чи інші величини шрифтів, навіть якщо він заданий фіксовано).
Що робити:
Можна додати додаткову інформацію (в рядок стану, наприклад) до текстовими гіперпосиланнями засобами JavaScript (команда OnMouseOver), однак слід мати на увазі, що деякі серфери не дуже люблять, коли рядок стану показує реальні посилання. До того ж, більшість сучасних браузерів дозволяють відключити рядок стану.
2. Графічні посилання — розіб’ємо їх на дві категорії: графічні карти (image maps) і кнопки.
2.1. Графічні карти — окремий графічний елемент, розділений на декілька ділянок, які, в свою чергу, є гіперпосиланнями.
Переваги:
Карти можуть виглядати досить ефектно. Вони зручні для установки одного графічного елемента замість декількох. Є досить сильним засобом комунікації з користувачем.
Недоліки:
Самий великий недолік в тому, що при відключенні користувачем завантаження графіки в своєму браузері, карта марна! Швидкість завантаження графіки відіграє важливу роль. Труднообновляемы (швидше за все доведеться переробляти всю карту). Користувачі повинні «пограти мишкою», намагаючись знайти посилання. Для пошукових машин картинка мало що значить… Крім того красиву мапу зробити досить складно…
Думки:
Правильно зроблені карти можуть змусити користувача «ахнути» при заході на сайт. Однак, ви НЕ МОЖЕТЕ покладатися на карти зображення, як на єдиний засіб пересування по сайту. На деяких сайтах я став жертвою графічних карт, намагаючись знайти посилання, і більше туди не повернувся… Також, очікувати карту розміром до 100 КБ — самогубство. Це явно не допоможе залученню відвідувачів на сайт. Я раджу використовувати їх дуже обережно, де це необхідно, або не використовувати взагалі.
2.2. Графічні кнопки
Переваги:
Привертають увагу користувача (не завжди звичайно). Можуть бути більш описовими (візуально), ніж прості текстові посилання. Можуть дати визульное відчуття користувачеві де він знаходиться в даний момент (тобто кнопка для поточної сторінки злегка відрізняється від інших кнопок). Більш гнучкі, ніж графічні карти. Більш швидке завантаження, ніж у карти. Немає необхідності «нащупывания» посилань.
Недоліки:
Час завантаження. Часто, кнопки менш описові (наочні), ніж простий текст. Необхідність робити нову кнопку для будь-яких додаткових розділів сайту. Погано застосовується для великих сайтів. Без ALT атрибутів, незавантажені кнопки не придатні для навігації. Не дуже корисні в досягненні високого становища в запитах пошукових серверів.
Думки:
Графічні кнопки, що містять тільки текст, повинні, ймовірно, бути замінені текстовими посиланнями, менш загружащими трафік. Пам’ятайте, що якщо ви збираєтеся використовувати OnMouseOver з вашими кнопками, то це подвоює швидкість завантаження. Якщо ваш сайт потребує 20 кнопки для навігації, — про графічних кнопках можете забути, замість цього використовуйте текстові посилання. Використання атрибуту ALT для опису ваших кнопок повинно бути обов’язковим! Використовуйте кнопки для навігації обережно, тільки якщо це дійсно потрібно.
Про місце розташування…
Ref1 | Посилання2 | Ссылка3 | Ссылка4 | Ссылка5
Посилання2
Ссылка3
Ссылка4
Ссылка5 | Ссылка4 | Ссылка3 | Посилання2 | Ref1
Від місця розташування навігаційної панелі залежить те, наскільки ефективна навігація по сайту як така.
Якщо панель нагорі, це дає перевагу в тому, що відразу каже відвідувачу які розділи сайту є основними. Є також і недолік — при розміщенні впритул до верху сторінки, користувач може не помітити посилання і прокрутити сторінку вниз, намагаючись знайти навігаційну панель в інших звичних місцях.
Якщо панель внизу — це зручно, так як читання сторінки зазвичай закінчується саме там. Однак, ця область залишається невидимою поки сторінку не прокрутять до кінця вниз. Хороша новина для любителів навігації знизу: більшість людей знають про таку систему навігації через лише кілька годин серфінгу в інтернеті і намагаються знайти таку панель внизу сторінки.
Якщо ж панель навігації розташована на лівій або на правій стороні веб сторінки, це практично моментально видно користувачеві. Однак, не завжди бічна панель навігації видно цілком, і відвідувачеві доводиться прокручувати сторінку вгору і вниз, намагаючись знайти потрібну посилання.
У той час як позиціонування навігаційної панелі залишається на особистий смак сайтів (комбінування всіх трьох методів, ймовірно, найбільш ефективно), за таким важливим моментом, як послідовність, повинен стежити кожен дизайнер. Розташовуйте навігаційну панель на одному і тому ж місці на ВСІХ сторінках. Не збивайте відвідувача з пантелику, переміщаючи панель в інше місце.
Думки:
Не грайте зникненням/появою кнопок(посилань). Деякі веб майстри люблять прибирати посилання поточної сторінки з навігаційної панелі. Це не тільки складно виконати(з точки зору веб майстри), але і також плутає відвідувачів, коли вони більше не бачать посилання на колишньому місці. Або ж дайте відвідувачу видиму підказку, про те, де саме він знаходиться в даний момент. Кнопки зі звуковими ефектами також небажані, це дратує. Всі посилання повинні мати однакову послідовність на всіх сторінках сайту. Всі назви одного і того ж розділу повинні бути однаковими на всьому сайті, не використовуйте синоніми, а то відвідувач може навіть подумати, що потрапив на інший сайт.
Не дивуйте користувача «раптом» новою навігаційною панеллю. Відвідувач, який натискає кнопку і раптово знаходить на сторінці абсолютно нову навігаційну панель, буде дуже заплутаний тим, де ж він все-таки знаходиться. Він може подумати, що потрапив на інший сайт або ж, що несподівано для нього було введено новий розділ. Чому він не був попереджений про це на попередній сторінці?
«Навігаційна задоволеність» відвідувача від сайту безпосередньо залежить від швидкості досягнення необхідної йому інформації, тому:
Намагайтеся бути описовими: вкладайте якомога більше інформації у вашу навігаційну систему. Ви пам’ятаєте загадкову схему кнопок Майкрософта в їх програмах? Всі ми витратили пару днів, для того, щоб дізнатися, що кнопка з порожньою сторінкою це «Новий Документ» і що дві сторінки, одна над іншою, це «Копіювання». Це — НЕ інтуїтивна навігація. Додавання тексту до графічних кнопок. Використовуйте текстові посилання з відкритим змістом, будьте описовими настільки, наскільки це дозволяє місце.
Не змушуйте користувача надмірно смикати мишку: на нормальному сайті усі сторінки повинні бути досяжні трьома кліками. Ідеально, коли багато внутрішні сторінки доступні вже з першої сторінки сайту. Цікаво як? Можливе використання випадаючих меню для організації довгих списків посилань або головних категорій вашого сайту. Не змушуйте користувача полювати за інформацією шляхом багаторазових кліків по посиланнях.
Не покладайтеся на пошук по сайту. Також, як пошукові сервери не завжди можуть виправдати надії користувача, що шукає щось певне, так само і особливість пошуку по сайту — видавати не завжди очікувані результати. Часто, користувачі залишають сторінки з результатами пошуку, так і не знайшовши відповіді на свій запит пошуковій системі сайту. Це може дуже сильно їх засмутити.
Останнє зауваження про навігації
Слухайте ваших відвідувачів. Вони — цінні джерела інформації про те, що вони шукають і не знаходять на вашому сайті. Якщо відвідувач каже, що він не може знайти елемент X, спробуйте наскільки це проста задача для вас самих. Якщо ви не знайдете елемент X на вашому сайті, запам’ятайте це упущення для майбутніх додатків. У кінцевому рахунку, задоволення відвідувача від використання сайтом полягає в тому, як добре і правильно організована навігаційна система з сайту.
