Більшість редизайнів маркетингових сайтів — це виправлення інформаційної архітектури у перуці.
Команда скаже, що хоче «редизайн», бо сайт відчувається застарілим. Вони наймуть студію, оберуть нову палітру, замовлять ілюстрації, обговорять типографіку. Через шість тижнів вони відвантажать щось, що виглядає свіжо і конвертує так само, як старий. Візуалка змінилась. Проблема — ні. Проблема була в IA.
Це гайд про те, як зробити архітектурну роботу першою. Це та частина, яку більшість команд пропускає, і та, що визначає, чи новий сайт справді працює.
Що тут означає «IA»
Для застосунку інформаційна архітектура — це про те, як згруповані фічі, як навігація їх розкриває, і як користувачі будують ментальну модель системи.
Для маркетингового сайту вона вужча і легша. Це три питання:
- Які сторінки існують?
- Як хтось переходить з будь-якої сторінки до тієї, що йому потрібна?
- У якому порядку інформація з'являється на кожній сторінці?
Усе. Жодних таксономій, жодних воркшопів card-sorting, жодних теплових карт «information-scent». Лише ці три питання, чесно відповіджені.
Режими провалу маркетингового сайту зазвичай — один з цих:
- Сторінки існують, але ніхто не може їх знайти.
- Сторінок не існує, але мали б.
- Сторінки існують, і порядок інформації на кожній неправильний.
Злочини IA
Кілька паттернів, які ми бачимо часто:
Головна намагається бути кожною сторінкою. На ній герой, фічі, тестимоніали, ціни, кейси, тизер блогу, команда і контактна форма. Головна — це одна сторінка. Вона має бути відповіддю на одне питання: «Чому я тут?». Решта — десь інде.
У навігації забагато пунктів. П'ять — м'яка межа. Сім — жорстка. Якщо у вас дев'ять пунктів верхнього рівня, у вас проблема структури, не навігації.
«Resources» — це смітник. Коли команда не може вирішити, куди щось покласти, воно потрапляє в Resources. Зрештою Resources містить блог, документацію, кейси, e-book-и, шаблони і вебінар з 2019. Користувачі не копаються в Resources. Перемістіть кожен пункт туди, де він насправді належить.
Футер дублює навігацію. Це сигнал, що навігація не виконує свою роботу. Футер — для пунктів з низьким трафіком і високою довірою (privacy, terms, мапа сайту, соцмережі). Не для другої навігації.
Приховані сторінки. Сторінка цін існує, але на неї веде лише одне посилання, з третинного меню, яке ніхто не відкриває. Половина сайту досяжна лише через пошук. Якщо сторінка важлива, до неї не більше двох кліків з будь-якої іншої.
Метод, що працює
Ми використовуємо чотири проходи при проєктуванні IA маркетингового сайту. Кожен забирає години, не дні. Пропуск будь-якого — джерело переробок, які ви робитимете через півроку.
Прохід 1: Інвентаризація
Перелічіть кожну сторінку, яка сайту потрібна. Не те, що в нього є. Те, що йому потрібно. Використовуйте плоский список, не дерево.
Для більшості маркетингових сайтів список короткий:
- Головна
- Кожна послуга або продукт (по одній сторінці)
- Кожен кейс (по одній сторінці)
- Про
- Контакт
- Індекс блогу + сторінки постів
- Privacy і legal
Для більшості студій і консалтів список — між 10 і 30 сторінками. Якщо у вас 60+, можливо, ви будуєте редакційне видання, а не маркетинговий сайт. Це інший проєкт.
Прохід 2: Спарте сторінки
Для кожної сторінки у списку запитайте: хто сюди приходить і що йому потрібно далі?
Конкретний приклад: хтось приходить на сторінку послуги. Йому потрібне одне з:
- Ціна цієї послуги
- Приклади подібних робіт (кейси)
- Спосіб почати розмову (контакт)
З сторінки послуги мають значення три посилання: ціна, кейси, контакт. Усе інше — це відволікання. Тому ці три посилання — у очевидних місцях. Усе інше — не на сторінці послуги.
Зробіть це для кожної сторінки. До кінця у вас спрямований граф «хто-куди-йде». Де ребра кластеризуються — у вас кандидати на навігацію. Де ребра розріджені — у вас сироти, які варто або видалити, або підняти.
Прохід 3: Правило кардинальності
Верхньорівнева навігація: п'ять пунктів. Можливо, шість. Не більше.
Для більшості маркетингових сайтів правильні п'ять — це:
- Послуги (або Продукти, або Що ми робимо)
- Роботи (або Кейси, або Портфоліо)
- Про
- Блог (або Журнал, або Нотатки)
- Контакт
Вам не потрібен пункт «Resources», мега-меню «Solutions» або dropdown «Company». Кеп у п'ять пунктів змушує до ясності. Якщо щось не потрапляє у сімку — це сигнал, що воно належить всередині іншої секції або взагалі не має бути у навігації.
Прохід 4: Порядок на сторінці
Для кожної сторінки вирішіть порядок секцій. Це де більшість команд перестає думати і починає дизайнити.
Правило для сторінки послуги чи продукту: відповідайте на питання відвідувача у порядку, в якому він їх ставить.
- Що це?
- Це для мене?
- Як воно насправді виглядає (приклади, скріни, деліверейбли)?
- Як це працює (процес, графік)?
- Скільки коштує?
- Як почати?
Іноді сторінка відхиляється з бізнес-причин (ціна вгорі, бо аудиторія кваліфікована; соціальний доказ рано, бо бренд новий і йому терміново потрібна довіра). Ці відхилення мають бути свідомими, не випадковими.
Прочитайте сторінку у порядку і після кожної секції запитайте: «Чи це щойно відповіло на питання, яке я б ставив зараз?». Якщо ні — секція не на своєму місці.
Опрацьований приклад
Візьмемо фіктивний сайт студії. Команда думає, їм потрібен редизайн. Наймають нас. Ми запускаємо чотири проходи.
Інвентаризація: виявляється, у них 47 сторінок. Дванадцять — це блог-пости, які треба було видалити три роки тому. Вісім — лендінги старих кампаній. П'ятнадцять — «сервісні» сторінки, що сильно перетинаються (одна для «web design», одна для «website design», одна для «custom website design»). Реально унікальні сторінки: 12.
Спарювання: команда думала, що сторінка About важлива. Спарювання показує, що майже ніхто не йде з About на Contact. Йдуть зі сторінки послуги на Contact. About — це пункт призначення, не вузол.
Кардинальність: у навігації було дев'ять пунктів. Скоротили до п'яти. Дві старі сервісні сторінки об'єдналися. Меню «Resources» розібрали (блог перейшов у верхнє меню, e-book-и і шаблони — на одну сторінку Resources, досяжну з футера і блогу).
Порядок: кожну сервісну сторінку перевпорядкували. Ціна перейшла з низу (де її не досягали 60% користувачів) на третю секцію. Тестимоніали — з верху (відчувалось передчасним, як надмірне виправдовування) — на один блок перед CTA.
Ми не змінювали візуальний дизайн. Сайт виглядав так само. Конверсія зросла на 28%. IA і був редизайном.
Як виглядає «готово»
До того, як починається будь-яка візуальна робота, у вас є:
- Список кожної сторінки, яка сайту потрібна (близько 10–30 для більшості маркетингових сайтів)
- Спрямований граф, що показує, хто-куди-йде (між сторінками)
- Затверджена верхньорівнева навігація з не більш ніж 5–6 пунктами
- Для кожної сторінки — впорядкований список секцій, що відповідають на питання відвідувача у правильному порядку
Цей документ — бриф для візуального дизайну. Без нього дизайн-робота — це декорація, нанесена на зламану структуру. З ним дизайн-робота робить робочу структуру приємною у використанні.
Чеклист
- П'ять (макс шість) пунктів у верхній навігації.
- Не більше двох кліків до будь-якої важливої сторінки.
- «Resources» не існує як пункт верхнього меню.
- Головна відповідає на одне питання.
- Кожна сторінка прочитана у порядку з тестом «чи це відповіло на питання, яке я б ставив».
- Сторінки-сироти підняті, опущені або видалені.
- Футер тримає privacy/legal/соцмережі, не дубль навігації.
Якщо ви дивитесь на сайт, який «відчувається застарілим», і тягнетесь до нових шрифтів, запустіть спершу чотири проходи. Перука — не проблема.
Якщо хочете сайт, де робота з IA — це частина проєкту, а не upsell, подивіться, як ми працюємо із сайтами.