Аудит сайта компании по производству и продаже серверного оборудования

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

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

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

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

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

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

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

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

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

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

Также отсутствует какая либо расшифровка аббревиатуры «ЦМО». Надпись «С нами надежно» является общей фразой, по которой также невозможно понять, чем занимается компания.

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

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

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

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

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

Большое количество ссылок на сайте оформлены как обычный текст. Это отрицательно сказывается на юзабилити. Ниже приведен ряд скриншотов таких элементов:

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

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

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

К сожалению, в данный момент, такого функционала не предусмотрено. Невозможно понять, в каком разделе сайта находится пользователь в конкретный момент времени. Это показано на видео по ссылке https://yadi.sk/i/ZBoBRrOx3AHhky.

Аналогичная проблема и с разделами нижнего меню сайта. Видео по ссылке https://yadi.sk/i/QdwFjse53AHySX.

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

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

Рекомендуем убрать из верхнего меню ссылку «Главная».

При переходе по разделам каталога в главном меню также не подсвечивается соответствующая ссылка. Видео https://yadi.sk/i/EFhIFQnw3AJ46d.

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

Вспомогательная навигация по сайту

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

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

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

На странице «Каталог» в цепочке выводится ссылка на эту же страницу, хотя она должна быть обычным текстом:

Аналогичная проблема наблюдается и при переходе по подразделам каталога. Видео показано по ссылке https://yadi.sk/i/Vtm8-7E03AREbB. Отдельно стоит отметить, что на части страниц каталога навигационная цепочка и название товара вообще не выводится.

Данный модуль некорректно работает при просмотре товаров в каталоге. Видео показано по ссылке https://yadi.sk/i/OyBhFUsD3ARCwK.

Непонятно, что обозначает данный текст в цепочке на странице новостей:

На странице «Контакты» ее название не выводится в блоке вспомогательной навигации:

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

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

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

На главной странице должна быть представлены следующие ключевые блоки:

• Краткая информация о компании, опыте работы, объеме товаров в каталоге;
• Конкурентные преимущества компании;
• Информация о главных направлениях деятельности, предлагаемых товарах и услугах;
• Анонсы актуальных новостей;
• Основная контактная информация.

К сожалению, в данный момент эти требования не выполнены. Ниже приведен подробный список выявленных проблем и рекомендаций по их устранению.

Разный верхний и нижний отступ в шапке страницы:

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

Не согласовано взаимное расположение текста в логотипе и главном меню:

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

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

Отдельно стоит отметить, что при выборе языковой версии сайта не происходит переключения и перевода контента на соответствующий язык. Везде выводится один и тот же текст на русском языке. Фактически, данный блок не представляет для пользователя никакой практической пользы. Видео показано по ссылке https://yadi.sk/i/En985kO53ARpJ4.

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

Центральную верхнюю часть страницы занимает блок с прокруткой изображений. Но в нем представлено всего три баннера. При этом на обоих обрезан текст и изображение справа. Видео показано по ссылке https://yadi.sk/i/mUiGJegs3ASJ3U.

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

Отдельно стоит отметить, что смена изображений происходит без какой-либо анимации. Это не соответствует современным тенденциям и требованиям к дизайну. Видео показано по ссылке https://yadi.sk/i/Gabk7RP83AcivH.

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

Основное пространство страницы используется неэффективно. Справа находится большая пустая зона, не содержащая никакой полезной информации. Полный скриншот показан по ссылке https://yadi.sk/i/Ysx8hKSP3ASLuz.

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

Для вывода совершенно разной информации (ленты новостей, новинок каталога, статей) используются одинаковые блоки с фото и поясняющим текстом. Это отрицательно сказывается на юзабилити. Видео показано по ссылке https://yadi.sk/i/Ul56ntML3ASPuh.

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

Не согласованы размеры элементов страницы и отступы между ними:

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

Каталог продукции

Кнопка перехода не реагирует на наведение курсора. Видео показано по ссылке https://yadi.sk/i/8K04B_Pk3AcnJ7.

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

Текст в блоках не отцентрирован по вертикали. Из-за этого в некоторых категориях появляется слишком большой нижний отступ и дизайн выглядит неаккуратно:

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

Кнопки в фильтре подбора товара по параметрам не реагируют на наведение курсора.

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

В данный момент недостаточно проработан дизайн фильтров. Для примера рассмотрим фильтр подбора по параметрам на странице http://www.cmo.ru/catalog/otkrytye_telekommunikatsionnye_stoyki/odnoramnye_stoyki_stk/:

Не согласовано положение вертикальных границ элементов.

Не согласовано положение горизонтальных границ элементов:

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

Не указана валюта:

При переключении языковых версий также не выводится наименование валюты. Это показано на видео по ссылке https://yadi.sk/i/_QjHNb3c3AdPNH.

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

Название категории каталога выводится после блока с фильтрами. Это приводит к тому, что на некоторых страницах заголовок расположен практически в середине экрана. Например, по ссылке https://yadi.sk/d/_S609kjM3AdSen представлен скриншот страницы http://www.cmo.ru/catalog/nastennye_telekommunikatsionnye_shkafy/razbornye_shkafy_shrn_e/.

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

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

Отсутствует возможность настройки количества товаров, выводимых на одной странице. Это приводит к тому, что страницы каталога имеют очень большую высоту и с ними сложно работать. Для примера по ссылке https://yadi.sk/d/-kQSRhvQ3AdZKi показан полный скриншот страницы http://www.cmo.ru/catalog/napolnye_telekommunikatsionnye_shkafy/universalnye_shkafy_shtk_m/.

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

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

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

Страница детального просмотра товара

Для большого количества товаров в каталоге на странице детального просмотра не выводится название. Например, http://www.cmo.ru/catalog/napolnye_telekommunikatsionnye_shkafy/universalnye_shkafy_shtk_m/shkaf_telekommunikatsionnyy_napolnyy_18u_600x600_dver_steklo/:

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

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

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

На странице размещено достаточно большое количество текстовой информации с описанием предлагаемого товара. Но при этом наиболее важная для пользователя информация – цена и технические параметры – размещены в нижней части и не видны без использования вертикальной прокрутки страницы. Это отрицательно сказывается на юзабилити и конверсии. Для примера по ссылке https://yadi.sk/i/YuOC8oYW3AdrQA показан скриншот одной из таких страниц.

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

Общепринятым является размещение иконки слева от текста, а не справа:

В данный момент ссылкой является только иконка. При нажатии на текст перехода не происходит. Это отрицательно сказывается на юзабилити. Видео показано по ссылке https://yadi.sk/i/GCxWRtP33Aduxw

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

Для части товаров, представленных в каталоге, не указана цена. Это отрицательно сказывается на конверсии. Для примера по ссылке показан скриншот такой страницы https://yadi.sk/i/lhJLNRJ63AdwAu.

Отдельно стоит отметить, что в данный момент на странице детального просмотра отсутствует:

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

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

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

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

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

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

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

При вводе поискового запроса появляется выпадающий список с быстрыми подсказками. Но он полностью перекрывает строку ввода и пользователю не видно, какой запрос он набирает. Аналогичная проблема возникает и при попытке редактирования запроса. Видео показано по ссылке https://yadi.sk/i/as6LCbNF3AeHCi.

Слева блока с подсказками расположено пустое белое поле:

Слишком большой отступ между строками:

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

Вызывает сомнения принцип формирования результатов поиска. Например, по запросу «Шкаф», первую страницу занимают ссылки на новости. Видео показано по ссылке https://yadi.sk/i/u61U-uwq3AeNYf.

Аналогичная ситуация и при поиске по запросу «стойка». Видео показано по ссылке https://yadi.sk/i/6GXKAH1Z3AeQcj.

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

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

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

Не согласована высота элементов:

Непонятно, что обозначает пункт «Каталог товаров 1С»:

Непонятно, это ссылки или текст:

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

Страница «Прайс-лист»

http://www.cmo.ru/price/

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

Рекомендуем:

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

Страница «О компании»

http://www.cmo.ru/about/

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

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

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

http://www.cmo.ru/contacts/

Не выводится название страницы в блоке вспомогательной навигации:

Не совсем удачно выполнена компоновка страницы. Информация размещена только в левой колонке, правая часть страницы пустая. Полный скриншот страницы показан по ссылке https://yadi.sk/i/-4_UkyXn3BB3WE.

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

Страница авторизации

http://www.cmo.ru/auth/

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

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

Обязательные поля отмечены звездочкой. Но информация о необходимости их заполнения размещена в самом низу страницы и не видна на экране без использования прокрутки. Это отрицательно сказывается на юзабилити. Видео показано по ссылке https://yadi.sk/i/NdF1N9453BB7ek.

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

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

Непонятно, это ссылка или текст:

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

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

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

Страница «Рекламация ЦМО»

http://cmo.ru/forms/

Не выводится название страницы в навигационной цепочке.

Согласно правилам, текст в элементах списка должен начинаться с маленькой буквы:

Часть полей помечена звездочками. При этом информация об обязательности их заполнения размещена в нижней части страницы и не видна без использования прокрутки. Видео показано по ссылке https://yadi.sk/i/5xeH2igy3BBEvj.

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

Дизайн формы не проработан:

1. Ширина полей не учитывает количества вводимых данных.
2. Поля размещены по одному в строке. Из-за этого форма имеет избыточную высоту.
3. Поля с одинаковыми данными (например, адрес электронной почты клиента и адрес почты менеджера) имеют разную ширину.

Полный скриншот страницы с комментариями показан по ссылке https://yadi.sk/i/-HsxfkLu3BC65j.

Кнопки не реагируют на наведение курсора. Непонятно, почему кнопка отправки рекламации называется «Сохранить».

При попытке отправки неверно заполненной формы страница перегружается и сообщения об ошибках выводятся вверху страницы, а не рядом с соответствующими полями. Видео показано по ссылке https://yadi.sk/i/IMA-eKau3BC8xn.

Страница «Новости»

http://cmo.ru/news/

В ленте опубликованы неактуальные новости за 2008-2014 года. Они не представляют особой ценности для большинства пользователей сайта.

Одинаково оформлены ссылки и текст.

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

На странице детального просмотра новости отсутствует заголовок.

Рекомендуем добавить вывод заголовка.

Возможность просмотра увеличенных фото, размещенных в тексте новостей, в данный момент отсутствует. Это отрицательно сказывается на юзабилити. Видео показано по ссылке https://yadi.sk/i/Kqn9_lrE3BJCeS.

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

Отображения сайта на мобильных устройствах и планшетах

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

Далее рассмотрим, насколько выполнены эти требования в данный момент.

Логотип в мобильной версии слишком маленького размера. Практически невозможно прочитать подпись «С нами надежно»:

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

Важные для пользователя разделы «Прайс-лист» и «Где купить» не видны при загрузке страницы и находятся в открывающемся меню.

Видео показано по ссылке https://yadi.sk/i/1jw1Mayr3BCSir.

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

При этом второстепенная ссылка «Вход» занимает центральную часть экрана.

При выборе языковой версии сайта смена языка контента не происходит. Видео показано по ссылке https://yadi.sk/i/rnOZFeJV3BCUtt.

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

На странице «О ЦМО» используется видеоплеер некорректного размера. Текст на превью видео обрезан. При начале воспроизведения появляются большие черные поля сверху и снизу. Видео показано по ссылке https://yadi.sk/i/KVfzX8Yr3BCZ4q.

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

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

Текущий раздел сайта не выделяется в меню. Невозможно понять, где находится пользователь в конкретный момент времени. Видео показано по ссылке https://yadi.sk/i/WPiGcbUC3BCcQW.

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

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

На главной странице каталога сверху размещено большое пустое поле.

Нет фото для иллюстрации категории каталога. Непонятно, где ссылки, а где текст.

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

Функционал открытия и закрытия данных блоков некорректно работает на мобильных устройствах:

Слишком большие вертикальные отступы между элементами страницы:

При загрузке страницы каталога в верхней части выводится фильтр подбора по параметрам. Но с ним достаточно сложно работать на экране мобильного устройства. Чтобы найти ленту товаров необходимо прокрутить страницу вниз. Видео показано по ссылке https://yadi.sk/i/5wIdWFK63BGxm3.

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

Рекомендуем добавить фото товаров.

Нет выбора количества выводимых в ленте товаров. Из-за этого некоторые подстраницы каталога имеют очень большую высоту. Для примера на видео показана одна из таких страниц каталога https://yadi.sk/i/ZwHYCXh13BH3Sz.

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

На странице детального просмотра выбранного товара есть одно фото. При нажатии не него открывается скрипт просмотра увеличенного изображения. Текстовая подпись под фото не помещается в экран и текст обрезан. Видео показано по ссылке https://yadi.sk/i/DVwbb-HL3BH5cN.

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

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

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

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

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

В блоке «Руководство по сборке» нет возможности просмотреть увеличенное изображение. Это отрицательно сказывается на юзабилити. Видео показано по ссылке https://yadi.sk/i/xqqr3pZ83BHCwA.

На странице детального просмотра выбранного элемента каталога нет блока с нижним меню, который присутствует на других страницах сайта. Видео показано по ссылке https://yadi.sk/i/ydrU3gHL3BHtX6.

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

На странице «Прайс-лист» над названием выводятся текстовые надписи, которые могут быть непонятными для большинства пользователей. Это создает визуальный шум и отрицательно сказывается на юзабилити.

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

Страница с прайс-листом имеет избыточную высоту. Возможность быстрого перехода в нужную категорию или подкатегорию отстутствует. Пользователю крайне сложно найти необходимый товар в таком большом списке. Видео показано по ссылке https://yadi.sk/i/kZw7mj0y3BJ37i.

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

На странице «Новости» не совсем понятно, по какому принципу выводится список с указанием года.

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

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

Далее рассмотрим отображение страницы «Где купить».

Интерактивная карта размещена в верхней части страницы, а блок с выбором региона – в нижней. Это отрицательно сказывается на юзабилити сайта. Видео показано по ссылке https://yadi.sk/i/1lmjYiQI3BJLBX.

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

Текст не помещается в поле ввода.

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

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