Імасайтерінформаційне моделювання та аналіз сайтів
інформаційне моделювання та аналіз сайтів
Зміст
Вебсайт є сукупністю взаємопов'язаних між собою видимих користувачеві вебсторінок, між якими він може переходити за посиланнями чи через інтерактивні елементи сайту, а також невидимих ззовні файлів, які підтримують його функціонування. Тому визначення структури сайту - це те, з чого він складається, і що можна розглядати з трьох точок зору: інформаційна структура вебсайту, структура вебсторінки та технічна структура вебсайту.
Інформаційна структура сайту, або логічна, - це те, як організовано всі вебсторінки та навігація між ними. Інформаційна структура задає те, з чого складається сайт з точки зору користувача сайту: які сторінки він бачить, як вони згруповані та пов'язані між собою, як він між ними переходить.
Серед вебсторінок особливою є головна сторінка сайту, або домашня, - це точка входу на сайт, яка доступна за адресою домену без вказання конкретної внутрішньої вебсторінки. На головній сторінці часто розміщують найбільш важливу та нову інформацію, основні пункти меню чи популярний контент.
Залежно від типу сайту, іншими вебсторінками можуть бути категорії та карточки товарів, опис послуг, сторінки кошику та оформлення замовлення, відгуки користувачів, розділи форуму, статті, новини, сторінка контактів, часті питання, умови доставки та оплати, про нас, політика конфіденційності, сторінка реєстрації та інші.
Основні вимоги до інформаційної структури вебсайту:
Добре продумана ієрархічна інформаційна структура забезпечує зручність та легкість користування вебсайтом, що підвищує його популярність та показники для пошукової оптимізації в Google. Відправною точкою для проєктування хорошої інформаційної структури вебсайту є семантичне ядро, тобто список фраз, за якими люди шукають потрібне в пошукових системах. Ключові фрази часто прямо вказують на цікаві для потенційних відвідувачів сайту сторінки: категорії товарів, назви статей чи підбірок в топ-рейтинги. Побудуйте ієрархію вебсторінок та навігаційну структуру так, щоб допомогти користувачеві легко рухатися до цілі по так званій воронці, переходячи від допоміжних посадкових сторінок до основного контенту та важливих функцій.
Макет, або структура web-сторінки, - це організація елементів однієї сторінки сайту, що включає їх візуальне розташування та функціональний розподіл. Для кожного сайту, і навіть всередині одного сайту, різні вебсторінки можуть бути різної структури та включати ті чи інші елементи. Деякі з них є обов'язковими для будь-якої вебсторінки для її коректного відображення та роботи, але більшість - не обов'язкові, і їх вибір залежить від розробника весайту.
Шапка (header): верхня частина сторінки, в якій частіше розміщують логотип, основне меню та іконки-сповіщення.
Футер (footer): нижня частина сторінки, часто містить контактну інформацію, форму підписки, авторські права, посилання на політику конфіденційності та інше додаткове меню.
Контентна область (main): центральна частина вебсторінки, в якій розміщується основний контент.
Бокові панелі (aside): вертикальні панелі зліва або справа, або з обох боків від контентної області, в якій розміщують контент, доповнюючий до основного.
Контентна область завжди різна залежно від сторінки, а от шапка та футер, як правило, повторюються. Що стосується бічних панелей, то якогось звичного порядку в цьому питанні не існує: вони можуть бути однакові на різних сторінках, або різні, або ж взагалі бути відсутніми повністю. При відображенні на мобільних пристроях з маленькими екранами бічні панелі або пропадають, або переміщуються нижче контентної області.
Заголовки різного рівня (теги від h1 до h6: назви розділів чи частин контенту. Важливо пам'ятати два правила: h2-h6 показують вкладеність розділів, а не їх послідовність, і вони призначені для смислового розділення контенту, а не для візуального оформлення блоків.
Абзаци тексту (тег p): розбивають текст на візуальні блоки з відступом між ними.
Списки (теги ul та ol): візуально впорядковані рядки з нумерацією або маркуванням.
Таблиці (тег table): впорядковані по рядках та стовпчиках дані.
Зображення (тег img): на сторінці відображається вказане зображення, хоча сам файл зображення зберігається в іншому файлі, назву якого вказується в тезі.
Відео (тег video): вбудоване прямо в сторінку відео, яке можна тут же переглянути.
Посилання (тег a): візуально виділений текст або зображення, по кліку на яке можна перейти на іншу сторінку, внутрішню (цього ж сайту) або зовнішню (іншого сайту). Посилання виконують дві важливі функції: зручної навігації користувача та посилення авторитету важливих сторінок для пошукових систем.
Форми, поля та кнопки (теги form, input, textarea, select, button> та інші): призначені для взаємодії з користувачем. В полях можна внести чи вибрати дані, на кнопки натиснути, а всі ці елементи разом об'єднуються в форми. Отримані від користувача дані з форм можна передати на сервер, обробити їх та виконати відповідні дії у відповідь, залежно від запрограмованої поведінки вебсайту. Наприклад, якусь інформацію зберегти, щось вибрати та відобразити, відправити повідомлення і так далі.
Розкривні блоки (теги details, summary): елементи для створення контейнера, який може бути розкритий або закритий, що зручно для розміщення додаткового контенту (який може бути потрібен не всім чи не завжди). По кліку на видиму частину контейнера відповідно відкривається або закривається решту вмісту.
Логотип та назва сайту: візуальне та текстове представлення сайту або загального бренду. Як правило, є посиланням на головну сторінку.
Слоган: коротка фраза піднесеного гарного звучання, яка відображає суть та призначення сайту, його місію.
Головне меню (navigation): ряд посилань на основні розділи сайту, служить для базової навігації та повторюється на всіх або майже всіх сторінках. Може розміщуватися горизонтальним рядком у шапці вебсайту або вертикальним в бічній панелі.
Хлібні крихти (breadcrumbs): відображає вкладеність вебсторінки в ієрархічній інформаційній структурі та відповідно шлях, яким може пройти користувач від головної сторінки, щоб потрапити сюди.
Назва, або заголовок (h1): коротко описує контент вебсторінки, що допомагає користувачеві зразу зрозуміти, куди він потрапив та що тут знаходиться. Має бути унікальним на сайті.
Основний контент вебсторінки (main content): інформація або функції, заради чого цю сторінку створили. Це може бути не тільки текстовий контент сторінки сайту, але й зображення, відео, форми та інше. Є найбільш об'ємною частиною весторінки та має бути унікальною на сайті.
Заклик до дії (call to action): кнопки, посилання чи інші елементи, які стимулюють користувача виконати потрібні цільові дії. Наприклад, додати товар в кошик, оформити заявку, підписатися на розсилку чи інші важливі для власника сайту дії. Найголовніший CTA рекомендується розміщувати в шапці сайту та повторювати внизу, зразу після основного контенту.
Поле пошуку (search bar): поле, куди користувач може вписати ключові слова та знайти потрібне в рамках сайту. Є зручним та корисним не тільки для користувача, бо дозволяє йому швидко переміститися до цікавих йому вебсторінок, але й для власника сайту, бо це може бути чудовим джерелом запитів та інтересів цільової авдиторії чи можливих проблем навігаційної структури сайту.
Категорії (categories): залежно від типу та призначення сайту, це може бути список категорій товарів, розділів статей чи інше групування основного тематичного контенту сайту.
Нові записи (recent posts): список новинок продукції або останніх публікацій чи інше нове додане на сайт з основного контенту.
Популярні записи (popular posts): топ продаж або найпопулярніші статті, що найчастіше користувачі дивляться.
Анонси подій (events): майбутні заплановані зустрічі, вебінари, поставки товарів чи інші події.
Останні або популярні коментарі (comments): можуть бути відгуки клієнтів, повідомлення форуму чи коментарі до контенту на сайті. Якщо є можливість іншим користувачам відмічати та оцінювати ці коментарі, тоді можна виводити не тільки нові, але й найбільш популярні коментарі.
Сповіщення: важлива нова інформація для користувачів, що відбулися якісь зміни чи події: оновлено статус замовлення, підтверджено його заявки, відбулися зміни на сайті та багато іншого, залежно від призначення сайту. Розміщується в шапці сайту у вигляді іконок або виділених текстових рядків.
Кошик (shopping cart): іконка кошика, яка показує кількість доданих товарів, і по кліку на якій можна перейти в кошик.
Контактна інформація: телефони, адреси електронної пошти, фізична адреса та інші дані для ідентифікації власника вебсайту та зв'язку з ним.
Посилання на соціальні мережі (social media links): посилання на сторінки компанії в соціальних мережах.
Блок авторизації: якщо сайт дає можливість реєструватися, то має бути блок для відображення поточного стану авторизації. Якщо відвідувач авторизувався, то його ім'я та посилання для входу у свій кабінет та можливість вийти з авторизації, а якщо ні, то посилання чи форми для реєстрації та входу.
Форма підписки (subscription): можливість залишити адресу своєї електронної пошти для отримання розсилки сайту.
Додаткові меню: список посилань на менш важливі доповнюючі вебсторінки, яких немає в основному меню. Або навпаки, виділення найбільш важливих вебсторінок та дублювання посилань на них в окреме меню, щоб полегшити навігацію.
Мовний перемикач (language switcher): для багатомовних вебсайтів дає користувачеві вибір мови, якою він хоче переглядати сайт.
Копірайт (copyright): ім'я чи назва організації, яка володіє авторськими правами на контент сайту, а також діапазон років існування сайту.
Деякі типи інформації можуть бути представлені як в таких блоках на інших сторінках, так і окремими вебсторінками.
Технічні елементи, які потрібні для коректного відображення вебсторінки, а також для їх представлення в пошукових системах:
Адреса вебсторінки (URL): Адреса в браузері, за якою відвідувач потрапляє на цю сторінку, отримала назву URL від Uniform Resource Locator (в перекладі: уніфікований покажчик ресурсу). Якщо вебсторінка відкрита для індексації та важлива для просуваання в пошукових системах, то рекомендується використовувати людинозрозумілі URL (ЛЗУ) для легшого сприйняття користувачами та покращення SEO. Як правило, для ЛЗУ використовують транслітеровану назву вебсторінки, за потреби скорочуючи до 60-70 символів. Хоча зараз в URL допускаються майже всі знаки, але для гарантії краще використовувати лише маленькі латинські літери та цифри, а в якості розділового знаку між словами використовувати дефіс. Якщо вебсторінка є частиною іерархічної інформаційної структури, то перед назвою сторінки url може включати всі верхні рівні, розділені знаком / (слеш). Розшифровка ЛЗУ, особливо якщо таких багато, може знижувати швидкодію сайту, тому для внутрішніх сторінок можна використовувати прямі URL з параметрами.
Атрибут lang: вказує мову вмісту вебсторінки, що допомагає браузерам і пошуковим системам правильно обробляти текст.
Кодування вебсторінки: спосіб інтерпретації тексту та перетворення послідовності байтів у текст, який відображається. Зараз фактичним стандартом є кодування UTF-8, яке дозволяє відображати різноманітні символи, включаючи літери різних мов світу, цифри, знаки пунктуації та спеціальні символи.
Мета-тег title: заголовок вебсторінки, який відображається на вкладці браузера, як назва сторінки в результатах пошуку та в закладках.
Мета-тег description: опис вебсторінки, який може бути використаний пошуковими системами в сніпеті.
Favicon: маленька іконка, яка відображається поруч із заголовком сторінки на вкладці браузера, в списку закладок, в результатах пошуку.
Мікророзмітка: забезпечує пошуковим системам додаткову структуровану інформацію про вміст вебсторінок, що дозволяє покращити їх відображення у результатах пошуку: збільшити видимість та додати розширені сніпети.
Деякі з елементів вебсторінки мають бути унікальними в межах сайту, деякі можуть повторюватися. Їх розміщення задається макетом дизайну сайту, і аналогічно для деяких вебсторінок може бути однаковий макет, а для деяких - різні. Хороша структура вебсторінок робить користування сайтом зручним та приємним, що не тільки дозволить користувачам швидко досягати цілей сайту, але й мотивує відвідувачів повертатися знову.
При розробці вебсайту потрібно створити та правильно розмістити всі його компоненти. Це свого роду цеглинки, з яких розробник будує систему. Незалежно від смислового наповнення вебсторінок, технічна структура вебсайту складається з файлів, які розміщуються на сервері у визначеному порядку. Включає файли HTML, CSS, JS, PHP, файли зображень чи іншого медіа, xml-мапу сайту, конфігураційні файли, бази даних та інші технічні компоненти. Разом ці елементи створюють технічну базу вебсайту, яка забезпечує його правильне функціонування та видимість в пошукових системах.
Детальніше: Технічна структура вебсайту