Аудит юзабилити и SEO интернет-магазина посуды и оборудования для ресторанов

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

Дата аудита: март 2017 года

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

 

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

 

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

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

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

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

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

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

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

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

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

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

Анализ логотипа компании

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

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

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

Ошибки в юзабилити сайта

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

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

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

Разное расстояние между буквами

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

Ошибки в дизайне логотипа

Не согласовано положение элементов букв относительно общей оси:

Ошибки в дизайне логотипа

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

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

Аудит текстов сайта

Аудит текстов сайта

Аудит текстов сайта

Аудит текстов сайта

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

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

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

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

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

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

Ниже представлены скриншоты таких ссылок, размещенных на различных страницах сайта:

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

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

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

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

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

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

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

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

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

Не обозначены выпадающие меню

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

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

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

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

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

Ошибки в меню сайта

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

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

В нижнем меню также не выделяется текущий раздел сайта:

Не выделяется текущий раздел сайта

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

При нажатии на ссылку «Статьи» запрашиваемая страница не открывается и выводится сообщение об ошибке. Видео показано по ссылке https://yadi.sk/i/cCdisG6B3GXkyd

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

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

Ошибки в юзабилити сайта

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

Ссылки оформлены как обычный текст:

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

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

Непонятно, почему при нажатии на ссылку «Информация для покупателей» открывается главная страница сайта. Видео показано по ссылке https://yadi.sk/i/a1CBwb313GYNTt

Ошибки в работе навигации

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

Невозможно понять, где ссылки, а где текст:

Ошибки в хлебных крошках

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

При переходе по подстраницам каталога постоянно меняется название категорий верхнего уровня. Они не соответствуют пути пользователя по сайту. На видео показан пример https://yadi.sk/i/5nC3PmC23GYNto

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

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

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

Основное пространство главной страницы экрана занимает блок с прокруткой баннеров.

Ошибки в компоновке главной страницы

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

Анализ карты кликов

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

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

Недостаточная контрастность элементов

Недостаточная контрастность элементов

Недостаточная контрастность элементов

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

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

Ссылки не реагируют на курсор

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

Ошибки в модулях страницы

Рекомендуем добавить в данный блок прокрутку и сделать заголовок ссылкой на страницу http://merx-chef.ru/specials/.

Нет четкой иерархии и визуальной связи названий категорий и товаров из категорий.

Текущая визуальная иерархия показана на скриншоте по ссылке https://yadi.sk/i/cBIGGiBY3GYU3J, рекомендуемая – по ссылке https://yadi.sk/i/vtzzQC_n3GYUHT.

В нижней части главной страницы расположен блок с логотипами компаний-производителей.

Ошибки в компоновке элементов

Но все ссылки ведут на страницы с циклической переадресацией. Это приводит к выводу сообщения об ошибках. Видео https://yadi.sk/i/AqvqAvBB3GYVkW

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

Стрелочка смещена относительно круглой фоновой плашки:

Ошибки в компоновке элементов

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

Разные отступы

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

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

Каталог товаров

Далее рассмотрим юзабилити работы каталога товаров.

При нажатии на ссылку «Категории» в меню не происходит переход на главную страницу каталога. Видео показано по ссылке https://yadi.sk/i/e59Yh-Z13GYbQG.

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

Ошибки в выводе цен

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

Стрелочка под артикулом может вводить пользователя в заблуждение.

Ошибки в юзабилити

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

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

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

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

Юзабилити фильтра товаров

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

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

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

Вертикальная прокрутка в фильтрах товаров

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

Заголовки блоков фильтров также прокручиваются вместе с контентом. Из-за этого невозможно понять, где какой параметр. Видео показано по ссылке https://yadi.sk/i/9ufMBTCv3GapYx.

Юзабилити фильтра товаров

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

Юзабилити модуля подбора по цене

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

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

Юзабилити модуля сортировки

Дизайн выпадающих списков не проработан:

Ошибки в юзабилити списков

Не проработан дизайн и положение всплывающего блока с характеристиками товара:

Ошикби в юзабилити

Ошикби в юзабилити

Для некоторых товаров выводится некорректное описание технических характеристик:

Ошибки в характеристиках товара

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

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

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

Аудит юзабилити каталога товаров

Аудит юзабилити каталога товаров

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

Непонятно, почему заголовок «Технические характеристики» разнесен на две строки с разным оформлением текста:

Ошибки в оформлении заголовков

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

Аудит текстов сайта

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

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

Адрес почты

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

Тестовое описание товара занимает 50% ширины колонки. В результате пространство экрана используется неэффективно и увеличивается общая высота страницы. Полный скриншот показан по ссылке https://yadi.sk/d/bOBGC_-X3Gazkd. На других страницах текст занимает всю ширину колонки.

Некоторые товары в каталоге размещены без указания каких-либо характеристик и параметров. Это отрицательно сказывается на юзабилити:

Нет характеристик товара

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

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

Только одно фото товара

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

Для некоторых товаров нет фото. Из-за этого дизайн страницы разваливается. Например, http://merx-chef.ru/barnoe-oborudovanie/kofemashiny/kofevarka-animo-cb-2h10w.html :

Нет фотографий для товаров

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

Корзина и оформление покупки

Далее рассмотрим процесс покупки, работу корзины и оформление заказа.

Не выводится информация о количестве экземпляров товара в корзине. Видео показано по ссылке https://yadi.sk/i/37GCUKss3Gb7Gw

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

В мини-корзине только текст является ссылкой для открытия блока с информацией о товарах. При этом он не реагирует на наведение курсора.

Юзабилити мини-корзины

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

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

Аудит юзабилити корзины

Рекомендуем выводить кнопки «Корзина» и «Оформление заказа» прямо в блоке миникорзины.

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

Дублирование стоимости заказа

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

Ссылка оформлена как текст

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

Далее рассмотрим работу корзины.

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

Не видна общая сумма покупки

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

Избыточным является вывод цены с точностью до копейки. Это создает визуальный шум:

Вывод цен с точностью до копейки

Вывод цен с точностью до копейки

После нажатия по данным ссылкам заголовки блоков исчезают. Видео показано по ссылке https://yadi.sk/i/J2efT-ID3GbCj3

Ошибки в юзабилити корзины

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

Непонятно, для чего сделаны отдельные блоки и поля ввода для купонов и подарочных сертификатов. По сути, это одно и то же.

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

Избыточная ширина полей

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

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

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

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

Дублирование суммы заказа

На странице оформления заказа исчезает заголовок блока. Видео показано по ссылке https://yadi.sk/i/chb7eKRf3GbDs6

Ошибки в юзабилити корзины

Избыточная ширина элементов формы регистрации нового пользователя:

Ошибки в компоновке макета корзины

Сообщения об ошибках в заполнении форм выводятся белым шрифтом на белом фоне и не видны пользователям. Видео показано по ссылке https://yadi.sk/i/KpbqCg9n3GbHZP

Нет проверки правильности ввода данных в процессе заполнения формы. Удалось успешно оформить заказ с некорректными данными. Видео показано по ссылке https://yadi.sk/i/SR-mHOMj3GbJ4g

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

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

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

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

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

Для примера, введем в поиск запрос «салатбар» без тире. Результат:

Ошибки в модуле поиска

Если в поиск ввести прямой запрос «салат-бар», но с пробелом перед первым символом, результат будет некорректным. Видео показано по ссылке https://yadi.sk/i/udOoZF6I3GbLHw

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

При вводе запроса появляются графически подсказки с товарами из каталога. Но они не соответствуют запросу. Пример показан по ссылке https://yadi.sk/i/INFqNSLB3GbLmP

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

Контактная информация

В нижнем меню сайта есть ссылка на страницу «О компании».

Анализ юзабилити меню

При нажатии на нее запрашиваемая страница не открывается и выводится сообщение об ошибке. Видео показано по ссылке https://yadi.sk/i/loL2YKMK3GVok4

Сообщение об ошибке

На сайте с доменным именем http://merx-chef.ru размещены почтовые ящики, привязанные к домену merxteam.ru

Ошибки в адресах email

Ошибки в адресах email

Рекомендуем использовать email адреса, привязанные к доменному имени merx-chef.ru

В нижней части сайта ссылка на адрес электронной почты отсутствует:

Нет ссылки на почту

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

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

Пустой блок на странице

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

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

В форме явно не указано, какие поля являются обязательными для заполнения. Об этом можно узнать только после неудачной попытки отправки. При этом текст сообщений об ошибках выполнен белым на белом фоне и не виден пользователю. Это является грубой ошибкой в работе интерфейса. Видео показано по ссылке https://yadi.sk/i/s-B8S1gb3GVrFL

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

Используется избыточная ширина поля ввода кода с картинки:

Избыточная ширина поля ввода

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

Далее рассмотрим вопросы поисковой оптимизации сайта.

Общие вопросы

В данный момент на сайте отсутствует служебный файл robots.txt

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

Нет файла robots.txt

По данным Яндекс.Вебмастера загружено 593 755 страниц, из них в поиске 1619.

Допущена критическая ошибка в служебном файле sitemap. Вместо домена сайта merx-chef.ru указан другой домен merxteam.ru

Ошибки в sitemap.xml

В результате сайт индексируется с ошибками:

Ошибки индексации сайта

Внутренние и внешние ссылки

Страницы сайта содержат ссылки на несуществующие файлы:

На сайте выявлен ряд редиректов:

На страницах сайта есть ряд циклических ссылок. Полный список показан в сводной таблице по ссылке https://yadi.sk/i/e2wIV9A73GcDFq

Страницы содержат ряд ссылок на другие сайты. Полный список показан в таблице https://yadi.sk/i/FMv5hPtT3GcDrs

Отдельно стоит отметить, что на сайте в данный момент нет закрытых (nofollow) внутренних и внешних ссылок.

Дублирование контента

На сайте выявлены дубликаты страниц со схожим контентом. Их список представлен в таблице по ссылке https://yadi.sk/i/F6Ztr65Z3GcKMF

Метатеги

Список страниц с пустыми метатегами показан в таблице по ссылке https://yadi.sk/d/-xCa8Ejo3GcM2F

Список страниц с пустыми keywords показан в таблице по ссылке https://yadi.sk/i/lT8lzmA03GcMLR

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

Get new case studies by email:

More Case Studies

See all