Процесс создания сайта, который рисуют агентства, неверный

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