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

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

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

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

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

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

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

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

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

Кроме этого, общепринятым является размещения рядом с логотипом краткого слогана.

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

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

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

Фактически, в данный момент логотип состоит из стилизованного текста «Модерн стайл». Какой-либо уникальный графический элемент в его оформлении отсутствует. Дизайн логотипа не привязан к сфере деятельности компании и предоставляемым услугам. Это отрицательно сказывается на юзабилити.

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

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

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

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

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

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

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

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

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

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

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

При переходе по ссылкам «Вход» и «Регистрация» текущий раздел сайта не выделяется в меню.

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

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

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

Боковое меню каталога

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

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

При переходе в подраздел «Электронные каталоги» http://www.modern-sc.ru/pdf/# соответствующая ссылка в меню не выделяется.

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

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

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

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

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

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

Скриншот 2: https://yadi.sk/i/200vKO8L3So6CM.

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

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

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

Вспомогательная навигация

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

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

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

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

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

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

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

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

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

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

Адрес страницы:

http://www.modern-sc.ru/.

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

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

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

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

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

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

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

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

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

В блоке «Акции» текст расположен прямо на изображениях. Его размер слишком маленький и большинство текста невозможно прочитать.

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

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

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

Непонятно, что за логотипы выводятся на главной странице (партнеры, производители или бренды?).

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

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

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

Информация о ключевых конкурентных преимуществах компании размещена в самом низу страницы. Скорее всего, ее увидит минимальное количество пользователей. Полный скриншот главной страницы приведен по ссылке https://yadi.sk/d/zSUZB7p33SptDm.

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

Форма регистрации

Адрес страницы: http://www.modern-sc.ru/auth/registration/.

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

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

В целом, процесс регистрации прошел успешно.

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

Адрес страницы: http://www.modern-sc.ru/catalog/.

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

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

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

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

Компоновка блоков страницы выполнена не оптимально. В результате остаются большие неиспользуемые зоны, а общая высота страницы увеличивается. На скриншоте по ссылке https://yadi.sk/i/-cs4zq7q3SpuVN показаны такие участки макета.

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

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

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

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

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

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

Юзабилити процесса просмотра выбранной категории каталога будем рассматривать на примере страницы http://www.modern-sc.ru/catalog/komplektuyushchie_dlya_mebeli/.

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

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

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

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

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

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

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

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

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

Юзабилити раздела будем рассматривать на примере страницы http://www.modern-sc.ru/catalog/komplektuyushchie_dlya_mebeli/stoleshnitsy_planki_i_profil_dlya_stenovykh_paneley/

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

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

Непонятно, что обозначает тип поставки «Выводимая позиция».

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

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

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

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

Ссылки в нем не реагируют на наведение курсора.

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

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

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

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

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

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

Далее рассмотрим юзабилити страницы детального просмотра товара на примере http://www.modern-sc.ru/catalog/154283_posudomoechnaya_mashina_korting_kdi_6040_sht_/.

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

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

При добавлении или удалении товара в отложенный список выводится сообщение об ошибке.

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

На странице есть только одна фотография товара. Этого будет недостаточно для принятия позитивного решения о покупке для большинства товаров в каталоге.

Рекомендуем выводить 2-3 фотографии для каждого товара.

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

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

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

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

Дизайн блока с описанием не проработан.

Текстовые элементы слишком далеко разнесены друг от друга.

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

Для большинства товаров отсутствует какое-либо текстовое описание или характеристики. Особенно это проблема актуальна для высокотехнологичных товаров (например, стиральных машин, микроволновок и т.д.).

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

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

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

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

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

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

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

Адрес страницы: http://www.modern-sc.ru/basket/.

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

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

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

Скриншот: https://yadi.sk/d/JqxQNG-73SrVdN

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

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

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

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

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

На странице корзины для незарегистрированного пользователя есть только ссылка «Продолжить покупки». Какая-либо возможность оформить заказ (либо соответствующее информационное сообщение) полностью отсутствует. Это крайне негативно сказывается на конверсии. С большой степенью вероятности пользователь покинет сайт так и не оформив заказ.

Кнопка «Оформить заказ» появляется только после регистрации и входа на сайт.

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

Далее рассмотрим юзабилити страницы оформления заказа http://www.modern-sc.ru/order/.

Ссылки оформлены как обычный текст и не реагируют на наведение курсора.

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

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

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

Непонятно, для чего дублируется кнопка «Оформить заказ».

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

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

Вывод размера скидки и веса не имеет логического смысла, т.к. для всех товаров указаны нулевые значения.

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

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

Фактически, в данный момент доступно только два варианта оплаты – наличный и безналичный расчет (http://www.modern-sc.ru/help/payment/ ). Другие распространенные способы оплаты (например, через «Сбербанк», «Альфабанк» и т.д.) недоступны. Это негативно сказывается на конверсии сайта.

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

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

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

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

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

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

Также не выполнены базовые процедуры по внутренней поисковой оптимизации сайта. Это негативно сказывается на объеме поискового трафика и, как следствие – маркетинговой эффективности сайта.

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

	Крупнейший регистратор доменных имен REG.RU Регистрация и продление доменных имен в любых зонах.
	Ведущий хостинг-провайдер BEGET.RU Хостинг, аренда серверов, регистрация доменов.
	Сервис тестирования юзабилити реальными пользователями Отбор и анкетирование целевой аудитории сайта.
	Сервис мониторинга, анализа и оценки эффективности поискового продвижения. Съем и отслеживание позиций сайта, работа с семантическим ядром.
	Сервис копирайтинга и рерайтинга текстов. Заказ текстов для сайта любой сложности. Покупка готовых текстов и заказ уникальных статей на нужную тему.
	Сервис автоматизации продвижения сайта и рекламы в интернете. Подбор и покупка ссылок, оптимизация контекстной рекламы.
	26 000 готовых премиум-шаблонов для сайтов Высококачественные шаблоны для любых сайтов, материалы для дизайна сайта.
	Крупнейшая фриланс-биржа Сервис удаленной работы.