Что такое UX-аудит сайта и как его провести

Шаг 1. Определиться с целью

Список проблем или задач бизнеса поможет определиться с целью. Чаще всего поводом для аудита становятся низкие конверсии: пользователи не покупают или не переходят по разделам сайта. Но для UX-аудита есть и другие причины:

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

Перед стартом задайте себе вопросы:

• Какие метрики хотим улучшить — конверсию, время на сайте, глубину просмотра?
• Какие страницы или функции наиболее критичны для бизнеса?
• Есть ли конкретные жалобы пользователей, которые нужно проверить?

❌	✅
Улучшить пользовательский опыт сайта	Выявить причины, по которым 70% пользователей покидают страницу оформления заказа, не завершив покупку

Шаг 2. Собрать данные

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

Раздел	Что собрать	Зачем это нужно	Пример
Аудитория	Описание типичных представителей, их цели и ограничения	Понять мотивацию и ограничения	Ирина, 36 лет. Боится потратить лишнее, предпочитает недорогие покупки. Нужна быстрая оплата
Воронка конверсии	Отчеты в Google Analytics, Яндекс Метрике	Найти места с наибольшим оттоком	60% пользователей бросают оплату на этапе выбора доставки
Пути пользователей	Карты путей, отчеты о навигации	Проверить, как люди идут к цели	5 кликов, чтобы найти историю заказов, — слишком сложно
Поведение на странице	Время, глубина, отказы, карты кликов и скроллинга	Посмотреть на страницы глазами пользователя	3 секунды на странице — не нашли нужное Кликают на неработающую иконку — нужно исправить
Сегменты пользователей	Поведение по устройствам и браузерам	Найти баги и особенности поведения в разных условиях	Проблема на Safari Mobile, а не везде
Отзывы и жалобы	Поддержка, соцсети, формы	Понять реальные боли, не через догадки	«Пока товар в корзине, на сайте он в наличии, но во время заказа оказывается, что он закончился»
Конкуренты	Сайты конкурентов, обзоры, пользовательские тесты	Сравнить подходы, найти решения	У компании X удобная фильтрация — взять за пример

Шаг 3. Провести UX-тестирование по эвристикам

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

Эвристики — это чек-лист для дизайнера: если интерфейс соответствует этим принципам, людям будет проще пользоваться сайтом или приложением. Такое тестирование может быть дополнительным этапом в аудите: дизайнеры исправляют очевидные ошибки, а затем уже общаются с пользователями. Разберем каждую эвристику на примере.

Эвристика Нильсена	Вопросы для самопроверки	Примеры наблюдений
1. Видимость состояния системы. Пользователь всегда должен понимать, что происходит на сайте прямо сейчас.	Видно ли, что происходит после действия? Есть ли индикаторы загрузки, подтверждения?	После клика на кнопку ничего не происходит — пользователь не понимает, отправлено ли сообщение.
2. Соответствие между системой и реальным миром. Используйте понятные пользователю слова и образы из реальной жизни.	Понятны ли названия и тексты? Используются ли знакомые слова и логика?	Пользователь ищет кефир в разделе с молочными продуктами, а он в «Напитках».
3. Пользовательский контроль и свобода	Можно ли отменить действия? Есть ли «назад», «отмена»?	Чтобы убрать из заказа лишний товар, нужно возвращаться на три шага.
4. Последовательность и стандарты. Одни и те же элементы должны выглядеть и работать одинаково во всей системе.	Одинаково ли работают кнопки и элементы по всему сайту?	На одной странице кнопка «Купить», на другой — «Оформить заказ».
5. Предотвращение ошибок	Сайт помогает избежать ошибок? Есть ли валидация? Подсказки?	Поле email не проверяется, пользователь вводит адрес без @, форма отправляется.
6. Узнаваемость, а не запоминание. Все необходимые элементы и опции должны быть видны или легко доступны.	Пользователь может ориентироваться без запоминания? Виден ли путь, есть ли подсказки?	Пользователь не видит, в каком разделе находится. Нет хлебных крошек.
7. Гибкость и эффективность. Интерфейс должен быть удобен и новичкам, и опытным пользователям.	Можно ли выполнять задачи быстрее (горячие клавиши, автозаполнение)?	При оформлении заказа не подтягиваются введенные данные. Приходится всё вводить заново.
8. Эстетика и минимализм. Не перегружайте интерфейс лишней информацией.	Нет ли лишнего? Фокусируется ли интерфейс на сути?	На странице много баннеров, текста и всплывающих окон. Сложно сосредоточиться.
9. Помощь пользователю в распознавании, диагностике и исправлении ошибок. Сообщения об ошибках должны быть понятными и предлагать решение.	Есть ли понятные сообщения об ошибках? Объясняется, что не так?	Ошибка «Что-то пошло не так» — пользователь не понимает, что делать.
10. Справка и документация. Даже в идеальном интерфейсе иногда нужна документация, и она должна быть доступной.	Можно ли найти помощь? Есть ли доступные инструкции?	Нет подсказок по доставке, возврату. Информация спрятана глубоко в разделе «FAQ».

Шаг 4. Провести юзабилити-тестирование

Данные из аналитических систем и форм обратной связи помогают собрать гипотезы о проблемах пользователей. Чтобы эти гипотезы проверить, проводят тестирования в режиме реального времени. Якоб Нильсен утверждает, что пять пользователей находят до 80% критичных проблем. Для первого аудита такой группы респондентов достаточно. 

Что нужно подготовить для тестирования:

• 5–7 типичных задач — то, что люди делают на сайте каждый день. Например, найти и купить товар, зарегистрироваться, посмотреть условия доставки, связаться с поддержкой.
  
• Сценарий, который погрузит участника теста в контекст. Например:
  «Представьте, что вы хотите купить пижаму на этом сайте. Что будете делать?»
  
• Инструменты для записи экрана и голоса. Например, Zoom или Loom. Пусть пользователь вслух объясняет, что делает. Это помогает понять, как он мыслит и где путается.
  
• Блокнот или шаблон фиксации проблем.
  Записывайте, где человек останавливался, что не понял, что сказал. Не комментируйте и не помогайте. Просто наблюдайте.

После теста дизайнер группирует проблемы по темам (навигация, формы, мобильная версия), добавляет UX-выводы и гипотезы для улучшения. Оформить итоги тестирования можно в обычной таблице, на доске Miro или даже в Figma. Дальше эти результаты обсуждают с остальной продуктовой командой: выделяют критичные и оценивают способы решения проблем, которые предложил дизайнер.

Номер задачи	Что делал пользователь	Что вызвало затруднение	Комментарий	Вывод
1. Найти товар и добавить в корзину	Перешел в каталог → Выбрал категорию → Кликнул на товар → Добавил в корзину	Категории товаров названы непонятно: «Lifestyle», «Must-have»	«Я не понял, где искать худи. Это про одежду или аксессуары?»	Переименовать категории: использовать понятные термины (например, «Одежда», «Обувь»)
2. Оформить заказ	Нажал «Оформить» → Заполнил форму → Нажал «Подтвердить»	Слишком много полей в форме, особенно необязательных	«Я не хочу регистрироваться сейчас. Нужно быстрее купить»	Сократить форму: оставить только имя, телефон и адрес
3. Найти условия возврата	Сначала искал в футере → Не нашел → Воспользовался поиском → Ушел с сайта	Нет раздела «Возврат», в футере ссылка скрыта под «Поддержка»	«Я вообще не понял, как вернуть товар. Наверное, надо писать в поддержку»	Добавить отдельный пункт «Условия возврата» в меню и футер
4. Купить с телефона	Открывал меню → Случайно нажал не туда → Повторил три раза	Меню слишком плотное, клики не распознаются	«Каждый раз попадаю в не тот раздел»	Увеличить размер и отступы элементов меню
5. Сообщить об ошибке	Заполнил и отправил форму	Нет подтверждения, что сообщение отправлено	«Я не уверен, что сообщение ушло, — меня перекинуло на главную страницу»	Добавить сообщение: «Спасибо за обратную связь, вернемся с ответом по email»

Читайте также:

Как создать дизайн-систему с нуля: пошаговый план

Шаг 5. Подготовить отчет по UX-аудиту

Формат отчета по UX-аудиту зависит от аудитории и цели:

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

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

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

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

Примеры реальных UX-аудитов

Разберем два варианта аудита сайта. В первом случае — с использованием только эвристического подхода, во втором — с юзабилити-тестированием.

Jaguar eCommerce UX-аудит от Scandiweb

Scandiweb провел аудит интернет-магазина Jaguar. Цели были четкие:

• снизить отказы на ключевых страницах;
  
• повысить конверсию и клики по CTA;
  
• улучшить вовлечение с лендингов.
  

Что сделали:

1. Составили карту пользовательского пути и сценарии.
   
2. Запустили юзабилити-тесты и тепловые карты.
   
3. Проанализировали поведение пользователей (замирания, нечеткие зоны).
   

Тепловые карты показали, что пользователи чаще обращали внимание на центр экрана. При этом ключевой баннер находился в левой части. Чтобы увеличить переходы по нему, предположили, что баннер нужно размещать по центру. Гипотезу рекомендовали проверить AB-тестами.

UX-аудит TextMagic от Eleken

TextMagic — SaaS-платформа для SMS-маркетинга. Компания планировала расширить линейку продуктов и обратилась к Eleken, чтобы провести UX-аудит. Цель — убедиться, что текущий интерфейс не помешает масштабированию, и заранее устранить проблемы в интерфейсе.

Что сделали

1. Команда изучила, как аналогичные сервисы — Intercom, Zendesk и Sendgrid — решают похожие задачи. Так получилось собрать лучшие практики, особенно в онбординге и структуре главных страниц.
   
2. Оценили, насколько главная страница четко и быстро доносит суть продукта. Задача — чтобы пользователь сразу понимал, зачем этот сервис и какие у него преимущества.
   
3. Вместе с клиентом составили типичные пользовательские пути. Это дало фокус: страницы анализировали с точки зрения задач посетителя сайта.
   
4. Проверили, где интерфейс нарушает базовые принципы удобства по Нильсену.
   
5. Сформировали отчет с описанием проблем и предложили улучшения.

Результат аудита стал для клиента чем-то вроде инструкции: достаточно было пройтись по каждой странице и исправить проблемы интерфейса. Eleken создали UI Kit, который помог TextMagic внедрить правки быстрее и в едином стиле.

Три совета всем, кто собирается проводить первый UX-аудит

1. Собирайте жалобы так, как будто это золото

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

2. Не просто делайте выводы, а предлагайте решения

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

3. Показывайте UX-проблемы, а затем уже описывайте

Доска в Miro с шагами пользователя, скриншоты с выделенными зонами, схема путей или граф оттока — все это говорит сильнее текста. Один визуальный разбор экрана с подписями «где больно и почему» — это уже мини-отчет. Его поймет и дизайнер, и CEO.