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

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

Дата аудита: октябрь 2017 года

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

 

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

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

2. Базовая статистика сайта

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

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

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

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

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

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

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

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

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

12. Метатег title

13. Метатег description

14. Метатег keywords

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

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

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

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

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

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

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

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

Базовая статистика сайта.

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

Общее число визитов за октябрь составило 3454:

Количество визитов на сайт

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

Рост посещаемости сайта

Источники трафика:

Обзор основных источников трафика

Основной источник трафика – переходы по платной рекламе. На втором месте – поисковый трафик (11.8%).

Качество трафика по показателям отказов этих двух основных источников практически одинаковое:

Показатель отказов и время просмотра страниц

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

Качество рекламного трафика

В данный момент преобладает поисковый трафик из Яндекса:

Соотношение трафика из Яндекса и Google

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

Рост поискового трафика

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

Распределение рекламного трафика

Более качественный платный трафик идет с Яндекс.Директа:

Анализ трафика с Яндекс.Директа

Абсолютное большинство посетителей заходит на сайт из России:

Анализ географии посетителей сайта

Распределение посетителей по городам:

Распределение посетителей сайта по городам

Основной поток трафика идет из Санкт-Петербурга и Москвы. При этом наблюдается рост показателя у посетителей из других городов:

Анализ показателя отказов в зависимости от города

Распределение аудитории сайта по возрастным группам:

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

Основная возрастная группа посетителей от 25 до 34 лет. На втором месте (26.9%) посетители от 35 до 44 лет.

Основную аудиторию сайта составляют женщины.

Анализ аудитории сайта

Распределение пользователей по типу используемых устройств:

Распределение пользователей по типу используемых устройств

В данный момент основная часть посетителей использует ПК для просмотра сайта.

При этом также наблюдается тенденция снижения количества просмотров с ПК и увеличения со смартфонов:

Динамика роста мобильного трафика

Для пользователей смартфонов показатель отказов немного выше.

Показатель отказов у пользователей мобильных устройств

Используемые браузеры:

Статистика использования браузеров

При этом наблюдается рост показателя отказов у мобильных браузеров:

Анализ показателя отказов мобильного трафика

Наиболее популярные страницы сайта:

Популярные страницы сайта

Анализ количества просмотров страниц

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

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

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

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

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

Дизайн логотипа

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

Оформление логотипа и слогана

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

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

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

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

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

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

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

Видео с демонстрацией показано тут: https://yadi.sk/d/BnCgKT1t3PJHci

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

Раздел «Новинки» всегда подсвечен зеленым фоном. Создается впечатление, что так обозначен текущий раздел независимо от текущего положения пользователя на сайте. Видео показано тут: https://yadi.sk/i/5zsAvcju3PJmLx

Выделение раздела меню

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

Юзабилити выпадающего меню

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

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

Выделение текущего раздела сайта

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

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

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

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

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

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

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

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

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

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

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

Не совсем понятно, почему при нажатии на ссылку «Прайс-лист» открывается форма запроса, а не страница с ценами. Это не соответствует ожиданиям пользователя. Видео показано тут: https://yadi.sk/i/2jYZMX9l3PKHq2

Юзабилити ссылки на прайс-лист

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

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

Юзабилити формы отправки запроса

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

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

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

Компоновка макета каталога

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

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

Изображения категорий товаров

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

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

Текст в названиях категорий

Оформление текста в названиях категорий

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

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

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

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

Юзабилити вспомогательной навигации "хлебные крошки"

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

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

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

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

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

На части страниц последний элемент является не текстом, а ссылкой с выпадающим подменю. Видео показано по ссылке https://yadi.sk/i/zMfYxs993PKNpU

Оформление последнего пункта в хлебных крошках

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

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

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

Выделение ссылки подчеркиванием

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

Название ссылки и раздела

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

Ошибка в выводе раздела

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

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

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

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

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

Кнопки прокрутки появляются только при наведении курсора на баннеры. Видео показано по ссылке https://yadi.sk/i/Qf1J-_Pp3PKRDM.

Работа кнопок прокрутки

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

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

Контрастность элементов сайта

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

Первый баннер выполнен в виде картинки без ссылки на соответствующий раздел сайта или страницы просмотра товара. Видео показано по ссылке https://yadi.sk/i/3MOWW0yo3PKRx7.

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

Оформление блоков сайта

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

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

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

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

Анализ эффективности блока рекомендаций

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

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

Юзабилити формы авторизации

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

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

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

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

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

Юзабилити меню каталога

Оформление ссылок меню каталога

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

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

Также непонятно, является ли заголовок ссылкой или это обычный текст. Видео показано по ссылке https://yadi.sk/i/3rv_ooYc3PKXoR.

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

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

Юзабилити текстовых блоков

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

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

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

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

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

Ссылки на пустые разделы каталога

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

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

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

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

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

На странице есть блок сортировки ленты товаров. Но при переключении сортировки по возрастанию или убыванию меняется маркер во всех трех вариантах. Видео показано по ссылке https://yadi.sk/d/H64l1fOJ3PKaS5

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

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

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

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

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

Не совсем понятно, о каком конкретно количестве товаров идет речь. Мало, достаточно, много могут обозначать как 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://yadi.sk/i/eut_3hsD3PKdJ9

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

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

На странице не указано, сколько экземпляров товара находится в корзине. Видео показано по ссылке https://yadi.sk/i/L9r7J1os3PKdUa.

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

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

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

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

Не работает изменение количества товаров в корзине

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

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

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

Юзабилити покупки в один клик

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

Звездочки в названии полей

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

На странице корзины нет возможности отсортировать список товаров по столбцам таблицы. Видео показано по ссылке https://yadi.sk/i/6HwQ2cuj3PLDzf. Не работает сортировка товаров в корзине

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

Непонятно, где ссылка, а где текст. Название товара не реагирует на наведение курсора. Видео показано тут: https://yadi.sk/i/2OotCmFb3PLET4.

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

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

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

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

Нет выбора способов доставки

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

Нет выбора способов оплаты

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

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

Юзабилити формы

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

Большой вертикальный отступ

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

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

Не работает подсветка ошибок в полях формы

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

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

Как оформить заказ в корзине?

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

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

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

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

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

Метатег 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

Рекомендуем пересмотреть шаблон генерации и по возможности прописать 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

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

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

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

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

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

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

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

Не заполнен title для ссылок

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

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

Не заполнен alt для изображений на сайте

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

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

Скрипты внутри HTML-кода

Скрипты внутри HTML-кода сайта

Скрипты внутри HTML-кода сайта

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

Get new case studies by email:

More Case Studies

See all