Улучшаем юзабилити сайта для автомобилистов

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

Дата аудита: ноябрь 2018 года

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

 

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

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

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

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

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

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

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

https://youtu.be/JAPkZ_S60Ws
https://youtu.be/_gr1bCp8RD8
https://youtu.be/amibqjGN3L8
https://youtu.be/Mq_6AAOQEDg
https://youtu.be/0F5nNFCN-ns
https://youtu.be/m23A8h9jY2c
https://youtu.be/M5h1XV33tJc
https://youtu.be/DpZGSxH4_6Y
https://youtu.be/q3S124394nw
https://youtu.be/qbe7Osi56P0
https://youtu.be/E93v2Ux6sdg
https://youtu.be/_ziwYpB_r-Y
https://youtu.be/eSuvyJANadY
https://youtu.be/p3i9ex97KZo
https://youtu.be/OGfeDMQ2KMs
https://youtu.be/P2ZK57bqFpU
https://youtu.be/ukQgYlZRgAk
https://youtu.be/6RSdZoL1rGc
https://youtu.be/qD_x2_pDXBw
https://youtu.be/vxkHNxVq5vQ

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

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

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

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

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

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

Компоновка верхней части сайта

Допущены некоторые неточности в компоновке и взаимном расположении элементов в верхней части (хедере) сайта. Из-за этого дизайн выглядит неаккуратно. Ниже приведены скриншоты таких блоков.

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

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

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

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

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

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

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

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

Карта скроллинга: https://yadi.sk/i/xBo5Iwh-4nf_Mw

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

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

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

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

В блоке «Новости» опубликовано всего два анонса за одну дату.

Ссылка на страницу со всей лентой новостей в явном виде отсутствует.

Рекомендуем сделать заголовок «Новости» ссылкой на раздел “Новости”.

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

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

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

Рекомендуем регулярно публиковать тематические статьи, добавить изображение для всех анонсов и ссылку на главную страницу раздела https://odo-service.ru/info/.

На странице https://odo-service.ru/info/ также не работает модуль постраничной навигации.

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

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

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

Главная страница каталога крутилок

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

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

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

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

Скриншот: https://yadi.sk/i/BMb0JbutnvcyFQ

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

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

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

В блоке «Крутилка универсальная» опубликовано фактически 5 одинаковых фотографий. Такое решение не имеет логического смысла и не представляет практической ценности для посетителей сайта.

Рекомендуем заменить одинаковые фото на 3-4 разных фотографии универсальной крутилки.

Страница «Универсальная крутилка спидометра»

Также опубликовано 5 одинаковых фото товара.

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

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

Кнопки «Подробнее» пересекаются с нижней границей блока. Это особенно заметно при наведении курсора и изменении прозрачности кнопок.

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

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

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

В блоке с вкладками нет соответствующих иконок. Из-за больших отступов вкладки выводятся в две строки. Компоновка и дизайн отличаются от аналогичного блока на страницах крутилок (например, https://odo-service.ru/krutilki-spidometra/bmw/7-seriya/ ).

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

Непонятно, почему в тексте описания универсальной крутилки идет речь о конкретной модели авто «Audi A3». Велика вероятность, что обладатели других марок и моделей покинут страницу.

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

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

Скриншот: https://yadi.sk/i/THe0T6R9lp-oGw

В блоке «Вопрос-ответ» размещен тестовый контент.

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

Страница «Крутилка спидометра на тахографы»

Адрес страницы: https://odo-service.ru/krutilki-spidometra/krutilki-na-tafografy/.

В блоке опубликован тестовый текст.

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

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

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

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

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

На подстранице https://odo-service.ru/krutilki-spidometra/krutilki-na-tafografy/catalog/kasbi-dt-20m-taxorus/ не работает просмотр видео.

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

Опубликованы отзывы не о конкретной модели крутилки, а общая лента.

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

На подстранице https://odo-service.ru/krutilki-spidometra/krutilki-na-tafografy/catalog/ttsa-02-taxorus/ размещена ссылка на отсутствующую фотографию товара.

Такая же проблема наблюдается на странице https://odo-service.ru/krutilki-spidometra/krutilki-na-tafografy/catalog/vdo-dtco-taxorus/

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

Страница производителя авто

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

Рекомендуем уменьшить отступ до 15-20 пикселей в соответствии с модульной сеткой сайта.

Нет отступа между нижней границей текста и заголовком.

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

Согласно правилам, во всех строках списка, кроме последней ставится точка с запятой. В последней строке – точка. Сейчас во всех строках используются точки.

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

Для некоторых марок авто (например, https://odo-service.ru/krutilki-spidometra/suzuki/ ) полностью отсутствует блок с текстовым описанием.

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

Нет точки в конце последней строки списка.

Для некоторый марок авто (например, https://odo-service.ru/krutilki-spidometra/great-wall/ ) полностью отсутствует текстовый блок с описанием работы крутилок. Это отрицательно сказывается не только на юзабилити, но и на поисковом продвижении сайта.

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

Страница модели авто

При просмотре увеличенного фото товара изображение выглядит размытым.

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

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

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

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

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

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

В списке комплектации не указан «Чехол для прибора».

Опубликована общая лента отзывов, а не о конкретной модели прибора.

Скриншот: https://yadi.sk/i/LTS-wuHKo6aDMw

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

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

Для некоторых моделей (например, https://odo-service.ru/krutilki-spidometra/zil/zil-131/) полностью отсутствует текстовое описание.

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

Корзина и оформление заказа

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

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

При удалении товара из корзины не происходит пересчет суммы заказа. Элементы формы остаются активными.

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

После удаления товара из корзины удалось успешно отправить пустой заказ. Это не имеет логического смысла.

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

Рекомендуем сделать активными по умолчанию первые элементы «Доставка по Москве» и «Наличными». Это упростит работу с сайтом и ускорит оформление заказа.

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

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

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

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

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

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

После правильного заполнения полей все равно остается красная обводка. Непонятно, в данный момент форма заполнена верно или с ошибками.

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

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

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

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

Ссылка на pdf: https://yadi.sk/i/9kh-oHLtMCCqzg

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

О компании

Адрес страницы: https://odo-service.ru/about/.

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

Карта скроллинга: https://yadi.sk/i/tGkbNOS7lQ8IpA

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

Иконки управления прокруткой отзывов не реагируют на наведение курсора.

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

Доставка и оплата

Список доступных способов оплаты не приведен к единому виду на разных страницах и в разных блоках сайта. Ниже показаны скриншоты таких элементов.

1.Наличными курьеру

2.Наложенным платежом

1.Visa

2.Master Card

3.Сбербанк Онлайн

4.Яндекс Деньги

1.Оплата при получении
1.Наличными

2.Сбербанк Онлайн

1.Наличными

2.Картой

Аналогичная проблема наблюдается и для блоков с описанием способов доставки.

1.DHL

2.EMS

3.Почта России

1.DHL

2.EMS

3.Почта России

4.Грузовозофф

1.Курьерская доставка

2.Самовывоз

3.Почтой России

4.EMS

5.DHL

6.Грузовозофф

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

Контакты

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

Карта скроллинга: https://yadi.sk/i/BYewK9_qKbjj8Q

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

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

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

Рекомендуем добавить на сайт онлайн-чат.

Формы обратной связи

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

В форме заказа обратного звонка иконка закрытия не реагирует на наведение курсора. Подсказка выводится на английском языке. Кроме этого, английский текст используется и в других элементах интерфейса. Например, прелоадере.

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

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

На странице «Контакты» также не отмечены обязательные поля.

Аналогично – в форме на странице «Вопросы и ответы» и форме отправки письма.

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

Общие итоги и выводы

В данный момент сайт содержит ряд существенных недоработок, которые крайне негативно сказываются на юзабилити и конверсии:

  1. не используются источники дополнительного платного трафика;
  2. полностью отсутствует модуль поиска по сайту, что затрудняет поиск нужной услуги или устройства для намотки;
  3. не оптимально выполнена компоновка основных макетов страниц. Первый экран занимают блоки со вспомогательной информацией, а наиболее важные с выбором товаров и услуг – в нижней части страниц;
  4. не проработано взаимное расположение элементов в хедере сайта;
  5. информационные разделы “Новости” и “Статьи” в данный момент содержат всего по две публикации;
  6. используются не уникальные фото и иллюстрации, которые встречаются на других сайтах различной тематики;
  7. для некоторых марок автомобилей полностью отсутствует блок с текстовым описанием;
  8. отличаются списки доступных способов оплаты и доставки на разных страницах и в разных блоках сайта;
  9. отзывы не привязаны к конкретным моделям устройств;
  10. не приведены к единому виду списки возможных вариантов оплаты и доставки;
  11. нет подтверждения заказа на email покупателя;
  12. не проработана печатная форма заказа;
  13. допущены ошибки в юзабилити корзины и процесса оформления заказа;
  14. есть недоработки во внутренней оптимизации сайта.

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

Полезные ссылки и ресурсы

REGRU-logo-color-3 Крупнейший регистратор доменных имен REG.RU

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

https://cp.beget.com/promo_data/static/static100x100_6.png Ведущий хостинг-провайдер BEGET.RU

Хостинг, аренда серверов, регистрация доменов.

Сервис тестирования юзабилити реальными пользователями

Отбор и анкетирование целевой аудитории сайта.

Сервис мониторинга, анализа и оценки эффективности поискового продвижения.

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

Сервис копирайтинга и рерайтинга текстов. Заказ текстов для сайта любой сложности.

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

SeoPult Сервис автоматизации продвижения сайта и рекламы в интернете.

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

300x60_1 26 000 готовых премиум-шаблонов для сайтов

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

Крупнейшая фриланс-биржа

Сервис удаленной работы.

Получать новые кейсы на email:

Примеры аудита юзабилити автомобильных сайтов

Смотреть все