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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для примера, по ссылке https://yadi.sk/i/xhqcDgHa3PJGxw показан полный скриншот страницы https://molti-shop.ru/catalog/kantstovary/.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отсутствуют изображения для категорий товаров:

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

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

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

Вспомогательная навигация по типу «хлебные крошки»

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

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

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

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

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

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

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

На страницах подкатегорий (например, https://molti-shop.ru/catalog/nakleyki/nakleyki_applikatsii/ )два крайних элемента являются ссылками с выпадающим меню.

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

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

Название и заголовок страницы https://molti-shop.ru/help/ «Помощь» не совпадают с названием раздела в главном меню «Как купить».

Страница «Магазины» https://molti-shop.ru/contacts/stores/ выводится как подстраница раздела «Контакты».

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

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

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

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

Кнопки прокрутки появляются только при наведении курсора на баннеры.

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

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

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

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

Данные блоки являются статичными без ссылок на соответствующие страницы сайта. Это снижает их эффективность.

При этом, согласно данным карты кликов, пользователи пытаются кликнуть по ним.

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

В блоке «Мы советуем» выводится всего 4 товара. Это снижает эффективность данного блока.

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

Непонятно, что обозначают звездочки рядом с заголовками полей.

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

Главная страница каталога.

Далее рассмотрим юзабилити главной страницы каталога https://molti-shop.ru/catalog/.

Неудачно выполнена компоновка блоков с категориями каталога. В результате пространство страницы используется неэффективно, из-за больших пустых зон увеличивается общая высота и дизайн выглядит не согласовано. Полный скриншот показан по ссылке https://yadi.sk/i/3fQGhLd-3PKTme

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

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

Также непонятно, является ли заголовок ссылкой или это обычный текст.

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

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

Для примера по ссылке https://yadi.sk/i/hiOghbbp3PKYGt показан полный скриншот страницы https://molti-shop.ru/catalog/igrushki/.

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

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

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

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

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

Для большого количества товаров нет фотографий.

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

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

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

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

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

Не совсем понятно, о каком конкретно количестве товаров идет речь. Мало, достаточно, много могут обозначать как 1, 10, 100 единиц товара, так и 1000, 10 000 и 50 000.

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

Для большинства товаров не указан рейтинг. В данный момент этот модуль не несет никакой полезной информации для пользователей. Для примера по ссылке https://yadi.sk/i/4DpfrHS53PKbP4 показан полный скриншот страницы https://molti-shop.ru/catalog/igrushki/igrushki_na_batareykakh/.

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

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

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

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

Дизайн, юзабилити и работу страницы детального просмотра товара будем рассматривать на примере страницы https://molti-shop.ru/catalog/igrushki/konstruktory/1367/.

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

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

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

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

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

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

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

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

Для некоторых товаров не работает модуль изменения количества экземпляров. Например, https://molti-shop.ru/catalog/breloki/.

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

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

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

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

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

На странице корзины нет возможности отсортировать список товаров по столбцам таблицы.

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

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

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

Далее рассмотрим процесс оформления заказа.

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

Доступен только один способ оплаты «Наличные курьером» независимо от выбранного способа доставки.

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

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

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

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

Поле «Адрес доставки» не подсвечивается красной границей при ошибочном заполнении.

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

Непонятно, какую из трех кнопок необходимо нажать для продолжения оформления заказа.

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

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

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

Внутренняя поисковая оптимизация сайта

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

Метатег title

Метатег title является одним из важнейших элементов базовой внутренней оптимизации сайта.

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

Его длина должна быть не более 65-ти символов.

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

Неуникальные дубликаты выявлены на 294-ех страницах сайта. Их список приведен в таблице по ссылке https://yadi.sk/d/4cbM-MGR3PLJTW. Это отрицательно сказывается на поисковой оптимизации сайта.

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

Title длиной более 65-ти символов выявлен на 614-ти страницах. Список с указанием количества символов по каждой странице можно найти в таблице по ссылке https://yadi.sk/d/eA2KG-q43PLJpu.

Title содержит менее 30-ти символов и неэффективно используется на 31-ой странице. Их список приведен в таблице по ссылке https://yadi.sk/i/3SrB-6Ux3PLK3c .

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

Отдельно стоит отметить, что для большинства страниц сайта title сгенерирован автоматически по шаблону из трех восклицательных знаков, названия товара и названия магазина. Такое решение снижает эффективность title для поисковой оптимизации. Полный список всех title показан в таблице https://yadi.sk/d/G6-zraCy3PLL5Q

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

Метатег description

Метатег description также является важным элементом внутренней поисковой оптимизации.

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

Дубликаты обнаружены на 333-ех страницах сайта. Их список приведен в таблице https://yadi.sk/d/G07MQiBU3PLLQC

Более 156-ти символов в description выявлено на 984-ех страницах. Список страниц в таблице по ссылке https://yadi.sk/d/pfFMpzOQ3PLLah.

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

Метатег keywords

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

Но необходимо отметить, что он есть на всех страницах сайта. При этом дубликаты выявлены на 335-ти страницах. Их список приведен в таблице по ссылке https://yadi.sk/i/5XgZneNK3PLMA6

Часть из них не относятся к тематике сайта и предлагаемым товарам. Например, для страницы https://molti-shop.ru/info/articles/2017/nabory_dlya_tvorchestva/ указано:

Полный список всех keywords для страниц приведен в таблице https://yadi.sk/d/TmYH_TnV3PLMcm.

Оптимизация заголовков H1

Далее рассмотрим, насколько качественно проработана оптимизация заголовков первого уровня H1.

Неуникальные дубликаты встречаются на 296-ти страницах. Их список приведен в таблице https://yadi.sk/d/gR-QQoFJ3PLMy4.

SEO оптимизация HTML-кода сайта

Далее рассмотрим оптимизацию HTML кода для поисковых систем.

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

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

Не заполнены alt для некоторых изображений, размещенных на страницах сайта.

Рекомендуем прописать корректные alt=”” для всех изображений, размещенных на сайте в соответствии с актуальными требованиями поисковых систем:

• https://support.google.com/webmasters/answer/114016?hl=ru
• https://yandex.ru/support/images/robot-search.html

Большое количество скриптов находятся внутри HTML кода, а не во внешних js-файлах. Ниже приведены скриншоты фрагментов такого кода: