Аудит юзабилити каталожного сайта – кейс UX/UI-диагностики

Кейс аудита юзабилити
UX-аудит каталожного сайта: шапка, поиск, карточки товаров, формы и путь к заказу

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

Диспетчерская пользовательского опыта
Аудит юзабилити каталожного сайта
Проект: MarketLine.ua

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

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

7 518 визитов за квартал10,2 страницы за визит21:32 на сайте13,3% отказов
Пульт управления конверсией
Каждый индикатор показывает участок пути пользователя: вход, поиск, каталог, карточка товара, форма и заказ.
97,7%новых посетителей – важен первый экран
61,1%органического трафика из Google
27,1%отказов по переходам со ссылок
0,72%конверсия по цели
Шапкасрочно
Каталогважно
Поискважно
Формысрочно
Вход
Поиск
Каталог
Карточка
Заказ
Блок 1. Суть проекта

Что нужно было выяснить через аудит юзабилити

Задача аудита – понять, почему при нормальных поведенческих показателях сайт всё равно требует доработок. В отчёте были сильные данные по вовлечённости: 7 518 визитов, 76 478 просмотров, глубина 10,2 страницы и среднее время на сайте 21:32. Но слишком долгое время на сайте для каталога может означать не только интерес, но и трудности с поиском нужного товара.

7 518визитовквартальный объём трафика по данным веб-аналитики.
5 379посетителейдостаточная база для анализа поведения.
76 478просмотровпользователи активно переходили по страницам.
13,3%отказовпоказатель в пределах нормы, но не снимает UX-риски.
Экспертный вывод. Хорошая глубина просмотра не всегда означает удобство. Если пользователь долго ходит по каталогу, это может говорить о сложном подборе, слабой навигации или недостатке информации на карточках товаров.
Блок 2. Методика

Аудит был построен как проверка всего маршрута заказа

Аудит лучше показывать через маршрут пользователя. В нём каждый этап связан с бизнес-риском: посетитель не понял, не нашёл, не доверился, не смог заполнить форму или ушёл без заказа.

1Первый экраншапка, меню, понятность предложения, основные действия.
2Каталогпоиск, разделы, карточки товаров, условия заказа.
3Довериетекст о компании, фото, сертификаты, подтверждения.
4Формыобязательные поля, сообщения, сценарии оплаты и доставки.
5Аналитикаисточники, посадочные страницы, устройства, конверсии.
Блок 3. Ключевые рекомендации

Что было вынесено в главные доработки

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

ЗонаЧто обнаруженоКритичностьЭкспертный вывод
Главнаядоработать шапку для десктопной и мобильной версии, переписать текст о компании, выделить преимуществаобязательнопервый экран должен сразу объяснять, кто компания и почему ей можно доверять
Внутренние страницыулучшить навигацию в каталоге, добавить условия заказа, усилить страницу о компании фото и сертификатамиобязательнокаталог должен не просто показывать товары, а вести к решению о заказе
Навигациядоработать форму поиска, убрать нерабочие ссылки, переместить кнопку “вверх” в мобильной версииважнопуть по сайту должен быть очевидным даже для нового посетителя
Дизайндоработать отображение контента, особенно на мобильных, привести заголовки и тексты к единому стилюрекомендуетсяразный стиль блоков снижает ощущение собранности сайта
Формыуказать обязательные поля и доработать сообщения после отправки данныхобязательноформа – точка конверсии, поэтому в ней нельзя оставлять неясность
Блок 4. Главная и шапка

Шапка сайта должна была стать центром ориентации, а не набором разрозненных ссылок

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

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

Разделить навигацию по смыслу

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

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

В старом аудите отдельно отмечалось, что служебные ссылки лучше не смешивать с основным меню. Для каталога это особенно важно: пользователь может сравнивать товары, возвращаться к избранному, входить в личный кабинет и продолжать заказ. Если эти элементы спрятаны или стоят в непривычном месте, сайт создаёт лишнее трение.

ЭлементПроблемаКак лучше оформитьЗачем это бизнесу
Избранноепользователь может не найти отложенные товарыразместить рядом с корзиной и личным кабинетомпомогает вернуть пользователя к выбору
Сравнениесложный выбор товара растягивает сессиюпоказать заметную ссылку в шапке и карточкахускоряет принятие решения
Личный кабинетвход и регистрация конкурируют с основным менювынести в отдельную служебную зонуснижает путаницу и делает шапку чище
Корзинапуть к заказу не должен терятьсядержать в привычном правом верхнем углууменьшает риск потери заказа
Экспертный вывод. В каталожном сайте шапка – это не декоративная зона, а панель управления покупкой. Чем привычнее расположены сравнение, избранное, корзина и личный кабинет, тем меньше когнитивная нагрузка на пользователя.
Блок 6. Внутренние страницы

Каталог и карточки товаров нуждались в коммерческой логике

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

Каталог

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

Карточки товаров

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

О компании

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

Блок 7. Просмотренные товары

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

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

Почему отдельная страница слабее

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

Почему блок на карточке сильнее

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

Как использовать коммерчески

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

Экспертный вывод. Просмотренные товары – это не второстепенная функция, а способ вернуть пользователя к выбору и сократить путь до заказа.
Блок 8. Навигация и поиск

Форма поиска и нерабочие ссылки напрямую влияли на удобство каталога

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

ПроблемаПочему мешаетКак исправить
незаметная форма поискановому пользователю сложнее найти нужный товарувеличить поле, кнопку поставить справа, добавить текст “Найти”
нерабочие ссылкисоздают ощущение неаккуратности и мешают маршрутупроверить все ссылки, удалить или заменить битые переходы
кнопка “вверх” в мобильной версииможет перекрывать элементы или быть неудобнойпереместить её в безопасную зону, не мешающую заказу и меню
Блок 9. Формы и диалоги

Формы – не техническая мелочь, а место принятия решения

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

До исправления

Пользователь не сразу понимает требования формы

  • обязательные поля не выделены символом “*”;
  • сообщения после отправки слишком общие;
  • выбранная доставка или оплата не меняет пояснения;
  • при ошибке пользователь может не понять, что исправить.
После исправления

Форма становится понятным диалогом

  • обязательные поля отмечены сразу;
  • после отправки появляется конкретное сообщение;
  • подсказки меняются под способ доставки и оплаты;
  • ошибки объясняются рядом с нужным полем.
Блок 10. Оформление заказа

Оформление заказа лучше разделить на понятные этапы

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

1Корзинапроверить состав заказа, количество, цену и условия.
2Контактызаполнить имя, телефон, email и обязательные поля.
3Доставкавыбрать способ получения и увидеть пояснение.
4Оплатаполучить понятное сообщение под выбранный способ.
5Подтверждениепонять, что заказ принят и что будет дальше.
ШагЧто отслеживать в аналитикеКакой вывод даёт
Переход в корзинудобавление товара и открытие корзиныпонятно, вызывает ли товар интерес
Начало оформленияпереход от корзины к формевидно, не пугают ли условия заказа
Заполнение формыошибки, незаполненные обязательные полявидно, где форма создаёт трение
Отправка заказауспешная отправка и сообщение пользователюфиксируется реальная конверсия сценария
Блок 11. Визуальный дизайн

Дизайн был хорошим, но отдельные блоки требовали дисциплины

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

Аккуратность блоков

Не все блоки размещены ровно и одинаково, из-за чего страница выглядит менее собранной.

Единый стиль

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

Мобильное отображение

Даже хороший дизайн теряет смысл, если на смартфоне блоки отображаются хуже.

Блок 12. Аналитика

Веб-аналитика показала сильную вовлечённость, но не сняла UX-вопросы

Данные за квартал с 12 июля по 11 октября 2019 года показали: сайт получает поисковый трафик, пользователи активно просматривают страницы, но очень долгое время на сайте может быть не только плюсом. Для каталога 21 минута 32 секунды может означать, что человек долго подбирает товар или пытается разобраться в структуре.

Отказы
13,3%
Глубина
10,2
Время на сайте
21:32
Новые посетители
97,7%
Экспертный вывод. При 97,7% новых посетителей сайт должен работать как понятный входной коридор: быстро объяснять ассортимент, условия, доверие и путь к заказу.
Блок 13. Чистота аналитики

Перед выводами нужно очистить аналитику от внутренних визитов

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

Что искажает данные

Внутренние заходы команды

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

Фильтрацию и правила учёта

  • исключить внутренние IP, где это возможно;
  • отделить тестовые действия от реальных заказов;
  • проверять цели после доработок;
  • сравнивать данные до и после внедрения правок.
Экспертный вывод. Нельзя принимать UX-решения по “грязной” аналитике. Сначала нужно убрать внутренний шум, иначе можно оптимизировать сайт под поведение команды, а не покупателей.
Блок 14. Отчёты и сегменты

После аудита нужно настроить отчёты, которые показывают качество сценариев

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

ОтчётЧто показываетКак использовать
Эффективность источниковкакие каналы дают просмотры, заказы и отказыперераспределять бюджет и усиливать посадочные страницы
Посадочные страницыкуда попадает пользователь первымдорабатывать страницы с высоким входом и слабым действием
Активная аудиториякто смотрит много страниц и долго выбираетулучшать сравнение, избранное и подсказки
Вовлечённая аудиториякто изучает каталог, но не оформляет заказискать барьеры в карточках и формах
Целевая аудиториякто доходит до корзины, формы и заказаулучшать самый прибыльный пользовательский сценарий
Блок 15. Активность по дням

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

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

Суббота
рост
Воскресенье
рост
Понедельник
пик
Вторник–четверг
спад
Экспертный вывод. UX-аудит полезен не только для дизайна. Он помогает понять, когда пользователю удобнее показать акцию, обновление каталога, email-рассылку или повторное касание.
Блок 16. Источники трафика

Поиск приводил основную аудиторию, но источники требовали разной логики

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

ИсточникНаблюдениеЧто делать
Поисковые системыглавный источник трафикаразвивать SEO, посадочные страницы, тексты и каталог
Прямые заходывторой значимый источник без поискаусилить брендовые элементы, доверие, страницу “О компании”
Внутренние переходыважны для движения по каталогуулучшить меню, перелинковку, похожие товары и футер
Ссылки на сайтахотказы 27,1%проверить обещания в размещениях и соответствие посадочной странице
Блок 17. Поисковый трафик и конверсии

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

Поисковый трафик в отчёте был преимущественно из Google – 61,1%, другие поисковые системы давали 36,9%. В целом поведенческие показатели поискового трафика были в норме. При этом больше всего заказов приходило из Google, а самая высокая конверсия была у переходов из email-канала.

КаналВизитыОтказыГлубинаВремяКонверсияВывод
Google3 08310,3%12,217:180,94%основной источник заказов
Google1 86214,4%9,3716:040,32%нужна доработка посадочных и сниппетов
email-канал4610,9%14,515:032,17%малый объём, но интересная точка для теста рекламы
Блок 18. Соцсети и внешние размещения

Социальный трафик был лояльным, но требовал пересборки контента

По соцсетям преобладали переходы из Facebook – 60,2%, на втором месте был Instagram – 38,8%. В отчёте отмечалось, что в целом трафик из соцсетей лояльный, но с позиции заказов результат давал в основном Facebook. Поэтому контент в Instagram нужно пересмотреть, а Facebook использовать как канал привлечения новой аудитории.

60,2%Facebookглавный источник социального трафика и заказов.
38,8%Instagramвторой источник соцтрафика, но требовал пересмотра контента.
27,1%отказы по ссылкамвнешние обещания нужно сверять с содержанием посадочной.
Блок 19. Аудитория

Портрет аудитории помогает точнее проектировать интерфейс

По данным веб-аналитики в отчёте был составлен портрет посетителя: 92% аудитории из Украины, 38,4% – Киев и Киевская область. Чаще заказы совершали женщины 45–54 лет, также стоило обратить внимание на возраст 55+. Пик посещаемости приходился на 14 часов.

92%из Украиныгеография влияет на язык, доверие, доставку и условия заказа.
38,4%Киев и областьсильная региональная концентрация аудитории.
45–54ключевой возрастженщины этого возраста чаще совершали заказы.
14:00пик посещенийэто можно учитывать в рекламе, рассылках и публикациях.
Экспертный вывод. Если основная покупающая аудитория старше 45 лет, интерфейс должен быть особенно ясным: крупные элементы, понятные кнопки, спокойная типографика, прозрачные условия заказа и минимум двусмысленности.
Блок 20. Устройства

Мобильный опыт требовал отдельной проверки

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

Риск

Мобильная версия может снижать конверсию без явной технической поломки

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

Решение

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

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

Блок 21. SEO как часть UX

Аудит юзабилити показал, что сайту нужна и SEO-доработка

В отчёте были рекомендации по смысловой и поисковой доработке: переписать основной текст о компании, выделить конкурентные преимущества, добавить условия заказа, улучшить страницу “О компании”, развивать контент и связать страницы между собой. Для каталожного сайта SEO и UX работают вместе: поисковый спрос приводит пользователя, а удобная структура помогает ему дойти до заказа.

SEO/контент-задачаЗачем она нужнаКак влияет на UX
переписать текст о компаниипоказать преимущества и довериепользователь быстрее понимает, почему стоит заказать здесь
добавить условия заказа на карточкиснять вопросы перед покупкойменьше неопределённости перед формой
усилить страницу “О компании”показать фото, сертификаты, опытрастёт доверие к каталогу и форме заказа
создать внутренние переходысвязать каталог, товары и информациюпользователь не застревает на одной странице
Блок 22. До и после

Что меняется после внедрения рекомендаций

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

До аудита

Шапка перегружает пользователяссылки разрознены, поиск и служебные элементы требуют пересборки.
Каталог не объясняет условия заказапользователь видит товары, но не всегда понимает, как и на каких условиях их заказать.
Формы оставляют вопросыобязательные поля и сообщения после отправки недостаточно ясны.
Аналитика не внедрена в решенияканалы и поведение показывают точки роста, но сайт их не использует.
+

После внедрения

Появляется понятная структура входаосновное меню, личный кабинет, поиск и призыв к действию работают как система.
Карточки становятся коммерческимитовар, условия заказа, доверие и следующий шаг собраны на одной странице.
Форма превращается в диалогпользователь понимает, что заполнить и что произойдёт после отправки.
Аналитика управляет доработкамистраницы и каналы улучшаются не наугад, а по поведению пользователей.
Блок 23. Приоритеты

Оптимальный порядок исправлений после аудита

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

1Шапка и поискобъединить меню, усилить поиск, убрать разрозненность.
2Формы заказаобязательные поля, сообщения, сценарии оплаты и доставки.
3Каталог и карточкиусловия заказа, переходы, похожие товары, доверие.
4Мобильная версияскорость, кнопка вверх, отображение блоков и кликабельность.
5Контент и SEOтекст о компании, преимущества, мета-логика, внутренние ссылки.
Блок 24. Что получил клиент

Что получает бизнес после такого аудита юзабилити

Карту пользовательского маршрута

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

Список критичных правок

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

Аналитику по источникам

Какие каналы приводят трафик, где поведение лучше и какие посадочные требуют внимания.

Портрет аудитории

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

Приоритеты внедрения

Что исправить сразу, что вынести во второй этап, а что контролировать через аналитику.

Связку UX, SEO и продаж

Как интерфейс, контент, поиск, каталог и формы работают на заказ.

Блок 25. Для каких сайтов

Кому нужен такой аудит юзабилити

Каталожным сайтам

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

Интернет-магазинам

Когда трафик есть, но формы, карточки или мобильная версия мешают заказам.

B2B-проектам

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

Сайтам после редизайна

Когда внешний вид обновлён, но важно проверить логику, сценарии и аналитику.

Блок 26. Перелинковка

Связанные кейсы и разделы VozniNet

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

Блок 27. Вопросы и ответы

Вопросы по аудиту юзабилити каталожного сайта

Чем такой аудит отличается от SEO-аудита?

SEO-аудит показывает, как сайт видят поисковые системы. Аудит юзабилити показывает, как сайт проходит человек: понимает ли он меню, поиск, карточку товара, условия и форму заказа.

Почему важно смотреть веб-аналитику?

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

Что важнее исправлять первым?

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

Можно ли использовать такой аудит для интернет-магазина?

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

Следующий шаг

Хотите понять, где посетитель теряет путь к заказу?

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