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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

https://youtu.be/qX1BzpMVEa0
https://youtu.be/j8L0dxcPYIc
https://youtu.be/belVJx0EC8w
https://youtu.be/EjOzQ9PvqUY
https://youtu.be/frrixpO5rgU
https://youtu.be/kjFEZmYhLwM
https://youtu.be/NdBx-erUcek
https://youtu.be/s1Va_gMcUu0
https://youtu.be/4vFn_UPDW8I
https://youtu.be/ue7pVKUlpw4
https://youtu.be/TkhnHKDuEK0

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

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

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

Боковое меню каталога содержит очень большое количество ссылок (31 пункт).

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

При переходе в категорию каталога выводится две колонки со ссылками на подкатегории.

При просмотре сайта в Яндекс.Браузере, который используют более 22% пользователей, ссылки в правой колонке не реагируют на курсор. При клике по ним соответствующая страница не открывается.

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

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

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

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

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

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

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

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

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

Рекомендуем увеличить ширину элементов управления прокруткой и добавить отступ шириной 15-20 пикселей между ссылками и границами баннера.

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

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

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

В блоке «Акции» также выводится всего 9 товаров, но по высоте он занимает полтора экрана.

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

Скриншот: https://yadi.sk/i/8EjUP7cc3ZHEcg

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

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

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

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

Для заголовков анонсов новостей используется выравнивание по центру. Для даты и ссылки «Подробнее» – по левому краю. В результате дизайн выглядит не согласованно.

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

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

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

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

На странице три раза выводится фактически одно и то же меню с категориями каталога товаров.

Скриншот: https://yadi.sk/i/R-pJJbkt3ZHH7Y

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

Скриншот: https://yadi.sk/i/q3rYkuxo3ZHHw9

В центральной части страницы выводится список товаров. Непонятно, что это за товары и, из какой конкретной категории. Какой-либо заголовок отсутствует.

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

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

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

Скриншот: https://yadi.sk/d/MjgNthlJ3ZHLg5

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

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

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

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

Мини-карточка товара

Мини-карточка товара также содержит некоторые недоработки.

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

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

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

Скриншот: https://yadi.sk/i/YwDcdk6m3ZJJjP

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

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

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

Не выводится, какое количество конкретного товара и на какую сумму уже добавлено в корзину. Это затрудняет работу с каталогом.

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

Просмотр категории каталога

Используются разные варианты оформления макета страниц в разных категориях.

На одних страницах есть графический баннер в центральной колонке, на других его нет.

Не совсем понятно, для чего текст объединён с фоновым изображением. Это отрицательно сказывается не только на юзабилити, но и на поисковой оптимизации сайта. Такой текст не индексируется Яндексом и Google.

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

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

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

Некоторые категории каталога (например, «Семена овощей» https://seedsmail.ru/catalog/semena/ovoshhi/), содержат большое количество подкатегорий.

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

Явно не указано, сколько товаров есть в каждой подкатегории.

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

Скриншот: https://yadi.sk/i/YMO8J7l83ZHSj7

Просмотр подкатегорий каталога

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

Просмотр выбранного товара

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

Скриншот: https://yadi.sk/i/jTOr1IC33ZJQQz

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

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

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

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

Отсутствуют такие важные для пользователя элементы, как:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Скриншот: https://yadi.sk/i/oeK9CkEI3ZJchx

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

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

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

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

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

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

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

Контакты

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

Непонятно, почему для одних адресов используется устаревшая решение со схемой проезда в виде статичного изображения, а для других – интерактивная схема на базе Яндекс.Карт.

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

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

Скриншот: https://yadi.sk/d/Wmptv2wp3ZJmcx

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

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

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

Общие итоги и выводы

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

  • боковое меню каталога содержит большое количество разделов и ссылок. при этом они не систематизированы, нет четкой логической группировки разделов и подразделов. В результате, пользователю сложно найти нужный раздел сайта;
  • навигационные элементы каталога работают с ошибками в Яндекс.Браузере, который используют более 22% пользователей;
  • не проработана компоновка главной страницы сайта. Несмотря на большую высоту на ней выводится всего 15 товаров в блоках “Новинки” и “Акции”;
  • допущены ошибки в оформлении мини-карточки товара. В результате пространство страниц каталога используется неэффективно и увеличивается общая высота;
  • страница детального просмотра товаров имеет ограниченный базовый функционал, который затрудняет работу с каталогом товаров и покупку;
  • на страницах сайта явно не указано, что минимальная сумма оформления заказа составляет 500 рублей. Об этом пользователь узнает только при переходе в корзину;
  • некорректно реализован алгоритм просчета минимальной суммы покупки и перехода к оформлению заказа;
  • форма заказа имеет очень большое количество полей для заполнения. Создается впечатление сложности оформления заказа. Проверка правильности ввода данных отсутствует;
  • выявлен ряд недоработок во внутренней оптимизации сайта для поисковых систем, которые отрицательно влияют на позиции сайта.

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

Полезные ссылки и ресурсы

REGRU-logo-color-3 Крупнейший регистратор доменных имен REG.RU

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

https://cp.beget.com/promo_data/static/static100x100_6.png Ведущий хостинг-провайдер BEGET.RU

Хостинг, аренда серверов, регистрация доменов.

Сервис тестирования юзабилити реальными пользователями

Отбор и анкетирование целевой аудитории сайта.

Сервис мониторинга, анализа и оценки эффективности поискового продвижения.

Съем и отслеживание позиций сайта, работа с семантическим ядром.

Сервис копирайтинга и рерайтинга текстов. Заказ текстов для сайта любой сложности.

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

SeoPult Сервис автоматизации продвижения сайта и рекламы в интернете.

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

300x60_1 26 000 готовых премиум-шаблонов для сайтов

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

Крупнейшая фриланс-биржа

Сервис удаленной работы.

Получать новые кейсы на email:

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

Смотреть все