Структура сайта
Інформаційна архітектура
Інформаційна архітектура — це спосіб організації матеріалів для якомога легшої навігації та керування ними. Можна виділити такі інформаційні архітектури сайта.
Все в одному. Це найпростіша модель. Вся інформація розміщується на одній сторінці. На такій сторінці обов’язково слід розмістити всю необхідну інформацію, включаючи контактну.
Однорівнева модель — всі сторінки є рівнозначними, і на кожну можна перейти з будь-якої іншої. Це найпоширеніша модель для простих сайтів, які містять стандартні розділи: Головна сторінка, Про нас, Контакти, Товари.
Індекс. Ця структура дуже схожа на попередню, але має ще головну сторінку з посиланнями на решту. Ця сторінка-зміст часто містить список матеріалів, які можна знайти на цьому сайті. Часто за таким принципом можуть бути реалізовані телефонні довідники, енциклопедії тощо.
Ромашка. Ця модель є корисною для чітких лінійних залежностей, коли одна дія має чітко слідувати за іншою, а всі дії в будь-якому разі будуть починатись на головній сторінці. Прикладом такого сайта може бути сервіс електронної пошти, де користувач може створити лист, а далі - прикріпити до нього файл.
Чітка ієрархія — це система у якій на сторінку нижчого рівня можна потрапити лише через її «батька». Це може відповідати розподілу офісів однієї компанії містами України, адже кожен офіс може розташовуватись лише в одному місті.
Багатовимірна ієрархія. За такої організації змісту сайта користувач може потрапити на один і той же матеріал різними способами. Тобто, реалізується кілька ієрархій, які перетинаються між собою. Типовим прикладом такої ієрархії є сайт Амазон www.amazon.com який дозволяє здійснювати пошук книги за жанром, автором чи назвою твору.
Пошук. Функція пошуку часто може використовуватись як можливість навігації чи елемент архітектури. Користувачеві одразу на головній сторінці сайта пропонується здійснити пошук, після чого йому надається перелік сторінок сайта, що відповідають заданим критеріям.
Варто продумати таку структуру сайта, щоб вона була якомога зручнішою та зрозумілішою для відвідувача. Після цього слід визначитись з дизайном цієї структури. При цьому необхідно брати до уваги такі фактори:
доступність — навігація є однією з найважливіших елементів будь-якої сторінки. Тому необхідно зробити її доступною у будь-який момент.
значимість — гіперпосилання мають бути зрозумілими, з відповідним змістом.
видимість — гіперпосилання повинні якимсь чином виділятись з навколишніх елементів.
цілісність — навігація має бути доступною на усіх сторінках сайта.
Часто виникає питання про деталізацію структури, тобто на скільки блоків треба розбивати зміст сайта. При вирішенні цієї проблеми треба пам’ятати про особливість веб-сторінок -
користувачі не люблять лінійок прокручування. Нормальним вважається розташування інформації на 2-3 екрани з використанням вертикального прокручування.
Крім того, потрібно враховувати і
розмір веб-сторінки. Користувачі розраховують чекати на завантаження сторінки не довше, ніж 10 секунд. Після цього часу відвідувач починає відкривати інші сторінки і навряд-чи дочекається повного завантаження першої.
Навігація
Термін «
навігація» означає систему, схему пересування у просторі. І з цього визначення бачимо, що навігацією можна назвати і схему пересування інформаційним простором Інтернету, а також окремого сайта. Якщо користувач не зуміє зорієнтуватись у системи навігації веб-сайта, він просто його покине. Користувач завжди повинен знати, де він перебуває, де він вже побував і куди він може перейти на кожній сторінці своєї подорожі Інтернетом.
Вказівник місця перебування
Сайт має чітко ідентифікувати себе на кожній своїй сторінці. Яке б гіперпосилання не вибрав користувач, він повинен розуміти, що він перебуває на певному сайті, ще не вийшов за його межі. Це означає, що на кожній сторінці варто розмістити логотип чи загальну назву сайта.
Відвідані сторінки
Сучасні браузери мають кнопку Назад, котра завжди може перевести користувача на одну із вже відвіданих сторінок. Також браузери забезпечують можливість виділення відвіданих гіперпосилань іншим кольором. Важливе значення також мають
назви веб-сторінок, які вказуються у тезі
Подальший перегляд
Щоб користувач міг визначитись з тим, куди він бажає перейти з певної сторінки, він має розуміти загальну структуру сайта та бачити гіперпосилання, які б відповідали його потребам.
Навігаційні рішення
Зміст сторінки — перелік тем, які містить ця сторінка, переважно розміщений на початку сторінки. Переважно назви тем робляться гіперпосиланнями-якорями, які при клацанні на них переведуть користувача на відповідний розділ.
Горизонтальне меню. При створенні горизонтальних меню необхідно враховувати, що не можна перевищувати ширину сторінки. Використання горизонтального меню доречне у разі, коли невелика кількість пунктів меню визначена заздалегідь, і воно не підлягатиме зміні.
Стрічка навігації відображає весь шлях від домашньої сторінки сайта до сторінки, на якій у цей момент перебуває відвідувач: Головна сторінка Ресурси за темами Інтернет Мова HTML
Закладки - це різновид навігаційної стрічки. Проте вони чіткіше вказують на активний в цей момент розділ сайта, наприклад http://uk.wikipedia.org/
Бокові меню є найбільш поширеним рішенням для сайтів. Переважно використовується коли навігація має лише один рівень і є відносно фіксованою.
Меню, що випадає. Принцип дії полягає у тому, що користувач клацає на кнопці, після чого появляється меню наступного рівня.
Багаторівневе дерево навігації— на екрані відображається все ієрархічне дерево будови сайта і користувач робить вибір на користь одного з розділів.
Сторінки. Матеріал розбивається на кілька сторінок (зазвичай це відбувається з довгими статтями, індексами, форумами чи результатами пошуку).
Дизайн гіперпосилань
Гіперпосилання — це найважливіша частина гіпертексту. Гіперпосилання має чітко сигналізувати користувачеві, що він отримає, клацнувши на ньому. Підкреслений текст повинен вказувати на зміст об’єкту, до якого буде здійснений перехід.
Одне з найстаріших правил веб-дизайну застерігає від використання гіперпосилань у стилі «
клацніть тут». Замість фрази: «Для ознайомлення з інформацією про історію мережі Інтернет,
клацніть тут»
краще писати: «Ви можете ознайомитись з додатковою інформацією про
історію мережі Інтернет»
Завдання
1. Відкрийте у браузері адреси і визначте їх приналежність до однієї з категорій за таблицею:
Адреса
|
Класифікація
|
Функціональна
|
Тематична
|
Візуальна
|
http://www.euronews.net/
|
|
|
|
http://gazeta.lviv.ua/
|
|
|
|
http://www.aerosvit.ua/ukr.html
|
|
|
|
http://www.meest-tour.com.ua/
|
|
|
|
http://uk.wikipedia.org/wiki/Main_Page
|
|
|
|
2. Відкрийте сайт Webby Awards і розгляньте кілька сайтів, що стали переможцями у різних категоріях
http://www.webbyawards.com/webbys/current.php
3. У браузері відкрийте сторінку Представництва Європейської Комісії http://www.delukr.ec.europa.eu/
4. Розгляньте елементи навігації, що присутні на сторінці. Тут міститься одразу кілька видів навігаційних елементів:
навігаційна стрічка нагорі сторінки,
горизонтальне меню (Головна сторінка, Контакти, Мапа сайта, Посилання, Вакансії, Стажування),
меню, що випадає (Про нас, ЄС та Україна, Інформаційні джерела, Конкурси та гранти, Що таке ЄС, Що нового, Актуальна інформація, Зовнішні відносини ЄС). При виборі будь-якого з цих посилань відбувається перехід на сторінку, присвячену відповідній інформації.
5. Опишіть навігаційні рішення на сторінках із таблиці.