OsnovyWebDis

Рис. 7.9. Інформаційна архітектура «все в одному»

Однорівнева модель. Всі сторінки є рівнозначними, і на кожну можна перейти з будь-якої іншої (рис. 7.10). Це найпоширеніша модель для простих сайтів, які містять невелику кількість роз­ ділів, наприклад, «Головна сторінка», «Про нас», «Контакти», «Товари».

Рис. 7.10. Однорівнева інформаційна архітектура

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

Рис. 7 . 1 1 . Інформаційна архітектура «індекс»

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

Рис. 7.12. Інформаційна архітектура «ромашка»

Чітка ієрархія. На сторінку нижчого рівня можна потрапити ли­ ше через її «батька» (рис. 7.13). Прикладом використання такої архітектури є сайт розподілу офісів певної компанії по містах Ук­ раїни, адже кожен офіс може бути розташований лише в одному місті. Так само і гілка обговорень у форумі стосується однієї теми, водночас одна тема може мати кілька гілок обговорення.

Рис. 7.13. Інформаційна архітектура «чітка ієрархія»

Багатовимірна ієрархія. За такої організації вмісту сайту відвіду­ вач може знайти той самий матеріал різними способами, тобто реа­ лізовано кілька ієрархій, які перетинаються між собою (рис. 7.14). Типовим прикладом такої архітектури є сайт Амазон (http://www. amazon.com/), за допомогою якого виконувати пошук книжки мож­ на за жанром, автором чи назвою твору.

Рис. 7.14. Інформаційна архітектура «багатовимірна ієрархія»

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

Рис. 7.15. Інформаційна архітектура «пошукова»

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

зїї проектом, беручи до уваги такі фактори:

•доступність — навігація є одним із найважливіших елемен­ тів будь-якої сторінки, тому необхідно зробити її доступною в будь-який момент, тобто навігація має бути реалізована (або принаймні дубльована) простими HTML-кодами, а не ефекта­ ми Flash, Java, JavaScript, які можуть відтворюватися не на всіх комп'ютерах відвідувачів;

•ЗМІСТОВНІСТЬ — ЗМІСТ гіперпосилань має відповідати змісту ресурсів, на які вони посилаються, щоб людина, яка вперше потрапила на сайт, розуміла його структуру;

•видимість — гіперпосилання повинні виділятися з навколиш­ ніх елементів у певний спосіб;

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

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

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

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

Засоби навігації

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

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

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

Важливе значення також мають назви веб-сторінок, вказані у те­ гу <TITLE>. Саме під ними зберігаються адреси сторінок у папці Вибране, вони відображаються у заголовку вікна браузера, а та­ кож у меню кнопки Назад. Тому доцільно, щоб заголовок точно описував назву, зміст і призначення сторінки.

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

уструктурі сайту.

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

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

•Рядок навігації — відображає весь шлях від домашньої сто­ рінки сайту до тієї, на якій перебуває відвідувач у поточний

наступного рівня (рис. 7.19). Іноді це відбувається без клацан­ ня — лише після наведення вказівника миші. Інколи таке меню може мати кілька рівнів.

Рис. 7.18. Закладки у дизайні сайту uk.wikipedia.org

Рис. 7.19. Спливаюче меню на сайті www.cssplay.co.uk

•Багаторівневе дерево навігації — схоже на традиційні меню програм; на екрані відображається вся ієрархічна будова сай­ ту, і відвідувач легко може зробити вибір (рис. 7.20). Така реалізація дає змогу досить чітко й зрозуміло відобразити складні структури веб-сайтів.

•Сторінки — матеріал поділяють на кілька сторінок (зазви­ чай це роблять із довгими статтями, індексами, форумами

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

Рис. 7.20. Багаторівневі дерева навігації

Рис. 7 . 2 1 . Використання сторінок як навігаційних елементів

Проектування гіперпосилань

Гіперпосилання — це найважливіша частина гіпертексту і «це­ ментуючий матеріал» Інтернату. Посилання має сповіщати відві­ дувача про те, що той отримає, клацнувши його. Підкреслений текст повинен визначати зміст об'єкта, до якого буде здійснено перехід.

Одне з найстаріших правил веб-дизайну застерігає від використан­ ня таких гіперпосилань, як «клацніть тут». Замість фрази:

«Для ознайомлення з інформацією про історію мережі Інтернет клацніть тут»

краще писати:

«Ви можете ознайомитися з додатковою інформацією про історію мережі Інтернет».

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

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

Вправа 7.2

1.Відкрийте у браузері головну сторінку Представництва Євро­ пейської Комісії в Україні за адресою: http://www.delukr.ec.europa.eu/.

2.Розгляньте елементи навігації, наявні на сторінці (рис. 7.22). Тут міститься одночасно кілька їх різновидів: навігаційний рядок у заголовку сторінки, горизонтальне меню (Головна сто­ рінка, Контакти, Мапа сайту. Посилання, Вакансії, Стажування), спливаюче меню (Про нас, ЄС та Україна, Інформаційні джерела, Конкурси та гранти, Що таке ЄС, Що нового, Актуальна інформа­ ція. Зовнішні відносини ЄС). Після вибору будь-якого посилання відбувається перехід на сторінку, що містить відповідну інфор­ мацію.

3.Відкрийте почергово сторінки за такими адресами:

•http://www.astra.lviv.ua/cs/;

•http://uk.wikipedia.org/;

•http://www.apple.com/;

•http://www.alex.poninska.pl/;

•http://news.bbc.co.uk/;

•http://ostriv.in.ua/;

•http://leoburnett.ca/