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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

Видео: 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

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

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

 

Get new case studies by email:

More Case Studies

See all