Юзабилити-аудит адаптивности сайта застройщиков

Большинство найденных проблем объясняются тем, что версия сайта для мобильных устройств все еще находится в процессе доработки. Тем не менее, подобные проблемы можно встретить на многих сайтах схожего типа — с большим количеством подразделов и фильтров. Именно поэтому мы решили поделиться с вами короткой версией аудита и познакомить вас с теми препятствиями, которые могут встать на пути пользователя и испортить впечатление от взаимодействия с сайтом.

Почему так важно наличие версии для мобильных устройств

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

Есть два варианта сделать сайт удобным для пользователей планшетов и смартфонов — реализация адаптивного дизайна или создание отдельной мобильной версии. Сайт «ВКБ-новостройки» использует первый подход.

Оценку качества мы проводили как с точки зрения выполнения UI-дизайна (дизайна пользовательского интерфейса), так и UX-дизайна (дизайна пользовательского опыта), в том числе в формате сравнительного анализа с удачными версиями прямых конкурентов и лидеров рынка недвижимости, таких как: develug.ru, cian.ru, gik23.ru, homesoverseas.ru, domofond.ru, sob.ru.

В рассылке мы делимся сокращенным аудитом сайта, в котором основное внимание уделено проблемам отображения сайта на смартфонах.

Что нам дали данные веб-аналитики

По данным Яндекс.Метрики за последний квартал доля посетителей, взаимодействующих с сайтом «ВКБ-Новостройки» с помощью мобильных устройств, составила треть всей аудитории — 34 % (26,6% приходится на смартфоны и 7,7% —- на планшеты).

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

Большинство пользователей используют мобильные устройства Samsung (10,02% от всех посетителей сайта) и Apple (9,29%). При этом для планшетов поведенческие характеристики примерно одинаковы для всех марок, а для смартфонов — хуже для устройств марки Apple.

Обнаружив высокий показатель отказов на устройствах Apple, мы провели экспресс-анализ адаптивности сайта, используя смартфон Apple iPhone 6s plus. В анализе мы также учли то, что по данным «Вебвизора» Яндекс.Метрики посетители со смартфонами просматривают сайт в портретной ориентации (используют устройство вертикально).

Проблемы со скоростью загрузки

Мы проверили скорость загрузки сайта «ВКБ-Новостройки» на мобильных устройствах на примере главной страницы с помощью сервиса Google PageSpeed Insights. Он показал низкую скорость загрузки.

Рекомендации

Провести на сайте все необходимые работы по оптимизации скорости загрузки до рекомендуемого показателя от 80 и выше. Рекомендации сервиса Google PageSpeed Insights: удалить код JavaScript и CSS, блокирующий отображение верхней части страницы, сократить JavaScript, CSS, HTML, оптимизировать размер изображений, использовать кеш браузера (указывать в заголовках HTTP дату или срок действия статических ресурсов).

Анализ отображения сайта на смартфонах

По словам представителя объединения застройщиков «ВКБ-Новостройки», идеальный сценарий поведения посетителей сайта выглядит так: пользователь подбирает недвижимость по необходимым ему характеристикам и обращается в компанию с помощью любого из каналов коммуникации (например, отправляет заявку на консультацию менеджера или звонит по телефону). Основная масса целевой аудитории компании — это физические лица, потенциальные покупатели квартир.

Быстрая ссылка «наверх»

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

Рекомендации

Рекомендуем реализовать быструю ссылку «наверх», которая будет отображаться поверх всех страниц сайта по мере передвижения по экрану вниз. Тап (нажатие) по этой ссылке будет в одно касание возвращать пользователей в начало страницы. Альтернативный вариант: ссылку «наверх» можно отображать только внизу страницы.

Отображение контента

1. При отображении текстовой информации на сайте часто используется выравнивание текста по центру. Кроме того, часто используются только заглавные (прописные) буквы. Эти моменты значительно затрудняют прочтение и восприятие информации.
2. Ссылка-ярлык сервиса заказа обратного звонка двигается вместе с прокруткой страницы и загораживает часть информации. На страницах, где необходимо использовать фильтры или другие интерактивные возможности, пользователь может случайно попасть пальцем на ссылку и открыть форму для заказа обратного звонка.

Рекомендации

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

Закрепить ссылку на форму обратного звонка внизу экрана, там, где она не будет мешать взаимодействию с сайтом.

Поиск квартиры по конкретным параметрам

Чтобы оценить удобство и функциональность сайта на смартфоне, попытаемся подобрать квартиру по определенным характеристикам. Рассмотрим ситуацию, когда потенциальный покупатель ищет двух-трехкомнатную квартиру в Краснодаре, не дороже 6 млн. рублей, не в ипотеку. Дом должен быть уже сдан в эксплуатацию. Общая площадь квартиры должна составлять не менее 60 квадратных метров. Этаж не так важен. Санузел — строго раздельный, окна выходят во двор. Остановки общественного транспорта в пешей доступности (5 минут пешком), развитая инфраструктура (супермаркеты, мед. учреждения и пр.). Желательно наличие неподалеку «зеленой зоны» — парка или лесопарка.

Получить доступ к списку с предложениями квартир можно двумя путями — сразу перейти по ссылке «Краснодар» или воспользоваться фильтром подбора объектов на главной странице. Мы рассмотрим оба варианта.

Фильтр подбора объектов на главной странице

Попробовав найти квартиру, соответствующую выбранному сценарию, мы обнаружили ряд проблем.

1. Нет возможности выбрать одновременно несколько вариантов в поле «количество комнат».
2. Неочевидно, каким образом допустимо вводить данные в поле «площадь»: конкретное число, обозначающее желаемую площадь, или значения в текстовом формате, например, «от 60» или «60-200». Также неясно, нужно ли указывать единицу измерения — «кв.м.» или «м²».
3. В поле «дата ввода в эксплуатацию» требуется вводить слишком конкретные данные. Между тем, покупателю достаточно информации, что дом уже сдан. Чтобы отсеять варианты в еще строящихся домах, пользователь вынужден придумать, как ему задать значения, чтобы на странице с результатами поиска отображались квартиры только в сданных в эксплуатацию домах.
4. Также неочевидно, в каком формате вводить данные в поле «этаж», например, строго «1», «1-5», «до 10» и т.п.
5. После выбора всех параметров в расширенном фильтре нужно нажать на кнопку «найти квартиру», которая отображается выше, под «кратким» поиском. Под «полным» поиском расположена достаточно яркая кнопка заявки на быструю консультацию, поэтому некоторые пользователи могут нажать на нее по ошибке (перепутать с кнопкой действия для фильтра подбора объектов).

Рекомендации

1. Реализовать возможность выбора нескольких вариантов в поле «количество комнат».
2. Очевиднее указать, в каком виде или формате необходимо вводить данные в поля «площадь» и «этаж».
3. Обобщить дату сдачи дома в эксплуатацию до месяца и года (альтернативный вариант — до года).
4. Отображать кнопку «подобрать квартиру» внизу всех параметров при открытии расширенного фильтра.

Страница «Новостройки Краснодара»

На странице показывается восемь блоков с описаниями ЖК (микрорайонов) в Краснодаре. В них приводится только название и адрес, не указаны ни застройщик, ни уровень цен на квартиры, ни количество доступных квартир и количество комнат в них. Адрес объекта набран простым текстом и некликабелен — его нельзя открыть на карте. Для того чтобы узнать преимущества одного ЖК перед другими, пользователю придется переходить в каждый из них отдельно. Однако наверху страницы есть фильтр, с помощью которого можно подобрать варианты по нужным характеристикам. Воспользовавшись им, мы обнаружили, что возможности открыть «расширенный поиск» нет, а в поле «количество комнат» можно выбрать только один вариант.

Рекомендации

1. Добавить больше информации к описанию каждого из микрорайонов (ЖК): срок сдачи, сколько комнат в квартирах, уровень цен и т.п.
2. Реализовать фильтр для подбора квартир в том же виде, что и на других страницах: отображать все параметры или давать ссылку на открытие полного списка параметров.

Страница результатов поиска «Квартиры в новостройках Краснодара»

Воспользовавшись фильтром как на главной странице, так и на странице «Новостройки в Краснодаре» мы попадаем на страницу результатов поиска. На ней указывается, сколько всего квартир найдено по заданным параметрам, и выводятся первые 10 вариантов. Результаты можно дополнительно фильтровать и сортировать. Рекомендуем сделать страницу с результатами поиска квартир по параметрам более информативной и добавить к каждому из вариантов следующие данные:

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

Фильтр подбора квартир

1. В фильтре подбора квартир на странице отображается поле «тип», в котором предлагается выбрать квартиру или цоколь. Пользователям может быть неочевидно, что выбор варианта «цоколь» в данном случае означает переключение на поиск коммерческой недвижимости.
2. В фильтре можно выбрать несколько вариантов в поле «количество комнат». Однако после выбора в поле появляется пометка «Объектов: 2». Это сервисное сообщение может быть непонятно пользователям.
3. По-прежнему нельзя выбрать несколько вариантов в поле «этаж». Выбор с помощью ползунков неэффективен: сложно попасть по ним пальцами и установить нужный диапазон.
4. То же самое и с полем «площадь»: из-за небольшого размера ползунки неудобно двигать на смартфоне.
5. Название поля «проект» может быть непонятно потенциальным покупателям.

Рекомендации

1. Отказаться от поля «тип» в фильтре поиска жилых квартир. Для поиска и подбора коммерческой недвижимости на сайте реализован отдельный раздел с фильтром.
   Альтернативный вариант: сделать выбор типа объектов более очевидным и переименовать параметр «цоколь» в «комм. недвижимость».
2. В поле «количество комнат» при выборе более одного варианта указывать эти варианты через запятую (например, «2,3»).
3. Выбор параметров в поле «этаж» реализовать аналогично выбору вариантов в поле «количество комнат».
4. В поле «площадь» реализовать ввод данных аналогично вводу данных в поле «стоимость». А именно — свободным вводом в отдельные поля «от» и «до».

Сортировка объектов на странице

1. Помимо имеющихся вариантов (по количеству комнат и стоимости) пользователям может не хватать других параметров сортировки, например, по площади и этажу.
2. По умолчанию при открытии страницы «Квартиры в новостройках Краснодара» объекты на странице отсортированы по количеству комнат по возрастанию. Если задать параметры подбора в фильтре, а затем выбрать другой вариант сортировки (например, по убыванию стоимости) и изменить параметры в фильтре, то заданная ранее сортировка сбросится и снова станет «по умолчанию». Если пользователь этого не заметит, то будет ошибочно считать, что его настройки сохранены.

Рекомендации

1. Добавить в список больше параметров: по площади, этажу и т.п.
2. Сохранять параметры сортировки при изменении параметров в фильтре подбора объектов.

Общие выводы

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

Рекомендуем читателям, работающим с сайтами похожего типа или тематики, проверить отображение ресурсов на мобильных устройствах. И обратить особое внимание на следующие моменты:

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

Если вы хотите получить экспертную оценку юзабилити вашего сайта, присылайте заявки на адрес editor@ashmanov.com. В следующих выпусках мы познакомим читателей с другими методами анализа сайтов. Среди оставленных заявок будут выбраны наиболее показательные проекты.

19.02.2017