Коротко

Вы привели человека на сайт — а он открыл страницу, потыкался и ушёл. Без заявки, без звонка, даже не долистав. Обидно: трафик-то оплачен.

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

Зачем вообще думать про UX

UX (user experience) — это не «красивости». Это то, насколько легко человеку решить свою задачу: найти, понять, заказать.

Давай разберём на простом примере.

Человек пришёл за конкретным: «сколько стоит ремонт и когда приедете». По данным Nielsen Norman Group, у посетителя есть 10–20 секунд, чтобы решить, оставаться ли на странице. Если за это время он не находит ответ — уходит. Не потому что вы плохие. А потому что сайт не ответил на его вопрос.

Каждая секунда лишнего поиска — это минус вероятность, что человек станет клиентом.

Есть и другой аргумент: по исследованиям Nielsen Norman Group, люди не читают сайт, а сканируют его. Взгляд бежит по заголовкам, кнопкам и картинкам, задерживаясь на несколько секунд. Если за это время человек не понял, что делать, — он ушёл.

Вот главные ошибки, которые заставляют уходить.

Навигация-лабиринт: меню, в котором теряются

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

Что бесит сильнее всего:

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

» Слишком много пунктов. Чем больше вариантов в меню, тем дольше человек выбирает и тем выше шанс, что не выберет ничего, — это закон Хика. Лишние ссылки — шум, а не помощь.

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

» Не «правило трёх кликов». Оно давно опровергнуто: Джошуа Портер (User Interface Engineering, 2003) экспериментально показал, что после трёх кликов отток не растёт, а удовлетворённость не падает. Уходит человек не от числа шагов, а когда слабеет «информационный запах» (information scent) — термин из теории информационного поиска Information Foraging (Питер Пиролли и Стюарт Кард, Xerox PARC). Пока человек видит признаки, что приближается к цели, он идёт дальше; исчезли признаки — ушёл, сколько бы кликов ни оставалось.

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

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

Сайт, который грузится вечность

Пользователь не ждёт. По данным Google (исследование «The Need for Mobile Speed»), если сайт грузится дольше трёх секунд, его покидает 53% посетителей, зашедших с телефона.

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

Что чаще всего тормозит сайт — по данным Web Almanac (отчёт HTTP Archive) и Google PageSpeed Insights, в таком порядке:

» Тяжёлые изображения — причина номер один: фото в исходном разрешении и без сжатия весят мегабайты и съедают львиную долю времени загрузки.
» Лишний JavaScript — неиспользуемые скрипты «на всякий случай» и сторонние виджеты (чаты, счётчики, реклама). Они блокируют отрисовку страницы.
» Много запросов к серверу — каждая картинка, шрифт и скрипт уходят отдельным запросом, а их набегают десятки.

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

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

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

Версия «только для компьютера»

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

Признаки проблемы:

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

Ориентир: кликабельный элемент должен быть не меньше 48×48 пикселей — так рекомендует гайд Google Material Design, иначе по нему банально трудно попасть пальцем.

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

Перегруженный интерфейс: «новогодняя ёлка»

Баннер, всплывашка, ещё баннер, чат, «подпишитесь на рассылку», анимация, три кнопки разных цветов. Всё мигает и кричит.

В итоге человек не понимает, на что смотреть. Вместо одного чёткого действия — десять кричащих «нажми меня».

Особенно раздражают всплывающие окна на входе: человек ещё ничего не прочитал, а ему уже суют «подпишись» или «забери скидку». Это как начать разговор с человеком, который сразу кричит «купи!».

Закон простой: одна страница — одна главная цель. Всё, что отвлекает от неё, — убрать.

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

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

Формы-пытки: чем длиннее, тем хуже

«Оставьте имя, фамилию, телефон, email, город, компанию, должность, ИНН…» — и человек закрывает форму на третьем поле.

Каждое лишнее поле снижает конверсию. Людям лень — и это нормально.

Что ещё убивает форму:

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

Чем короче путь от «хочу» до «оставил заявку» — тем лучше. Идеал — телефон и кнопка.

Ещё помогает автозаполнение и подсказки: система сама подставляет город или маску телефона — и человек заполняет форму за пару секунд, а не минуту.

«Сюрприз после клика»: обещали одно — получили другое

Человек кликает «Посмотреть цену» — а попадает на форму регистрации. Или ищет «доставку» — а открывается каталог.

Это разрушает доверие мгновенно. Пользователь чувствует, что его обманули, — и уходит уже с негативом.

Правило: то, что обещает ссылка, должно быть по ссылке. Никаких подмен и «сюрпризов».

Здесь стоит развести два понятия. Интригующий заголовок, который честно ведёт к тому, что обещал, — это мастерство: маркетолог привлёк внимание, и человек, перейдя, получил ровно то, что искал. А вот обман — когда броский заголовок обещает одно, а внутри оказывается другое — это совсем иное. Такой «клиент» дёшево обходится в рекламе, конверсия выглядит красиво, но реальный результат для бизнеса — ноль: человек пришёл за одним, получил подмену и ушёл. Маркетолог в моменте выглядит хорошо, бизнесу — хуже. Эти времена проходят, но ещё, к сожалению, встречаются. Вопрос не в том, смогли ли вы привлечь человека, а в том, станет ли он вашим клиентом.

Классика: кнопка «Узнать цену» ведёт на форму «оставьте все данные, и мы перезвоним». Человек хотел цифру — а его просят «продаться». Он уходит.

Как проверить свой сайт за вечер

Не нужно быть дизайнером. Достаточно посмотреть на сайт глазами клиента.

Шаг 1. Пройдите путь клиента сами.

С телефона, в мобильной сети: откройте сайт и попробуйте «купить». Засеките, сколько кликов и секунд занимает путь до заявки.

Шаг 2. Задайте три вопроса.

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

Шаг 3. Проверьте скорость.

Откройте сайт с телефона в мобильной сети и засеките загрузку. Дольше 4 секунд — искать, что тормозит.

Шаг 4. Сократите путь до заявки.

Уберите лишние поля формы, вынесите телефон наверх, уберите всплывашки на входе.

И подключите вебвизор: он покажет, где именно люди спотыкаются — на каком экране, поле, кнопке. Это точнее любых догадок.

Вопросы и ответы

Что запомнить

» Люди уходят не из-за цены, а из-за неудобства.

» Важное — на виду, путь до заявки — 1–2 клика.

» Короче форма, быстрее сайт, меньше «кричащих» элементов — больше заявок.

Мой порядок

1. Ищу не «что не так», а «где именно теряю людей»: по вебвизору и картам кликов, а не по своим ощущениям.
2. Чиню путь до заявки раньше, чем внешний вид: сначала убираю барьеры между входом и заявкой, потом берусь за текст и картинки.
3. Меняю по одному и меряю «до/после», чтобы заказчик видел не «мы сделали красиво», а «конверсия выросла на столько-то».