http://www. *****

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

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

ICQ:

Skype: itimowin

План аудита

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

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

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

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

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

От себя

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

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

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

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

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

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

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

1.2. Кроссбраузерность

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

Положение изображения купона в верхней части сайта меняется в зависимости от браузера. В Mozilla Firefox 18.0.1 и Google Chrome 24.0.1312.57 m изображении отцентровано, а в браузере Internet Explorer 8 оно выровнено по правому краю. Это нужно исправить – нужно задать одинаковое отображение в разных браузерах (в данном случае предпочтительно по центру).

Выровнять по центру изображение купона во всех основных браузерах

Так же было замечено небольшое «плавание» правого меню в зависимости от браузера – см. рис. 2.

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

Зафиксировать левое меню всех основных браузерах

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

Сайт некорректно отображается в большинстве разрешений монитора. Причина этому – плохо сверстанный шаблон сайта. Шаблон первоначально задумывался как «резиновый», но при изменении разрешения сайт отображается некорректно и большинство элементов видоизменяются.

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

Я рекомендую переверстать шаблон и остановиться на фиксированной верстке (рекомендую 1024px).

Сделать шаблон фиксированным

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

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

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

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

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

1.5. Работа с отключением JavaScript

При отключении ява скриптов верстка сайта полностью сохраняется – это хорошо.

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

Метатеги на сайте прописаны правильно и отражают суть страниц – это прекрасно.

1.7. 404 страница

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

1.8. Карта сайта

На сайте присутствует карта сайта в формате html - это хорошо, так у потерявшегося посетителя будет больше шансов найти то, что он искал на вашем сайте.

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

2.1. Логотип компании

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

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

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

Заказать новый логотип компании

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

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

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

Итак: 96% посетителей сайта (согласно данным Яндекс. Метрика) имеют высоту экрана 1024px. С учетом того, что из этих 1024px используется максимум 900px из-за наличия баров и «закладок». В итоге получается: 900px — 470px = 430px. Т. е. на первом экране посетителю остается лишь 430px для изучения контентной информации текущей страницы, что ничтожно мало. Это заставляет посетителя пролистывать экран вниз, что бы открыть «побольше информации», так как 423px не могут дать посетителю представление о том, что находится на странице.

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

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

Из рисунков 5 и 6 наглядно видно, что даже при стандартно мониторе 1280*1024 пикселя пользователю доступна лишь мала часть информации, которой недостаточно и приходится пролистывать к низу страницы, что бы получить необходимую информацию, а это лишнее действие, которого так просто избежать – если правильно сделать шапку сайта (рекомендую не больше 220 пикселей делать высоту).

А обратившись к рисунку 6 можно заметить, что кроме хлебных крошек на первом экране не представлено вообще ничего.

Переделать шапку сайта, основываясь на высоте в 220 пикселей

2.2.1. Контакты в шапке сайта

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

Внести в шапку часы работы и больше контактной информации

2.2.2. Изображение купона в шапке сайта

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

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

2.3. Повторяющееся изображение в правой части сайта

Рекомендую убрать из правой части сайта вертикальное повторяющееся изображение деревянной стены (или двери, но кто знает?). Во первый — совсем не очевидно что это, а это значит у посетителя останется неразрешенный вопрос при посещении вашего сайта. Этого нельзя допускать — все, что видит посетитель на сайте должно быть ясно и понятно ему, он не должен задавать вопросов «а что это?», «а как этим пользоваться?», «а это кнопка?»... Во вторых — убрав эту деревянную вставку мы сможем отцентрировать сайт, что будет более удобно для его восприятия. См. рис. 9.

Убрать повторяющееся изображение из правой части сайта

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

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

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

Я предлагаю сделать вертикальное меню, как на рисунке 9

Поменять структуру вертикального меню и перенести его в правую часть сайта

2.4.1. Убрать ссылку на витражи

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

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

Убрать ссылку из вертикального меню на сайт о витражах

2.5. Изображение в шапке сайта

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

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

Заменить статическое изображение в шапке на слайдер

2.6. Блок услуг

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

Я придумал 2 вида этого блока.

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

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

Подобное решение вы можете наблюдать на портале ***** - http://news. *****/politics//?frommail=1 или прямо в поисковой выдаче Яндекса - http://images. *****/yandsearch? text=%D1%88%D0%BA%D0%B0%D1%84%D1%8B-%D0%BA%D1%83%D0%BF%D0%B5

Установить блок услуг

2.7. Кнопка «Хочу такой»

Рекомендую установить кнопку «Хочу такой», как на сайте мебельной фабрики Роникон - http://www. *****/shkaf-kupe-lyuks/ это очень полезная и важная кнопка для вашей тематики. Рекомендую устанавливать ее вблизи фотографий конкретных шкафов-купе. См. рис. 12 и рис. 13

На рисунке 13 отображена уже форма заказ шкафа-купе после нажатия на кнопку «хочу такой».

Установить кнопку «Хочу такой»

2.8. Просмотр фотографий

На сайте очень неудачно реализован просмотр фотографий. Нужно реализовать возможность комфортного просмотра через lightbox с функцией перемещения от фотографии к фотографии. К примеру можно воспользоваться вот этим решением http:///projects/lightbox2/

Наладить качественный просмотр фотографий

2.9. Оформление текста

На данный момент шрифт имеет высоту 12 пикселей что нормально (не советую делать меньше 12 пикселей, так как такой текст сложно читать) и цвет #666666 (RGB). Цвет шрифта достаточно контрастный к фону – можно оставить.

Сменить цвет основного текст на черный

2.10. Оформление ссылок

Ссылки оформлены отлично, замечаний нет.

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

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

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

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

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

4.1. Страница «Контакты» (http://www. *****/page/contacts. html) и «О нас» (http://www. *****/page/o-nas. html)

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

На странице контактов так же рекомендуется размещать фотографии фасада здания вашей компании – это поможет посетителю быстрее найти вас в случае, если он решит приехать к вам, а так же это дает возможность добавить фото в справочник Яндекса (http://adv. *****/replies. xml? item_no=906)

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

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

Выровнять по центру изображение купона во всех основных браузерах

Зафиксировать левое меню всех основных браузерах

Сделать шаблон фиксированным

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

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

Заказать новый логотип компании

Переделать шапку сайта, основываясь на высоте в 220 пикселей

Внести в шапку часы работы и больше контактной информации

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

Убрать повторяющееся изображение из правой части сайта

Поменять структуру вертикального меню и перенести его в правую часть сайта

Убрать ссылку из вертикального меню на сайт о витражах

Заменить статическое изображение в шапке на слайдер

Установить блок услуг

Установить кнопку «Хочу такой»

Наладить качественный просмотр фотографий

Сменить цвет основного текст на черный

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

Добавить разбиение шкафов-купе по помещениям, но и конкретные типовые решения

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

Оглавление

План аудита

От себя

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

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

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

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

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

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

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

Техника

Общество

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

Мир

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