{"id":7016,"title":"\u0423\u0433\u0430\u0434\u0430\u0439\u0442\u0435 \u0433\u043e\u0440\u043e\u0434\u0430 \u043f\u043e \u0437\u0432\u0443\u043a\u0443 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e\u0441\u044f \u043f\u0438\u0432\u0430 \u0438 \u043f\u0435\u043d\u0438\u044e \u043a\u0438\u0442\u043e\u0432","url":"\/redirect?component=advertising&id=7016&url=https:\/\/vc.ru\/special\/sound&placeBit=1&hash=6ca24c77fedb0a01bd41595a6fbd498b5375a294c2e3b54a129aa318671b77a3","isPaidAndBannersEnabled":false}
Маркетинг
idaproject

Сайтхаки для недвижки. Как не быть «бумерами» в XXI веке

Digital-агентство idaproject делится сайтхаками, которые должен знать каждый застройщик в 2020 году.

Это вам не Сливки-шоу! 

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

Бежать будем с одной скоростью — с моей.

Скорость загрузки сайта = скорость принятия решения клиентом. Сейчас это аксиома и точка. Искушенный предложениями пользователь не в состоянии терпеть более 10 секунд, пока у вас прогрузятся все рендеры, карточки, видео и так далее.

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

Что поможет?

  • Технологии SPA (single page application)

  • Современные web-технологии
  • Асинхронная загрузка контента
  • Оптимизация визуального контента и «ленивой» загрузки

Пример бесшовной загрузки и применения технологии SPA для ГК Монарх.

Оптимизации скорости загрузки страницы для нашего клиента. Мгновенная прогрузка страницы по запросам пользователя. Пример нашего клиента Группа «Самолет».

Поговорим про технологии.

Фронтенд как универсальное приложение

Примеры: Next, Nuxt

Преимущества:

  • Отрисовка новых страниц без перехода. Ускоряет переход между страницами.
  • Серверный рендеринг. Хорошо для оптимизации.
  • Возможность статической генерации сайтов. Еще больше ускоряет переходы и повышает надежность.
  • SWR (stale-while-revalidate) - стратегия кэширования данных на клиенте.
  • Оптимизация сборки.

Современные фронтенд-фреймворки

Примеры: vue, react, angular

Преимущества:

  • Компонентная архитектура. Ускоряет разработку за счёт переиспользования данных.
  • Virtual DOM позволяет эффективно применять обновления DOM.
  • Управление состоянием всего приложения (Vuex/Redux/MobX).

Typescript

Преимущества:

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

Протокол GraphQL

Преимущества:

  • Позволяет в запросах обращаться только к необходимым данным. Ускоряет загрузку данных.
  • Объединение нескольких запросов в один. Ускоряет загрузку данных.

Оптимизация изображений

Преимущества:

  • Современные форматы (webp) - уменьшает размер изображений, ускоряет загрузку.
  • Генерация легковесных превью для изображений и ленивая загрузка. Увеличивает скорость загрузки.

Протокол HTTP/2

Преимущества:

  • Сжатие заголовков. Ускоряет загрузку данных.
  • Использование одного tcp соединения. Уменьшает нагрузку на сервер.
  • Server Push - отправка файлов до того, как пользователь их запросит. Ускоряет загрузку.

Контейниризация

Примеры: Docker

Преимущества:

  • Моментальный разворот приложения. Ускоряет развёртывание проектов на серверах и локальных машинах сотрудников.
  • Изоляция отдельных сервисов. Повышает безопасность системы.

CI/CD автоматизации

Примеры: jenkins, Gitlab

Преимущества:

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

Очередь задач

Примеры: celery, sidekiq

Преимущества:

  • Можно отправлять пользователь ответ не дожидаясь выполнения тяжёлой задачи. Например, отправка email и запросов в CRM системы. Ускоряет запросы связанные с длительными задачами.
  • Длительные задачи выполняются последовательно. Помогает избежать перегрузки сервера.

Мониторинг ошибок

Примеры: Sentry, Rollbar

Преимущества:

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

Тестирование

Примеры: e2e, snapshot, unit

Преимущества:

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

Проигрывают те, кто не может приспособиться, и те, кто не хочет.

По статистике Statcounter, доля мобильного трафика достигает в среднем 52,4%. В наших же кейсах по недвижимости есть порталы, где доля мобильного трафика превышает 70%. Странно, но все еще существуют компании, которые не учитывают изменения в моделях потребления.

Как адаптироваться под мобильные устройства?

  • Использовать рекомендации по дизайну для устройств (шрифты, размеры, соотношения и так далее)
  • Минимизируйте контент, оставляйте только нужное
  • Элементы СТА должны быть очевидными и видными
  • Делайте Mobile First или адаптив с другими блокам

Максимально «облегчайте» мобильную версию и соблюдайте рекомендации по дизайну интерфейса для всех типов устройств. Пример нашего клиента ГК А101.

Чтобы друг друга понимать – надо общий язык искать.

На конверсию и пользовательский отклик влияет не только полнота информации, но и tone of voice. Не стоит быть слишком формальными, людям проще читать простые понятные тексты, разбитые на абзацы.

Как размещать контент на сайте?

  • Разбивайте текст на короткие абзацы
  • Используйте верный tone of voice для вашей целевой аудитории

  • Элементы СТА должны быть очевидными и видными
  • Откажитесь от сложных инструментов для мобильной версии

Пользователь уже знает, какую квартиру намерен приобрести. Интеллектуальный выбор позволит ему быстро задать параметры. Один из примеров нашего клиента.

Визуализируй и властвуй.

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

Как улучшить визуальный ряд?

  • Оформлять сайт в соответствии с сегментом, в котором работаете
  • Использовать интерактивные схемы и инфографику
  • Фотографии и планировки должны быть высокого качества
  • Используйте «порционную» подачу контента

Делаете премиум проект – делайте соответствующий сайт.

Не заставляйте пользователей искать детали.

Что ни делает дурак, все он делает…

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

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

А это ипотечный калькулятор для ГК А101. Пользователь сразу же получает предложения банков под настроенные им условия. Всплывающее окно с обратной связью предлагает пользователю получить консультацию ипотечного менеджера.

Показатели онлайн-продаж нашего клиента во время режима самоизоляции и в июне 2020 года.

Так как внедрять онлайн-продажи правильно?

  • Добавьте агрессивные уведомления
  • Разработайте подробную посадочную страницу
  • Добавьте дополнительные инструменты показа
  • Обеспечьте бесперебойный процесс бронирования

Делайте сложное проще.

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

Возможность быстрого сброса фильтра до предыдущего выбора.

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

Возможность восстановление поиска. Как правило, пользователь в течение 1-3 месяцев выбирает на сайте застройщика одни и те же варианты. Восстановление позволяет запоминать последние параметры и минимизировать временные затраты на поиск.

Всем нужны импульсы к действию.

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

Мотивационный триггер: сколько человек просматривают эту квартиру с вами.

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

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

Советы по мотивационным триггерам:

  • Предложите пользователю нужное в моменте
  • Смотивируйте, чтобы не потерять пользователя
  • Предложите альтернативные варианты

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

Добавочная ценность

Почти 85% всего времени пользователи проводят в разделе "Выбор квартир" и карточке объекта недвижимости. Рассказывайте о своей добавочной ценности прямо там.

Чтобы построить что-то новое, нужно снести что-то старое — такова цена прогресса.

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

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

И еще одно решение для нашего клиента ГК Ташир.

Черпайте вдохновение из других сфер и перенимайте их опыт. Идея сравнения характеристик продуктов пришла к нам от e-commerce.

Работайте с картой – показывайте важное.

На 2D планировках не так просто отобразить панорамное остекление или другие преимущества, поэтому помните: не показал – никто не узнал.

Показывайте важную информацию (например, расположение) до перехода на посадочную страницу.

Наш кейс отображения расположения в проектах Группа «Самолет».

Еще один пример с картой нашего клиента ГК Гранель.

Юзабилити — измеряемая величина, которая характеризуется количеством физических и умственных усилий, которые тратят пользователи на достижение своей цели. Как пример: из-за размеров БТИ пользователь постоянно ищет одну и ту же выдачу. Сгруппируйте типы квартиры – покажите только уникальные.

Как не быть «бумером»?

  • Подумайте как сделать то, к чему все привыкли по-другому
  • Всегда подвергайте устоявшееся сомнения
  • Ищите новые механики в других сферах отличных от недвижки
  • Просто пробуйте новое!

Анализ должен быть циничным.

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

Как проводить анализ?

  • Проводить полноценный опрос респондентов
  • Узнать детально свою аудиторию с помощью CJM
  • Сформировать список гипотез и начать тестировать
  • Анализируйте траектории сегментов пользователей, стройте графы и еще раз анализируйте
  • Спросите Ваших менеджеров по продажам :)

Непредвзятость процесса – залог успеха.

Они уже здесь… Новые форматы коммуникаций.

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

Команда «Чикен Карри» и ГК ПИК сняли совместный клип, посвящённый всем отменённым вечеринкам, и показали, как можно привнести в самоизоляцию ощущение свободы и радости.

Вот вы и узнали только часть наших сайтхаков для недвижки. Используйте рекомендации только в благих целях! Если хотите узнать больше инструментов, внедрить персонализацию или Predective UI, мы всегда на связи и готовы помогать вам ;)

Подписывайтесь на наш Telegram-канал. Собираем всю боль веб-дева.

{ "author_name": "idaproject", "author_type": "self", "tags": ["\u0441\u0430\u0439\u0442\u0445\u0430\u043a\u0438","\u043d\u0435\u0434\u0432\u0438\u0436\u0438\u043c\u043e\u0441\u0442\u044c","web"], "comments": 20, "likes": 33, "favorites": 63, "is_advertisement": false, "subsite_label": "marketing", "id": 146530, "is_wide": true, "is_ugc": true, "date": "Mon, 03 Aug 2020 12:37:51 +0300", "is_special": false }
0
20 комментариев
Популярные
По порядку
Написать комментарий...

Очень полезная статья!

3

Спасибо!) 

1

И все бумеры такие:
Что? Сайтхаки?

1

статья отличная, спасибо!

1

Спасибо большое!) 

0

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

1

Спасибо, мы делали а/б тест с различными карточками квартир - победили маленькие, так как количество просматриваемых уникальных предложений было в разы больше

Поздравляем с первым комментарием))

0

Спасибо. Извините, "за глаз". 🤝

0

Спасибо. Извините "за глаз". )

0

Все ок) 

0

Отличный материал 👍

1

спасибо) 

0

По солнцу отличная фишка, постоянно такой не хватает. Но еще времена года меняют положение солнца?

0

Мы учитываем это в алгоритме и на некоторых сайтах время года учитывается. Спасибо за отзыв

1

Вопрос о наболевшем - о скорости.  Прогнала  по PageSpeed Insights ваш
  p-aprel.ru, показывает нерадостные 21/55. Можете пояснить причину расхождения: рекомендаций и факта? 

0

Добрый день, в статье мы говорим о скорости через другие параметры - скорость запросов и их количество, общение backend с frontend. 

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

P.S. Вот вам пример от самих Google - посадочная страница Google Pixel 5

1

какие десятки внешних кодов? одна метрика отжирает половину от общего времени загрузки)))

0

Как человек который ищет квартиру:

1) Мне нужна информация о местоположении объекта. Это очень важная информация! Не надо меня заставлять делать на каждом жк 5 кликов чтобы понять что мне неудобно его местоположение. Разместите на одной карте все объекты. Не пишите что до метро 5 минут, т.к. эти 5 минут - это время доезда по пустой трассе на спортивном болиде.
2) уберите кнопки обратной связи которые занимают четверть экрана и мешают скролить и знакомиться с предложением. Отдельный котёл для недоразработчиков которые делают еще всплывашку "чем мы можем помочь" закрывая в итоге половину экрана. Для обратно связи у вас есть футер, хедер и раздел контактов!
3) "Добавьте агрессивные уведомления" - не надо! Задрали! Дайте нормально ознакомиться с информацией. НЕ МЕШАЙТЕ мне становится вашим (застройщика) клиентом! Это недвижимость и если меня агрессивно к чему-то подталкивают, значит есть какой-то подвох и есть риск что меня обманут. Как только я чувствую такую опасность - я уйду и не вернусь.
4) я интроверт и визуал. Не надо меня заставлять общаться с вами по телефону и пытаться запомнить полученную информацию. В чате тоже не надо, т.к. я отправлю ссылку на другое устройство или открою в другом браузере иине найду полученную информацию. Разместите на сайте всю важную информацию. Зачем мучить людей? ред.

0

Привет!) 
В целом Ваши мысли верны (карта например везде такая и есть) - и мы следуем той же политики - показать контент влияющий на решение потребителя на его пути) 

Но некоторые раздражающие Вас вещи доказывают свою эффективность раз за разом в большей массе( 
И это еще Вам менеджер не названивал) Спасибо за комментарий!  ред.

0

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

0
Читать все 20 комментариев
Как re-store обманул меня с предзаказом Apple Watch 7

Иногда, желание приобрести новинку в подарок чуть выше здравого смысла, вот и я 8 октября совершил предзаказ на Apple Watch 7 в re-store.

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

Всем привет! Расскажу о своём опыте применения методики «трёх целей» и как из этого родился простой и эффективный Telegram-бот.

Cloud CDN: что это такое, как устроено и кому нужно. Разбираем на примере бургеров

Cloud CDN — это сеть быстрой доставки статического контента в формате услуги облачного провайдера. Объяснить, как работает технология, проще всего на примере — сравнить Cloud CDN с популярным продуктом, который выглядит плюс-минус одинаково вне зависимости от того, заказали вы его в Москве, Питере или Нью-Йорке. Знакомьтесь: классический бургер.…

7 причин начать пользоваться Bright Data Proxy Manager:
Яндекс.Еда повышенная стоимость доставки и отказ возврата при неполной доставке

Сегодня заказал в в Яндекс.Еде из Макдоналдса:

Geforce Now. Очереди более 30 минут, лаги и тормоза на платном тарифе

GeForce Now Russia не выдерживает никакой критики как платный сервис. При стоимости 999р/месяц вы получаете очереди из таких же "счастливчиков", постоянные лаги видео и аудиопотоков и неадекватно высокую нагрузку десктопного приложения при запуске игры.

ПСБ запустил личный кабинет для предпринимателей. Там можно следить онлайн за каждым своим терминалом

Сервис предоставляется бесплатно.

Как OTUS стал платформой для самореализации. История преподавателя

Наш преподаватель, специалист по Data Science, решил поделиться своей историей преподавания. Он рассказал, как пришел в эту сферу, с какими трудностями столкнулся на пути к преподаванию и что ему помогает. А еще поделился советами, как поддерживать внимание студентов и сделать занятия полезными и увлекательными.

Строит магазины без окон, чтобы люди теряли счёт времени и думали о покупках: как IKEA заставляет тратить больше Статьи редакции

Ежегодные продажи компании достигают $50 млрд, большая часть которых приходится на незапланированные покупки посетителей, рассказал журналист The Hustle Трунг Фан.

Покупательница магазина Campaignasia
Как не попасть в карьерную ловушку тимлида: личный опыт

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

«За гранью ума»: сооснователь YC Пол Грэм о том, почему одного интеллекта недостаточно, чтобы создать что-то новое Статьи редакции

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

Пол Грэм Medium
null