Аудит юзабилити и SEO сайта по изготовлению дубликатов ключей для автомобилей

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

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

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

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

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

Логотип и слоган

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Данные навигационные элементы не реагируют на наведение курсора.

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

Вспомогательная навигация по типу «хлебные крошки»

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

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

Но, к сожалению, в данный момент допущены некоторые ошибки в работе данного элемента.

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

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

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

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

Непонятно, почему при наведении курсора на ссылку «Главная» выводится подсказка с текстом «Description».

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

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

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

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

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

Кнопка «Найти ключ» не реагирует на наведение курсора.

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

Данные блоки, которые являются ссылками, не реагируют на наведение курсора.

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

На странице есть блок с сертификатами. Но при нажатии на конкретный сертификат открывается не его увеличенное изображение или описание, а страница со всеми сертификатами http://dubkey.ru/sertifikatyi. Это отрицательно сказывается на юзабилити.

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

Основное пространство главной страницы занимает текст. Полный скриншот приведен по ссылке https://yadi.sk/i/2DiNYUt-3PiUEP.

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

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

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

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

Каталог ключей

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

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

 

 

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

В каталоге размещены ссылки на пустые разделы и авто, для которых не предлагаются ключи. Например, http://dubkey.ru/key/bmw/7-series.

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

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

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

Кнопки «Купить ключ» не реагируют на наведение курсора.

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

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

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

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

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

Форма заказа ключа в каталоге

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

В одной форме используется три варианта шрифта:

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

Дизайн кнопки отправки не соответствует общей стилистике сайта. В других блоках используются плоские кнопки со скругленными углами. Здесь – прямоугольная с псевдо объемом. Кроме этого, кнопка не реагирует на наведение курсора.

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

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

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

Непонятно, что обозначает слово «Купить» в тексте информационного сообщения.

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

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

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

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

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

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

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

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

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

Форма оформления заказа

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

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

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

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

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

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

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

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

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

Страница «Чип-ключ»

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

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

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

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

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

Используется некорректное обтекание картинки текстом:

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

Страница «Ключ авто»

Текст страницы переоптимизирован и содержит избыточное количество вхождений ключевых слов (более 70). По ссылке https://yadi.sk/i/Wk6zgbCq3PjJKV показан скриншот с выделением вхождения слова «ключ».

Вхождения слов с корнем «авто» показаны на скриншоте по ссылке https://yadi.sk/i/sWY4nqYf3PjJTc.

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

Не согласована взаимная высота фотографий и дизайн выглядит неаккуратно:

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

Страница «Выкидной ключ»

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

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

Текст страницы переспамлен и содержит избыточное количество вхождений поисковых запросов. По ссылке https://yadi.sk/i/xp1ejZlw3PjPEV показано количество вхождений слова «ключ», а по ссылке https://yadi.sk/i/w_iAZ1ad3PjPKD – количество вхождений слова «выкидной».

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

Страница «Изготовление ключей»

Текст страницы содержит избыточное количество вхождений поисковых фраз. Скриншот показан по ссылке https://yadi.sk/i/IzbK9kd63PkD4n

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

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

Страница «Открытие автомобилей».

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

При этом, такая информация размещена на странице http://dubkey.ru/poteryal-klyuchi-ot-mashiny.

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

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

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

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

В ее работе и дизайне допущены ошибки.

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

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

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

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

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

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

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