Как улучшить сайт.
10 шагов до заявки.

Что проверить перед правками

Откройте страницу, на которую ведёт ваша реклама. Понятно ли, что вы продаёте, сколько это стоит и как заказать? Пройдите весь путь до ответа менеджера. Ниже разберём, что проверить и исправить.

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

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

Если заявки пропали внезапно, начните с проверки рекламы, сайта и доставки обращений.

1. Объясните на первом экране, что человек получит

«Качество, надёжность, индивидуальный подход» не объясняют, что вы предлагаете. Напишите, какой продукт получит покупатель и что нужно сделать для заказа.

Укажите город или территорию работы. Для покупателей небольших кухонь покажите кухню в обычной квартире. Если в рекламе указана конкретная комплектация, на странице должны быть её цена и условия.

На первом экране достаточно заголовка, короткого пояснения, фотографии продукта и кнопки заказа. Рядом можно дать ссылку на выполненные проекты.

2. Покажите цену вместе с составом заказа

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

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

Если точная цена известна только после замера, предложите предварительный расчёт по размерам клиента. Сразу объясните, что после замера сумма может измениться.

У ремонта перечислите работы и материалы, у разработки сайта укажите страницы и интеграции. Одного «под ключ» для сравнения цен недостаточно.

3. Фотографии должны помогать выбирать

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

В подписях назовите материал фасада, объясните устройство хранения или решение для узкого прохода. Из фотографии проекта дайте ссылку на его комплектацию.

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

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

4. Покажите конкретный заказ: задачу, цену и результат

Выберите реальный заказ, похожий на те, которые хотите получать. Покажите, что требовалось клиенту, как вы решили задачу и сколько это стоило.

1. Задача. Что требовалось клиенту: вместить хранение, сохранить технику, уложиться в определённый бюджет.
2. Ограничения. Размеры, расположение коммуникаций, неровные стены, сроки ремонта.
3. Решение. Что выбрали и почему. Какие варианты отвергли.
4. Комплектация и стоимость. Что вошло в опубликованную сумму и что осталось за её пределами.
5. Сроки. От какого события считали: утверждения проекта, оплаты или замера.
6. Результат. Фотографии после установки и проверяемые сведения о выполненных работах.

Объясните хотя бы одно решение: например, почему отказались от углового модуля и как использовали освободившееся место.

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

5. Покажите отзывы о цене, сроках и качестве работы

Покупатель хочет знать, не вырастет ли цена после замера, успеют ли к обещанной дате и кто исправит недочёты. Найдите отзывы с ответами на эти вопросы.

Выделите полезную цитату и дайте ссылку на полный отзыв. Не вырезайте замечания клиента, которые меняют смысл.

Отзыв о цене разместите рядом со сметой, об аккуратной установке рядом с описанием монтажа.

Если отзывов мало, покажите выполненные проекты и условия гарантии. После завершения заказа попросите клиента поделиться впечатлениями. Не придумывайте отзывы.

6. Прочитайте страницу только по заголовкам

Люди часто просматривают страницу по заголовкам, чтобы найти нужное. Это описано в исследовании Nielsen Norman Group. «Наши преимущества» ничего не сообщает о компании. «Стоимость согласуем до производства» сразу называет условие работы.

Начните с предложения, затем покажите варианты, цены, проекты и порядок заказа. Если клиенты первым делом спрашивают о наличии, поставьте этот блок выше.

Сократите заголовки, которые на телефоне занимают по семь строк. Оставьте услугу или конкретное условие. Не повторяйте поисковый запрос в каждом блоке.

7. Кнопка должна выполнять своё обещание

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

Называйте действие прямо: «Получить предварительную смету», «Выбрать время замера», «Посмотреть комплектации». Слово «бесплатно» добавляйте, только если платить действительно не нужно.

Выделите основную кнопку. Ссылки на проекты и условия сделайте менее заметными, чтобы они не отвлекали от заказа.

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

8. Объясните, как и когда придёт ответ

Рядом с формой напишите, кто ответит, куда пришлёт расчёт и сколько ждать.

После отправки покажите подтверждение и контакт для связи, если ответ задержится. При ошибке объясните, что случилось, и сохраните заполненные поля.

Заявка может сохраниться на сервере, а уведомление менеджеру не дойти. Поэтому проверяйте оба этапа, даже если на сайте появилась надпись «Отправлено».

9. Спрашивайте только то, что нужно для следующего шага

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

Каждое обязательное поле должно помогать подготовить ответ. Нужен регион, чтобы определить возможность выезда? Спросите его. Уточняете бюджет? Добавьте вариант «Пока не определился».

В исследовании Baymard разобрано, как количество и сложность полей влияют на оформление заказа в интернет-магазине. Для формы услуги тоже проверьте, какие данные действительно нужны сейчас.

• Оставляйте подписи видимыми после ввода. Подсказка внутри поля исчезает при вводе и не заменяет его название: это подробно разобрано у Nielsen Norman Group.
• Подберите клавиатуру под данные: телефон, email, обычный текст. Не требуйте телефон в поле для Telegram.
• Показывайте ошибку рядом с проблемным полем и объясняйте, как исправить ввод.
• Сохраняйте корректно заполненные поля при ошибке и не создавайте дубли при повторном нажатии.
• Разделяйте отправку заявки и необязательную подписку на рассылку.

10. Пройдите весь путь с телефона

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

1. Откройте страницу без сохранённых настроек. Закройте или настройте появившиеся баннеры.
2. Прочитайте предложение и цену без увеличения экрана.
3. Откройте фотографии и вернитесь к нужному блоку.
4. Нажмите кнопку заявки. Проверьте, видны ли подписи и активное поле после появления клавиатуры.
5. Исправьте ошибку ввода. Убедитесь, что остальные данные сохранились.
6. Отправьте согласованную тестовую заявку и проверьте её получение.
7. Проверьте второй путь: звонок или переход в мессенджер, если он предусмотрен.

Закреплённая кнопка не должна закрывать текст и поля. Проверьте её с открытой клавиатурой и нижней панелью браузера. При заполнении формы её можно скрывать.

Для основных кнопок ориентируйтесь на высоту 44–48 CSS-пикселей или больше. Это рекомендация для удобства. WCAG 2.2 уровня AA требует минимум 24×24 CSS-пикселя с исключениями, в том числе при достаточных промежутках. Считайте всю нажимаемую область, включая отступы.

Как понять, что переделка помогла

До правок запишите посещаемость и число обращений. Считайте отдельно открытия формы, отправленные заявки, доставленные сообщения и подходящих клиентов. Клик по Telegram фиксирует переход. Начало переписки проверяйте отдельно.

В учебном примере из 1 000 посещений получилось 100 открытий формы, 40 заявок и 12 подходящих обращений. Конверсия в заявку составляет 4%, в подходящее обращение 1,2%. Если заявок стало больше, проверьте, выросло ли число потенциальных покупателей.

В Метрике настройте цели через reachGoal. Событие отправленной заявки должно срабатывать после подтверждения сервера. Доставку и качество обращения проверяйте по CRM или журналу заявок. Телефоны и переписку в аналитику не передавайте.

Сравнивайте те же страницы, источники трафика и устройства за сопоставимые периоды. Отдельно отметьте изменения рекламы, цен и сезонности: они тоже влияют на заявки.

При достаточном трафике сравните два варианта страницы в A/B-тесте. Заранее выберите показатель и необходимый объём данных. При малой посещаемости исправляйте явные ошибки и наблюдайте, где пользователи затрудняются. Двух заявок недостаточно, чтобы выбрать лучший вариант.

В каком порядке вносить правки

Для каждой правки запишите адрес страницы, проблему, подтверждение, решение и способ проверки. Назначьте ответственного. Работайте на копии сайта; сохраняйте адреса страниц и SEO-настройки, которые не требуют изменений.

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

Скачайте скилл для аудита в Claude Code и Codex

Скилл webclub-conversion10 задаёт помощнику порядок аудита: проверить десять направлений, показать ошибки и предложить исправления. Помощник использует доступные ему страницы, исходники и браузер.

В ZIP лежат инструкция, чек-лист и генератор отчёта. Результат открывается в браузере: цветная сводка, таблица ошибок и план работ. Данные также сохраняются в JSON и CSV. Генератор работает локально без платного API.

Как установить

1. Скачайте ZIP и распакуйте его.
2. Для Codex положите папку webclub-conversion10 в .agents/skills/ вашего проекта. Для Claude Code: в .claude/skills/.
3. Откройте проект в помощнике. Если скилл не появился, начните новую сессию.
4. Передайте адрес сайта, нужную услугу и задание ниже. Для проверки интерфейса нужен доступный инструмент браузера; без него помощник отметит недоступные проверки.

Инструкции по скиллам: Codex и Claude Code. Простая загрузка ZIP в чат не даёт помощнику доступа к сайту, исходникам или CRM.

Используй webclub-conversion10. Проведи аудит сайта [URL] по десяти направлениям. Главная услуга: [услуга]. Нужное обращение: [что должен сделать клиент].

Проверь главную, страницу услуги и путь до заявки на компьютере и телефоне. Для каждой находки укажи URL, доказательство, проблему для посетителя, приоритет, конкретную правку и проверку результата. Отделяй подтверждённые ошибки от гипотез. Недоступные проверки отмечай отдельно.

Сохрани report.html, report.json и findings.csv. В начале отчёта покажи три первоочередные задачи. Не меняй рабочий сайт и не отправляй реальные заявки. Если без этого нельзя проверить доставку, опиши владельцу порядок проверки.

Для вызова скилла напишите $webclub-conversion10 в Codex или /webclub-conversion10 в Claude Code.

Что делать с результатом

Начните с трёх первых задач отчёта. Проверьте указанные ошибки, внесите правки и повторите аудит. Доставку заявки подтвердите отдельным тестом, если помощник не смог её проверить.

Индексацию, canonical, robots.txt и скорость проверяйте отдельным скиллом по 27 правилам SEO.

Что ещё стоит учесть