UX-аудит сайта: чек-лист для самостоятельной проверки

Сайт может быть технически безупречным, быстро грузиться и иметь аккуратную вёрстку — и при этом терять посетителей. Причина обычно одна: людям неудобно. Они не понимают, куда нажать, не находят нужную информацию и уходят к конкурентам. Хорошая новость в том, что для выявления таких проблем не нужна команда аналитиков: базовый UX-аудит реально провести самостоятельно за один-два вечера. Ниже — практический чек-лист, которым можно пользоваться сразу после того, как вы сверстали или обновили очередной проект.

Что такое UX-аудит и зачем делать его самому

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

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

Подготовка: пять минут перед стартом

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

• Определите цель сайта. Заявка, заказ, звонок, подписка, чтение статей — именно к этому действию вы будете примерять каждый экран.
• Выберите 2–3 сценария. Например: «нашёл в поиске статью и хочет подписаться» и «ищет услугу и хочет оставить заявку».
• Смотрите как новый посетитель. Откройте сайт в режиме инкогнито, очистите кэш, не пользуйтесь закладками.
• Заведите таблицу. Колонки: страница, проблема, серьёзность, что исправить. Так находки не потеряются.

Чек-лист UX-аудита

Первый экран: понятно ли за пять секунд

• Заголовок объясняет, что здесь и для кого, без общих слов вроде «инновационные решения».
• Главное действие видно без прокрутки: кнопка, форма, ссылка.
• Нет всплывающих окон и видео со звуком при входе.
• Есть визуальный якорь — изображение, иллюстрация, фото товара.
• Контраст текста и фона достаточный, текст читается на солнце и на тусклом экране.

Навигация и структура

• Меню содержит не больше 6–7 пунктов, названия — на языке пользователя, а не отдела маркетинга.
• Логотип ведёт на главную, активный раздел подсвечен.
• Во внутренних разделах есть хлебные крошки.
• Поиск присутствует, если материалов больше двадцати.
• Страницы 404 и 500 оформлены и содержат ссылки на важные разделы.
• В футере — контакты, политика конфиденциальности, карта сайта.

Контент и читаемость

• Длина строки — примерно 60–80 знаков, иначе глаз теряет начало следующей строки.
• Подзаголовки появляются каждые три-пять абзацев.
• Перечисления оформлены списками, а не «простынями» текста.
• Базовый размер шрифта — 16 px и больше, межстрочный интервал — не меньше 1,5.
• Ссылки отличаются от обычного текста цветом и подчёркиванием, а их текст осмысленный: не «нажмите здесь», а «чек-лист по вёрстке».

Формы и целевые действия

• Полей ровно столько, сколько нужно для ответа клиенту.
• Подписи стоят над полями: плейсхолдер исчезает при вводе, и человек забывает, что писал.
• Ошибки объясняются рядом с конкретным полем и по-человечески: «Проверьте формат телефона».
• Кнопка называет результат: «Отправить заявку», «Получить расчёт».
• Есть видимая реакция на отправку: индикатор загрузки и сообщение об успехе.
• Предусмотрена альтернатива — телефон, мессенджер, почта.

Мобильная версия

• Текст читается без увеличения, нет горизонтальной прокрутки.
• Кликабельные элементы не меньше 44 px и не прижаты друг к другу.
• Телефон в шапке оформлен ссылкой tel: и набирается в один тап.
• Меню открывается предсказуемо и легко закрывается.

Скорость и техническое поведение

• Страница загружается быстрее трёх секунд на мобильной сети.
• Изображения сжаты и отдаются в современных форматах.
• Вёрстка не «дёргается» при загрузке: места под картинки и баннеры зарезервированы.
• Клики и переходы не приводят к неожиданным новым вкладкам.

Доверие и обратная связь

• Есть реальные контакты, реквизиты, фотографии команды.
• Отзывы, кейсы или примеры работ не выглядят придуманными.
• У материалов видны свежие даты публикаций.
• Пользователю понятно, как задать вопрос и как быстро ему ответят.

Как расставлять приоритеты

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

Инструменты, которые облегчают проверку

• Lighthouse и PageSpeed Insights — доступность, скорость, базовые подсказки по семантике.
• Вебвизор в Яндекс Метрике и тепловые карты — видно, где люди останавливаются и куда не доходят.
• Скриншоты и запись экрана — простой способ зафиксировать проблему и вернуться к ней позже.
• Живые люди. Дайте задание знакомому: «найди стоимость и оставь заявку». Молча смотрите, где он застрянет.

Частые ошибки самостоятельного аудита

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

Что делать после аудита

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