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

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

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

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

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

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

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

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

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

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

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

Логотип расположен в верхнем левом углу. Он является уникальным и соответствует тематике предлагаемых товаров и услуг.

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

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

Допущены некоторые ошибки в компоновке и взаимном расположении элементов логотипа.

Текст не выровнен относительно графической части логотипа.

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

Используется слишком маленький отступ между нижним текстом и графической частью логотипа.

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

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

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

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

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

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

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

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

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

Аналогичная проблема наблюдается и в нижнем меню с категориями каталога.

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

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

	https://youtu.be/Nh5BtrYZRMs
	https://youtu.be/9Ld1UXWJ-64
	https://youtu.be/wczDoM3nS5Y
	https://youtu.be/L_bpnRXhcPU
	https://youtu.be/SsufEjppydE
	https://youtu.be/aSsO-Q6zP2M
	https://youtu.be/c3mKMj3wDe4
	https://youtu.be/UCE5XSl-Mmw
	https://youtu.be/Dx9d2qim6SM
	https://youtu.be/MhZs8ozCYQQ

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

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

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

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

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

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

Аналогичная проблема наблюдается и на странице детального просмотра товара.

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

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

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

Также допущена ошибка в алгоритме работы навигации. Последний элемент должен быть не ссылкой, а обычным текстом.

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

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

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

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

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

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

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

Рекомендуем опубликовать в данном блоке 4-5 баннеров с информацией и ссылками на наиболее востребованные разделы сайта.

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

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

То же самое относится и к блокам с информацией о доставке, ассортименте и ценах.

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

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

Адрес страницы: https://smtehno.ru/katalog/.

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

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

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

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

Эта же рекомендация верна и для бокового меню с категориями товаров.

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

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

В каталоге опубликованы категории с одним товаром. При этом его название совпадает с названием категории. Например, https://smtehno.ru/sotovij-polikarbonat/sotovij-polikarbonat.

В каталоге опубликованы категории, не содержащие ни одного товара. Например, https://smtehno.ru/pilomaterial/.

 

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

На сайте есть категории каталога, ссылки на которые отсутствуют в меню. Например, https://smtehno.ru/muromcevskij-len. Вспомогательная навигация на этих страницах не выводится.

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

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

Далее рассмотрим юзабилити просмотра ленты товаров на примере типовой страницы https://smtehno.ru/fanera-sale/.

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

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

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

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

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

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

Скриншот: https://yadi.sk/d/DB1HF5X-3R4mst.

Рекомендуем согласовать число товаров на странице. Оно должно быть кратно количеству товаров в одном ряду (4,8, 12,16,20,24 и т.д.).

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

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

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

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

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

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

Для товаров из некоторых категорий, полностью отсутствуют изображения или фото. Это крайне негативно сказывается на юзабилити. Например, https://smtehno.ru/vodostochnaja-sistema/.

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

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

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

Страница просмотра товара

Далее рассмотрим дизайн, юзабилити и функциональные возможности страницы детального просмотра товара на примере https://smtehno.ru/tsement/peskobeton-m-200–25-kg.

Для товаров в каталоге опубликовано только одно фото. Это отрицательно сказывается на юзабилити.

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

Увеличенное фото товара плохого качества и с видимыми искажениями.

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

Более привычным для большинства пользователей будет расположение знака «-» слева, а знака «+» справа поля ввода.

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

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

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

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

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

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

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

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

На странице корзины https://smtehno.ru/index.php?route=checkout/cart нет автоматического пересчета суммы заказа при изменении количества товаров. Это отрицательно сказывается на юзабилити.

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

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

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

Далее рассмотрим юзабилити страницы оформления заказа https://smtehno.ru/index.php?route=checkout/simplecheckout#warn_in_customer.

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

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

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

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

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

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

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

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

Доступен только один вариант – самовывоз. Выбора другого способа доставки в корзине нет. При этом на сайте есть раздел «Доставка» https://smtehno.ru/dostavka, где есть информация об автоматическом расчете стоимости доставки.

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

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

Кроме этого, не оправдано использование избыточного списка стран, заказ их которых маловероятен. Например, Грузия или Узбекистан.

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

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

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

Шрифт в поле комментария отличается от шрифта в других полях формы.

Весь процесс оформления заказа показан на видео по ссылке https://yadi.sk/i/MuEP-7yC3R6VKV.

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

Оплата

Адрес страницы: https://smtehno.ru/oplata.

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

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

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

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

Контакты

Адрес страницы: https://smtehno.ru/contacts/.

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

Рекомендуем сделать адрес email ссылкой.

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

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

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

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

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

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

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

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

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

Заказ обратного звонка

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

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

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

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