Юзабилити сайта — насколько легко посетитель находит нужное и доходит до целевого действия. Оценивают его по Вебвизору, карте скроллинга, доле брошенных форм, времени до первого клика.
Типовой аудит — около 40 проверок по семи зонам: первый экран, навигация, каталог, карточка товара, формы, мобильная версия, элементы доверия.
Дальше — как за 30 минут собрать данные и завести таблицу находок, сам чек-лист, пять частых ошибок, дешевая проверка гипотез и порядок правок по их стоимости: что чинить сразу, а что отложить.
Чем юзабилити отличается от дизайна
Дизайн отвечает на вопрос «нравится ли», юзабилити — «получается ли сделать». Это разные оценки одного сайта, и путать их дорого.
Допустим, лендинг выглядит дорого: крупные фото, аккуратная типографика, кнопка заявки — ниже третьего экрана, да еще полупрозрачная. На телефоне такую кнопку почти не видно. Дизайнер сдает работу с чистой совестью, а посетитель не находит, куда нажать.
Критерий простой. Если трафик с рекламы растет, а заявок нет — ищите проблему в пути к действию, а не в картинке. Что сделать сейчас: откройте сайт с телефона, засеките время до первого нужного клика и проверьте, виден ли призыв к действию без прокрутки.
Что именно проверяем
Выписывать нужно не «все подряд», а денежные задачи посетителя: купить, оставить заявку, найти телефон, узнать условия доставки. Именно через них проверяют сайт, а не через список экранов.
Для интернет-магазина сценарии обычно такие: найти товар через фильтры, положить в корзину, оформить заказ, узнать статус доставки. Для сайта услуг — иначе: понять, чем компания занимается, найти цену или условия, связаться с менеджером, оставить заявку.
Как за 30 минут найти проблемы по Метрике
Порядок такой: сначала отчет по формам, потом карта скроллинга, и только затем записи Вебвизора — не подряд, а по страницам, где проблема уже видна. Весь цикл аудита выглядит так: метрики → проблемные страницы → записи и карты → тесты по сценариям → таблица находок.
В отчете по формам ищут брошенные поля: на каком шаге посетитель перестает заполнять. Карта скроллинга показывает обрыв прокрутки прямо над кнопкой — верный знак, что CTA стоит поднять выше. В записях Вебвизора ищут клики по некликабельным элементам и долгое время до первого клика: оба сигнала говорят, что интерфейс не подсказывает, куда нажимать.
Критерий: если на странице выхода из воронки визитов заметно больше, чем на соседних шагах, ее разбирают первой — остальные страницы подождут.
Таблица для находок
Для фиксации проблем заводят одну таблицу с колонками: Страница, Элемент, Проблема, Данные, Гипотеза, Приоритет, Статус. Каждую находку вносят сразу, пока не забылась.
Пример для корзины: страница «Корзина», элемент «Кнопка оформления», проблема «Нет статуса после нажатия», данные «Обрыв на этом шаге воронки», гипотеза «Добавить индикатор загрузки», приоритет P1, статус «В работе». Вторая строка: страница «Корзина», элемент «Поле промокода», проблема «Ошибка без пояснения», данные «Клики по полю без ввода», гипотеза «Показать текст ошибки», приоритет P2, статус «Новая». Эту же таблицу позже используют в матрице приоритетов.
Чек-лист юзабилити на 40 пунктов
Семь зон, 40 пунктов. Каждый проверяют взглядом или кликом, а не догадкой.
Первый экран
- •Оффер виден без скролла.
- •Кнопка действия видна без скролла.
- •Телефон стоит в шапке.
- •Из заголовка ясно, что продает компания.
- •Слайдер не заменяет оффер.
- •Кнопка контрастная, не полупрозрачная.
Навигация
- •Пункты меню не дублируют друг друга.
- •До категории не больше трех кликов.
- •Поиск дает подсказки.
- •404 с поиском, ссылкой на главную и контактами.
- •Хлебные крошки на внутренних страницах.
- •Логотип ведет на главную.
Каталог
- •Фильтры не сбрасываются после возврата.
- •Сортировка заметна.
- •Цена и наличие видны в списке.
- •Пустая выдача предлагает замену.
- •Возврат из карточки ведет на ту же позицию.
Карточка
- •Цена и кнопка «Купить» без скролла.
- •Указаны наличие и сроки доставки.
- •Размер выбирают один раз.
- •Фото увеличиваются.
- •Характеристики даны списком.
- •Кнопка меняет состояние после нажатия.
Форма
- •Только нужные поля.
- •Обязательные поля подсвечены.
- •У сложных полей есть подсказки.
- •Ошибка объяснена текстом рядом с полем.
- •Кнопки в инфинитиве: «заказать», «отправить».
- •После отправки виден статус.
Мобильная версия
- •Зона нажатия не меньше 44×44 px.
- •Нет горизонтального скролла.
- •Нет всплывашек на весь экран.
- •Телефон нажимается и звонит.
- •Клавиатура подходит к типу поля.
- •Шагов не больше, чем на компьютере.
Элементы доверия
- •Реквизиты компании.
- •Отзывы с именами.
- •Гарантии и условия возврата.
- •Контакты и адрес.
- •Условия оплаты и доставки.
Первый экран и навигация
Схема первого экрана сверху вниз: шапка с логотипом, меню и телефоном → оффер → кнопка действия → довод доверия. Частые провалы. Меню из двенадцати пунктов: раздел не найти, человек уходит в поисковик — сгруппируйте пункты. Поиск без подсказок: опечатка дает пустую выдачу — включите подсказки. 404 без выхода выглядит как сломанный сайт — добавьте поиск, главную и контакты.
Формы и мобильная версия
Допустим, в форме девять полей. Гипотеза: оставить имя и телефон, остальное узнать при звонке. Улучшение в отчете по формам — выросла доля дошедших до отправки, а поле, где бросали, ушло из лидеров отказов. Если на телефоне ключевая задача требует больше шагов, чем на компьютере, сценарий перегружен.
Пять ошибок, которые съедают заявки
По опыту, эти ошибки российских сайтов съедают 20–40% заявок. Формат: как выглядит → чем опасна → что сделать.
- •«Купить в 1 клик» без корзины → при втором товаре размер выбирают заново, заказ бросают → верните корзину рядом с быстрой покупкой.
- •Поп-ап на входе → закрывает оффер, человек уходит, не прочитав → показывайте окно после прокрутки.
- •Каталог без фильтров → нужный товар не найти в общей ленте, посетитель ищет у других → добавьте фильтры (зона «Каталог»).
- •Кнопка «Отправить» без статуса → человек жмет снова, приходят дубли или он решает, что заявка пропала → проверьте зону «Форма».
- •Телефон только в подвале → посетитель с готовым вопросом звонит конкуренту → проверьте зону «Первый экран».
Как дешево проверить гипотезу
Коридорный тест дешевле любого редизайна. Возьмите пять человек не из команды, дайте им 5–7 коротких задач по денежным сценариям — найти товар, оформить заявку, узнать доставку — и молча наблюдайте, где они спотыкаются. Подсказывать нельзя: каждая подсказка прячет проблему. Уже 3–5 участников находят около 80% частых проблем, так что пяти хватает.
А/Б-тест включайте, только когда трафика достаточно. Если на каждую версию за разумный срок не набирается хотя бы нескольких сотен целевых действий, тест не даст ответа — разница утонет в случайных колебаниях.
Допустим, магазин меняет текст кнопки на карточке товара, а заявок в неделю — единицы. Здесь коридорный тест и сравнение до/после честнее, чем растянутый на месяцы А/Б.
Сезонность и смена рекламной кампании искажают выводы не хуже плохого дизайна: рост заявок может быть от нового объявления, а не от правки на сайте.
Как мерить до и после
Порядок: замер две недели до правки → внедрение → неделя на стабилизацию → замер после за такой же период. Сравнивать нужно одинаковые дни недели и одинаковые источники трафика, иначе цифры несопоставимы. Если во время замера запустили новую рекламу, результат лучше отложить.
Обещать рост на конкретный процент заранее не стоит — его никто не знает. Задача замера — увидеть направление изменения и не спутать его с сезонным всплеском.
Что чинить сразу, а что отложить до редизайна
Порядок правок задают деньги, а не хронология находок. Поможет матрица «влияние × стоимость» на четыре клетки: быстрые победы — большое влияние при дешевой правке, их берут в ближайший спринт; крупные проекты — большое влияние при дорогой правке, им место в плане; мелочи — дешево и слабо влияет, их делают пачкой; остальное ждет редизайна. Влияние оценивают по денежным сценариям, а не по ощущению «некрасиво».
Разложим три типовые находки аудита. Текст кнопки заявки — быстрая победа: правка на час, а сценарий денежный. Фильтры каталога — крупный проект, их ставят в план. Новый чекаут — до редизайна: переделка большая, и ее разумно делать вместе с остальным.
Что сделать сейчас: взять три пункта из клетки быстрых побед и назначить им срок в ближайшем спринте.
Сколько стоит юзабилити-аудит у подрядчика
Цена зависит не от прайса студии, а от объема: числа сценариев, типов страниц, нужны ли тесты с живыми пользователями или хватит анализа Метрики.
В отчете обязаны быть: краткое резюме, таблица проблем с доказательствами из Метрики, скриншоты спорных мест, приоритеты, список быстрых правок и уже знакомая матрица влияния и стоимости.
Принимая работу, проверяйте одно: у каждой проблемы есть данные и гипотеза, а не формулировка «улучшить дизайн». Разработчику должно быть ясно, что именно менять — без домыслов и уточняющих созвонов.
Критерий простой: если отчет не удается быстро разложить на задачи для команды, его возвращают на доработку — платите не за красивую презентацию, а за понятный план действий.
Проведем юзабилити-аудит и внедрим правки в верстку: доработка сайта в МАЙПЛ — от 50 000 ₽, смета после разбора записей Вебвизора.
Источники
