Процес створення сайту, який малюють агенції, хибний

UX вирішується задовго до першого намальованого екрана.

СХЕМА

П'ять квадратів і чотири стрілки

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

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

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

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

Коротко

• Спершу замовляйте рішення, потім картинки. Перше, за що варто платити, це розмова про бізнес, а потім архітектура, в якій UX, дані, SEO, CRM та аналітика вирішуються разом.
• До будь-якого візуального дизайну ви маєте побачити карту сайту і правила адрес, вайрфрейми всіх шаблонів, стани, яких ніхто не любить малювати (порожня видача, «розпродано», немає доставки), і список даних, які агенції потрібні від вас.
• SEO починається на етапі архітектури, а не після запуску. Структура адрес, локалі й вибір сторінок для індексації формують самі шаблони.
• Дизайн іде останнім, і кожне рішення в ньому має мати названу причину.
• Глибина залежить від проєкту: сайту на п'ять сторінок може вистачити однієї сесії і кількох сторінок рішень, каталогу для кількох ринків потрібно набагато більше.

ПЕРЕДАЧА

Що губиться між етапами

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

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

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

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

Дорого коштують запитання, які ставлять уже після дизайну.

SCHOEFFEL

Одна архітектура замість п'яти результатів

Для Schoeffel ми написали робоче ТЗ на 108 сторінок: 13 шаблонів сторінок і 61 блок. Кожен блок описано однаково: що в ньому, як він поводиться, які в нього стани, які дані йому потрібні і на чому ґрунтується рішення. Документ не прибирають у теку, коли починається дизайн. Дизайнери, розробники, SEO-фахівець і той, хто налаштовує CRM, працюють за тими самими сторінками.

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

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

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

МІЛІМЕТРИ

Одна знахідка, чотири рішення

Перш ніж малювати каталог, ми вивчили тринадцять сайтів ювелірних і люксових брендів, п'ять із них спеціалізуються на перлах: Mikimoto, TASAKI, Paspaley, Yoko London і Kamoka. Для цих п'яти ми склали матрицю з 24 можливих входів у перлинний каталог, від типу виробу й типу перлів до кольору, приводу, весільної лінії, подарунків за ціною і виробів на замовлення. У Mikimoto знайшлося 17 із них, у Paspaley 14, у Yoko London 13, у Kamoka 12 і в TASAKI 10. Ці цифри описують нашу матрицю, а не рейтинг брендів.

Одного входу не було в жодного з п'яти: фільтра за розміром перлів у міліметрах. Для Schoeffel ця прогалина виявилася важливою. Покупці, які розуміються на перлах, думають розмірами, і різниця між ниткою 6,5 мм і ниткою 8 мм змінює і її вигляд, і її ціну. Розмір лише один із чинників цінності перлів (GIA називає також форму, колір, блиск, поверхню, перламутр і підбір), але саме за ним покупцеві зручно звужувати пошук.

Тому розмір став головним фасетом фільтра: крок 0,5 мм до 9 мм, бо так купують акойю, і 1 мм вище, для перлів South Sea. Поруч ми запланували невелику підказку «What size suits me?», яка на більшості екранів показує перлини в натуральну величину, щоб менш досвідченому покупцеві не потрібна була термінологія, аби почати.

Ця одна знахідка одразу перетворилася на чотири рішення. Рішення щодо даних: кожен варіант товару в каталозі має мати мінімальний і максимальний розмір перлини. Рішення для розробки: фасети поєднуються через І між собою і через АБО всередині одного, а товар із кількома варіантами потрапляє у видачу, коли хоча б один варіант підходить під усі обрані фасети. Рішення з SEO: кожен вхід у каталог стає посадковою сторінкою зі своїм заголовком і вступним текстом. І залежність від бізнесу, прямо записана в документі: якщо Schoeffel не дасть розмір за кожним варіантом до запуску, фільтр за міліметрами не запускається. Це краще, ніж затвердити гарний фільтр і за кілька місяців з'ясувати, що каталогу нічим його наповнити.

Одна знахідка аналізу стала функцією, правилом для даних і умовою запуску.

НУЛЬ РЕЗУЛЬТАТІВ

Стани, яких ніхто не малює

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

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

Якщо порожня видача все ж трапилася, сторінка пропонує найближчі діапазони з кількістю виробів і фахівця. Повідомлення у WhatsApp заповнюється з фільтрів, наприклад «Looking for: Akoya, 7.5-8.0 mm, Opera length», і заявка потрапляє в CRM із цими параметрами. Подія аналітики zero_results записує комбінацію, і з часом із цих записів складається список того, чого бракує в асортименті.

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

SEO І ШІ

SEO і відповіді ШІ закладаються в архітектуру

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

У документі Schoeffel розділ про адреси йде раніше за навігацію і раніше за будь-який шаблон. Кожен ринок і мова мають свій префікс, наприклад /us-en/ і /gb-en/. Кожна локаль посилається canonical на саму себе і hreflang на решту, бо текст однаковий, а відрізняються лише ціни; механіку Google пояснює в матеріалах про локалізовані версії і канонічні адреси. Адреси з фільтрами і сортуванням закриті як noindex, follow і посилаються canonical на чисту категорію, а порядок параметрів нормалізується, щоб одна добірка завжди мала одну адресу.

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

Та сама архітектура працює і на відповіді ШІ. Сторінки знань відповідають на запитання, які люди справді ставлять у WhatsApp і у формах: як обрати нитку, чим акойя відрізняється від перлів South Sea і таїтянських, який розмір мені пасуватиме, як часто нитку треба перенизувати. Кожна має автора з ім'ям. Метрику теж записано: переходи з пошуку, переходи до виробів і повторна перевірка видимості у відповідях ШІ. Аналіз вплинув і на те, чого ми робити не стали. Блиск і поверхня для перлів дуже важливі, але фільтрами вони не стали: за незнайомим словом людина фільтрувати не буде. Вона дізнається його на картці товару і на окремій сторінці шкали якості. Докладніше про цей підхід ми писали у статті про те, чому SEO, AEO і GEO це підсилювачі, а не двигуни.

ОДИН КЛІЄНТ

CRM з'являється раніше за екрани

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

Для кожного каналу ТЗ Schoeffel перелічує, що вводить покупець і що додає сайт: виріб і варіант, сторінку, а також кампанію, ринок і мову візиту. Фахівець бачить, що людина спершу порівнювала нитки 8 мм, потім запитала про виріб високого рівня, а пізніше записалася на перегляд.

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

МІТКИ

Спостереження, гіпотеза, рішення

Аналіз дає знання різної надійності, і документ Schoeffel каже, яке з них яке. Кожне рішення має мітку:

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

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

ОЧІКУВАННЯ

Найважче це зачекати

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

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

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

ПОТІМ ДИЗАЙН

Дизайн приходить останнім і пояснює себе

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

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

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

ЩО ЗАМОВЛЯТИ

Що замовляти і в якому порядку

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

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

Масштаб залежить від проєкту. Сайт послуг на п'ять сторінок може закрити кроки 1 і 2 за одну стратегічну сесію і кілька сторінок рішень. Каталогу для кількох ринків із ціновими рівнями і складними варіантами потрібне повноцінне ТЗ. Порядок рішень при цьому той самий, і так само ми ведемо роботу з UI/UX-дизайну. Для наявного сайту перший крок інший: спершу подивитися, що люди на ньому роблять, і лише потім щось змінювати, як ми описуємо у статті «Чи потрібен сайту редизайн?».

ВІД ВАС

Що агенції знадобиться від вас

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

• Дані про товари або послуги в єдиній структурі. У Schoeffel без розміру кожного варіанта немає фільтра за міліметрами.
• Люди і години роботи. Хто відповідає у WhatsApp і на форми, в якому часовому поясі і як швидко. Без цього заявки лишаються без відповіді.
• Ринки, валюти і мови. Якщо їх не вирішено, сайт запускається з однією локаллю.
• Фотографії і тексти. Без них дизайн перевіряють на заглушках.
• Рішення щодо бренду, наприклад логотип, від якого залежать шапка, футер і пакування.
• Вибір платформ: платіжний провайдер, календар для запису, сама CRM.

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

ДО ДОГОВОРУ

Запитання агенції до підписання договору

Сторінки «Як ми працюємо» схожі одна на одну, тому корисніше перевірити, як агенція відповідає на конкретні запитання. Ось ті, які поставив би я, і те, як звучить добра відповідь.

• Коли ви вирішуєте структуру адрес і правила SEO? Добра відповідь: на етапі архітектури, до дизайну.
• Хто малює порожні, помилкові та «розпродані» стани? Добра відповідь: вони входять у ТЗ, зі своїми текстами.
• Що ви покажете нам до візуального дизайну? Добра відповідь: аналіз, вайрфрейми всіх шаблонів і прототип.
• Які дані вам потрібні від нас і до якого терміну? Добра відповідь: письмовий список із термінами і запасними варіантами.
• Як заявки з форм і WhatsApp потраплять у нашу CRM? Добра відповідь: в одну картку клієнта, разом зі сторінкою і виробом.
• Як ми зрозуміємо, що дизайн працює? Добра відповідь: кожен шаблон має призначення і метрику, а гіпотези переглядаються після запуску.
• Що буде після запуску? Добра відповідь: дата перегляду, події аналітики і план першого кола змін.

Якщо всі відповіді зводяться до «потім» або «дизайнер розбереться», ви купуєте схему з п'яти квадратів.

Спершу вирішіть, як це працює, потім який це має вигляд.

FAQ

Джерела

• Google Search Central: Managing crawling of faceted navigation URLs
• Google Search Central: How to specify a canonical URL
• Google Search Central: Localized versions of pages
• GIA, Gems & Gemology: Pearl Classification: The GIA 7 Pearl Value Factors