Дизайн, который продаёт: 7 приёмов для сайта услуг

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

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

1. Первый экран отвечает на три вопроса

За первые секунды человек должен понять: что вы делаете, для кого и что ему сделать дальше. Если для этого нужно листать, часть посетителей уйдёт раньше.

На первом экране достаточно трёх элементов:

• заголовок, который называет услугу словами клиента, а не слоганом: «Ремонт квартир под ключ», а не «Пространство вашей мечты»;
• подзаголовок с главным отличием: сроки, гарантия, опыт, район работы;
• кнопка с понятным действием.

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

2. Одна главная кнопка, и она везде одинаковая

Когда на странице «Оставить заявку», «Получить консультацию», «Рассчитать стоимость» и «Связаться», посетитель тратит силы на выбор. Выберите одно главное действие и называйте его одинаково во всех блоках.

Хорошая кнопка говорит, что произойдёт после нажатия, и не пугает обязательствами. «Обсудить проект» звучит мягче, чем «Заказать», а «Рассчитать стоимость» честнее, чем «Отправить».

Главная кнопка должна выделяться цветом. Если акцентный цвет есть ещё у пяти элементов на экране, он перестаёт работать.

3. Цены или хотя бы «от»

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

Точный прайс есть не у всех, и это нормально. Помогают даже ориентиры: «от 70 000 ₽», «пакеты от и до», «из чего складывается цена». Посетитель понимает порядок суммы и приходит уже готовым к разговору.

Цена «от» отсекает тех, кому точно дорого, и успокаивает тех, кто готов. И те и другие экономят ваше время.

4. Доказательства рядом с обещаниями

Фразу «мы делаем качественно» пишут все. Верят тому, что можно проверить:

• кейсы с задачей, решением и результатом, лучше с цифрами;
• отзывы с именем, должностью и фото, а не «Анна, 34 года»;
• логотипы клиентов, сертификаты, публикации;
• фотографии команды и реальных работ вместо стоковых картинок.

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

5. Текст, который можно просканировать

На сайте почти не читают подряд: взгляд скользит по заголовкам и выхватывает знакомые слова. Поэтому:

1. Заголовки блоков формулируйте как выгоду или ответ на вопрос.
2. Абзацы делайте короткими, по 2–4 строки.
3. Списки используйте там, где есть перечисление.
4. Следите за контрастом: светло-серый текст на белом выглядит изящно, но его тяжело читать, особенно на телефоне на улице.

Последний пункт мы проверяем по стандарту WCAG: у основного текста контраст не ниже 4,5:1. Это заодно один из пунктов проверки Lighthouse, который смотрят и SEO-специалисты.

6. Мобильная версия — основная

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

Что проверить на своём сайте:

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

Каждое лишнее поле формы — повод передумать. Поле «Комментарий» можно оставить, но необязательным.

7. Маленький первый шаг

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

Дайте им шаг поменьше: бесплатный аудит, расчёт, консультацию, недорогой пробный этап. Например, мы предлагаем концепцию главной страницы за 5 дней и 30 000 ₽: клиент видит будущий сайт до того, как вкладывается в разработку целиком.

Рядом с формой полезно написать, что будет после заявки: «Ответим в течение часа в рабочее время, обсудим задачу и назовём сроки». Неизвестность пугает больше, чем сам звонок.

Что обычно мешает продавать

Несколько решений, которые мы чаще всего убираем при редизайне:

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

Каждое из них по отдельности кажется мелочью, но вместе они создают ощущение, что сайт отвлекает, а не помогает.

Как проверить, работает ли дизайн

Мнение коллег — плохой ориентир. Лучше смотреть на поведение посетителей. В Яндекс Метрике для этого есть всё необходимое:

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

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