Редизайн сайта без потери трафика и заявок: пошаговый план

Редизайн почти всегда начинается с ощущения: сайт выглядит устаревшим, конкуренты обновились, руководителю стыдно отправлять ссылку партнёрам. Это нормальный повод задуматься, но плохая отправная точка для проекта. Если цель сформулирована как «сделать красиво», через полгода команда получает свежий визуал, просевший органический трафик и меньше заявок — и долго не может понять, что именно сломалось, потому что поменяли всё сразу.

Риск редизайна в том, что под одной задачей обычно прячутся четыре: новый визуальный язык, новая структура и навигация, новые тексты и часто новая платформа. Каждая из них по отдельности управляема, вместе они дают изменение, у которого невозможно найти причину просадки. Поэтому ещё до первого макета стоит договориться, какие из этих задач вы действительно решаете, и выбрать подрядчика, который смотрит на проект целиком. Если редизайн делает внешняя студия, ищите команду, которая ведёт редизайн от исследования до запуска, а не только отрисовывает экраны: исследование, дизайн, разработка и перенос SEO должны быть в одном плане работ и в одной зоне ответственности.

Ниже — пошаговый план для дизайнеров, продакт-менеджеров и владельцев сайтов: что замерить до старта, какие исследования провести, как выбрать масштаб изменений, что сделать для поиска и как запускать новую версию так, чтобы откат был штатной операцией. Материал продолжает наш разбор прототипирования сайта: прототип — главный инструмент, который позволяет проверить редизайн до того, как он стал дорогим.

Что такое редизайн и чем он отличается от рестайлинга

Редизайн — это переработка сайта с изменением структуры, сценариев и интерфейса на основе данных о пользователях и целях бизнеса. Визуальный стиль меняется почти всегда, но он не главное: редизайн затрагивает то, как люди находят информацию и совершают целевые действия. Именно поэтому он влияет на трафик и конверсию сильнее, чем кажется по макетам.

Под словом «редизайн» в брифах часто скрываются разные по объёму проекты. Полезно назвать свой вариант точно — от этого зависят бюджет, сроки и риски.

Чем ниже строка в таблице, тем больше подготовки нужно до запуска. Рестайлинг можно выкатить за один релиз. Редизайн с переездом без карты редиректов и замера базовой линии — почти гарантированная просадка на несколько месяцев.

Когда редизайн нужен, а когда нет

Редизайн оправдан, когда проблема системная и её не решить точечными правками. Типичные признаки:

• сайт не адаптирован под мобильные устройства или собран на шаблонах, которые невозможно поддерживать;
• структура не отражает текущий бизнес: появились новые услуги или аудитории, а меню осталось прежним;
• на ключевых сценариях — заявка, заказ, поиск нужной услуги — пользователи стабильно теряются, и это подтверждают данные и тесты;
• интерфейс разросся из десятков несвязанных решений, и каждое новое изменение ломает соседние блоки;
• сайт не выдерживает требований доступности, и исправления затрагивают все шаблоны.

А вот причины, по которым редизайн чаще всего не нужен: «надоел дизайн» внутри команды, конкурент обновил сайт, новый руководитель хочет «свой» сайт. Пользователи видят ваш интерфейс гораздо реже, чем сотрудники, и привычность для них ценнее новизны. Nielsen Norman Group в статье о том, насколько радикально стоит менять дизайн, прямо пишет: пользователи не любят перемены, поэтому обычно лучше развивать знакомый интерфейс постепенно, а радикальный редизайн оставлять для случаев, когда накопленные заплатки уже разрушили целостность системы.

Что замерить до начала работ

Без базовой линии невозможно доказать ни успех, ни провал. Через месяц после запуска кто-то обязательно скажет «заявок стало меньше», и спор будет о впечатлениях. Зафиксируйте показатели минимум за три месяца до старта, а для сезонного бизнеса — за аналогичный период прошлого года.

Отдельно выгрузите полный список URL сайта: из карты сайта, краулера и аналитики. Страницы, которые приносят трафик, заявки или внешние ссылки, получают статус защищённых: их адрес, ключевой текст и заголовки меняются только осознанно и с планом. О том, какие UX-метрики выбрать и как их повторять, — в статье про SUS, HEART и task success.

Какие исследования провести перед редизайном

Цифры покажут, где сайт теряет людей, но не объяснят почему. Перед проектированием соберите качественные данные — их можно получить за одну-две недели и без большого бюджета.

1. Экспертный UX-аудит. Пройдите ключевые сценарии по эвристикам и зафиксируйте проблемы с приоритетом. Для первого прохода хватит нескольких часов — схема описана в нашем быстром UX-аудите за 30 минут.
2. Юзабилити-тест текущего сайта. Пять-шесть участников из целевой аудитории выполняют реальные задачи: найти услугу, сравнить варианты, оставить заявку. Это база, с которой вы потом сравните новую версию.
3. Интервью с продажами и поддержкой. Менеджеры знают, какие вопросы клиенты задают по телефону, потому что не нашли ответ на сайте. Это готовый список недостающего контента.
4. Анализ поисковых запросов. Внутренний поиск по сайту и запросы из вебмастерских панелей показывают, какими словами люди описывают свои задачи. Используйте эти слова в навигации.
5. Тестирование структуры. Карточная сортировка помогает собрать новую структуру, а tree testing — проверить, находят ли люди разделы в новом меню до отрисовки макетов.

Результат исследований — не отчёт на полку, а два списка: что в текущем сайте работает и должно сохраниться, и какие проблемы редизайн обязан решить. Второй список становится критериями приёмки проекта.

Эволюция или революция: как выбрать масштаб

Масштаб изменений — главный рычаг управления риском. Чем больше вы меняете за один раз, тем сложнее найти причину, если показатели просядут.

Эволюционный подход подходит большинству действующих сайтов: дизайн-система и шаблоны обновляются постепенно, раздел за разделом, а пользователи привыкают к изменениям без шока. Его минус — в переходный период сайт выглядит неоднородно, и нужна дисциплина, чтобы довести обновление до конца.

Радикальный редизайн оправдан, если старая основа технически не позволяет развиваться, сайт переезжает на другую платформу или бизнес меняет позиционирование. В этом случае компенсируйте риск подготовкой: тщательной картой URL, тестами прототипа и запуском с возможностью отката.

Компромиссный вариант — менять систему целиком, а выкатывать частями. Новая дизайн-система и шаблоны готовятся сразу для всего сайта, но включаются по разделам: сначала второстепенные, потом страницы, которые приносят основной трафик и заявки. Так команда получает целостный результат и успевает поймать ошибки на страницах, где они стоят дешевле.

Прототип и дизайн-система: как не сломать привычное

Большинство ошибок редизайна видны уже на прототипе, если его тестировать на задачах пользователей, а не согласовывать на встречах. Кликабельный прототип ключевых сценариев — главная страница, раздел услуг, карточка, форма заявки — проверяется на тех же задачах, что и текущий сайт. Если успешность задач не выросла, визуал не исправит ситуацию.

Несколько правил, которые помогают сохранить то, к чему привыкли пользователи:

• Не переименовывайте разделы без причины. Если люди ищут «Цены», а в новом меню они стали «Тарифами и условиями», это лишний шаг для каждого посетителя.
• Сохраняйте места ключевых действий. Телефон, кнопка заявки, вход в личный кабинет, корзина должны остаться там, где их ищут.
• Не прячьте контент ради минимализма. Тексты, которые отвечали на вопросы клиентов и ранжировались в поиске, нельзя заменять одной строкой слогана.
• Формы трогайте осторожно. Каждое новое поле — точка отказа; правила для полей, масок и ошибок собраны в статье о формах, которые заполняют.

Редизайн — удобный момент, чтобы собрать или обновить дизайн-систему: токены цвета, типографики и отступов, библиотеку компонентов с состояниями. Это окупается в первый же год поддержки, потому что новые страницы перестают рисоваться с нуля. О том, как перевести решения в данные, которые одинаково читают дизайн и код, — в материале о дизайн-токенах.

Заложите доступность с самого начала: контраст текста не ниже 4,5:1, видимый фокус, размер интерактивных целей, работу с клавиатуры и скринридером. Требования WCAG 2.2 проще выполнить в новой системе, чем потом исправлять в сотне шаблонов.

Как сохранить позиции в поиске

Поисковая часть редизайна — это перенос накопленных сигналов: адресов, текстов, заголовков, разметки и ссылок. Чем меньше из этого меняется, тем меньше колебаний в выдаче.

1. Сохраните URL везде, где это возможно. Меняйте адреса только при реальной необходимости — например, при переезде на другую CMS с другой схемой ссылок.
2. Составьте карту редиректов. Каждому старому адресу — один постоянный 301-редирект на ближайший по смыслу новый, без цепочек и без массового перенаправления на главную. Google в руководстве о переносе сайта со сменой URL описывает тот же порядок: карта соответствий, серверные редиректы, обновление ссылок и карты сайта.
3. Перенесите контент и метаданные. Title, description, заголовки H1–H3, тексты, alt у изображений и микроразметку для защищённых страниц сравните со старыми построчно.
4. Обновите внутренние ссылки. Меню, футер и ссылки в текстах должны вести сразу на новые адреса, а не через редирект.
5. Закройте тестовую версию. Стенд — под паролем или с запретом индексации, иначе поисковики увидят дубль сайта. Перед запуском убедитесь, что запрет не уехал на прод вместе с шаблонами.
6. Проверьте технические мелочи. Canonical, robots.txt, карта сайта, корректный 404 для несуществующих адресов, скорость загрузки на мобильных.

Как запускать новый дизайн

Запуск — отдельный этап со своим планом, а не нажатие кнопки в пятницу вечером. Минимальный набор:

• выберите день и время с минимальной нагрузкой, не перед выходными и не в пик сезона;
• заранее подготовьте план отката: старую версию можно вернуть за минуты, и все знают, кто принимает это решение;
• прогоните финальный чек-лист на проде сразу после выкладки: формы отправляются, заявки доходят до CRM, аналитика и цели срабатывают;
• просканируйте сайт краулером и проверьте коды ответов по карте редиректов;
• отправьте обновлённую карту сайта в вебмастерские панели.

Если трафика достаточно, запускайте новую версию на часть аудитории и сравнивайте с текущей через A/B-тест. Так вы увидите реальное влияние на конверсию, а не наложение сезонности и рекламных кампаний. Для небольших сайтов, где выборки для теста не хватает, используйте поэтапный запуск по разделам и сравнение с базовой линией.

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

Что отслеживать после запуска

После запуска контроль идёт в три волны, и на каждой — свой набор показателей.

Краткосрочные колебания позиций после крупных изменений нормальны: поисковикам нужно время, чтобы переобойти сайт. Тревожный сигнал — устойчивое падение на конкретных страницах. Почти всегда его причина находится при сравнении со старой версией: пропал текст, изменился заголовок, не сработал редирект.

Повторите юзабилити-тест на тех же задачах, что и до редизайна. Если успешность задач и оценка SUS выросли, а заявки нет, проблема скорее в трафике или контенте, чем в интерфейсе. О том, сколько участников нужно для таких тестов и где правило «пяти пользователей» перестаёт работать, — в статье о тестировании на пяти пользователях.

Частые ошибки редизайна

1. Цель «сделать современно». Без измеримых целей нельзя понять, удался ли проект.
2. Нет базовой линии. Показатели до запуска не зафиксированы, и споры о результате идут на уровне ощущений.
3. Решения по вкусу руководства. Макеты согласовываются на встречах, а не проверяются на пользователях.
4. Всё меняют одновременно. Дизайн, структура, тексты, CMS и домен в одном релизе — причину просадки не найти.
5. Потерянный контент. Длинные тексты заменяют короткими слоганами, и страницы выпадают из выдачи.
6. Нет карты редиректов или все старые адреса перенаправлены на главную.
7. Забытый запрет индексации со стенда уезжает на прод.
8. Тяжёлый визуал. Видео на фоне и крупные иллюстрации ухудшают скорость на мобильных.
9. Нет плана отката и ответственного, который принимает решение.
10. Проект «закончили» в день запуска. Мониторинг и доработки после релиза не заложены в план.

Чек-лист редизайна

1. Цели редизайна сформулированы измеримо: какие показатели и на сколько должны измениться.
2. Базовая линия зафиксирована: трафик, позиции, конверсии, UX-метрики, скорость за три месяца и более.
3. Выгружен полный список URL, отмечены защищённые страницы с трафиком, заявками и ссылками.
4. Проведены аудит, юзабилити-тест текущего сайта и интервью с продажами и поддержкой.
5. Выбран масштаб изменений и порядок выкатки по разделам.
6. Прототип ключевых сценариев проверен на пользователях до вёрстки.
7. Дизайн-система и компоненты учитывают доступность по WCAG 2.2.
8. Карта редиректов 301 составлена и проверена, внутренние ссылки обновлены.
9. Тексты, заголовки, метаданные и микроразметка защищённых страниц перенесены.
10. Тестовая версия закрыта от индексации, а на проде запрет снят.
11. План отката готов, ответственный назначен.
12. После запуска настроен мониторинг на 72 часа, месяц и три месяца, запланирован повторный тест.

Редакция Флагштока

Пишем об UX/UI-дизайне: исследования, интерфейсы, дизайн-системы и доступность.