Аудит юзабилити и 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 адреса, привязанные к доменному имени merx-chef.ru
В нижней части сайта ссылка на адрес электронной почты отсутствует:
Рекомендуем разместить адрес почты в футере сайта.
Не проработана компоновка страницы контактов. В левой колонки размещена информация о представительствах компании, а большую часть страницы занимает пустой блок.
Форма отправки сообщения размещена ниже и не видна без использования вертикальной прокрутки. Это отрицательно сказывается на юзабилити. Видео показано по ссылке https://yadi.sk/i/lyXdhBl83GVprG
Рекомендуем разместить контактную форму в верхней части сайта.
В форме явно не указано, какие поля являются обязательными для заполнения. Об этом можно узнать только после неудачной попытки отправки. При этом текст сообщений об ошибках выполнен белым на белом фоне и не виден пользователю. Это является грубой ошибкой в работе интерфейса. Видео показано по ссылке https://yadi.sk/i/s-B8S1gb3GVrFL
Рекомендуем пометить обязательные поля и выполнять проверку правильности ввода данных непосредственно в процессе заполнения формы пользователем.
Используется избыточная ширина поля ввода кода с картинки:
Рекомендуем уменьшить ширину поля до количества символов в капче.
Далее рассмотрим вопросы поисковой оптимизации сайта.
Общие вопросы
В данный момент на сайте отсутствует служебный файл robots.txt
В результате поисковые системы обходят множество дубликатов страниц через фильтры каталога:
По данным Яндекс.Вебмастера загружено 593 755 страниц, из них в поиске 1619.
Допущена критическая ошибка в служебном файле sitemap. Вместо домена сайта merx-chef.ru указан другой домен merxteam.ru
В результате сайт индексируется с ошибками:
Внутренние и внешние ссылки
Страницы сайта содержат ссылки на несуществующие файлы:
На сайте выявлен ряд редиректов:
На страницах сайта есть ряд циклических ссылок. Полный список показан в сводной таблице по ссылке 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 или по телефону.