Как научить сайт продавать? Разбор лендинга жилого комплекса.

Кому нужен такой анализ?

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

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

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

Статья длинная и рассчитана на глубокое погружение в детали.

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

Разбор лендинга ЖК "Авангард"

1. Как будем оценивать сайт?

Продающие страницы жилых комплексов отличаются от интернет-магазинов товаров электроники или сайтов ресторанов. Но я хочу сфокусировать внимание не на очевидных различиях в структуре сайтов и ассортименте товаров, а на том, что целевое действие (то, которое нам нужно, чтобы клиент совершил на сайте) будет разным. Этот фокус важен для того, чтобы оценивать сайт на каждом этапе через такой фильтр. Вот пример:

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

Да, в конечном итоге, нам нужно, чтобы человек купил квартиру. Но у этого длительного процесса есть этапы, и миновать их не получится никак. Этапы покупки квартиры о общем виде выглядят так:

Увидел рекламу → Перешел по рекламе на сайт → Оставил заявку (позвонил) → Пообщался с менеджером ОП → Пришел на встречу в офис или экскурсию → Заключил договор.

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

Теперь, когда мы понимаем, что цель лендинга — продажа общения с менеджером, мы будем оценивать страницу с фокусом на то, эффективно ли каждый элемент работает на достижение цели?

2. Разбор лендинга по экранам

Первый экран

Первый экран - самый важный, т.к. на основе информации на этом экране пользователь чаще всего принимает решение о том, стоит ли смотреть сайт дальше. Обоснованность утверждения можно проверить в Яндекс Метрике, если на сайте установлен счетчик и включены инструменты "вебвизор" и "карта скроллинга". Вебвизор покажет видеозаписи экранов пользователей во время посещения сайта, а карта скроллинга покажет общую картину поведения пользователей на сайте.

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

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

Меню стоит сделать «прилипающим», чтобы на всех экранах были видны его пункты. Там же будет и телефон, чтобы его не пришлось искать по сайту. Это повысит конверсию. Вот пример такого меню:

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

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

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

Конечно, почти никто вслух так не скажет. Люди даже не осознают, что действуют по такому сценарию, но это так. Если слишком сложно быстро понять, о чем сайт, человек уходит. Мир наполненная бесконечным потоком информации. Больше нет нужды «добывать» информацию, теперь ее приходится фильтровать. Эффективен тот, кто умеет рассказать о том, чем он полезен быстро, интересно и без «воды».

Кнопку «заказать звонок» тоже стоит поместить в меню, чтобы она присутствовала на любом экране сайта. Человек, изучив архитектуру сайта на первом экране, будет знать, что кнопка сверху и воспользуется при импульсе заинтересованности.

Счетчик старта продаж на первом экране не несет никакой пользы для клиента. При конструировании сайта полезно задавать себе вопросы, которые возникают в сознании пользователя. Например, тут будет такой вопрос: «Старт продаж через... И что? Какая мне с этого выгода?» Ответ — никакой. Или же выгода существует, но не раскрыта. И это значит, что клиент не понял, что она есть, поэтому ответ в голове пользователя снова такой: «в этом нет для меня ничего интересного». Этот счетчик — элемент, который из-за своей динамической природы привлекает внимание (меняются цифры, глаз цепляется за эти изменения), но не ведет к повышению конверсии в заявки, т.к. не отвечает нуждам пользователей. Однозначно убрать.

Пример, когда элемент вставлен для того, чтобы было. Никакой смысловой нагрузки он не несет. В контексте лендинга для ЖК он никак не стимулирует продажи, а только занимает место и отвлекает.

Дескриптор (короткое описание содержания сайта, Т.е. пара слов, о чем сайт) на первой странице может нести больше полезной информации. Рекомендую потрудиться над его созданием. Выглядеть он может примерно так: «Квартиры в центральном районе Тулы. Светлые планировки с ремонтом под ключ и панорамными окнами рядом с метро. 11 800р/мес в ипотеку». Конечно, указывать нужно реальную информацию, придумывать не надо. Акценты расставим размерами шрифтов и расположением.

Вот это дескриптор. То место, куда сразу попадет взгляд клиента. Мы воспринимаем информацию так, как читаем — слева направо, поэтому на сайте ЖК «Авангард» это первый привлекающий внимание элемент. Потому он значимый и должен быть информативным.

УТП про контроль государства стоит вынести в отдельный экран. На первом экране это преимущество можно упомянуть, добавив в дескриптор, но раскрывать его там не нужно. Поэтому, если нужно раскрыть УТП, сделать это стоит ниже. Сейчас даже не сразу понятно, что есть раскрывающееся окно с информацией, это не очевидно для пользователя, а значит, нажимать туда не будут. Подтверждение видно в Вебвизоре, если правильно настроить счетчик.

Вот этот элемент. Я его и заметил-то не сразу. Оказалось, что он еще и кликабельный, и внутри подробная информация о том, как государство защищает покупателей квартир в этом доме. Это важно, не правда ли? Но сколько людей заметят важную информацию в таком месте? А сколько догадается, что нужно нажать и посмотреть подробности? В результате сильное преимущество осталось без внимания.

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

Пример открытой формы сбора заявок.

Формы сбора заявок должны быть простыми и понятными. Форма на первой странице может быть выполнена лучше. Здесь, как везде, работает принцип «думай, как клиент». Сейчас из формы не понятно, зачем мне быть первым? Что, есть какие-то акции? Если да, то какие? Почему об этом не написано? Если есть уникальное предложение, то в чем его уникальность? Оно уникально относительно ЖК (что-то отличающее его от всех других) или относительно меня как клиента (какое-то действительно уникальное предложение? Я не вижу никаких пояснений, отчего весь текст смотрится шаблонно и носит манипулятивный характер, и воспринимается негативно. Никто не любит ложь и пустые обещания. Следует либо максимально упростить тексты до «оставь заявку», либо пояснить в нескольких словах, в чем же конкретно выгода для клиента.

Вот форма, которая всплывает после нажатия на кнопку. Разве страница потеряет в информативности, если убрать все лишнее (счетчик, информацию про государственной защиту, лишние визуальные элементы) и сделать вместо кнопки «Узнать первым» вот такую открытую форму сбора с переработанным текстом? Сайт станет чище и информативнее.

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

Плашка с преимуществами жилого комплекса

Вот здесь тоже лучше проработать. Либо указать, что за культ такой у «Современника» и привести подтверждения, либо выбрать что-то менее кричащее и вызывающее. Цель-то в чем?

Экран с обозрением инфраструктуры района

Цель следующего экрана мне совсем непонятна, поэтому я бы полностью удалил его, и это никак не повлияет на продающую способность.

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

Если есть задача показать объекты инфраструктуры рядом, лучше использовать карту. Можно реализовать это примерно так:

Такую карту вставить на сайт намного проще, чем разработать реалистичную 3D модель района, где расположен ЖК, и уже на этой модели сделать выноски с объектами инфраструктуры. Такая карта — это сервис Яндекс. Она удобно масштабируется и перемещается, клиенту будет удобно изучить местность настолько подробно, насколько он захочет.

Такая картина нагляднее. Она схематична, но несет больше пользы для пользователя и увеличивает количество заявок, а именно в этом главная цель сайта. Как ни крути, красота все равно будет на втором месте. Чтобы подтвердить гипотезу, можно устроить А/Б тестирование страниц с обоими видами экранов с инфраструктурой. Бьюсь об заклад, что при прочих равных условиях победит сайт с картой от Яндекс с нанесенными на нее значками. Простой, но информативный сайт принесет больше заявок, чем красивый, но неудобный и не информативный.

Также я бы рекомендовал переписать тексты на сайте. каждый заголовок, каждое УТП должно доносить нечто конкретное, нечто понятное, нечто измеримое, нечто, что можно как-то проверить или вообразить с помощью имеющегося подобного опыта. Это должно быть полезно, просто и понятно.

Экраны, раскрывающие преимущества

Абстрактные фразы конкретизируем, а то, что можно показать с помощью картинок, фото или рендеров — показываем. Текст нужен там, где нельзя нарисовать картинку.

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

Метафорические формулировки в стиле брендов Apple и Mersedes пишутся не просто так, под ними лежат глубокие исследования, и метафоры призваны достигать определенных устремлений или ассоциаций в мозгу человека. Здесь я не смогу раскрыть вопрос подробно. Скажу лишь, что просто какие-то возвышенные слова не являются волшебной палочкой и не работают всего лишь по факту их использования. Здесь они скорее сыграют обратную функцию и снизят конверсию, т.к. ничего конкретно непонятно. Картинка в голове не рисуется, создается ощущение, что это неумелая претензия на нечто элитное.

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

Я надеюсь, аналогия понятна. Она призвана передать мои ощущения, но ни в коем случае не принизить чьи-то усилия. Все, изложенное в этом анализе — субъективное мнение.

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

На этом скриншоте ничего не значащие картинки, которые без подписей вообще теряют всякий смысл.

На этом скриншоте приведены реальные фото объекта, а технологии сопровождаются иллюстрациями с пояснениями.

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

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

Вот это пример явной неумелой манипуляции. Она очень заметна. Еще раз: нужно решать проблему клиента, а не сулить нечто неизвестное и сомнительное.

Экран с визуализацией ЖК

Картинка на скриншоте ниже перегружена, всплывающее окошко с визуалом конкретной части ЖК теряется на фоне слишком яркой и детализированной схемы ЖК. Это вопрос дизайна. Решить проблему можно либо с помощью снижения непрозрачности заднего фона при всплывании окон, либо с помощью переработки экрана. Я бы переработал экран, он тяжелый для восприятия.

Если бы я не поместил объект на картинке в рамочку и не указал на него стрелкой, вы бы его заметили?

Экран с планировками квартир

Используя обращение на «Ты», нужно следить, чтобы все формулировки были нейтральными и не учитывали род пользователя (мужской или женский). Иначе, если род не совпал, сложнее примерить утверждение на себя.

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

Экран с опциями покупки

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

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

Экран «Ход строительства»

Людям нравится наблюдать за ходом строительства после покупки. Вот почему это важно показывать в соцсетях. А, когда принимается решение о покупке, важно показать прогресс на сайте. Заманчиво получить контакты на стадии первого просмотра, но ценности пока нет. Лид не понимает, зачем ему оставлять личные данные, поэтому лучше показать ход строительства сразу, а подписную базу концентрировать на площадках социальных сетей. Это дает лучшую конверсию, чем подход «попросить данные за что-то не значимое». Люди избалованы, ценность предлагаемой информации должна перевешивать цену дискомфорта оставить контакты непонятно кому, непонятно для каких целей. Люди понимают, что это для рассылки, и что персональные данные не всегда защищены надежно. И думать так будут даже, если данные все же надежно защищены, а рассылка действительно полезна. Оценить пользу можно только после предоставления личной информации, но решение принимается не на основе тестов, а на основе своего предыдущего опыта и моделирования будущего в собственном воображении.

Пример экрана "Ход строительства"

Экран «Сервис»

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

Экран «Контакты»

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

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

Подвал лендинга

Меню снизу как-то странно частично дублирует боковое меню и сочетает в себе ссылки на другие ресурсы вроде политики конфиденциальности. Если меню будет прилипающим, в дублировании смысла нет. Не нужно делать элементы «чтобы были». Простота важна.

Ссылка на политику конфиденциальности открывается в том же окне, а не в новом. Таким образом, мы уводим пользователя с целевой страницы, а это нежелательно. Ссылки на сторонние ресурсы вообще не допустимы, а на необходимые — либо во всплывающем окне, либо в новой вкладке.

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

Общие рекомендации

Через меня прошло более 100 сайтов в сфере недвижимости. Опираясь на опыт «насмотренности», проектирования и анализа сайтов, скажу, что сейчас страница выглядит перегруженной местами информационно (как на первом экране), а местами графически. Т.е. много элементов, анимации, которая не только отвлекает от полезной информации, но и «захламляет» внимание зрителя. Чем больше подобных элементов, тем хуже лендинг будет грузиться на разных устройствах. И это на сайте еще не стоят счетчики, чаты и прочие коды. Чем больше кодов, тем сложнее сайт, тем дольше он грузится. Это ведет к потере конверсии. Анимация — это хорошо, но фишки должны быть использованы в меру, как украшения на женщине, например. Иначе смотрится вычурно.

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

При запуске сайта обязательно нужно подключить коллтрекинг (подмену телефонных номеров) и систему сквозной аналитики. Это не входит в процесс непосредственной разработки сайта, но на финальном этапе нужно этот пункт учесть и проверить. Без подмены номеров и правильного учета каналов лендинг будем работать намного менее эффективно, чем может. Коллтрекинг стоит дешево, и окупится в первый же месяц активного использования. Серьезная система сквозной аналитики стоит дороже, но она и экономить позволяет значительно. Чтобы не рассеивать внимание, о коллтрекинге и «сквозняке» поговорим в другой статье.

Формам захвата на сайте нужно дать названия, которые будут соответствовать целям в Яндекс Метрике и Гугл Аналитике. Также эти названия будут отправлены в CRM застройщика, которую стоит подключить для дополнительного контроля «проброса» лидов. Это бесплатно. Также стоит настроить проброс в Гугл Таблицы, это позволит вести дополнительный учет лидов. Т.е., если в CRM и в таблице будет разное количество лидов, можно запросто найти, где происходит обрыв цепочки. Учитывая, что каждая заявка стоит денег, разумно организовать описанный двойной контроль.

Прописать все метатеги на странице: заголовок, названия экранов (заголовки 2-го уровня), подзаголовки, описание сайта. Это все нужно для поисковой оптимизации, чтобы сайт появлялся как можно выше в поисковой выдаче. Если сайт собран на популярном конструкторе вроде Tilda или PlatformaLP, то это делается через меню конструктора, там есть соответствующие пункты.

Пожалуй, достаточно.

Если интересны какие-то неосвещенные подробности, можно задать вопрос мне в комментариях.

Ссылка на кейс: Недвижимость в Анапе. 18 сделок за 3 месяца и лиды по 1012 ₽.

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