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

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

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

Перед просмотром дополнительных материалов их желательно скачивать на компьютер.

Также по всем выявленным проблемам даны рекомендации по их устранению.

Красным текстом и красными маркерами выделены обнаруженные ошибки и важная информация.

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

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

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

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

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

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

В пунктах главного меню никак не обозначено наличие выпадающих подменю. Это отрицательно сказывается на юзабилити. Видео продемонстрировано по ссылке https://yadi.sk/i/w-fy0JX03EtiaN.

Также никак не обозначено наличие выпадающего меню третьего уровня в подразделах каталога. Видео показано по ссылке https://yadi.sk/i/3tGgB3Tq3EtjpH

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

На подстраницах сайта выпадающее меню в разделе «Каталог» отсутствует. Видео продемонстрировано по ссылке https://yadi.sk/i/PgPprkPc3Etkdc.

В главном меню не выделяется текущий раздел сайта. Невозможно понять, где находится пользователь в конкретный момент времени. Видео показано по ссылке https://yadi.sk/i/IbL0P6MT3EwgHH.

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

Аналогичная проблема наблюдается и при переходе по ссылкам нижнего меню:

На странице каталога есть боковое меню. Разделы без подменю и с ними оформлены одинаково.

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

На сайте есть вспомогательная навигация по типу «хлебные крошки». Но в ее дизайне допущены ошибки.

Последний пункт должен быть текстом, все остальные – ссылками. В данный момент ссылки и текст оформлены одинаково.

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

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

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

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

Также не реагируют на наведение курсора ссылки в блоке «Наши основные предложения»:

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

На подстраницах ссылки в блоке «Основные предложения» подсвечиваются белым цветом и не видны на светлом фоне:

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

Компоновка страниц сайта

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

Они отличаются:

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

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

Кроме этого существенно отличается и дизайн некоторых типовых разделов сайта.

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

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

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

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

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

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

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

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

На видео https://yadi.sk/i/9w3pwK613EzZEc показан процесс поиска по некоторым запросам, которые есть на сайте, но не выводятся в результатах.

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

Непонятно, по какому принципу отсортированы результаты поиска по умолчанию (цене, дате добавления, названию, коду проекта или релевантности). По ссылке https://yadi.sk/i/O7U5luWN3EzaQR показан полный скриншот страницы поиска по запросу «каркасный дом».

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

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

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

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

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

Не подсвечивается текущий вариант сортировки результатов поиска. Видео показано по ссылке https://yadi.sk/i/h08Pe__-3Ezc7h.

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

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

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

В верхней части расположен блок с баннерами, который занимает практически весь первый экран страницы.

Но, согласно данным карты кликов, переходы по баннерам практически отсутствуют.

При нажатии на кнопку «Связаться с менеджером» открывается страница с результатами поиска, что не соответствует ожиданиям пользователя. Видео показано по ссылке https://yadi.sk/i/LgZbNnBk3F9B4r

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

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

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

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

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

Для большинства промежуточных значений дома в каталоге отсутствуют и пользователь получает пустую страницу с результатами поиска. Видео показано по ссылке https://yadi.sk/i/E7nq25gm3F9FBT.

Параметры фильтра не связаны между собой. В результате, например, возможен выбор дома площадью 21 квадратный метр, с 20-тью комнатами и 46-тью санузлами. Это противоречит логике и не соответствует ни одному из домов, представленных в каталоге:

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

В выпадающем списке не помещается текст:

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

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

Кроме этого, набор полей фильтра не привязан к конкретному типу проектов. В результате, в форме подбора бани выводятся поля «Терасса» и «Гараж», что отрицательно сказывается на юзабилити. Видео показано по ссылке https://yadi.sk/d/QKHbYVDg3F9Kew

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

При нажатии на фото дома открывается блок с информацией об объекте. При этом название некоторых домов обрезано:

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

Данные ссылки не реагируют на наведение курсора:

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

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

Квадратные метры должны быть обозначены в виде М²:

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

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

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

Каталог проектов

Допущена ошибка в тексте:

Непонятно, что обозначает заголовок «Наши»:

Дизайн данного блока разваливается:

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

Допущена ошибка в тексте:

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

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

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

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

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

Страница детального просмотра проекта

Юзабилити страницы детального просмотра проекта рассмотрим на примере https://www.stroy-kotedj.ru/products/dom-iz-kleenogo-brusa-06-302–9-x-132–172-m2/

Кнопки и ссылки не реагируют на наведение курсора:

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

Непонятно, это ссылка или текст:

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

Ссылки и текст оформлены одинаково:

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

Нет вертикальных и горизонтальных отступов между элементами:

Не согласовано взаимное расположение элементов и текста:

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

Не указан диапазон цен строительства дома:

Абсолютно не понятно, как работает калькулятор. Стоимость всех комплектаций – 0 рублей. При изменении комплектаций пересчет цены не происходит. Видео показано по ссылке https://yadi.sk/i/-gd1thSG3F9gWQ.

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

Текст выходит за границы блока:

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

Всплывающие подсказки не помещаются по высоте и текст в верхней части обрезан. Видео показано по ссылке https://yadi.sk/i/CQ9cGIf83FBgdq.

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

Не выводится нижняя и боковая граница для части картинок:

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

Непонятно, что за проекты находятся в нижней части страницы:

Кнопки прокрутки не работают. Видео показано по ссылке https://yadi.sk/i/gdolaqWV3F9htq.

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

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

Нет проверки правильности формата ввода данных в полях формы. Видео показано по ссылке https://yadi.sk/i/gCiskC0H3F9iwi

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

Фото масштабируется средствами браузера. Из-за этого нарушаются пропорции и появляются видимые искажения.

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

Текст оформлен как ссылка, хотя таковым не является.

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

Раздел «Статьи»

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

В тексте статей нет иллюстраций и фото, не выделены заголовки и смысловые блоки.

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

Для примера по ссылке показаны несколько статей https://yadi.sk/i/Y6LzR-nn3FBwLs

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

Раздел «Сотрудники»

Допущена опечатка в тексте:

Для части сотрудников нет фотографий:

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

Страница «Наши услуги»

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

К сожалению, в данный момент она не соответствует своим задачам.

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

Какая-либо информация об услугах на странице отсутствует. Полный скриншот страницы показан по ссылке https://yadi.sk/d/Xx70a8ru3FByQe

В заголовке допущена опечатка:

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

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

Страница https://www.stroy-kotedj.ru/catalog/fundament.html

Опечатка в заголовке:

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

Пустой блок с видео:

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

Размещены маленькие фото плохого качества. Возможность просмотра увеличенных фото отсутствует:

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

Страница https://www.stroy-kotedj.ru/catalog/zabor_ograzhdeniy.html

Ошибка в заголовке:

Нет просмотра увеличенных фото:

Пространство страницы используется неэффективно. Полный скришот страницы показан по ссылке https://yadi.sk/i/l80S88WJ3FC2M2

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

Страница https://www.stroy-kotedj.ru/catalog/stoimost-obkladki-doma-kirpichom.html

Небольшое количество информации об обкладке дома кирпичом размещена в верхней части страницы. После нее выводится каталог проектов. Полный сриншот страницы показан по ссылке https://yadi.sk/i/EILz16aN3FCDfA.

Страница https://www.stroy-kotedj.ru/catalog/stroitelstvo-derevyannyh-domov.html

Размещены фото 2012-го года.

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

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

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

Страница «Производство»

Для главной и подстраниц раздела свойственны те же типичные проблемы, что и для страниц раздела «Услуги»:

• ошибки в заголовках;
• отсутствие просмотра увеличенных фото;
• ошибки в компоновке макета страницы.

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

Страница «Фотогалерея»

Под заголовком нет фотографий соответствующих категорий.

Указан только один тип постройки – клееный брус. Допущена ошибка в слове «клееный».

Все проекты выводятся на одной странице. Из-за этого высота страницы избыточна, на ней сложно найти нужный объект.

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

Страница «Контакты»

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

Рекомендуем разместить карту и схему проезда на базе сервиса Яндекс.Карты.

Ссылки оформлены как обычный текст:

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

Время работы офиса с 10 до 19 не совпадает с временем работы многоканального телефона с 9 до 18.