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

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

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

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

 

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

 

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

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

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

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

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

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

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

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

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

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

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

Расположение логотипа

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

Видео: https://yadi.sk/i/xgBhS4oT3R4K7g.

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

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

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

Выравнивание логотипа

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

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

Отступ между логотипом и текстом

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

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

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

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

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

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

Видео: https://yadi.sk/i/lZlI9RWR3R4MYd.

Аудит работы навигационного меню

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

Видео: https://yadi.sk/i/UGGB2b_V3R4MoU.

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

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

Видео: https://yadi.sk/i/_Et91gla3R4NLJ.

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

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

Видео: https://yadi.sk/d/Ky6yhhK03R4NYv.

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

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

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

Ссылка оформлена как текст https://yadi.sk/i/zK6N9j-33R4arC
Ссылка оформлена как текст https://yadi.sk/i/xgB1sQqb3R4bAZ
Ссылка оформлена как текст https://yadi.sk/i/CULK4pty3R4bSM
Ссылка оформлена как текст https://yadi.sk/i/NikVjTgN3R4bZr
Ссылка оформлена как текст https://yadi.sk/i/WBg1CpN53R4bqp
Ссылка оформлена как текст https://yadi.sk/i/Nf0yEAy23R4c2A
https://yadi.sk/i/NrHjktew3R4cDU
Ссылка оформлена как текст https://yadi.sk/i/uwfJAhmm3R4cKU
Ссылка оформлена как текст https://yadi.sk/i/WQ81NBLY3R4cWj
Ссылка оформлена как текст https://yadi.sk/i/bi0kl7Vy3R4cfb

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

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

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

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

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

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

Видео: https://yadi.sk/i/Sk8cp-003R4ika.

Аудит юзабилити вспомогательной навигации

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

Работа вспомогательной навигации

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

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

Видео: https://yadi.sk/i/pRYBMQBi3R4jV2.

Юзабилити навигации "хлебные крошки"

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

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

Видео: https://yadi.sk/i/Mjdf68_83R4jge.

Ошибка в работе вспомогательной навигации

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

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

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

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

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

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

Видео: https://yadi.sk/d/-um7UyKL3R4dCa.

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

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

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

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

Видео: https://yadi.sk/i/Rd7mr56C3R4eAm.

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

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

Видео: https://yadi.sk/i/IsbeRpZ03R4ePT.

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

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

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

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

Юзабилити каталога строительных товаров

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

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

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

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

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

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

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

Видео: https://yadi.sk/i/-NDiliHj3R4k2S.

Работа навигации в каталоге товаров

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

Видео: https://yadi.sk/i/OEXC_JJW3R4kBQ.

Пустые категории в каталоге товаров

 

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

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

Не работает вспомогательная навигация на сайте

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

Видео: https://yadi.sk/i/E-550N383R4m3d.

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

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

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

Округление цены товаров в каталоге

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

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

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

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

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

Ошибка вывода количества товаров в корзине

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

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

Выбор количества товаров на странице

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

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

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

Видео: https://yadi.sk/i/btMsQK8o3R4nZV.

Юзабилити фильтра товаров

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

Юзабилити фильтра товаров каталога

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

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

Видео: https://yadi.sk/i/c2RycvDl3R4o3C.

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

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

Видео: https://yadi.sk/i/ZtBWzD7E3R5nuF.

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

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

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

Видео: https://yadi.sk/d/Vf4sOPq93R5oEu.

Юзабилити постраничной навигации

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

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

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

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

Юзабилити каталога строительных материалов

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

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

Видео: https://yadi.sk/i/xazQkJ2J3R5osd.

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

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

Видео: https://yadi.sk/i/D4_xZtAX3R5pP8.

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

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

Видео: https://yadi.sk/i/7mtb-1Ox3R5piR.

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

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

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

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

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

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

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

Видео: https://yadi.sk/i/5JekTRp93R6J29.

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

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

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

Видео: https://yadi.sk/i/xtmdLfzH3R6JNF.

Автоматический пересчет суммы заказа

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

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

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

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

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

Видео: https://yadi.sk/d/TZery9si3R6KCk

Аудит юзабилити формы входа пользователей

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

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

Видео: https://yadi.sk/i/2q_wdnAs3R6KPU.

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

Юзабилити формы регистрации пользоваетелей

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

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

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

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

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

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

Видео: https://yadi.sk/i/C5L8dah73R6L9s.

Аудит модуля доставки товаров

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

Видео: https://yadi.sk/i/BYzRAajw3R6LQt.

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

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

Юзабилити списка выбора стран доставки

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

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

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

Видео: https://yadi.sk/i/tQtCe6dV3R6UxN.

Аудит юзабилити формы оформления заказа

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

Юзабилити формы комментариев к заказу

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

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

Оплата

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

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

Аудит юзабилити процесса оформления заказа

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

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

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

Контакты

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

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

Юзабилити отправки e-mail

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

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

Оформление номера телефона в корзине

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

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

Видео: https://yadi.sk/i/L1Z4uqOn3R6XZd.

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

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

Видео: https://yadi.sk/i/sGQA5xW03R6Xn3.

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

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

Юзабилити формы обратной связи

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

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

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

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

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

Видео: https://yadi.sk/i/FsyR79Ke3R6YP4

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

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

Регистрация и продление доменных имен в любых зонах. Крупнейший регистратор доменных имен REG.RU

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

Хостинг, аренда серверов, регистрация доменов. Ведущий хостинг-провайдер BEGET.RU

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

Хостинг, аренда серверов, регистрация доменов. Сервис тестирования юзабилити реальными пользователями

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

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

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

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

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

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

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

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

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

Сервис удаленной работы. Крупнейшая фриланс-биржа

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

Get new case studies by email:

More Case Studies

See all