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

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

Схеми організації

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

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

  • Алфавітні схеми використовують для організації контенту алфавіт. Ця схема досить проста. Ви упорядочиваете контент в алфавітному порядку. Щоб це було оптимально, контент повинен відповідати ключовим словами, за яким користувач здійснює пошук. Інакше користувач не зможе знайти потрібний йому контент. Тому алфавітний індекс часто використовують в якості другорядного способу, що доповнює основні;
  • Хронологічні схеми — організовують контент за датою. Але визначення того, до якого часу належить контенту, може бути спірним і суб’єктивним. Щоб цей тип схеми був оптимальним, потрібно вибрати правильний проміжок часу;
  • Географічні схеми організують контент з географії. Подібно алфавітним схемами, вони часто використовуються в якості доповнення до навігації по сайту. Конфлікт виникає, якщо існує спірна ситуація, пов’язана з географічним місцем розташування.

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

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

  • Тематичні схеми — це суб’єктивні схеми організації, які впорядковують контент на тематики. Вони можуть застосовуватися, коли користувач шукає конкретну тему і знає, які ключові слова необхідно ввести для пошуку інформації. Якщо при створенні архітектури сайту ви правильно поділяєте контент за категоріями на основі ключових слів, його буде легко знайти;
  • Схеми метафор – контент розподіляють, пов’язуючи його зі знайомими поняттями та ідеями. По суті, контент організується іншим контентом, який логічно пов’язаний з вихідною інформацією. Схеми метафор використовуються в дизайні інтерфейсів, у тому числі для побудови структури папок, кошики або інших елементів. Але коли організація на сайті заснована виключно на схемах метафор, можуть виникати проблеми. Цей метод організації більше підходить я в якості додаткової схеми;
  • Схеми аудиторії організують контент в залежності від типу аудиторії, на яку він орієнтований. Цей тип схем може бути закритим або відкритим, і користувачі можуть переміщатися від однієї аудиторії до іншої. Але якщо тип аудиторії ідентифікується не надто легко, виникають проблеми, плутанина, пов’язана з підбором аудиторії для контенту з безлічі відповідних варіантів;
  • Цільові організують контент на основі дій, потреб, питань або процедур, які користувачі будуть враховувати при пошуку контенту, пов’язаного з конкретними ключовими словами. Ці схеми підходять для випадків, коли схема точно ідентифікує ці завдання. Можна провести дослідження до організації контенту, щоб переконатися, що на сайті максимально точно охоплені питання, пов’язані з контентом.

Не всі схеми інформаційної архітектури веб сайтів повинні бути настільки точними. Доступні гібридні схеми, і на багатьох сайтах вони використовуються для створення кращої інформаційної архітектури.

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

Проблема даної стратегії може виникнути, якщо вона не буде реалізована належним чином, і користувачі почнуть плутатися при спробі знайти контент. Якщо ви не впевнені на 100 відсотків в тому, що робите, використання однієї схеми буде кращим рішенням.

Структури організації

Структури організації вибудовують контент на основі зв’язків, які користувачі визначають між різними частинами контенту. Користувачі можуть прогнозувати розташування контенту на основі фактичної структури.

Існують три різних типи структур: ієрархічна, послідовна і матрична. Розробники можуть використовувати тільки одну структуру, але багато з них комбінують всі три і створюють оптимальну структуру сайту.

Ієрархічна структура

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

Організація сайту за допомогою методів інформаційної архітектури

Також можна уявити її як структуру офісу. У нас є менеджер, а від нього виходять зв’язку вниз. Одна загальна ідея розбита на дві частини, а потім ці дві різні, але пов’язані один з одним теми, розбиваються на підтеми, що відносяться виключно до батьківського темі. По мірі того, як ви деталізуєте тему, дерево стає все більш розгалуженим.

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

Радіальна ієрархічна структура може бути трохи більш вільною формою, ніж ієрархія генеалогічного древа.

Послідовні структури

Послідовні структури впорядковують контент поетапно. Як ви потрапляєте з пункту A в пункт B? Ви починаєте з однієї точки і переглядаєте весь шлях, створений веб-розробником. Перш ніж приступити до створення цієї структури, веб-розробник повинен дослідити предмет і сформувати найбільш логічні етапи. Приклад того, як виглядає послідовна структура — це те, що ви бачите, коли ви намагаєтеся щось купити. Ви вибираєте елемент, натискаєте на кнопку «Оформити замовлення«, вводите свої дані, платіжну інформацію і потім підтверджуєте замовлення. Логічна покрокова схема приводить до кінцевого результату — купівлі.

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

Організація сайту за допомогою методів інформаційної архітектури

Структура матриці

Ні, вам не потрібно буде вибирати синю або червону таблетку, як Кіану Рівзу. Однак структура матриці дає користувачам особливу силу. Завдяки цим типам структур контент впорядкований і пов’язаний більш ніж одним способом. Це залежить від того, як користувач вирішує переглянути контент.

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

Каталоги вмісту

Каталоги включає в себе список всього вмісту сайту. Каталог містить не тільки текстовий контент, але й зображення, програми і дані. Щоб отримати точний каталог, потрібно оцінити кожний тип вмісту.

Так з чого ж почати створення архітектури сайту? Розробники повинні розглянути кілька питань, пов’язаних з каталогізацією контенту.

  • Які у вас цілі? Для чого призначений цей каталог? Записуючи і розбираючись у значенні всіх цих безладних елементів, ви чітко зрозумієте, що потрібно зробити, щоб досягти своєї мети;
  • Визначтеся з об’ємом. Це дасть уявлення про те, скільки контенту повинно бути включено в цей каталог. Рекомендується починати з малого обсягу.

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

  • Заголовок;
  • Унікальний ідентифікатор контенту;
  • URL-адреса на сайті;
  • Формат файлу: HTML, PDF, DOC або TXT;
  • Автор;
  • Фізичне розташування контенту (мається на увазі, де знаходиться система управління контентом);
  • Метаописание;
  • Ключові слова;
  • Теги;
  • Категорії контенту;
  • Дати створення, редагування вмісту і так далі.

Іноді можна використовувати CMS або пошуковики, щоб отримати цю інформацію. Після того, як інформація буде витягнута, її можна експортувати в електронну таблицю, що дозволить легко її сортувати.

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

За допомогою каталогу контенту в архітектурі web сайту можна зробити багато. Цілі та обсяг допомагають у цьому. Оцінка вмісту може допомогти розробникам відслідковувати, які сторінки на сайті повинні бути видалені, які потрібно відредагувати, які прогалини, пов’язані з контентом, необхідно вирішити і потрібно переміщати контент.

Також варто розглянути можливість додавання стовпців для предметного аналізу. Якщо якийсь аспект може бути підтверджений певним фактом або змінюватися, використовуйте ці стовпці для відстеження прогресу.

Одна з цілей каталогізації контенту — підтримка навігаційної моделі сайту. Це дає основу, з якої можна почати повний перегляд навігації.

Каталог також можна використовувати в якості резервного дубліката. Якщо контент зазнав змін, розробник може застосувати каталог для відновлення сторінки.

Існує кілька причин, за якими створюються каталоги контенту:

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

Формування каталогу контенту є одним з перших етапів перебудови архітектури високонавантажених сайтів. Також можна сформувати каталог при підготовці до міграції на іншу CMS.

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

Wireframing

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

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

Підхід може бути корисний при розробці сайта з наступних причин:

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

Подібне призначення пріоритетів дозволяє оцінити, скільки місця повинна бути віддана певного елемента, і де його краще розмістити.

Wireframes допомагають вирішити, де на сторінці будуть відображатися елементи навігації та частини вмісту. Майте на увазі, що wireframing не пов’язаний з візуальним дизайном. Ось кілька порад по створенню цього виду архітектури сайту:

  • Не використовуйте яскраві кольори. Рекомендується дотримуватися сірих тонів, якщо ви хочете виділити розходження між частинами контенту. Якщо використовуєте кольору, щоб показати відмінність між двома елементами, то відтінки сірого кольору підійдуть для цього найкраще;
  • Дотримуйтеся одного шрифту. Якщо плануєте використовувати Comic Sans, можливо, вам доведеться переглянути свою типографіку. Застосовуйте по можливості прості і поширені шрифти. Але в самих Wireframes, якщо хочете підкреслити відмінність заголовків і підзаголовків від звичайного контенту, використовуйте різні розміри шрифту;
  • Не використовуйте в Wireframes зображення. Можна вставити їх пізніше;
  • При створенні архітектури сайту намагайтеся уникати інтерактивних функцій. Оскільки Wireframes є двомірними, вони не завжди добре обробляють інтерактивні функції. Наприклад, що випадають меню, стану наведення і акордеони.

У Wireframe рекомендується включати такі елементи:

  • Логотип сайту.
  • Поле або панель пошуку;
  • «Хлібні крихти» — ці елементи допомагають користувачеві визначити, в якій частині сайту він зараз перебуває. Зазвичай це горизонтальні ланцюжки посилань;
  • Список сайтів;
  • Заголовки, включаючи заголовок сторінки з тегом H1 і підзаголовки з тегами H2-Hx;
  • Меню навігації, включаючи глобальну і локальну навігацію;
  • Основний контент;
  • Кнопки соціальних мереж, включаючи Facebook, Twitter і т. д.;
  • Контактну інформацію;
  • Карту сайту;
  • Футер сайту.

Існують різні типи Wireframes. Вони можуть відрізнятися ступенем деталізації елементів. Тому за цією ознакою виділяють два типи цієї архітектури веб-сайту:

  • Wireframes з низькою деталізацією — розробляються швидше і служать для оптимізації комунікації та взаємодії між учасниками проекту. При низькому рівні деталізації точність окремих елементів не відіграє ролі, тому самі кадри є більш абстрактними. Для позначення доступних областей простору використовуються прості зображення. Ви могли зустрічати подібні Wire frames, коли бачили сайти наповнювачем lorem ipsum замість вмісту. Це говорить про те, що ресурс знаходиться на стадії проектування, а реальний контент буде додано пізніше;
  • Wireframes з високою деталізацією — більш докладні. Цей тип підходить для документації. Подібні Wireframes включають інформацію про кожному елементі сторінки. Наприклад: поведінка користувача, розміри частини контенту, дії, пов’язані з будь-яким інтерактивним елементом.

Модель бази даних

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

Діаграми сайтів

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

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

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

  • Дані про організацію та структури контенту;
  • Розділи і підрозділи контенту;
  • Структурні відносини;
  • Інформацію про «глибині кліка» чи кількості кліків, необхідних для досягнення певної сторінки;
  • Тип сторінки або шаблон: головна сторінка, сторінки меню або внутрішні сторінки;
  • Рівень доступу користувача до сайту;
  • Умови навігації;
  • RSS-канали або додатка;
  • Внутрішні і зовнішні посилання.

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

Діаграми сайтів можуть створюватися за допомогою Adobe Illustrator. Але для більш спеціалізованих діаграм можуть використовуватися такі програми, як OmniGraffle, ConceptDraw або Microsoft Visio.

Створення стабільних структур

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

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

Висновок

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

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

Переклад статті «Organizing Your Website with Information Architecture Methods» дружною командою проекту Сайтостроение від А до Я.