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

Що таке інформаційна архітектура

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

Дизайнери використовують інформаційну архітектуру для двох типових задач.

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

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

З чого складається інформаційна архітектура

Кожна інформаційна архітектура включає п'ять обов'язкових елементів.

• Розділи. Високорівневі групи контенту: «Новини», «Тренди та аналітика», «Про нас».
• Сторінки. Конкретні точки в інтерфейсі: типова сторінка статті, сторінка товару, головна.
• Заклик до дії (CTA). Основна дія, яку ви хочете, щоб користувач виконав на сторінці. Майже завжди в інтерфейсі є одна найважливіша дія.
• Функціональні блоки. Елементи, з якими можна взаємодіяти: кнопки, форми підписки, фільтри. Простий тест: якщо можна натиснути і щось відбудеться, це функціональний блок.
• Інформаційні блоки. Те, що можна подивитися, почитати, розглянути, але не змінити: назва статті, обкладинка, профіль автора, дата публікації.

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

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

Як зібрати архітектуру за чотири кроки

На першому кроці визначте задачу. Завжди починайте з чіткої відповіді на питання: навіщо ви створюєте цю архітектуру.

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

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

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

На третьому кроці ви збираєте архітектуру з елементів легенди послідовно. Чітка легенда фокусує увагу, і ваша структура стає повнішою.

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

Звідки брати дані

Архітектуру наповнюють знаннями з попередніх етапів роботи. Чим більше джерел використали, тим повніша структура.

• Аналіз конкурентів. Якщо ви побачили, що якісь функціональні блоки чи сторінки є у всіх, це стандарт ринку. Їх одразу включаєте до своєї архітектури.
• Юзабіліті-тестування. Якщо ви тестували існуючий інтерфейс або інтерфейси конкурентів і зауважили, що щось працює добре, це рішення одразу переходить в архітектуру, щоб не забути.
• Опитування. Інсайти про функціонал, який варто додати, теж одразу включаються.
• Карта шляху користувача (CJM). На кожному кроці CJM ви прописували рішення, які мають закрити потреби користувачів і мінімізувати їхні негативні емоції. Усі ці рішення, і функціональні, і інформаційні, мають увійти в архітектуру. Практично ви забираєте останній рядок CJM з рішеннями і просто переписуєте його.

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

Як перевірити, що архітектура працює

Є три критерії.

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

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

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

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

Вісім принципів навігації

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

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

На сайті Rozetka газову плитку можна знайти в розділі «Спорт і захоплення», бо раніше її шукали в контексті походів. У сучасних реаліях частина людей шукає її вже в побутовій техніці. Розкладка товарів має враховувати, як змінився контекст пошуку.

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

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

На сайті Rozetka в акціях показують термін дії, суть і кількість товарів, і цієї інформації вистачає для вибору, тому що акції однорідні. У «Епіцентрі» акції дуже різні, тому розкривати їх консистентно неможливо: з'являються банери з загальною інформацією і кнопкою «подробиці».

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

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

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

Сьомий: принцип сфокусованої ціленаправленої навігації. Одна й та сама інформація в різному контексті має показуватися по-різному. Основна навігація шапки на сайті Rozetka показує текстове меню категорій і підкатегорій. Коли користувач переходить у категорію «Ноутбуки та комп'ютери», ті ж самі розділи показані візуально, прикладно. На сторінці акцій ці ж категорії вже фільтри. Однакові дані, три різні фокуси, тому що користувач перебуває у трьох різних контекстах.

І останній, восьмий: принцип зростання. Будь-яку навігацію проєктують з місцем для масштабування: для ще одного розділу, ще одного блоку, ще одного опису. Але тут варто бути обережним. Запитайте у замовника чи бізнесу: чи є реальні плани на це розширення. Іноді дизайнери закладають дуже масштабоване рішення, а нові розділи не з'являються роками. Іноді таке рішення гірше, ніж те, яке б працювало краще без цього масштабу.

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

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