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

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

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

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

 

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

Содержание

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

2. Базовая статистика сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

16. Внутренняя поисковая оптимизация сайта

17. Метатег title

18. Метатег description

19. Оптимизация заголовков h1

20. SEO оптимизация HTML-кода сайта

 

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

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

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

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

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

Базовая статистика сайта

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

Общее число визитов за сентябрь составило 1978:

В годовом разрезе наблюдается снижение числа посетителей:

Источники трафика:

Основной источник трафика – переходы из поисковых систем. На втором месте – переходы по платной рекламе.

Качество трафика по показателям отказов этих двух основных источников практически одинаковое:

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

В данный момент преобладает поисковый трафик из Яндекса:

Основной источник рекламного трафика – Яндекс.Директ.

Абсолютное большинство посетителей заходит на сайт из России:

Распределение посетителей по городам:

Основной поток трафика идет из Москвы. При этом наблюдается рост показателя у посетителей из других городов:

Распределение аудитории сайта по возрастным группам:

Основная возрастная группа посетителей от 25 до 34 лет. На втором месте (25.1%) посетители от 35 до 44 лет.

Основную аудиторию сайта составляют мужчины.

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

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

Используемые браузеры:

Самый высокий показатель отказов у пользователей Google Chrome:

Наиболее популярные страницы сайта:

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

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

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

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

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

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

Видео: https://yadi.sk/i/OWF0qgU73PiBEq.

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

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

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

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

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

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

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

Видео: https://yadi.sk/i/zYeOTbhC3PiD4j.

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

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

Видео: https://yadi.sk/i/l5CBtXYZ3PiDkB.

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

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

Видео: https://yadi.sk/i/Qn8gA86v3PiEAG.

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

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

Видео: https://yadi.sk/i/dfTizYvh3PiEdv.

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

 

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

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

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

Видео: https://yadi.sk/i/dfTizYvh3PiEdv.

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

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

Видео: https://yadi.sk/i/5rvTQJEI3PiJwM.

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

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

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

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

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

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

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

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

Видео: https://yadi.sk/i/CLzQgZAK3PiLG2.

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

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

Видео: https://yadi.sk/i/1OwHYbuQ3PiLfu

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

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

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

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

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

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

Видео: https://yadi.sk/i/ZhAc59gt3PiMj9.

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

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

Видео: https://yadi.sk/i/k0SZVDyd3PiPNk.

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

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

Видео https://yadi.sk/d/I7Ic_EjX3PiPsm.

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

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

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

 

 

 

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

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

Видео: https://yadi.sk/i/qIDWkJSV3PiVet.

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

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

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

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

 

 

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

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

Видео: https://yadi.sk/i/BD6Z71vx3PiaFD.

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

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

 

 

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

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

Видео: https://yadi.sk/i/JaN6cdpQ3Pj9tH.

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

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

Видео: https://yadi.sk/i/zz2jZOXz3PjD6n.

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

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

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

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

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

Видео: https://yadi.sk/i/JcctJ0ib3PjDoT.

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

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

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

Видео: https://yadi.sk/i/SicVTg903PjEDG.

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

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

Видео: https://yadi.sk/i/vx1UBzdd3PjFZG.

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

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

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

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

Видео: https://yadi.sk/i/H5Wu6onI3PjFuJ.

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

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

Видео: https://yadi.sk/d/ami9XNy23PjGBJ.

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

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

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

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

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

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

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

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

Видео: https://yadi.sk/i/gZl3lr-O3PiWEk.

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

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

Видео: https://yadi.sk/i/7-nCj8BJ3PiYAr.

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

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

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

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

Видео: https://yadi.sk/i/nndhVLf-3PiZAw.

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

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

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

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

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

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

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

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

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

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

Текст страницы переоптимизирован и содержит избыточное количество вхождений ключевых слов (более 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.

Видео: https://yadi.sk/d/Ccgj4_5m3PkNcs

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

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

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

Видео: https://yadi.sk/i/6VDc0vxm3PkPEU.

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

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

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

Видео: https://yadi.sk/i/K6tdEywa3PkPQ8

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

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

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

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

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

Видео: https://yadi.sk/i/Zjn79Eyo3PkQBJ

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

Внутренняя поисковая оптимизация сайта

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

Метатег title

Метатег title является одним из важнейших элементов базовой внутренней оптимизации сайта.

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

Его длина должна быть не более 65-ти символов.

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

Title не заполнен на 519-ти из 699-ти страницах сайта (74.25% общего числа страниц). Полный список таких страниц приведен в таблице по ссылке https://yadi.sk/i/ZeIhcPeB3PkRuP.

Неуникальные дубликаты выявлены на 2-ух страницах сайта. Это отрицательно сказывается на поисковой оптимизации сайта. Адреса страниц:

http://dubkey.ru/key/hyundai/hyundai-creta

http://dubkey.ru/key/hyundai/ix35

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

Title длиной более 65-ти символов выявлен на 31-ой странице. Список с указанием количества символов по каждой странице можно найти в таблице по ссылке https://yadi.sk/i/wPf9mNmM3PkUSq

Метатег description

Метатег description также является важным элементом внутренней поисковой оптимизации.

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

В данный момент description есть только на 2-ух из 699-ти страницах сайта, а именно:

http://dubkey.ru/poteryal-klyuchi-ot-mashiny

http://dubkey.ru/

При этом на главной странице он заполнен неверно:

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

Оптимизация заголовков h1

Далее рассмотрим, насколько качественно проработана оптимизация заголовков первого уровня h1.

Заголовок отсутствует на 668-ми страницах из 699-ти. Их список приведен в таблице по ссылке https://yadi.sk/i/1jh70R1j3PkVGv

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

SEO оптимизация HTML-кода сайта.

Далее рассмотрим оптимизацию HTML кода для поисковых систем.

Не заполнены alt для некоторых изображений, размещенных на страницах сайта.

Рекомендуем прописать корректные alt=”” для всех изображений, размещенных на сайте в соответствии с актуальными требованиями поисковых систем:

https://support.google.com/webmasters/answer/114016?hl=ru

https://yandex.ru/support/images/robot-search.html

Большое количество скриптов находятся внутри HTML кода, а не во внешних js-файлах. Ниже приведены скриншоты фрагментов такого кода:

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

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

Рекомендуем вынести все стили оформления во внешние css-файлы.

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

 

Get new case studies by email:

More Case Studies

See all