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

Юзабилити — это про то, может ли человек сделать то, за чем пришёл, и сколько усилий он на это потратит. Не про красоту, не про соответствие трендам и не про то, нравится ли сайт руководителю.

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

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

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

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

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

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

Цифры говорят, где падение. Причину они не объясняют — для этого нужно посмотреть, что человек делает.

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

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

Тест с живыми людьми — пять-восемь человек, которым дают задачу («найдите цену на такую услугу и отправьте запрос») и наблюдают, не помогая. Этого количества хватает, чтобы найти основную часть серьёзных проблем. Как это организуют и проводят, разобрано в материале про UX-тестирование.

Если продукт сложнее сайта услуг — кабинет, сервис, внутренняя система — понадобятся и другие методы: интервью, наблюдение за работой, анализ обращений. Их набор разобран в материале про UX-исследования.

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

Что оттуда достают. Во-первых, запросы без результата — прямой список того, чего на сайте нет или что не находится из-за формулировки. Во-вторых, лексику клиентов: если в каталоге «системы автоматизации склада», а люди ищут «WMS», это вопрос названий, а не ассортимента. В-третьих, дефекты навигации: если товар есть в каталоге, но его ищут поиском, значит, до него не дойти по меню.

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

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

Форма — место, где потери самые крупные и самые дешёвые в исправлении. Что даёт эффект чаще всего:

Убрать поля. Каждое поле — причина не отправить. Оставляют то, без чего невозможно ответить клиенту; остальное спрашивают в разговоре. Отчество, должность, название компании и «откуда о нас узнали» уносятся из обязательных.

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

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

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

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

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

Скорость — часть удобства, а не отдельная техническая тема. Ориентиры: время отрисовки основного содержимого до 2,5 секунды, отзывчивость на действие до 200 миллисекунд, сдвиг вёрстки не больше 0,1. Особенно вредно последнее: страница дозагружается, кнопка уезжает, человек нажимает не туда.

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

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

Десять эвристик Нильсена — старый и до сих пор рабочий инструмент, но пользоваться ими стоит не как теорией, а как чек-листом на полчаса. Ключевые вопросы, которые они задают:

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

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

Слово используют для чего угодно — от «дизайнер посмотрел и написал замечания» до полноценного исследования. Разница в том, что получает заказчик на выходе.

«Стало удобнее» — не результат. Список метрик, которые считаются на любом сайте:

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

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

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

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

Идеальный способ — сравнить старую и новую версию на одинаковой аудитории. Работает он, к сожалению, не всегда.

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

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

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

И последнее: до и после любой правки фиксируйте цифры. Без снятого «до» разговор об эффекте превращается в обмен впечатлениями.

Ориентиры по нашим проектам: UX-исследование и аудит интерфейса — от 300 тыс. ₽; аудит кода и архитектуры, если проблема уходит в техническую часть, — 200–600 тыс. ₽; переделка сайта или веб-приложения с новой вёрсткой — от 1 млн ₽. Оценка бесплатная — оценка проекта и состава работ по вашим вводным.

Стоимость аудита определяют три вещи: объём продукта (лендинг, каталог на тысячи позиций или личный кабинет с ролями), нужно ли привлекать живых участников для тестирования, и в каком состоянии аналитика — если события не настроены, первую неделю приходится собирать данные, а не анализировать их.

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

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

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

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

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