http://*****/

Аудит юзабилити, seo-аудит и продвижение сайтов

E-mail: *****@***ru

ICQ:

Skype: itimowin

План аудита

В начале проводится техническое тестирование сайта – проверка на кроссбраузерность (правильность отображения в основных браузерах), скорость загрузки сайта, масштабирование и т. д. Зеленой тонировкой я буду выделять важные места на приводимых изображениях.

Затем подробно рассмотрим общий макет сайта, выявим ошибки и дадим рекомендации к их устранению.

После рассмотрения общих проблем с макетом - мы рассмотрим ошибки, допущенные на конкретных страницах – на главной, на странице контактов, на странице каталога и основных целевых страницах сайта. А так же будут даны конкретные рекомендации по их устранению.

В конце аудита будет приведен общий список всех недочетов сайта.

От себя

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

НЕ нашли? Не то? Что вы ищете?

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

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

Так что такое юзабилити? Это прямая и что очень важно – очевидная экономия денежных средств на рекламные бюджеты!

1. Техническое тестирование

1.1. Скорость загрузки сайта

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

1.2. Кроссбраузерность (проверка отображения сайта в разных браузерах)

Общая кроссбраузерность сайта в порядке, хотя есть некоторые элементы, которые отображаются по-разному в разных браузерах. См. рис. 1

В браузере Internet Explorer 8 при наведении на пункт горизонтального меню фон квадратный, а в Mozilla Firefox 10.0.1 – фон с закруглениями. Это не критично, стоит исправлять в последнюю очередь.

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

Так же был замечен баг с отображением выпадающих пунктов горизонтального меню. При нахождении на этой странице http://*****/zakazat-zapchasti/oformit-zajavku - выпадающее меню «залезает» под поля формы, чем делает недоступным переход на некоторые страницы. Нужно поправить – что бы форма и выпадающее меню не конфликтовали. См. рис. 2

1.3. Работа в различных разрешениях

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

1.4. Работа с отключенной графикой

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

Так же при отключении графики изображения исчезают бесследно. При невозможности загрузки картинки на месте изображения должен отображаться контур с соответствующей иконкой и альтернативным текстом внутри (нужно прописывать атрибут alt тега img).

Как должна выглядеть картинка при отключении графики - представлено на рис. 3.

Как выглядит сайт при отключении графики показано на рис. 4

Наладить отображение сайта при отключенной графике

1.5. Метатеги (тайтлы, дескрипшены, альты, сниппеты)

Метатеги title и description присутствуют, для каждой страницы свои и не дублируются – это хорошо. Плохо то, что в некоторых случаях title мало информативен и не описывает размещенную на странице информацию. Тег description составлен плохо, это надо скорей исправлять. Тег description во многих случаях является сниппетом для поисковой системы Яндекс, а для поисковой системы Google он является сниппетом в подавляющем большинстве случаев.

Поэтому рекомендую делать привлекательные сниппеты, добавляя в них специальные символы html разметки, а так же специальные возможности, которые предоставляются поисковыми системами. Это повысит кликабельность (CTR) – а это сейчас влияет и на ранжирование. См. рис. 5

Список специальных символов вы можете найти тут http://*****/blog/simvolHTML. html (не все спец. символы отображаются поисковыми системами)

Так же для вашего будет актуально иметь YML файл с товарами – при наличии такого файла поисковая система Яндекс будет выводить расширенный сниппет. См. рис. 6

Подробнее про YML файл вы можете почитать вот тут http://help. *****/webmaster/?id=1112353

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

Как добавить социальные ссылки в сниппет сайта - http://help. *****/webmaster/?id=1124275

Использовать в сниппетах все доступные возможности для выделения

1.6. 404 страница

Обработка 404 ошибки не настроена, сервер отдает ответ 200OK (или 302 not found) на любой несуществующий запрос. Это неверно, нужно грамотно настроить обработку 404 ошибки и создать специальный шаблон это ошибки. (об этом я подробно расскажу в техническом аудите)

Настроить обработку 404 ошибки

1.7. Карта сайта

На сайте нет карты сайта – это страница, на которой собраны ссылки на все важные страницы сайта. Обычно эти ссылки формируются автоматически системой управления сайта (CMS). Карта сайта нужна для того, что бы если пользователь заблудился на сайте или хочет быстро оценить архитектуру сайта – он сможет найти искомую информацию (страницу) или понять для себя – дает ли сайт ответ на его вопрос. Ссылка на карту сайта в большинстве случаев располагается либо в шапке, либо в подвале. (Не путать с картой сайта формата XML, они различаются и предназначены несколько для разных целей)

Создать карту сайта

2. Корректировки общего макета

2.1. Логотип сайта (компании)

У сайта, по сути, отсутствует логотип. Красная стрелочка, направленная вниз с именем компании на ней я не считаю логотипом.

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

К сожалению, ваш логотип не удовлетворяет поставленных перед ним требований. Он не имеет отношения к автомобилестроению, не выглядит как логотип, а больше похож на кнопку, которую хочется потянуть и что-то произойдет. (Очень похоже, как сделано тут http://www. rocketmill. co. uk/).

Я рекомендую заказать создание нового логотипа, который будет 1. Отражать направленность вашей деятельности (можно что-то с мотором к примеру – в названии компании есть такое слово, поэтому будет кстати) 2. Простым, понятным и читабельным.

Можно сделать как на рис.8 и рис. 9, но я рекомендую отказаться от стрелки вовсе, так как она создает иллюзию, что она интерактивна – т. е. не только является логотипом, но и выполняет какие-то действия при взаимодействии с ней.

Переделать логотип сайта

Сразу где-то в шапке нужно прописать деятельность компании – «запчасти из Европы…»

2.2. Шапка сайта

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

Любой коммерческий сайт обязан иметь контактные данные на каждой странице сайта – это требования компании Яндекс (абсолютно обоснованные). К сожалению – ваш сайт их игнорирует (размещение контактных данных в подвале – не считается, так как далеко не каждый станет их там искать – контакты должны быть в самом очевидном месте – в шапке)

Так же – просмотрев с десяток схожих компаний, что и ваша, а так же основываясь на собственном мнении – предлагаю убрать форму регистрации с сайта. Я не вижу смысла регистрироваться на сайте, это же не форум или сообщество, зачем мне регистрировать? Это же не дает никаких преимуществ и необязательно – заказать двигатель или коробку можно и просто через форму заказа со страницы http://*****/zakazat-zapchasti/oformit-zajavku (форма очень сложная и пугающая, к ней мы вернемся чуть позже).

Я рекомендую сделать шапку, как на рис. 10

Рис. 10 это не идеальная версия шапки, так как не указана ни почта, ни адреса – я не смог по человечески их там отобразить (очень некрасиво получается, но дизайнер справится).

При нажатии на ссылку «задать вопрос» происходит переход на соответствующую страницу (нужно будет создать отдельную страницу, с соответствующим заголовком и простой формой связи – на этой странице посетитель просто сможет задать вопрос, никаких сложных полей не нужно). При нажатии на ссылку «заказать звонок» не происходит перехода на другую страницу, а «всплывает» мини форма всего с 2мя полями – «Имя» и «Телефон». Как будет выглядеть это действие - представлено на рис. 11

Вся область покрывается «тонировкой», как в большинстве лайтбоксов (средство для просмотра изображений). Я сразу нарисовал, как должна реагировать форма на неправильный ввод данных. Если что-то ввели не так – поля подсвечиваются по контуру красным цветом и всплывает надпись об ошибке – таким образом пользователь осознает свою ошибку и следует рекомендациям системы. (форма так проста, что я не вижу необходимости даже иметь в ней надпись о том, какие поля обязательны, а какие нет).

Внести указанные изменения в шапку сайта

2.2.1. Горизонтальное меню в шапке сайта

В меню присутствуют пункты «Посетителям» и «Клиентам» - содержание этих пунктов отличается только на 1 ссылку – ссылку на «отзывы наших клиентов» (http://*****/articles/62/otzyvy-nashih-klientov) – но их даже нет (иметь пусты страницы крайне не рекомендуется – это указывает на непрофессионализм компании). Так как эти 2 пункта с моей точки зрения идентичны по содержания, и по смысловому назначению (на самом деле они для одних и тех же людей созданы) – то я рекомендую объединить их в один пункт меню, а другой удалить. Наличие двух одинаковых пунктов меню приводит к замешательству и конфликту самой системы – т. е. пользователь невольно задает себе вопрос «Кто я? Посетитель или клиент?» - этого нужно избегать, в идеале у пользователя не должно возникать, а тем более оставаться вопросов после посещения вашего сайта. А с программной точки зрения иметь 2 одинаковых пункта в меню то же не выгодно – так как подпункты одинаковые, то какой пункт меню нужно выделять красным прямоугольником? (с его помощью реализовано выделение текущего пункта меню на вашем сайте). Т. е. перешли мы через пункт «Клиенты» на страницу «Способы оплаты» - почему подсвечивается пункт «Посетителям»? Это вводит нас в заблуждения – куда перешли – тот пункт и должен подсвечиваться (выделяться).

Объединить пункты «Посетителям» и «Клиентам» в горизонтальном меню

2.2.1.1. Пункты горизонтального меню

Замечено различное поведение курсора при наведении на некоторые пункты меню. Т. е. при наведении на пункты «Каталог» и «Контакты» курсор отображается в виде руки (), а при наведении на пункты «Посетителям», «Клиентам» и «Партнерам» - появляется текстовый курсор () – это неправильно – нужно сделать один вид курсора при наведении на одинаковые объекты (иначе вводит в заблуждения). Для этого можно просто создать страницы «Посетителям» и «Партнерам» и сделать ссылку на них из горизонтального меню (т. е. сейчас перейти на страницу «Посетителям» нельзя, а станет можно). Страницу «Клиентам» создавать не нужно, так как я рекомендую объединить пункт «Посетителям» и «Клиентам» (см. п. 2.2.1.)

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

2.3. Правое вертикальное меню

2.3.1. Подписка на новости

Не вижу смысла иметь блок подписки на новости в таком месте. Зачем пользователю подписываться на новости? Какие новости вы можете ему предложить? Допусти я ищу двигатель на определенный авто – какой мне интерес получать ваши новости? Мне же нужен конкретный товар, а спам на почту мне не нужен. Поэтому – настоятельно рекомендую убрать этот блок (тем более подписка уже и так есть на странице формы заказа http://*****/zakazat-zapchasti/oformit-zajavku). К тому же после того, как вы его уберете вертикальное меню поднимется и его нижние пункты станут более доступны. См. рис. 12

Мою точку зрения так же подтверждает Карта кликов (функционал счетчика Яндекс Метрика) – см. рис. 13

Как мы видим – почти никто не нажимает на кнопку «подписаться на новости», а те, кто нажал - думаю сделали это лишь потому, что это большое красное пятно на первом экране (т. е. просто привлекло внимание – нажали, поглядели, ушли).

Убрать блок подписки из правого вертикального меню

2.3.2. Пункты правого вертикального меню

Открывание подпунктов меню при наведении мыши – очень неудачное решение. Помимо того, что вы сразу же теряете аудиторию мобильных устройств (телефоны и планшеты, которых у вас довольно много – 7.8% от всей доли трафика на сайт), так как у них нет возможности «поводить мышкой» - это очень неудобно передвигаться по меню, когда на каждое движение мыши оно реагирует – то схлопывается, то выскакивает когда не нужно (это сильно раздражает). Наблюдать за мучениями людей при попытке попасть в нужный пункт меню мне помог Вебвизор (сервис счетчика Яндекс Метрика).

Как же должно выполняться взаимодействие с вертикальным меню? Очень просто – никаких действий при наведении мыши быть не должно. Первоначально все подпункты меню должны быть скрыты. При нажатии на пункт меню (к примеру «Запчасти Ауди») – происходит переход на страницу со списком запчастей для этой марки (в данном случае это http://*****/zapchasti-audi) и только теперь пункт меню раскрывается и показывает нам свои подпункты.

Как это должно выглядеть я нарисовать не могу, так как это уже видео будет – так что я вам подробно об этом расскажу по скайпу, а пока могу привести пример сайта, где есть подобное меню и все сделано правильно - http://www. *****/

Переделать модель поведения вертикального меню

2.4. Выделение текущего пункта

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

К примеру, при нахождении в разделе «Ауди» пункт «Каталог» из горизонтального меню должен подсвечиваться красным фоном – давая понять, что мы находимся в каталоге, а этого не происходит. Такой баг был замечен на большинстве страниц вашего сайта – это необходимо исправить, так как очень важно, что бы пользователь всегда чувствовал контроль над ситуацией, не терялся на сайта (т. е. всегда понимал где он и куда нужно двигаться дальше). См. рис. 14

Наладить выделение текущего пункта для горизонтального меню

2.5. Подвал сайта (футер)

В целом подвал сайта (он же футер) выполнен хорошо, в нем присутствую все необходимое. Но, не обошлось и без недостатков – к примеру, не нужно иметь на сайте 3 счетчика – ограничьтесь 1 или двумя (при этом я советую ограничиться Яндекс Метрикой и счетчиком Гугл Аналитикс, а не счетчиком liveinternet и счетчиком компании ***** – они менее функциональны). А изображение (иконки) счетчиков убрать совсем (это настраивается в функционале счетчиков).

Убрать счетчики ***** и liveinternet, а иконку Яндекс метрики спрятать

2.5.1. Телефоны в подвале сайта

В подвале сайта находятся сразу 3 номера телефона: 1-77, +7(4и +7(9По какому из них нужно звонить посетителю, если ему нужно будет задать вопрос или он выбрал деталь и хочет сделать заказ? Я думаю, что дозвониться он сможет по любому из номеров, но почему он должен метаться в сомнениях – по какому номеру ему позвонить? У посетителя не должно быть выбора, по какому номеру звонить (точнее выбор должен быть, но выбор определенного номера должен быть аргументирован).

Оставить только 1 номер телефона в подвале

2.6. Шрифт на сайте

В целом – шрифт на сайте удовлетворительный, но местами слишком мелкий. К примеру размер шрифта, которым пишутся «хлебные крошки» составляет 7px, а размер шрифта ссылок в контентной части и футере 8px –это очень мелкий шрифт. В обязательном порядке нужно увеличить размер шрифта ссылок до размера шрифта основного текста. К тому же – размер шрифта основного текста составляет всего 10px – что так же – необходимо увеличить до 12px. Размер шрифта в 10px – это неудачное решение, так как такой текст читается с трудом – даже слегка усталый человек с прекрасным зрением будет испытывать трудности в чтении шрифта размером 10px с экрана монитора.

Увеличить размер шрифтов на сайте

2.7. Отсутствую фотографии запчастей

В подавляющем большинстве случаев отсутствуют фотографии запчастей – это очень серьезный недостаток вашего сайта. Если нет изображения товара – большинство не станут покупать (я про розничных покупателей), так как не уверены, что это то, что им нужно. Я, как владелец авто – никогда не куплю ничего на таком сайта. Нет фото – нет заказа. Возможно – это правило относится не ко всем запчастям – к примеру, мне все равно как выглядит коробка передач, но как выглядит капот мне очень важно. Вот тут нет ни единой фотографии - http://*****/zapchasti-alfa-romeo - это говорит о том, что либо за сайтом никто не следит – либо он «сырой» и его выложили в сеть не успев наполнить. В любом случае – такое поголовное отсутствие фотографий говорит о том, что сайту не уделяют необходимого количества времени.

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

Наполнить сайт фотографиями запчастей

2.8. Убрать ссылку «Читать далее» на каждой странице марки авто.

На каждой странице марки автомобиля – к примеру, тут http://*****/zapchasti-mazda есть ссылка «Читать далее», которая перебрасывает нас вниз страницы к продолжению статьи, которая на самом то деле находится на странице только ради seo (т. е. пользователю этот текст вообще не нужен – он нужен только, что бы поисковая система лучше ранжировала сайт). Итак, раз пользователю текст не нужен вовсе (в большинстве случаев текст на вашем сайте сгенерирован по шаблону – есть статья, а в нее в нужные места вставляются названия марок и(или) моделей авто), то зачем ссылку иметь?

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

Удалить ссылку «Читать далее» на страницах марок автомобилей

2.9. Цены

Ни на что, кроме как на двигатели не указана цена. Цена – это то, на что ориентируется покупатель в выборе товара в первую очередь. То, что у вас на сайте нет цен – это гигантский недостаток. Нет цен – нет заказа. А там, где цены есть (в двигателях) они указаны неконкретно, т. е. к примеру есть страница конкретного двигателя http://*****/dvigatel-064.10-alfa-romeo - сколько он стоит? Я к примеру не могу сказать. Цены то даны, но на что эти цены – я даже разбираться не буду – сразу закрою сайт и пойду к конкуренту. Т. е. у вас крайне плохо настроено отображение цены товара – пользователь при всем желании – без звонка не сможет узнать цену.

Рекомендуется указывать цену сразу на карточке товара, крупным шрифтом и рядом с кнопкой «Заказать».

Как должна выглядеть ваша карточка товара я нарисовал на рис. 16

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

На каждой карточке товара указывать цену и информацию о доставке и наличию

2.10. Процедура заказа

Плохо реализована процедура заказа запчастей через сайт. На данный момент – заказать запчасть можно через форму заказа на странице http://*****/zakazat-zapchasti/oformit-zajavku - эта форма неправильна, от нее стоит отказаться. Форма крайне сложна и пугает количеством пунктов.

Как сделать проще? На самом деле очень просто – допустим, пользователь нашел нужную ему запчасть (т. е. он уже выбрал двигатель под свою конкретную модель авто). Иначе говоря – такие данные, как год выпуска, объем двигателя, модель двигателя, кпп, руль и привод он уже выбрал (т. е. эти данные должны присутствовать на карточке товара). Т. е. пользователю не нужно повторно выбирать эти данные при оформлении заказа на запчасть.

Следовательно, нажимая на кнопку «Оформить заказ» - пользователю остается ввести лишь контактные данные – Имя, Телефон и E-mail, все остальное уже должно быть заполнено за него. Можно переделать уже имеющуюся форму заказа, а можно сделать принципиально новую.

Я нарисовал, как будет выглядеть форма заказа сразу после того, как пользователь нажал на кнопку «Оформить заказ» - см. рис. 17

Код защиты от спама я рекомендую удалить – он снижает конверсию, а обойти спам можно и другими способами - через java-script или просто добавив дополнительное невидимое поле в форму. (Большинство спам программ заполнят все предоставленные поля – т. е. если заполнены все поля – значит спам, а если невидимое поле не заполнено – значит не спам.)

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

У данной формы есть один большой недостаток – заказать вторую запчасть будет проблематично, так как ее нужно будет указывать вручную (для этого у вас есть поле «* Наиминования - 2» - кстати, слово «наиминование» пишется через букву «е»).

Упростить форму заказа, согласно рекомендациям

2.11. Корзина товаров

На вашем сайте допущена серьезная ошибка – вы пытаетесь внедрить функционал интернет – магазина на сайт, в котором нет «корзины товаров». Интернет – магазин без корзины товаров немыслим. Как заказать больше 1 товара через сайт, если нет корзины?

Внедрить корзину товаров на сайт

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

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

Правда, к примеру, странно как-то устроено – выдал поиск вот эту страницу http://*****/zakazat-zapchasti/59231/mitsubisi-galant-1993-mkpp-mitsubisi-galant-galant - а где тут кнопка «Оформить заказ»? Как бы странно, что на каких-то страницах есть функционал, а на каких-то нет.

2.13. Сортировки

В сортировку вносится каждый предыдущий пункт. Т. е. я хочу сказать, что когда мы переходим допустим из каталога на страницу конкретной марки – то в сортировку вносится марка – а зачем? Это неверно – не нужно предлагать изменить предыдущий выбор в каждом новом шаге.

К примеру, на этой странице http://*****/kuzov-mitsubishi#sort-form нужно удалить блок «Сортировка по маркам :» и «Сортировка по категориям :».

Так же стоит переименовать кнопку «Сортировать» в «Поиск» или «Найти».

Убрать лишние блоки сортировок

2.14. Якоря

При перемещении по страницам каталога постоянно встречаются ссылки с якорем (#sort-form) – это неправильно и неоправданно (к примеру, http://*****/zapchasti-mitsubishi#sort-form). Используя этот якорь вы мешаете пользователю понять где он находится. Якоря обосновано применять в тех случаях, когда пользователь ожидает подобного действия – к примеру, хорошим применением якоря будет сделать навигацию по большой статье. Вообще всегда плохо, когда ментальная и концептуальная модель не совпадают. Т. е. когда пользователь ожидает одно, а получает другое – это плохо, нужно стремиться избегать таких моментов на сайте.

Убрать якоря #sort-form везде, где они встречаются

2.15. Дата публикации

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

Убрать дату публикации во всех статьях

2.16. Консультант сайта

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

Сейчас существует масса вариантов онлайн-помощников, одним из популярнейших является http://*****/. Кнопка с консультантом может располагаться к примеру в левой части сайта. См. рис. 20

Установить онлайн – консультанта сайт

2.17. Тексты сайта

Тексты на сайте находятся в плохом состоянии – практически все они сформированы автоматическим способом. (Есть шаблон, в который вы подставляете названия марок и моделей автомобилей – и якобы получается уникальный текст). На самом деле генерировать текст таким образом плохая затея – так как поисковые системы прекрасно это понимают и в большинстве случаев штрафуют за такое, да и пользователи будут не в восторге от этого.

Улучшить тексты сайта

2.18. Блок «Поделиться»

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

Инструкция по установке этого блока: http://api. *****/share/

Заменить блок социальных сетей

2.19. Цвета кнопок на сайте

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

Приведу вымышленный пример – допустим, у перед нами на столе лежит 7 леденцов, 6 из них желтые (со вкусом лимона), а 1 красный (со вкусом вишни допустим) – какой леденец вас больше заинтересует? С большей вероятностью вы выберете красный, так как он отличается от всех остальных (ну и красный цвет сам по себе сильно привлекает внимание). Рассмотрим другой вымышленный пример – перед нами на столе опят 7 леденцов, но все 7 красных, но они немного различаются по форме, какой вы выберете? Вы посмотрите на них все, подумаете, поразмышляете какой взять, они же по сути все одинаковые, но, в конечном счете, возьмете какой-то наверно.

Смысл этих примеров в том, что если вы хотите, что бы пользователь совершил какое-то активное действие (к примеру, нажал на кнопку «Оформить заказ») – то это должно быть явно выражено и другие кнопки не должны быть на нее похожи. Кнопка, которую должен нажать пользователь должна отличаться от других и по цвету и по форме, должна быть более привлекательна. А у вас сейчас все кнопки одинаковые, различаются немного по размеру. Пользователь ставиться в замешательство, так как при беглом взгляде – они равноценны.

Рекомендую изменить внешний вид (цвета хватит) всех кнопок, не отвечающих за заказ продукции. К примеру кнопка «Найти» в шапке сайта может быть серого цвета, она все еще будет заметной, но не будет отвлекать от главной кнопки – «Оформить заказ». См. рис. 24

Изменить внешний вид кнопок, не отвечающий за заказ продукции

3. Корректировки главной страницы сайта

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

Что лишнее на главной странице: блок «Новые заявки», блок «Статьи», раскрывающийся блок деталей, блок «Обновления». Почему это все лишнее? Потому, что это все не нужно вашей целевой аудитории, все это никак не связано с целями пользователя, пришедшего на сайт. Зачем пользователю знать о ваших поступлениях чего-то там, если ему нужна его конкретная деталь? Или зачем ему статьи на главной, когда просто нужно заказать двигатель?

Я рекомендую сразу разместить список марок авто, такой список, который присутствует у вас в разделе «Каталог». Это логично, потому, что поиск запчастей начинается именно с выбора марки авто, затем модели авто и т. д. Т. е. сейчас ваша главная страница практически бесполезна и несет минимум функциональной нагрузки, хотя является самой популярной точкой входа (по данным счетчика Яндекс Метрика 10,6% от общего числа посетителей заходят на ваш сайта через главную страницу – а она им ничем не помогает, она «не продумана». Главная страница должна направлять пользователя по нужному маршруту, а быть сборником сервисов, которым не нашлось места на других страницах.

Это не только мое мнение или догадки, об этом яро кричит карта ссылок. Самый частый клик с главной страницы происходит в раздел «Каталог». Почему? Потому, что на главной странице пользователь не находит нужную информацию и пытается найти ее хотя бы в каталоге. См. рис. 22

Так же, изучив вашу тематику я стал абсолютно уверен в правоте своей мысли – многие ваши конкуренты (как прямы, так и косвенные) размещают каталог на главную страницу.

Я нарисовал, как примерно должна выглядеть главная страница в вашем случае – см. рис. 23

Рекомендую заместо бесполезных блоков статей и последних поступлений указать информацию о доставке, наличии и (или) сделать блок «Наши преимущества».

Так же в метатеге title главной страницы допущена опечатка: «Контрактные двигатели, запчасти б/у и новые для иномарок. Купить мотор б/у, мупп б/у, акпп б/у и многое другое» (стоит наверное написать «мкпп).

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

4. Корректировки отдельных страниц сайта

4.1. Страница контактов (http://*****/contacts)

В целом страница контактов оформлена нормально, но замечания все, же есть.

Однозначно стоит убрать надпись «ПО ВОПРОСАМ НАЛИЧИЯ, ЗАКАЗА АВТОЗАПЧАСТЕЙ, ЗА КОНСУЛЬТАЦИЕЙ ОБРАЩАЙТЕСЬ ПО
ТЕЛЕФОНУ ИЛИ ЭЛЕКТРОННОЙ ПОЧТЕ» а так же GPS координаты. Надпись стоит убрать потому, что пользователи в состоянии догадаться, что если возникнет вопрос – можно позвонить или написать на почту, а координаты GPS на мой взгляд бесполезная информация, которой никто пользоваться не станет и она только занимает место. На рис. 25 я выделил то, что стоит убрать со страницы контактов.

Так же присутствует такой недостаток, как чрезмерное количество телефонов. Это приводит к тому, что у пользователя появляется вопрос – «а по какому номеру мне позвонить?» Я рекомендую сделать многоканальный номер – это избавит от необходимости выбора номера телефона.

Убрать со страницы контактов подзаголовок, координаты GPS, а так же приобрести многоканальный номер телефона

Так же будет полезно разместить на страницы контактов ваш ИНН, КПП и другие официальные данные, так как это увеличивает доверие к компании в целом.

Адрес электронной почты

Если у вас есть группы в социальных сетях – можно разместить ссылки и на них.

4.2. Страница каталога (http://*****/katalog-zapchastej)

Лучше убрать список запчастей, находящийся под списком автомобильных марок, так как он не отвечает никаким вашим целям. Руководствуясь здравым смыслом и подкрепляя его картой кликов за 1 год – можно сделать вывод, что этот список никому не нужен. См. рис.26

(за целый год по верхним изображениям кликнули по 1-2 раза, по нижним кликов не было совсем)

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

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

Исправить иерархию автомобильных марок в каталоге (столбцы, а не строки)

5. Мобильная версия сайта

Как я уже говорил – 8.36% посетителей вашего сайта заходят на него через мобильные устройства (смартфоны и планшеты) – это довольно много (см. рис. 27). С учетом того, что сайт не оптимизирован под мобильных пользователей – имеем огромный процент отказа 47,4% и низкую глубину просмотра – 1.9 страницы на человека за сессию. Исходя из этих данных можно сделать вывод, что сайт просто теряет 8.36% трафика, а платите то вы за все 100%!

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

Для примера приведу сайт http:///robot/ - попробуйте сужать и растягивать экран монитора (разрешение уменьшайте и увеличивайте) – вы должны заметить, что верстка сайта, а так же сами объекты и их расположение меняется. Теперь попробуйте зайти на этот сайт с телефона – она опять же прекрасно воспринимается. А все потому, что верстка адаптивна к разрешению монитора.

Сделать мобильную версию сайта или адаптивную верстку

6. Общий список всех рекомендаций

Выделение пункта меню отображается по разному в зависимости от браузера
Наладить отображение сайта при отключенной графике
Использовать в сниппетах все доступные возможности для выделения
Настроить обработку 404 ошибки
Создать карту сайта
Переделать логотип сайта
Внести указанные изменения в шапку сайта
Объединить пункты «Посетителям» и «Клиентам» в горизонтальном меню
Привести курсор при наведении на пункты горизонтального меню к единому отображению
Убрать блок подписки из правого вертикального меню
Переделать модель поведения вертикального меню
Наладить выделение текущего пункта для горизонтального меню
Убрать счетчики ***** и liveinternet, а иконку Яндекс метрики спрятать
Оставить только 1 номер телефона в подвале
Увеличить размер шрифтов на сайте
Наполнить сайт фотографиями запчастей
Удалить ссылку «Читать далее» на страницах марок автомобилей
На каждой карточке товара указывать цену и информацию о доставке и наличию
Упростить форму заказа, согласно рекомендациям
Внедрить корзину товаров на сайт
Убрать лишние блоки сортировок
Убрать якоря #sort-form везде, где они встречаются
Убрать дату публикации во всех статьях
Установить онлайн – консультанта сайт
Улучшить тексты сайта
Заменить блок социальных сетей
Изменить внешний вид кнопок, не отвечающий за заказ продукции
Поместить каталог марок автомобилей сразу на главную страницу и убрать/заменить другие рассмотренные блоки
Убрать со страницы контактов подзаголовок, координаты GPS, а так же приобрести многоканальный номер телефона
Убрать со страницы каталога список запчастей, который находится под списком марок автомобилей
Исправить иерархию автомобильных марок в каталоге (столбцы, а не строки)
Сделать мобильную версию сайта или адаптивную верстку

Аудит юзабилити, seo-аудит и продвижение сайтов

E-mail: *****@***ru

ICQ:

Skype: itimowin

Аудит юзабилити сайта

Оглавление

План аудита

От себя

1. Техническое тестирование

2. Корректировки общего макета

3. Корректировки главной страницы сайта

4. Корректировки отдельных страниц сайта

5. Мобильная версия сайта

6. Общий список всех рекомендаций

Домашний очаг

Справочная информация

Техника

Общество

Образование и наука

Мир

Бизнес и финансы