Мы рассмотрели основные ошибки, которые встречаются на существующих сайтах застройщиков и агентств недвижимости. Приводим примеры этих ошибок и рассказываем, как делать правильно (очень много картинок).
Создать простой и удобный сайт — требование, которое всегда указывают заказчики в своих ТЗ. Все понимают, что сайт не должен выглядеть, как космический корабль, и пестрить, как вывеска казино. Но это в теории. На практике же на сайтах застройщиков мы видим кучу ошибок, которые мешают пользователям достигнуть цели.
1. Идентификация
1.1. Правило 5 секунд
1.2. Первый экран — 700 пикселей
2. Перегруженность и сложная структура
3. Оптимизация под разные устройства
3.1. Корректное отображение
3.2. Адаптация под мобильные
4. Некачественный контент
4.1.Тексты
4.2.Изображения, визуальный контент
5. Чаты, месседжеры, call-back
6. Сегментация пользователей
Что происходит, когда пользователь впервые попадает на сайт? Верно, пытается понять, где он и зачем он тут. Важно в первые секунды донести до пользователя информацию: о чем этот сайт, чем занимается компания, чем она может быть полезна. Представьте себе пользователя, который ищет определенный товар, и у которого открыто 10 вкладок разных сайтов в браузере. Если он в первые секунды не найдет ответ на свой вопрос, то, скорее всего, сразу покинет сайт и перейдет к следующей вкладке.
Не все ваши клиенты просматривают сайты с 27-дюймовых мониторов, на которых рисуют их дизайнеры. Одним из самых популярных разрешений экранов сегодня является 1366x768 пикселей. Поэтому максимальная высота первого экрана не должна превышать 700 пикселей. И в эти 700 пикселей должны помещаться самые важные конверсионные элементы:
Плохо
Плохо
Тайтл есть. Занимает 50% экрана. Но о чем он?
Плохо
Почему на фоне изображение людей в ресторане? Можно фото милых котят поставить — тоже не в тему, но всем нравится :)
Хорошо
На главном экране помещаются тайтл и форма поиска по квартирам.
Хорошо
«Торчащие» снизу изображения ЖК дополнительно подсказывают пользователю, что страницу можно скролить.
Хорошо
Меню, «Выбор квартиры», контакты — все важные элементы зафиксированы на экране.
Хорошо
Очень хороший пример инициализации, все конверсионные элементы на местах, нет лишнего шума.
Хорошо
Здесь на первый экран дополнительно к основным конверсионным элементам выведены преимущества компании — элемент, вызывающий доверие пользователей.
Из правила «5 секунд» также следует: информация на странице должна быть представлена просто, структурированно и интуитивно понятно для пользователя. Зайдя на сайт, пользователь должен легко понимать, куда ему смотреть, на что обратить внимание сначала, на что — потом, что важнее, где искать то, зачем он пришел.
Плохо
Есть все конверсионные элементы на первом экране, но с порядком внимания явные проблемы — пользователю тяжело сориентироваться на странице.
Плохо
Обилие разных шрифтов и отсутствие единства дизайна также мешает пользователю.
Плохо
На что пользователь должен обратить внимание? Если учесть, что внимание посетителей сайтов распределяется буквой «Г», то, получается, здесь самое главное — это новости и описание компании. Не самое разумное использование места на экране.
Хорошо
На экране достаточно много информации, но она структурирована таким образом, что пользователю легко управлять вниманием.
Хорошо
На маленьких экранах сайт выгляит отлично, но, к сожалению, есть проблемы с отображением на более крупных мониторах — форма поиска не помещается в первом экране.
Тут нужно учесть два простых, но важных момента:
Сайт должен корректно отображаться на всех устройствах. Следите за тем, чтобы на разных экранах не «ломалась» верстка, не появлялось лишних скроллов, и все элементы работали как нужно.
Сайтом должно быть удобно пользоваться с любого устройства. Позаботьтесь о тех, кто просматривает сайт с мобильных. Адаптация сайта под мобильные устройства — это не только удобно для пользователей, но и полезно для CEO.
Отсутствие адаптивной версии ухудшает скорость загрузки сайта на мобильных, и как следствие, растет доля потерянных посетителей — пользователи уходят с сайта, не дожидаясь полной загрузки. Проверить скорость загрузки можно, например, тут https://testmysite.withgoogle.com/intl/ru-ru или тут https://developers.google.com/speed/pagespeed/insights/
Плохо
Нет мобильной версии.
| РосСтройИнвест | ЛСР | Главстрой |
 |
 |
 |
|
|
|
Плохо
Есть мобильная версия, но к ней должны применяться все те же правила, что и к десктопной версии: инициализация, конверсионный элементы на первом экране.
| АРСЕНАЛ недвижимость | ПИК | Эталон ЛенСпецСМУ |
 |
 |
 |
| Жилая недвижмость от Петра 1? Оставить отзыв Петру 1? Посмотреть расположение Петра 1? | Проблемы с идентификацией. Чем занимается компания? Фотографированием с высоты? | Такие же проблемы, как и в предыдущем примере. |
| LEGENDA | RBI | |
 |
 |
|
| Здесь почти все хорошо, кроме перерывающих друг друга кнопок связи, который занимают много драгоценного места. Просматривать информацию крайне не удобно. | Снова вопрос о грамотном использовании места на экране: зачем два номера телефона? |
Хорошо
| Петербургская недвижимость | YIT | Urban Group |
 |
 |
 |
| Полис Групп | ||
 |
Все понимают, что информация, размещенная на сайте компании (контент, текст, картинки), должна быть тщательно подготовлена. Казалось бы, все просто и прозрачно, но нет.
Уже давно никто не читает длинные полотна текста на сайтах (и даже не пытайтесь нас переубедить). Неинформативные абстрактные тексты не нужны — они только тратят впустую драгоценное место на сайте. Пользователям, которые заходят на сайт впервые, не интересна философия вашей компании и ваши партнеры. Им нужны ваши квартиры, цены на них и скидки.
Плохо
Практически весь первый экран занимает абстрактный текст. Вы серьезно?
Плохо
Много текста на главной странице — это плохо, но «вкусные» фото в качестве фона задают правильное настроение — очень хорошо.
Плохо
Зачем слева этот текст, который выглядит как «мелкий шрифт» в договоре?
Клиентам важен визуальный ряд. Эмоции пользователя влияют на процесс принятия решения о покупке квартиры не меньше, чем характеристики жилого комплекса. Поэтому важно позаботиться о качественных фото, 3D-моделях домов и планировках. Правильное настроение — цвета, инфраструктура и детали окружения — все это играет роль в принятии решения. Не используйте стоковые и избитые изображения — это не вызывает доверия пользователей.
Плохо
Еща раз: почему на сайте застройщика люди едят в ректоране? У них праздник по поводу покупки квартиры? Но это очень сложная ассоциация.
Хорошо
Чаты и мессенджеры — это удобные инструменты работы с потенциальными клиентами, и ими (инструментами) нужно пользоваться. И пусть горе-аналитики в один голос кричат что «попапы на сайтах раздражают пользователей», на самом деле это не так. Возможно, попапы раздражают самих аналитиков. По статистике call-back Ньютон до 30% всех звонков с сайта заказываются через попап, который как раз появляется автоматически (типа такого «Вы у нас на сайте уже 2 минуты. Давайте поможем вам?»). Однако есть несколько правил, которых нужно придерживаться, для того чтобы не раздражать пользователей и повысить конверсию сайта:
Плохо
Интересно, какая статистика по кликам на разные кнопки связи :)
Плохо
А у них какая статистика?
Плохо
Разный стиль кнопок создает «грязь» на сайте
Плохо
Окно обратной связи: слишком много элементов и текста.
Плохо
Плохо
Хорошо
Все четко и по делу, все типы связи в одном окне, понятный дизайн, ничего лишнего.
Хорошо
Уверены, такая кнопка обратной связи не будет раздражать пользователей. При этом любой потенциальный клиент может за 30 секунд связаться с менеджером.
Если на ваш сайт заходят разные группы пользователей в поисках разной информации, то не усложняйте им жизнь — сразу направляйте пользователя в нужный ему раздел. Например, на сайт застройщика заходят три группы пользователей:
Хорошо
Пока писали этот материал, поняли, что одной статьей тут не ограничиться. Так что ждите новые материалы про юзабилити (рабочее название цикла статей «пришиваем руки на место» :)). Расскажем про основные ошибки на сайтах жилых комплексов, разберем «форму поиска», «карточку жилого комплекса» и другие функциональные страницы и модули сайтов.
Бонус для дочитавших до конца — бесплатный ux-аудит вашего сайта. Оставляйте заявки на info@art.su.