Аудит юзабилити сайта по аренде и продаже стеллажей
Аудит юзабилити №410
Дата аудита: май 2016 года
Объем отчета: 32 страницы
Аудит работы навигации, компоновки страниц, юзабилити форм. Анализ статистики сайта.
Навигация по сайту
Качественная навигация по сайту является основой для построения эффективного юзабилити сайта.
Она должна обеспечивать быстрый и легкий переход на любую страницу сайта.
Кроме этого, элементы навигации должны информировать пользователя о его текущем местоположении относительно главной страницы.
Рассмотрим, насколько выполнены эти требования на сайте стеллажваренду.рф
Ссылки оформлены как обычный текст и не реагируют на наведение курсора.
Ниже представлены скриншоты элементов с аналогичными проблемами.
Неэффективность таких ссылок подтверждается и данными карты кликов. Нажатия на некоторые ссылки практически отсутствуют, либо их количество минимально.
Полная карта кликов главной страницы представлена по ссылке https://yadi.sk/i/oy-ONZlarss5x
Рекомендуем явно выделять ссылки с помощью подчеркивания.
В выпадающем меню раздела «Услуги» ссылки не реагируют на наведение курсора.
Далее рассмотрим компоновку и работу основных страниц сайта.
Юзабилити главной страницы сайта
На странице одновременно используется несколько вариантов одного и того же термина.
Непонятно, что обозначают звездочки рядом с именем поля.
Рекомендуем явно указать, что поля, отмеченные звездочкой, являются обязательными для заполнения.
Нет проверки правильности ввода имени пользователя. Например, нет сообщения об ошибке при вводе в данное поле двух цифр.
Не совсем привычно выполнен формат ввода номера телефона. Общепринятым является ввод мобильного например в виде +79680915091. При попытке ввода такого номера появляется сообщение об ошибке. Это продемонстрировано на видео по ссылке https://yadi.sk/i/nP9qBPa9rsxd7
Рекомендуем обеспечить полную проверку правильности ввода данных формы во время заполнения.
Не выровнена высота блоков. При уменьшении ширины экрана контент выходит за границы блоков.
Схожие проблемы и в данном блоке страницы:
Дизайн данного блока полностью разваливается при уменьшении окна браузера.
В данном блоке появляются разные вертикальные отступы у элементов:
При уменьшении ширины окна браузера обрезается текстовый контент в блоках:
Кроме этого, текст в этих блоках является ссылками. Но при клике на них ничего не происходит. Это продемонстрировано на видео по ссылке https://yadi.sk/i/4vGUV723rszNX
Рекомендуем обеспечить корректную работу элементов сайта при любой ширине окна браузера.
При просмотре фотографий реализованных объектов нет никакой конкретной информации (названия объекта, площади, вместимости, дате запуска и т.д.). Это снижает привлекательность и полезность фотографий для пользователя.
Рекомендуем выводить в заголовке название объекта и ключевую информацию о нем.
Не совсем понятно, почему данный блок выполнен в виде одной картинки, а не с помощью HTML верстки. Это отрицательно сказывается не только на юзабилити, но и на поисковой оптимизации сайта.
Рекомендуем использовать графику только для оформления иллюстраций или фоновых изображений. Текст должен быть выполнен в виде HTML кода.
Отдельно стоит отметить, что в данный момент главная страница сайта выполнена по принципу посадочной страницы, имеет большую высоту и контент, который дублируется на других страницах сайта. Из-за большой высоты страницы необходимо постоянно использовать вертикальную прокрутку. Большинство пользователей просматривает только верхнюю часть и покидают страницу. Это подтверждается данными карты скролла главной страницы. Она представлена по ссылке https://yadi.sk/i/b9NjP8bBrt2kQ.
Если верхнюю часть страницы просмотрело 297 человек, то нижнюю – 85.
Рекомендуем рассмотреть возможность уменьшения общего количества информации, размещенной на главной странице сайта. Необходимо оставить только ключевые блоки с наиболее важными данными и элементами, которые привлекут внимание пользователя к компании и услугам.
Юзабилити страницы «О компании»
Не совсем понятно, почему весь контент страницы выполнен в виде одного изображения без использования HTML верстки. Это отрицательно сказывается не только на юзабилити, но и на поисковой оптимизации сайта, т.к. текст на картинке не индексируется поисковыми системами.
Рекомендуем использовать графику только для оформления иллюстраций или фоновых изображений. Текст должен быть выполнен в виде HTML кода.
На странице заявлено, что это единственная компания по аренде стеллажей. Это не совсем соответствует действительности, т.к. на рынке присутствует еще целый ряд компаний с аналогичными услугами. Например, http://www.nt-ls.ru/uslugi/arenda-stellazhey
Страница «Порядок работы»
Контент данной страницы также представляет собой одну картинку, которая есть и на главной странице сайта. Не совсем понятно, для чего сделано такое дублирование контента.
Страница «Наши работы»
На главной странице в аналогичном блоке расположено 30 фотографий объектов, а на странице «Наши работы» – только 22.
Рекомендуем выводить в данном разделе максимально полный список фотографий с объектами, реализованными компанией.
Также нет никакой детальной информации о конкретных объектах. Выводится только имя файла с фотографией.
Рекомендуем в заголовке выводить название и основные характеристики объекта.
Страница «Продажа Б/У стеллажей»
Не совсем понятен случайный порядок нумерации лотов (23-22-21-24).
Рекомендуем выводить лоты по уменьшению их порядкового номера.
Ссылки оформлены как обычный текст и не реагируют на наведение курсора.
Рекомендуем явно выделять ссылки с помощью подчеркивания.
При нажатии на фото лота открывается окно просмотра увеличенных фото. Но в нем прокручиваются не фотографии конкретного лота, а все 4 фото разных лотов, представленных на странице. Это показано на видео по ссылке https://yadi.sk/i/OGhjxXtyrt9nF .
При этом каждый лот имеет несколько фото на странице детального просмотра. Пример показан на видео по ссылке https://yadi.sk/i/IHJgVZ1LrtAG4.
Рекомендуем при нажатии на фото выводить окно просмотра с фотографиями, относящимся к конкретному лоту.
Страница детального просмотра выбранного лота
Второе слово в заголовке согласно правилам должно начинаться с маленькой буквы.
После двоеточия слово должно быть написано с маленькой буквы.
В данном блоке размещено два двоеточия.
Наиболее важный с точки зрения потенциального покупателя параметр – цена – никак не выделен на странице и его сложно найти в общем текстовом описании.
Рекомендуем явно выделить информацию о цене с помощью увеличения шрифта или его цвета.
Непонятно, это ссылка или текст.
Рекомендуем явно выделять ссылки с помощью подчеркивания.
Отдельно стоит отметить, что на страницах просмотра списков лотов и детального просмотра нет никаких форм или кнопок для заказа необходимого количества конкретного оборудования либо отправки заявки менеджеру сайта. Это отрицательно сказывается на юзабилити и конверсии.
Рекомендуем разместить форму для отправки сообщения или заявки.
Аудит юзабилити страницы «Услуги»
При уменьшении ширины страницы некорректно отображается адрес компании.
Некорректно отображается данный блок.
Разная высота текстовых блоков. Не согласовано положение нижних границ элементов.
Разное положение нижних границ элементов. Текст обрезается при уменьшении ширины окна браузера.
Рекомендуем обеспечить корректную работу всех элементов сайта независимо от разрешения экрана.
Непонятно, что представляет из себя спецпредложение и чем оно будет полезно потенциальному клиенту.
Рекомендуем явно указать, чем выгодно спецпредложение и какие преимущества получит потенциальный клиент.
Не согласована ширина полей формы и кнопки отправки заявки.
Рекомендуем обеспечить корректное отображение формы независимо от разрешения экрана.
Не указано, какие поля являются обязательными для заполнения. Об этом пользователь может узнать только после попытки отправки формы.
Рекомендуем явно указать, какие поля формы являются обязательными для заполнения.
Некорректно отображаются текстовые блоки и нижние границы элементов при изменении ширины окна браузера.
Вторая форма заявки спецпредложения имеет другой дизайн (ширину элементов). В ней также не указано, какие поля являются обязательными для заполнения. Не совсем понятно, для чего рядом на странице размещены две формы с практически одинаковым функционалом.
Рекомендуем избегать избыточного дублирования функциональных блоков и элементов интерфейса – это вводит пользователя в заблуждение.
В форме отправки заявки также не указано, какие поля являются обязательными для заполнения.
Данные элементы оформлены как ссылки, хотя таковыми не являются. Это продемонстрировано на видео по ссылке https://yadi.sk/i/-HohhOhSrtE5B
Отдельно стоит отметить, что в данный момент описание всех услуг компании расположено на одной странице. При этом ссылка на основное направление деятельности компании – аренду стеллажей – в главном меню находится предпоследней.
Такое решение не только отрицательно сказывается на юзабилити и конверсии, но и на поисковой оптимизации сайта, т.к. под разные запросы должны быть разные страницы с соответствующим семантическим ядром (текстами).
Рекомендуем в выпадающем меню разместить пункты в соответствии с их приоритетностью. Информацию о каждой конкретной услуге рекомендуем выводить на отдельной странице.
Страница «Контакты»
В данный момент на странице с контактной информацией нет формы отправки сообщения. Это отрицательно сказывается на юзабилити сайта.
Рекомендуем добавить привычную для большинства пользователей форму обратной связи.
Также отсутствует возможность связаться с менеджером компании с помощью онлайн чата или skype.
Рекомендуем использовать на сайте комплексное решение для организации максимального количества коммуникации с посетителями, например сервис krible.com или аналогичный.
Контактные формы сайта
Большинство форм сайта имеют схожие проблемы, поэтому замечания для одной из них в целом верны и для остальных.
В форме «Узнать условия сотрудничества» сделана слишком большая ширина полей. Не указано, какие поля являются обязательными для заполнения.
В результате дизайн формы выглядит неаккуратно.
В форме заказа обратного звонка не указано, какие поля обязательны для заполнения. Не согласовано выравнивание кнопка отправки формы относительно полей.
В форме заявки «trade in» поле email рекомендуем поставить справа от поля «Телефон». Это позволит уменьшить высоту формы и придаст ей более завершенный вид.
Также рекомендуем явно указать, что поля отмеченные звездочкой, являются обязательными для заполнения и выровнять поля формы.
Эти же замечания верны и для формы отправки запроса на аренду оборудования.
Анализ статистики сайта
К сожалению, в данный момент, данные по конверсиям сайта за последний квартал в Яндекс.Метрике отсутствуют.
Одной из причин такой ситуации является крайне низкая посещаемость сайта. В среднем на сайт заходит 80-120 человек в неделю. Этого недостаточно для формирования стабильного потока заявок. По ссылке https://yadi.sk/i/KMpJSLKJrtPNT представлена сводная таблица с еженедельной посещаемостью сайта.
При этом основные источники трафика – прямые заходы и контекстная реклама. Поисковый трафик практически отсутствует и составляет всего 10,3%.
При этом большинство поисковых запросов, по которым посетители заходят на сайт, напрямую связаны с названием компании. Сводная таблица представлена по ссылке https://yadi.sk/i/EBZfuztzrtQR4.
Следующие факторы отрицательно сказываются на поисковом трафике:
- Небольшое количество страниц сайта в индексе Яндекса. На данный момент проиндексировано всего 26 страниц.
- Дизайн сайта по типу посадочных страниц – такое решение подразумевает активное использование контекстной рекламы, которая в данный момент используется эпизодически.
- Использование картинок вместо HTML верстки на ряде страниц сайта.
- Отсутствие текстового контента в виде уникальных статей, рассчитанных под конкретные поисковые фразы.
- Комплексные проблемы с версткой сайта, которые будут рассмотрены в следующем разделе аудита.
Верстка сайта
Качественная верстка сайта является необходимым требованием, которое обеспечивает корректную работу сайта во всех браузерах при любом разрешении экрана на компьютерах, планшетах и мобильных устройствах.
Кроме этого, код сайта должен соответствовать стандартам и быть оптимизированным для поисковых систем.
Рассмотрим, как выполняются эти условия в данный момент.
Согласно данным статистики, пользователи используют следующие браузеры:
При этом у второго по популярности среди посетителей сайта браузере – Internet Explorer – наиболее высокий показатель отказов.
Причина – сайт некорректно работает в данном браузере. Скриншот главной страницы представлен по ссылке https://yadi.sk/i/viDfOlJ3rtpXg
Критически большое количество css стилей оформления элементов сайта находится внутри HTML кода страниц, а не вынесено во внешние css-файлы. Это не соответствует требованиям и крайне отрицательно сказывается на скорости работы сайта и поисковой оптимизации. По ссылке https://yadi.sk/d/BLxRp3XqrtqGm представлен скриншот с кодом сайта, на котором выделены такие участки кода. Дополнительные скриншоты можно увидеть по ссылкам https://yadi.sk/d/9A6pctP4rtqTr
Коды счетчиков статистики должны быть размещены в конце перед закрывающим тэгом </body>. В данный момент они находятся в середине кода перед основным контентом страницы.
Часть скриптов также не вынесена во внешние js файлы, а находится внутри кода страницы. Это показано на скриншоте по ссылке https://yadi.sk/i/RBVcGf6rrtr97
Учитывая характер и количество проблем с версткой, рекомендуем провести полную ревизию работы файлов темы и плагинов WordPress, которые используются на сайте.
С радостью отвечу на Ваши вопросы по результатам аудита по email, skype или телефону.