Юзабилити сайта: как найти и починить то, что мешает заказу

Реклама откручивается, позиции подросли, счётчик показывает восемьсот визитов в месяц. Заявок за этот месяц — три. Первая версия обычно звучит одинаково: трафик нецелевой, подрядчик плохой. Иногда так и есть. Гораздо чаще человек до сайта доходит, упирается в непонятное и уходит обратно в выдачу.

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

Разбираем практику: чем искать проблемы бесплатно, что смотреть в Яндекс Метрике, как за вечер провести тест на живых людях, какие затыки встречаются чаще прочих и как понять, что правки сработали.

Юзабилити простыми словами: сколько усилий стоит одна заявка

Коротко. Юзабилити — мера усилий на пути от входа на сайт до отправленной заявки. Чем больше догадок, кликов и раздумий, тем меньше людей доходит до конца.

Дизайн отвечает за первое впечатление, юзабилити — за проходимость. Красивый сайт с формой в подвале и телефоном картинкой проигрывает невзрачному, где кнопка «Рассчитать стоимость» видна с любого экрана.

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

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

Почему трафик идёт, а заявок нет

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

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

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

Ещё симптом — дорогая заявка при живом трафике. Бюджет уходит на клики, клики приходят, на выходе тишина. Порядок разбора собран в статье о том, почему заявки дорогие.

Симптом	Где смотреть	Что обычно за этим стоит
Заходят и уходят за 10-15 секунд	Отчёт по времени на сайте, Вебвизор	Первый экран не отвечает, куда человек попал
Доскроллили до формы и не отправили	Аналитика форм, карта скроллинга	Форма длинная, непонятная или требует лишнего
Много кликов по некликабельному	Карта кликов	Ищут то, чего на странице нет: цену, фото, кнопку
Со смартфонов конверсия ниже в разы	Отчёт по устройствам, Вебвизор с фильтром	Мобильная вёрстка, попапы, мелкие кнопки
Уходят со страницы доставки и оплаты	Вебвизор, карта скроллинга	Условия невыгодные или сформулированы туманно

Что показывает Яндекс Метрика: пять инструментов и одна галочка

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

В Метрике зайдите в «Настройки», вкладка «Счётчик», и включите опцию «Вебвизор, карта скроллинга, аналитика форм». Дальше обновите код счётчика, если стоит старая версия. Весь набор бесплатный.

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

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

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

Аналитика форм даёт два отчёта. «Конверсия формы» показывает просмотры страницы с формой, количество взаимодействий и отправок. «Поля формы» — время взаимодействия с каждым полем, незаполненные поля и поля, с которых люди покидают страницу, так и не отправив данные. Поле, на котором обрывается заполнение, обычно и есть кандидат на выброс.

Инструмент	На какой вопрос отвечает	Глубина данных
Вебвизор	Что конкретно делал этот посетитель	15 дней, включая текущий
Карта кликов	Куда жмут чаще всего, в том числе мимо ссылок	До года, максимум 100 000 событий в отчёте
Карта ссылок	По каким ссылкам переходят, а какие простаивают	За выбранный период
Карта скроллинга	До какого места дочитывают страницу	15 дней, включая текущий
Аналитика форм	На каком поле бросают заполнение	15 дней, включая текущий

Три условия, о которые спотыкаются чаще всего: Вебвизор пишет за сутки ограниченную выборку визитов, корректная запись требует кодировки UTF-8, а аналитика форм видит только формы, которые отправляются событием submit. Личные данные в полях Метрика заменяет звёздочками.

Тест на живых людях: задание, секундомер и молчание

Коротко. Дайте трём-пяти знакомым конкретное задание на вашем сайте, засеките время и молчите. Половина проблем всплывает за один вечер.

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

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

1. Возьмите настоящую задачу клиента«Узнайте, сколько стоит установка кондиционера в двушке, и оставьте заявку». Без подсказок, каким разделом пользоваться.
2. Дайте свой смартфон, а не ноутбукБольшая часть посетителей приходит с мобильных, там же обычно всё и ломается.
3. Засеките время и молчитеКаждый раз, когда хочется подсказать, ставьте отметку: тут у сайта дыра.
4. Просите думать вслух«Ищу цену… тут её нет… вернусь назад» стоит десяти опросов про дизайн.
5. Записывайте остановки, а не мнения«Мне не нравится синий цвет» пропускаем. «Я три раза промахнулся по кнопке» фиксируем.
6. Повторите после правокТот же сценарий, другие люди. Спотыкаются в новом месте — предыдущее вы починили.

Восемь затыков, которые встречаются чаще прочих

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

• Первый экран без ответа на вопрос «что вы делаете и в каком городе»
• Цены нет даже вилкой: «рассчитывается индивидуально» читается как «дорого»
• Телефон нарисован картинкой и не нажимается со смартфона
• Форма из восьми полей там, где хватило бы имени и номера
• Доставка и оплата спрятаны в отдельный раздел мелким шрифтом
• Ни одного доказательства: нет фото работ, реквизитов, кейсов, живых контактов
• Мобильная вёрстка поехала: горизонтальная прокрутка, наезжающие блоки, мелкие кнопки
• Всплывающее окно закрывает контент через две секунды после входа

Первый экран — самый дорогой квадратный метр сайта. Человек пришёл из поиска по конкретному запросу и должен за пару секунд убедиться, что попал по адресу: что вы продаёте, где работаете, куда нажимать. «Комплексные решения для вашего бизнеса» этой работы не делает.

Про цены спорят чаще всего. Аргумент «у нас индивидуальный расчёт» понятен, только посетителю нужен ориентир, чтобы решить, продолжать ли разговор. Вилка «от 12 000 до 40 000 рублей в зависимости от площади» экономит время обеим сторонам. Связь с заявками разбирали отдельно: как повысить конверсию сайта.

Форма — место самых больших потерь. Каждое дополнительное поле стоит части заявок, а графы «должность» и «удобное время звонка» почти всегда лишние. Посмотрите по аналитике форм, где обрывается заполнение, и выкиньте всё, без чего менеджер обойдётся.

Мобильная вёрстка проверяется по требованиям Яндекса: страница открывается на экране от 320 пикселей без горизонтальной прокрутки, в коде стоит метатег viewport со значением width=device-width, Flash и Silverlight на мобильных не годятся. Размер кликабельных элементов задаёт WCAG 2.2 — рекомендация W3C от 5 октября 2023 года; критерий 2.5.8 требует минимум 24 на 24 CSS-пикселя. Российский ГОСТ Р 52872-2019 действует с 1 апреля 2020 года и опирается на тот же набор правил.

Всплывающие окна стоят отдельного абзаца. Google с 10 января 2017 года понижает страницы, где после перехода из поиска контент закрывает попап или заставка. Исключения оговорены: юридические уведомления вроде cookie и проверки возраста, диалоги входа на непубличный контент и небольшие баннеры, которые убираются одним нажатием.

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

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

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

У Яндекса оптимизация под мобильные с 2016 года входит в ранжирование. Мобильный робот проверяет главную и выборку внутренних страниц, обычно десять-двадцать адресов, и по ней судит о сайте целиком. Конкретный адрес прогоняется инструментом «Проверка мобильных страниц» в Вебмастере.

У Google история другая. 4 декабря 2023 года он закрыл отчёт Mobile Usability в Search Console, тест на мобильную пригодность и его API. Удобство при этом никуда не делось: оценка ушла в блок Page Experience, а страницы предлагается проверять через Lighthouse.

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

Как выбрать, что чинить первым

Коротко. Сначала дешёвые правки на прямом пути к заявке. Редизайн всего сайта — последнее, за что стоит браться.

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

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

Правка	Обычный срок	Кто делает	Куда бьёт
Телефон кликабельной ссылкой tel:	Полчаса	Верстальщик	Звонки с мобильных
Сократить форму до имени и телефона	Час	Верстальщик или админ CMS	Отправки формы
Убрать попап с первого экрана	Час	Верстальщик	Отказы, позиции в Google
Добавить вилку цен на страницу услуги	Полдня	Вы плюс контент-менеджер	Доверие, глубина просмотра
Переписать первый экран	1-2 дня	Копирайтер плюс дизайнер	Отказы и все шаги ниже
Починить мобильную вёрстку	2-5 дней	Верстальщик	Поведение со смартфонов целиком
Пересобрать структуру и адреса	Недели	Команда	Всё разом, с риском просесть в выдаче

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

Как убедиться, что стало лучше

Коротко. Замеряйте до правок и после, по целям Метрики, на сопоставимых отрезках и одинаковых источниках трафика. Ощущения тут не считаются.

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

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

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

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

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

Юзабилити чинится итерациями: посмотрели данные, нашли затык, поправили, замерили. Через три-четыре круга сайт работает заметно лучше на том же трафике. Хотите ускорить — оставьте заявку на бесплатный экспресс-аудит: пройдём путь посетителя, посмотрим карты и записи, вернём список правок с приоритетами. Мы ведём SEO-продвижение, Яндекс.Директ и разработку сайтов одной командой, поэтому правку не придётся пересылать между тремя подрядчиками. Связаться напрямую можно на странице контактов.