Аудит юзабилити сайта ЖК Царицыно

Вводная информация

В данном отчете приведены детальные описания проблем, скриншоты сайта и дополнительные видео с демонстрацией выявленных недостатков.

• Перед просмотром дополнительных материалов их желательно скачивать на компьютер.
• Также по всем выявленным проблемам даны рекомендации по их устранению.
• Красным текстом и красными маркерами выделены обнаруженные ошибки и важная информация.

Навигация по сайту

Качественная навигация по сайту является основой для построения эффективного юзабилити.

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

Рассмотрим, насколько качественно проработана навигация в данный момент.

Используется разный верхний и нижний отступ для пунктов главного меню:

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

Пункты главного меню желательно размещать согласно их приоритетности и востребованности у пользователей.

По данным статистики для наиболее посещаемых страниц клики распределены следующим образом:

Главная страница:

Каталог квартир:

Выбор квартир по параметрам:

Как видно из приведенных скриншотов, наиболее приоритетными для пользователей являются разделы «Выбор квартир», «Об объекте» и «Ход строительства».

Рекомендуем разместить их первыми в главном меню.

Замечание верно и для очередности разделов меню в мобильной версии сайта.

В коде ссылок главного меню не заполнен title. Это отрицательно сказывается не только на юзабилити, но и на поисковой оптимизации сайта.

Это замечание верно для кода мобильного меню и остальных ссылок, размещенных на сайте.

Рекомендуем заполнить title для всех навигационных ссылок.

Часть ссылок сайта оформлены как обычный текст. Это вводит пользователя в заблуждение и затрудняет работу с сайтом, особенно – на мобильных устройствах и планшетах. Ниже приведены скриншоты таких элементов:

Рекомендуем явно обозначать ссылки с помощью подчеркивания либо соответствующих графических маркеров.

Часть ссылок не реагирует на наведение курсора. Это также негативно сказывается на юзабилити. Ниже показаны скриншоты таких элементов и видео:

https://yadi.sk/i/24FVi69Tx5q8V

https://yadi.sk/i/hNibkiX1x5r2f

https://yadi.sk/i/egGafO8kx5sUL

Поиск по сайту

В данный момент на сайте реализован только подбор объектов недвижимости по параметрам.

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

Рекомендуем запустить соответствующий модуль поиска по сайту и разместить форму поиска в верхней части страниц.

Главная страница

Далее рассмотрим юзабилити главной страницы сайта.

Не согласована величина отступов в блоке с логотипом и номером телефона в верхней части сайта.

Рекомендуем сделать одинаковыми верхние и нижние отступы блока телефона в соответствии с модульной сеткой сайта.

Практически все пространство главного экрана занимает фоновое изображение с 3D-визуализацией одного из корпусов. Используется всего одна статичная картинка, возможность просмотра других иллюстраций и фото отсутствует. Это снижает эффективность и привлекательность данного блока. Полный скриншот главного экрана показан по ссылке https://yadi.sk/i/nqYBPaTkx645o

Рекомендуем добавить возможность прокрутки изображений в данном блоке и добавить 5-7 высококачественных фотографий и 3D-визуализаций. Это позитивно скажется на первом впечатлении пользователя и вовлечет его в работу со страницами сайта.

Не совсем понятно, что обозначает второй логотип на странице:

Видны артефакты в отображении теней при прокрутке страницы. Это показано на видео по ссылке https://yadi.sk/i/1lkNnTiGx66ER

Рекомендуем обеспечить корректное отображение всех графических элементов сайта.

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

Рекомендуем сделать иконки и текст ссылками на соответствующие целевые страницы сайта.

На главной странице расположен блок с информацией об акциях и спецпредложениях. Но в его оформлении допущен ряд ошибок.

На фоновых изображениях видны искажения и артефакты.

Одновременно используется большое количество шрифтов. Из-за этого дизайн выглядит неаккуратно.

Рекомендуем одновременно использовать не более трех шрифтов.

Явно не обозначены ссылки. Клики по данным блокам практически отсутствуют:

Рекомендуем в заголовках акций использовать нижнее подчеркивание. Это увеличит количество переходов по ссылкам на страницы акций.

Непонятно, почему шрифт в третьем заголовке сделан меньшего размера, чем в двух первых. Также сместился текст описания акции.

Рекомендуем обеспечить корректный вывод заголовка и анонса акции независимо от количества текста.

Далее рассмотрим юзабилити блока «Выгодные предложения».

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

Рекомендуем сделать возможность сортировки во всех столбцах таблицы.

Также непонятно, по какому принципу выполнена сортировка по умолчанию (при загрузке страницы).

Рекомендуем явно обозначить, по какому столбцу отсортированы данные в таблице при загрузке страницы.

В ходе тестирования было выявлено, что фактически модуль сортировки не работает. Это показано на видео по ссылке https://yadi.sk/i/s0nzGcU1x6DEm

Рекомендуем обеспечить корректную работу сортировки таблиц на всех страницах сайта.

Темно-синие маркеры сортировки плохо видны на темном фоне. Это отрицательно сказывается на юзабилити.

Рекомендуем сделать маркеры белыми, как и текст рядом с ними.

Выбор квартир

http://c-n-n.ru/kvartiry/

В меню страница называется «Выбор квартир», а ее заголовок – «Каталог квартир».

Рекомендуем придерживаться одинаковых названий в разделах меню и заголовках страниц сайта.

Непонятно, что обозначает кнопка «Избранное». При ее нажатии открывается страница с сообщением об ошибке. Это показано на видео по ссылке https://yadi.sk/i/4OL2No0tx6HvH.

Кнопка в форме не реагирует на наведение курсора:

Рекомендуем изменять фоновый цвет при наведении курсора.

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

Рекомендуем по умолчанию выводить заголовок «Все квартиры».

Непонятно, что обозначает «С» в блоке выбора количества комнат в квартире.

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

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

В форме не указаны допустимые диапазоны этажности, стоимости и площади. Все это делает возможным ввод неверных данных и, как следствие, – отсутствие подходящих вариантов недвижимости. Это отрицательно сказывается на конверсии.

Например, минимальная цена квартиры в каталоге – 2 695 530 рублей. В поле можно ввести любую минимальную стоимость.

В полях этажности можно указать диапазон 20-24. Площадь 0-300. При этом никаких сообщений об ошибках не выводится. Видео можно увидеть по ссылке https://yadi.sk/i/zN7IGsg8x6NVq.

Рекомендуем осуществлять проверку правильности ввода прямо в момент заполнения формы и показывать соответствующие сообщения и подсказки.

Данные заголовки столбцов ведут себя как ссылки, хотя таковыми не являются. Это продемонстрировано на видео по ссылке https://yadi.sk/i/f2L9lbdYx6PWx

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

Отдельно стоит отметить, что в данный момент в таблице не выводится важный для пользователей параметр – количество комнат в квартире. Учитывая, что предлагаются квартиры с готовой планировкой, это отрицательно сказывается на юзабилити и конверсии.

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

Данный блок рекомендуем выровнять по центру страницы. Это придаст дизайну более завершенный вид.

Список ссылок внизу страницы ориентирован на поисковое продвижение, а не пользователей, т.к. содержит одинаковые вхождения ключевых слов:

Клики по ним практически отсутствуют:

Рекомендуем избегать подобных решений, т.к. они отрицательно влияют не только на юзабилити, но и могут быть расценены поисковыми системами как попытка накрутки показателей сайта.

Просмотр информации о квартире

Блок с просмотром информации имеет большую высоту. Его модно просмотреть только с помощью прокрутки контента. При этом наиболее важные для пользователя кнопки (ипотечный калькулятор, переход на страницу с подробной информацией, заказ звонка) расположены внизу и не видны без использования прокрутки. Это отрицательно сказывается на юзабилити и конверсии. Видео показано по ссылке https://yadi.sk/i/RGl3Fj8Yx77d3.

Рекомендуем пересмотреть компоновку и разместить наиболее важные с точки зрения элементы в верхней части экрана.

На странице просмотра секций (например, http://c-n-n.ru/housing/28-29/) есть горизонтальная прокрутка. Такое решение не является оптимальным с точки зрения юзабилити. Видео показано по ссылке https://yadi.sk/i/LTJu1mPyx787c.

Рекомендуем избегать использования горизонтальной прокрутки элементов сайта.

Коммерческие помещения

Для данной страницы верны все замечания, касающиеся формы подбора помещения по параметрам и вывода списка объектов недвижимости.

Об объекте

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

Аналогичная ситуация и на подстранице «Расположение» http://c-n-n.ru/about/placement/:

Подстраница «Преимущества»:

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

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

Акции

На данной странице присутствует информация всего о трех акциях. Ее дизайн (как и недоработки) практически полностью совпадает с дизайном соответствующего блока на главной странице.

На наведение курсора реагируют только изображения. Это отрицательно сказывается на юзабилити. Видео показано по ссылке https://yadi.sk/i/FvfSjobtx6ZhJ.

На странице детального просмотра акции (например, http://c-n-n.ru/action/osennee-obostrenee/) есть кнопка заказа звонка. Она выполнена в виде обычной картинки, содержит видимые искажения и не реагирует на наведение курсора.

Рекомендуем сверстать кнопку с помощью текста и соответствующего HTML кода.

Используется слишком большой нижний отступ в данном блоке:

Рекомендуем сделать нижний отступ таким же, как и верхний.

Ипотека

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

Числа с процентными ставками находятся на разном уровне и дизайн выглядит неаккуратно:

Рекомендуем выровнять все числа по одной линии.

В поле с индикацией срока кредита обрезается текст. Это показано на видео по ссылке https://yadi.sk/i/U8Uj5mq1x6jG5.

При переходе по подразделам раздела «Ипотека» неверно подсвечиваются разделы в главном меню. Активным обозначен первый пункт, а не «Ипотека». Это показано на видео по ссылке https://yadi.sk/i/14jPK4MVx6kmF.

Рекомендуем обеспечить корректную работу подсветки разделов главного меню при переходе по подстраницам сайта.

Ход строительства

На странице видны визуальные артефакты, которые исчезают при наведении курсора. Видео можно увидеть по ссылке https://yadi.sk/i/6vWLnKNMx6mZx.

Рекомендуем обеспечить корректное отображение элементов на данной странице.

Контакты

В данный момент номер контактного телефона виден только при загрузке страницы.

Если прокрутить контент данный блок не выводится и пользователю сложно найти номер на странице. Это продемонстрировано на видео по ссылке https://yadi.sk/i/Vl6XB99hx6G37.

Рекомендуем разместить контактный номер в плавающем блоке рядом с главным меню.

Используется разный формат написания контактного номера телефона.

Рекомендуем придерживаться единого общепринятого формата написания телефонного номера на всех страницах и элементах сайта.

На странице отсутствует привычная для большинства пользователей форма отправки сообщения или заявки. Это крайне отрицательно сказывается на юзабилити.

Рекомендуем разместить стандартную форму отправки сообщений на странице «Контакты».

Верхнюю часть страницы занимает карта. При этом более важный блок с номером телефона и email адресом находится ниже и не виден без использования прокрутки страницы. Полный скриншот страницы «Контакты» и карта скроллинга показана по ссылке https://yadi.sk/i/-3E2wB-ox6nr4.

Рекомендуем переместить телефон и email адрес в верхнюю часть страницы.

В данном блоке отсутствует номер телефона. Это отрицательно сказывается на конверсии.

Рекомендуем разместить номер телефона под адресом офиса.

Достаточно большое количество пользователей кликают на метку, но это действие ни к чему не приводит. Карта кликов:

Стоит отметить, что в данный момент неверно выбран масштаб карты. Большинство пользователей нажимают на кнопку уменьшения зума. Это подтверждается данными карты кликов.

Рекомендуем уменьшить масштаб вывода карты по умолчанию. Это поможет пользователю увидеть местоположение комплекса без дополнительных действий.

Отдельно стоит отметить, что на сайте в данный момент отсутствуют какие-либо возможности быстрой связи и консультации менеджера прямо во время просмотра сайта. Например, с помощью чата, звонка с сайта и т.д.

Также отсутствуют инструменты захвата клиента при выходе с сайта (с помощью соответствующих форм), его мотивации к звонку и т.д. Это отрицательно сказывается на коверсии

Рекомендуем рассмотреть возможность быстрой интеграции и активного использования комплексных решений на базе сервисов krible.com, callbackkiller.com или аналогичных. Это позволит кардинально увеличить количество обращений, звонков и заявок.

Заказать звонок

Непонятно, что обозначают звездочки рядом с заголовком формы:

Рекомендуем явно указать, что поля отмеченные звездочкой, являются обязательными для заполнения.

После попытки отправки поля подсвечиваются красным. Текстового сообщения об ошибке, к сожалению, нет.

Рекомендуем выводить текстовые сообщения с указанием ошибок в заполнении полей.

Верстка сайта

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

• https://yadi.sk/i/nKe8HmkQx796c
• https://yadi.sk/i/c95kqRsIx79YT
• https://yadi.sk/i/IE5m9lDbx7AGy
• https://yadi.sk/i/sWp3lRKUx7AzP

Рекомендуем обеспечить корректное отображение и масштабирование элементов интерфейса независимо от размеров экрана, браузера и типа устройства.

Готов ответить на все вопросы по результатам аудита в скайпе, email или по телефону.