Посадочная страница: из чего складывается конверсия

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

Факторы по силе влияния

Первый экран

У первого экрана одна задача: за несколько секунд ответить, что здесь предлагают, кому и сколько это стоит. Всё остальное — украшения. Проверка простая: покажите экран человеку со стороны на пять секунд и спросите, что продаётся.

• Заголовок называет услугу словами клиента, а не внутренним термином компании.
• Подзаголовок отвечает на «для кого» и «что получаю в итоге».
• Цена, вилка или порядок расчёта видны без прокрутки.
• Одно основное действие. Две равнозначные кнопки снижают конверсию обеих.

Форма: каждое поле стоит денег

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

"use client"

import { useActionState } from "react"
import { submitLead } from "@/app/actions"

export function LeadForm() {
  const [state, action, pending] = useActionState(submitLead, null)

  return (
    <form action={action} className="flex flex-col gap-4">
      <label htmlFor="contact" className="text-sm">
        Телефон или почта
      </label>
      <input
        id="contact"
        name="contact"
        required
        // Правильный тип клавиатуры на телефоне заметно снижает
        // число опечаток в контактных данных
        inputMode="tel"
        aria-describedby={state?.error ? "contact-error" : undefined}
        aria-invalid={state?.error ? true : undefined}
        className="border border-foreground/20 bg-transparent px-4 py-3"
      />

      {state?.error ? (
        // role="alert" заставляет программу чтения экрана
        // сразу озвучить ошибку, а не ждать перехода фокуса
        <p id="contact-error" role="alert" className="text-sm text-muted-foreground">
          {state.error}
        </p>
      ) : null}

      <button type="submit" disabled={pending} className="bg-foreground px-6 py-3 text-background">
        {pending ? "Отправляем" : "Обсудить задачу"}
      </button>
    </form>
  )
}

Доверие

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

Как проверять изменения

1. 01Меняйте одну вещь за раз, иначе нельзя понять, что подействовало.
2. 02Считайте не переходы, а целевые действия: отправку формы и звонки.
3. 03Дожидайтесь тридцати-пятидесяти действий на вариант, прежде чем делать выводы.
4. 04Начинайте с сильных факторов из таблицы, а не с цвета кнопки.
5. 05Записывайте, что проверяли и с каким результатом: через полгода это единственный источник знаний о ваших клиентах.

Хорошая посадочная страница отвечает на четыре вопроса: что это, для кого, сколько стоит и что будет после нажатия кнопки. Остальное — оформление.