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