Ошибки юзабилити сайта

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

6:58

Почему удобство переводится в позиции

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

Дальше цепочка разворачивается сама:

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

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

Первый экран: где теряют больше всего

Решение остаться или уйти принимается за три-пять секунд, и приходится оно именно на первый экран. Ошибки здесь стоят дороже всех остальных вместе взятых.

Ошибка	Чем оборачивается	Как исправить
Непонятно, чем занимается компания	Уход за три секунды	Конкретный заголовок вместо слогана
Огромная картинка без смысла	Содержание уехало ниже сгиба	Уменьшить блок, поднять суть выше
Всплывающее окно сразу при заходе	Раздражение и закрытие вкладки	Показывать после 30 секунд или при уходе
Нет телефона и способа связи	Потеря готового клиента	Телефон в шапке на всех разрешениях
Слоган вместо предложения	Человек не понимает, туда ли попал	«Ремонт холодильников в Казани за один день»
Автопроигрывание видео со звуком	Мгновенное закрытие	Убрать или отключить звук по умолчанию
Чат перекрывает содержимое на телефоне	Сайтом невозможно пользоваться	Свернуть в маленькую иконку, поднять над кнопкой

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

Второй тест — про действие. Спросите того же человека, что он должен сделать дальше. Если на первом экране три равнозначные кнопки — «заказать», «рассчитать», «получить каталог» — выбор парализует. Основное действие должно быть одно и визуально главное, остальные — вторичные.

Мобильная версия: главный источник потерь

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

1. Горизонтальная прокрутка. Возникает из-за широких таблиц, картинок фиксированной ширины и длинных слов без переносов. Страница едет вбок, часть содержимого недоступна.
2. Мелкий текст. Меньше шестнадцати пикселей заставляет увеличивать масштаб, и на этом шаге теряется часть посетителей.
3. Кнопки вплотную. Палец промахивается, человек попадает не туда и возвращается в выдачу.
4. Формы с неправильной клавиатурой. Поле телефона, открывающее буквенную клавиатуру, — мелочь, но заполнение затягивается.
5. Фиксированная шапка на пол-экрана. На телефоне под содержание остаётся половина видимой области.
6. Всплывающее окно с крестиком за границей экрана. Закрыть невозможно, уйти можно.
7. Тяжёлые изображения без сжатия. На мобильной сети страница собирается семь-восемь секунд.

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

Навигация: человек не должен искать

Ошибки навигации не так заметны, как сломанный первый экран, но они рассеивают людей по сайту и не дают дойти до цели.

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

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

Подробнее об этом — в статье «Проверка карты сайта: ошибки sitemap, из-за которых страницы не попадают в индекс».

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

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

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

Страница товара и страница услуги

Помогу с продвижением: раскрутка сайта белыми методами — вывожу сайты в топ Яндекса белыми методами.

Здесь принимается решение, и здесь же сосредоточены самые дорогие ошибки.

Нет цены. Главная причина ухода на коммерческих сайтах. «Цена по запросу» читается как «дорого и будут уговаривать». Если цена действительно зависит от параметров, дайте вилку и объясните, от чего зависит: «от такой-то суммы за квадратный метр, зависит от площади и сложности».

Нет ответа на вопрос «что дальше». Человек прочитал, заинтересовался — и не понимает, как начать. Опишите порядок: заявка, звонок, замер, расчёт, договор, сроки.

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

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

Отзывы без подтверждения. Безымянные «Отличный сервис, всем рекомендую!» вызывают недоверие. Лучше три подробных отзыва с именем и деталями, чем тридцать одинаковых.

Скрытые условия. Доставка, оплата, возврат, гарантия — если это спрятано в подвале, человек будет искать, а искать он не станет.

Формы и корзина: где обрывается путь

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

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

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

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

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

Скорость — часть удобства

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

Что чаще всего тормозит коммерческие сайты:

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

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

Как искать ошибки в своих данных

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

Инструмент	Что показывает	Что искать
Записи визитов	Как человек двигался по странице	Метания курсора, многократные нажатия, резкий уход
Карта прокрутки	До какого места дочитывают	Обрыв внимания перед важным блоком
Карта кликов	Куда нажимают	Нажатия на некликабельные элементы
Отчёт по устройствам	Разницу между мобильными и десктопом	Разрыв в отказах больше 15 пунктов
Отчёт по страницам входа	Куда приходят из поиска	Страницы с высокой долей коротких визитов
Воронка по цели	Где обрывается путь до заявки	Шаг с наибольшим отсевом

Если нужна помощь по теме — доработка сайта.

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

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

План на две недели: что править в первую очередь

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

Смежный материал по теме — «Юзабилити сайта».

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

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

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

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

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

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

Через две недели повторите замер по тем же показателям. И не вносите правки все разом в последний день — иначе повторится история с редизайном, когда изменилось всё и непонятно, что именно сработало.

Частые вопросы

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

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

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

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

Что делать, если конверсия упала после правок? Вернуть предыдущий вариант и разбираться по одной правке. Именно поэтому изменения вносят порциями и фиксируют даты, а не двадцатью пунктами за один вечер.

Коротко

• Удобство влияет на позиции через поведение: возврат в выдачу — самый весомый отрицательный сигнал.
• Основные потери приходятся на первый экран, и проверяются они вопросом «что здесь продают» к постороннему человеку.
• Мобильная версия — главный источник проблем, потому что её проверяют реже всего и не на слабых устройствах.
• Отсутствие цены и порядка работы на странице услуги стоит дороже любых недочётов дизайна.
• Каждое лишнее поле формы снижает долю отправок; спрашивайте только необходимое.
• Искать ошибки надо в записях визитов и картах прокрутки, а не по чужим чек-листам.
• Ошибки JavaScript: когда сломанный скрипт съедает заявки молча

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