Создать простой и удобный сайт — требование, которое всегда указывают заказчики в своих ТЗ. Все понимают, что сайт не должен выглядеть, как космический корабль, и пестрить, как вывеска казино. Но это в теории. На практике же на сайтах застройщиков мы видим кучу ошибок, которые мешают пользователям достигнуть цели.
-
В статье мы опустим моменты с SEO, ошибками верстки, имиджем компании и прочими моментами, которые приводят пользователя на сайт и влияют на его поведение.
-
Мы расскажем, как сделать «удобно» — как проектировать качественный пользовательский опыт, когда пользователь заходит на сайт, и ему все становится ясно и понятно. В общем, поговорим про UX.
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 пикселей должны помещаться самые важные конверсионные элементы:
-
Тайтл. Как правило, это тот самый элемент идентификации, о котором мы написали выше.
-
Кнопка «Оформить заявку», «Подобрать квартиру», «Узнать подробнее» и т.д.
ПИК
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 1](/u/posts_photos/audit_1/1-pik.jpg)
Плохо
-
Не понятно, что хотят от пользователя — одно изображение занимает весь экран, нет идентифицирующей информации о направлении деятельности компании. Что предлагает компания: освещение? услуги ЖКХ? создание 3D моделей? «ПИК» — известный бренд, но много людей совершают покупку впервые, и им бренд может быть не знаком.
-
Форма поиска не видна на первом экране
-
Неочевидно, что можно скролить страницу
Ленстройтрест
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 2](/u/posts_photos/audit_1/1-lenstroytrest.jpg)
Плохо
Тайтл есть. Занимает 50% экрана. Но о чем он?
BONAVA
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 3](/u/posts_photos/audit_1/1-bonava.jpg)
Плохо
Почему на фоне изображение людей в ресторане? Можно фото милых котят поставить — тоже не в тему, но всем нравится :)
Северный город
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 4](/u/posts_photos/audit_1/1sevgorod.jpg)
Хорошо
На главном экране помещаются тайтл и форма поиска по квартирам.
Полис Групп
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 5](/u/posts_photos/audit_1/1polis2.jpg)
Хорошо
«Торчащие» снизу изображения ЖК дополнительно подсказывают пользователю, что страницу можно скролить.
LEGENDA
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 6](/u/posts_photos/audit_1/1legenda.jpg)
Хорошо
Меню, «Выбор квартиры», контакты — все важные элементы зафиксированы на экране.
Тренд
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 7](/u/posts_photos/audit_1/1trend.jpg)
Хорошо
Очень хороший пример инициализации, все конверсионные элементы на местах, нет лишнего шума.
SetlCity
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 8](/u/posts_photos/audit_1/1setl.jpg)
Хорошо
Здесь на первый экран дополнительно к основным конверсионным элементам выведены преимущества компании — элемент, вызывающий доверие пользователей.
Из правила «5 секунд» также следует: информация на странице должна быть представлена просто, структурированно и интуитивно понятно для пользователя. Зайдя на сайт, пользователь должен легко понимать, куда ему смотреть, на что обратить внимание сначала, на что — потом, что важнее, где искать то, зачем он пришел.
-
Не нужно нагромождений и усложнений.
-
Не нужно «вензелей», «золота» и «дизайна ради дизайна».
-
Избегайте дублирования информации.
ЛСР
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 9](/u/posts_photos/audit_1/2-lsr.jpg)
Плохо
Есть все конверсионные элементы на первом экране, но с порядком внимания явные проблемы — пользователю тяжело сориентироваться на странице.
RBI
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 10](/u/posts_photos/audit_1/2-rbi.jpg)
Плохо
Обилие разных шрифтов и отсутствие единства дизайна также мешает пользователю.
Донстрой
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 11](/u/posts_photos/audit_1/2-donstroy.jpg)
Плохо
На что пользователь должен обратить внимание? Если учесть, что внимание посетителей сайтов распределяется буквой «Г», то, получается, здесь самое главное — это новости и описание компании. Не самое разумное использование места на экране.
Петербургская недвижимость
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 12](/u/posts_photos/audit_1/2spbrealty.jpg)
Хорошо
На экране достаточно много информации, но она структурирована таким образом, что пользователю легко управлять вниманием.
Эталон ЛенСпецСМУ
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 13](/u/posts_photos/audit_1/2etalon.jpg)
Хорошо
На маленьких экранах сайт выгляит отлично, но, к сожалению, есть проблемы с отображением на более крупных мониторах — форма поиска не помещается в первом экране.
Тут нужно учесть два простых, но важных момента:
Сайт должен корректно отображаться на всех устройствах. Следите за тем, чтобы на разных экранах не «ломалась» верстка, не появлялось лишних скроллов, и все элементы работали как нужно.
Сайтом должно быть удобно пользоваться с любого устройства. Позаботьтесь о тех, кто просматривает сайт с мобильных. Адаптация сайта под мобильные устройства — это не только удобно для пользователей, но и полезно для CEO.
Отсутствие адаптивной версии ухудшает скорость загрузки сайта на мобильных, и как следствие, растет доля потерянных посетителей — пользователи уходят с сайта, не дожидаясь полной загрузки. Проверить скорость загрузки можно, например, тут https://testmysite.withgoogle.com/intl/ru-ru или тут https://developers.google.com/speed/pagespeed/insights/
Плохо
Нет мобильной версии.
Плохо
Есть мобильная версия, но к ней должны применяться все те же правила, что и к десктопной версии: инициализация, конверсионный элементы на первом экране.
АРСЕНАЛ недвижимость |
ПИК |
Эталон ЛенСпецСМУ |
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 17](/u/posts_photos/audit_1/3-arsenal.PNG) |
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 18](/u/posts_photos/audit_1/3-pik.PNG) |
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 19](/u/posts_photos/audit_1/3-lenspecsmu.PNG) |
Жилая недвижмость от Петра 1? Оставить отзыв Петру 1? Посмотреть расположение Петра 1? |
Проблемы с идентификацией. Чем занимается компания? Фотографированием с высоты? |
Такие же проблемы, как и в предыдущем примере. |
|
|
|
LEGENDA |
RBI |
|
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 20](/u/posts_photos/audit_1/3-legenda.JPG) |
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 21](/u/posts_photos/audit_1/3-rbi.PNG) |
|
Здесь почти все хорошо, кроме перерывающих друг друга кнопок связи, который занимают много драгоценного места. Просматривать информацию крайне не удобно. |
Снова вопрос о грамотном использовании места на экране: зачем два номера телефона? |
|
Хорошо
Все понимают, что информация, размещенная на сайте компании (контент, текст, картинки), должна быть тщательно подготовлена. Казалось бы, все просто и прозрачно, но нет.
Уже давно никто не читает длинные полотна текста на сайтах (и даже не пытайтесь нас переубедить). Неинформативные абстрактные тексты не нужны — они только тратят впустую драгоценное место на сайте. Пользователям, которые заходят на сайт впервые, не интересна философия вашей компании и ваши партнеры. Им нужны ваши квартиры, цены на них и скидки.
Urban Group
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 26](/u/posts_photos/audit_1/4-urban.jpg)
Плохо
Практически весь первый экран занимает абстрактный текст. Вы серьезно?
HONKA
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 27](/u/posts_photos/audit_1/4-honka.jpg)
Плохо
Много текста на главной странице — это плохо, но «вкусные» фото в качестве фона задают правильное настроение — очень хорошо.
Донстрой
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 28](/u/posts_photos/audit_1/4-donstroy.jpg)
Плохо
Зачем слева этот текст, который выглядит как «мелкий шрифт» в договоре?
Клиентам важен визуальный ряд. Эмоции пользователя влияют на процесс принятия решения о покупке квартиры не меньше, чем характеристики жилого комплекса. Поэтому важно позаботиться о качественных фото, 3D-моделях домов и планировках. Правильное настроение — цвета, инфраструктура и детали окружения — все это играет роль в принятии решения. Не используйте стоковые и избитые изображения — это не вызывает доверия пользователей.
BONAVA
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 29](/u/posts_photos/audit_1/4-bonava.jpg)
Плохо
Еща раз: почему на сайте застройщика люди едят в ректоране? У них праздник по поводу покупки квартиры? Но это очень сложная ассоциация.
Эталон ЛенСпецСМУ
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 30](/u/posts_photos/audit_1/4etalon.jpg)
Хорошо
Чаты и мессенджеры — это удобные инструменты работы с потенциальными клиентами, и ими (инструментами) нужно пользоваться. И пусть горе-аналитики в один голос кричат что «попапы на сайтах раздражают пользователей», на самом деле это не так. Возможно, попапы раздражают самих аналитиков. По статистике call-back Ньютон до 30% всех звонков с сайта заказываются через попап, который как раз появляется автоматически (типа такого «Вы у нас на сайте уже 2 минуты. Давайте поможем вам?»). Однако есть несколько правил, которых нужно придерживаться, для того чтобы не раздражать пользователей и повысить конверсию сайта:
-
Обратите внимание на дизайн всплывающих окон. Он не должен быть перегружен.
-
Если пользователь уже закрыл попап один раз, то не показывайте ему его повторно.
-
На сайте не должно быть более одной кнопки «Обратной связи». Даже если вы используете разные продукты, все они отлично интегрируются друг в друга.
-
Круто (но не обязательно), если кнопка обратной связи будет выполнена в стиле сайта. Мы в Ньютоне так умеем.
РосСтройИнвест
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 31](/u/posts_photos/audit_1/5-rosstroy.jpg)
Плохо
Интересно, какая статистика по кликам на разные кнопки связи :)
Ленстройтрест
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 32](/u/posts_photos/audit_1/5-lenstroytrest.jpg)
Плохо
А у них какая статистика?
KVS
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 33](/u/posts_photos/audit_1/5-kvs.jpg)
Плохо
Разный стиль кнопок создает «грязь» на сайте
KVS
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 34](/u/posts_photos/audit_1/5-kvs2.jpg)
Плохо
Окно обратной связи: слишком много элементов и текста.
Urban Group
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 35](/u/posts_photos/audit_1/5-urban.jpg)
Плохо
Самолет Девелопмент
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 36](/u/posts_photos/audit_1/5-samolet.jpg)
Плохо
SetlCity
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 37](/u/posts_photos/audit_1/5setl.jpg)
Хорошо
Все четко и по делу, все типы связи в одном окне, понятный дизайн, ничего лишнего.
Эталон ЛенСпецСМУ
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 38](/u/posts_photos/audit_1/5etalon.jpg)
Хорошо
Уверены, такая кнопка обратной связи не будет раздражать пользователей. При этом любой потенциальный клиент может за 30 секунд связаться с менеджером.
Если на ваш сайт заходят разные группы пользователей в поисках разной информации, то не усложняйте им жизнь — сразу направляйте пользователя в нужный ему раздел. Например, на сайт застройщика заходят три группы пользователей:
-
Дольщики. Хотят узнать, когда им выдадут ключи, и они смогут заселиться в квартиру.
-
Покупатели. Их интересует стоимость квартир и скидки, возможно, условия покупки или ипотеки.
-
Подрядчики. Хотят получить информацию о проводимых тендерах.
SetlCity
![Аудит сайтов застройщиков и агентств недвижимости. Основные ошибки - 39](/u/posts_photos/audit_1/6setl.jpg)
Хорошо
Пока писали этот материал, поняли, что одной статьей тут не ограничиться. Так что ждите новые материалы про юзабилити (рабочее название цикла статей «пришиваем руки на место» :)). Расскажем про основные ошибки на сайтах жилых комплексов, разберем «форму поиска», «карточку жилого комплекса» и другие функциональные страницы и модули сайтов.
Бонус для дочитавших до конца — бесплатный ux-аудит вашего сайта. Оставляйте заявки на info@art.su.