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

Аудит юзабилити №449

Дата аудита: июнь 2017 года

Объем отчета: 27 страниц 

 

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

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

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

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

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

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

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

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

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

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

В главном меню ссылки не реагируют на наведение курсора. Видео показано по ссылке https://yadi.sk/i/qGm95Jf03KMzdu

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

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

Аналогичная проблема наблюдается и в нижнем меню. Видео показано по ссылке https://yadi.sk/i/qiU65Cb43KN59X.

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

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

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

Дважды дублируется ссылка на страницу «Цены».

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

Очередность пунктов главного меню необходимо выстраивать в соответствии с их приоритетом для пользователя. Согласно данными карты кликов, наиболее популярные разделы «Проекты», «Цены» и «Контакты»:

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

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

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

Непонятно, для чего используется заголовок «Навигация»:

Рекомендуем убрать заголовок «Навигация».

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

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

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

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

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

http://sibles-stroi.com/

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

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

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

При наведение на изображение появляется только короткая надпись с названием. Отсутствует возможность просмотра увеличенного фото, описания проекта и другой полезной информации. Это сильно снижает эффективность данного блока. Видео показано по ссылке https://yadi.sk/i/FcvOrJeT3KN8sZ

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

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

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

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

В данном блоке текст прыгает при наведении курсора. Видео показано по ссылке https://yadi.sk/i/1082ncUo3KN9uP

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

Непонятно, почему данный блок с иллюстрациями и текстом сделан одним изображением http://sibles-stroi.com/wp-content/uploads/2016/05/dfcbed83.png

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

Проекты

http://sibles-stroi.com/portfolio/

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

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

При нажатии на иконку или ссылку используется два разных варианта открытия страницы. В первом случае она открывается в том же окне, во втором – в новом. Причина – для текстовой ссылки используется target=”_blank”. Скриншот с адресами ссылок можно увидеть тут https://yadi.sk/i/Qv8Uv8003KPCYy. Это особенно критично при просмотре сайта с мобильных устройств и планшетов.

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

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

Работу этих страниц рассмотрим на примере http://sibles-stroi.com/portfolio-type/proekty-iz-listvennicy/.

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

Также нет возможности какой-либо сортировки каталога или быстрого подбора проектов по параметрам.

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

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

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

Рекомендуем добавить возможность такой настройки.

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

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

Детальный просмотр проекта

Юзабилити страниц такого типа рассмотрим на примере http://sibles-stroi.com/portfolio/dom-iz-listvennicy-xenrik/.

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

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

Большое фото проекта масштабируется средствами браузера. Из-за этого очень сильно искажаются реальные пропорции и внешний вид дома. Это крайне отрицательно сказывается на юзабилити и конверсии. Для примера ниже приведены вывод фото объекта на странице и оригинальное изображение:

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

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

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

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

Фото не реагируют на наведение курсора. Видео показано по ссылке https://yadi.sk/i/8vuaPK3Z3KPfdU.

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

На странице нет никакой информации об ориентировочной цене дома. При нажатии на кнопку «Стоимость» открывается форма заказа обратного звонка. Видео показано по ссылке https://yadi.sk/i/kCn_H-cP3KPft3

На некоторых страницах информация о стоимости предоставлена:

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

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

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

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

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

Ссылки и текст оформлены практически одинаково. Нет разделителя между ссылками:

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

При детальном просмотре проектов также нет возможности:

  1. Отобрать и сохранить несколько проектов в какой-либо список;
  2. Сравнить несколько проектов;
  3. Быстро перейти к похожим проектам по категории, этажности, площади, количеству спален или цене.

Все это отрицательно сказывается на юзабилити и конверсии.

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

Услуги

http://sibles-stroi.com/uslugi/.

Для иконок и текстовых подписей используется разные target (как и в разделе «Проекты»). Скриншот показан по ссылке https://yadi.sk/i/oELwkGpl3KPjt8.

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

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

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

Отзывы

http://sibles-stroi.com/otzyvy/.

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

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

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

Непонятно, что это за дата:

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

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

Скидки

http://sibles-stroi.com/skidki/

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

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

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

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

О нас

http://sibles-stroi.com/o-kompanii/

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

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

Наши работы

http://sibles-stroi.com/works/

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

Нет никаких поясняющих текстов или подписей к фото с информацией о конкретном объекте.

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

Контакты

http://sibles-stroi.com/kontakty/

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

Рекомендуем использовать почту вида info@sibles-stroi.com. Это легко реализовать с помощью специализированных бесплатных сервисов Яндекса https://pdd.yandex.ru/.

Также рекомендуем сделать адрес почты ссылкой.

При загрузке страницы происходит перемещение блоков по экрану. Видео показано по ссылке https://yadi.sk/i/zeGlCN713KPqvk.

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

Непонятно, для чего в таблице сделан столбец «Перерыв», который не содержит никакой полезной информации:

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

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

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

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

Для примера рассмотрим поиск по запросу «дом из лиственницы».

Результаты поиска выводятся в виде ленты с полной информацией о каждом проекте. В результате высота страницы с результатами получается избыточной и с ней крайне сложно работать. Видео показано по ссылке https://yadi.sk/i/jT1Dewsa3KPuXb.

Искажены пропорции изображений объектов:

Непонятно, где ссылки, а где текст.

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

При поиске по запросу «срубы домов» результаты поиска выводятся в совершенно другом формате. Скриншот показан по ссылке https://yadi.sk/i/99Pf-NFB3KPx6V.

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

Непонятно, почему выводится по две даты рядом:

Не проработан дизайн блока постраничной навигации. Ссылки не реагируют на наведение курсора. Видео показано по ссылке https://yadi.sk/i/SR5qB-V23KPxym

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

Формы сайта

Правильная работа и хорошее юзабилити форм являются важным фактором работы эффективного сайта.

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

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

Ссылка для заказа обратного звонка не реагирует на наведение курсора:

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

В форме заказа обратного звонка не указано, какие поля являются обязательными для заполнения. Об этом можно узнать только после неудачной попытки отправки. Видео показано по ссылке https://yadi.sk/i/6bGvf_gx3KNJ26

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

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

Из-за избыточной высоты полей форма не помещается на экране даже с большим разрешением. Скриншот показан по ссылке https://yadi.sk/i/BNKOUoLn3KP5qQ.

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

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

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

Поле «Комплектность поставки» помечено как обязательное.

При этом возможно отправить форму и без заполнения этого поля. Видео показано по ссылке https://yadi.sk/i/W3qzB8tx3KP6mG.

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

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

При выводе сообщений о необходимости заполнения обязательных полей дизайн формы разваливается:

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

Также сомнительным является использование поля «Страна» – сайт ориентирован на российский рынок и 90 процентов посетителей – из России.

При нажатии на кнопку «Расчет проекта» открывается форма с названием «Заказ обратного звонка». Видео показано по ссылке https://yadi.sk/i/uyabudoY3KPAA5

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

Страница 404 ошибки

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

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

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

Информационные страницы.

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

http://sibles-stroi.com/drugie-raboty-montazh-kryshi-reznye-izdeliya/montazh-i-remont-kryshi.html/

http://sibles-stroi.com/stati-o-tom-kak-postroit-dom/kak-svoimi-rukami-uteplit-potolok-v-chastnom-dome.html/

http://sibles-stroi.com/stati-o-tom-kak-postroit-dom/ustanovka-okna-v-derevyannom-dome.html/

Полный список таких страниц показан на скриншоте https://yadi.sk/i/x7SZTIbU3KNFQD.

В явном виде ссылки на эти страницы есть только в карте сайта http://sibles-stroi.com/karta-sajta/. На других страницах сайта (кроме раздела «Услуги»), ссылки на инфостраницы найти не удалось. Это отрицательно сказывается на юзабилити сайта.

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

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

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

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

К сожалению, в данный момент эти требования не выполнены.

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

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

Белый логотип практически не виден на бело-голубом фоне:

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

На странице «Проекты» обрезается контент и часть категорий становится недоступной. Видео показано по ссылке https://yadi.sk/i/hivGORh53KQh2X.

При этом на странице «Услуги» аналогичный блок работает правильно. Видео показано по ссылке https://yadi.sk/i/B1zYdTRR3KQhGH.

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

При уменьшении ширины окна браузера перестает работать выпадающее меню. Видео показано по ссылке https://yadi.sk/i/TyV0cdxV3KQhT2.

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

На странице «Контакты» при изменении ширины блоки страницы перемещаются по экрану и меняется их очередность. Масштабирования карты не происходит. Видео показано по ссылке https://yadi.sk/i/WlrvgD8r3KQhed.

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

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

Главная страница https://yadi.sk/i/vlViQuTQ3KQiGx

Проекты https://yadi.sk/i/_f6OdsQb3KQiQU

Контакты https://yadi.sk/i/cV4tkS8K3KQiTq

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

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

Get new case studies by email:

More Case Studies

See all