Юзабилити сайта: 15 ошибок, из-за которых посетитель уходит без заявки

Что такое юзабилити сайта простыми словами

Слово пришло из английского и означает «пригодность к использованию». Для сайта бизнеса это удобство на трёх уровнях:

1. Понятность. Через несколько секунд ясно, что это за компания, что она делает и для кого.
2. Навигация. Нужную информацию — цену, сроки, адрес, примеры — легко найти.
3. Действие. Оставить заявку, позвонить или написать можно в одно-два касания, с любого устройства.

Хорошее юзабилити незаметно: человек просто делает то, что хотел. Плохое заметно сразу: раздражение, лишние клики, поиски кнопки и уход к конкуренту.

Важно не путать юзабилити и дизайн. Сайт может быть красивым и неудобным: светло-серый текст на белом, кнопка в виде иконки без подписи, меню, спрятанное за необычным жестом. И наоборот, простой сайт без изысков может быть удобным.

15 ошибок юзабилити, из-за которых уходят без заявки

Мы собрали ошибки, которые встречаем на разборах сайтов услуг чаще всего, и разложили по зонам.

Дальше — подробнее о самых дорогих ошибках.

Первый экран: ошибки 1–3

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

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

Навигация: ошибки 4–6

Меню пишут словами компании, а читают словами клиента. «Решения», «Направления», «Экспертиза» — человек не понимает, где здесь цены. Пункты «Услуги и цены», «Наши работы», «Контакты» понятны без раздумий. Если пунктов больше семи, часть из них стоит убрать в подвал или объединить.

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

Формы: ошибки 7–9

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

Ещё одна частая ошибка: форма стирает все введённые данные при ошибке в одном поле. Человек второй раз заполнять не станет. И третья — молчание после отправки. Если не появилось сообщение «Заявка принята, перезвоним в течение 15 минут», человек не уверен, ушла ли заявка, и отправляет её повторно или уходит. Что оставить в форме и как её проверить, — в статье форма заявки на сайте.

Контраст и читаемость: ошибка 10

Светло-серый текст на белом фоне выглядит изящно на большом мониторе дизайнера и не читается на телефоне на солнце. Международный стандарт доступности WCAG 2.2 задаёт минимальный контраст обычного текста 4,5:1, а для крупного — 3:1. Проверить контраст можно бесплатными онлайн-калькуляторами: вводите цвет текста и фона, получаете число.

Доверие: ошибка 12

Стоковые фото с улыбающимися людьми в гарнитурах и отзывы «Всё отлично, рекомендую! Анна» без фамилии и фото работают против вас: посетитель видит их на десятках сайтов. Реальные фото команды и объектов, пусть не идеальные по свету, вызывают больше доверия. То же с отзывами: имя, фото, ссылка на отзыв в Картах или скриншот переписки с разрешения клиента.

Мобильная версия и скорость: ошибки 13–14

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

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

Юзабилити-аудит сайта: как его проводят

Юзабилити-аудит — проверка сайта на удобство по набору критериев. Его делают двумя способами, и лучше совмещать оба.

Анализ юзабилити в Яндекс Метрике

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

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

Юзабилити-тестирование: как провести самому за вечер

Не нужна лаборатория и десятки респондентов. Исследователи из Nielsen Norman Group в известной статье о тестировании на пяти пользователях показывают, что небольшое число участников уже находит большую часть проблем. Для малого бизнеса хватает 3–5 человек.

1. Найдите 3–5 человек, похожих на клиентов. Не сотрудников и не тех, кто видел сайт. Друзья друзей подойдут.
2. Сформулируйте 3 задания. Например: «Узнайте, сколько стоит генеральная уборка квартиры 60 м²», «Найдите, работают ли они в выходные», «Оставьте заявку».
3. Дайте телефон и попросите думать вслух. Пусть проговаривают, что видят и что ищут.
4. Молчите и записывайте. Не подсказывайте, даже если человек ищет кнопку минуту. Это и есть находка.
5. Засекайте время и отмечайте, где застряли. Если двое из пяти споткнулись в одном месте, это проблема.
6. Соберите список и отсортируйте. Сначала то, что мешает оставить заявку, потом то, что мешает понять предложение, потом косметика.
7. Исправьте и повторите через месяц. Сравните заявки в Метрике до и после.

Наше наблюдение с таких тестов: владелец бизнеса почти всегда уверен, что телефон «везде видно», а цена «очевидна». А посторонний человек ищет телефон 40 секунд и не находит цену вообще, потому что она спрятана в PDF-прайсе внизу страницы.

Удобство сайта и деньги: условный пример

Пример условный, не кейс студии. Студия ремонта ванных в Екатеринбурге. Реклама приводит 1 500 посетителей в месяц, конверсия сайта 1,2% — 18 заявок. Средний чек 180 000 ₽, в договор превращается каждая пятая заявка.

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

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

Что исправлять в первую очередь

Не пытайтесь исправить всё сразу. Порядок:

1. Всё, что ломает заявку: неработающая форма, кнопка за краем экрана на телефоне, телефон не нажимается.
2. Всё, что мешает понять предложение: первый экран, цены, понятные названия услуг.
3. Всё, что мешает доверию: реальные фото, отзывы, адрес, реквизиты.
4. Скорость и раздражители: поп-апы, тяжёлые картинки, лишние виджеты.
5. Косметика: отступы, выравнивание, мелкие несоответствия стиля.

После каждого шага смотрите на конверсию в Метрике. Если изменения не дали результата за 2–4 недели при нормальном трафике, возвращайтесь к Вебвизору и ищите следующее узкое место.

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