Сайтхаки для недвижки. Как не быть «бумерами» в 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-канал. Собираем всю боль веб-дева.
Очень полезная статья!
Спасибо!)
И все бумеры такие:
Что? Сайтхаки?
статья отличная, спасибо!
Спасибо большое!)
Круто, но вы удивитесь конверсии, если увеличите размер карточки в сетке до нормального состояния. Всегда, когда я вижу милипусенькие карточки с планировками, мне хочется плюнуть разработчикам в глаз.
Спасибо, мы делали а/б тест с различными карточками квартир - победили маленькие, так как количество просматриваемых уникальных предложений было в разы больше
Поздравляем с первым комментарием))