Юзабилити сайта

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

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

Проверять надо на телефоне, а не на мониторе

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

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

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

Что проверять по порядку

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

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

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

Формы: где теряется больше всего

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

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

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

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

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

Как находить проблемы вместо того, чтобы их обсуждать

Спор о том, удобен ли сайт, не решается голосованием в переговорной. Он решается данными, и все нужные инструменты бесплатны.

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

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

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

Если интересно направление с сайтами — базу даю в своём курсе:

8:14

Что обнаруживается чаще всего:

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

Связь удобства с позициями в поиске

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

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

Если нужны детали, смотрите «Влияние поведенческих факторов на ранжирование сайта».

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

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

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

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

Проблема	Что делать	Сложность
Нет цены на странице услуги	Добавить вилку и объяснить, от чего зависит	Низкая
Телефон не кликабельный	Обернуть в ссылку вида tel:	Низкая
Длинная форма	Оставить имя и телефон, остальное спросить при звонке	Низкая
Чат перекрывает кнопку заказа	Сдвинуть виджет или скрыть его на телефоне	Низкая
Всплывающее окно сразу на входе	Показывать при уходе или после прокрутки половины страницы	Низкая
Форма ниже точки прокрутки большинства	Поднять выше или продублировать	Низкая
Таблицы уезжают на мобильных	Обернуть в блок с горизонтальной прокруткой	Средняя
Медленная загрузка	Кеширование, современные форматы картинок, отложенные скрипты	Средняя
Непонятная структура каталога	Перестроить разделы под потребности, а не под внутреннюю логику	Высокая

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

Мобильная версия: отдельный разговор

Мобильная версия проверяется реже всего, хотя именно по ней оценивают сайт и люди, и алгоритмы. Что смотреть предметно:

Элемент	Ориентир	Частая ошибка
Скорость	Содержимое видно за 2–3 секунды на мобильном интернете	Тяжёлые картинки в исходном размере
Размер текста	От 16 пикселей для основного текста	Мелкий шрифт «для аккуратности»
Кнопки	Около 44 пикселей, с отступом от соседних	Две ссылки вплотную друг к другу
Таблицы	Прокручиваются внутри своего блока	Разъезжают всю страницу вбок
Меню	Открывается, закрывается, не перекрывает содержимое	Меню без кнопки закрытия
Поля форм	Правильный тип: числовая клавиатура для телефона	Одинаковый текстовый тип для всех полей
Виджеты	Не закрывают кнопку заказа и номер телефона	Чат в правом нижнем углу поверх всего

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

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

Как связать удобство с деньгами

Финальная проверка любых изменений — не ощущения дизайнера и не мнение руководителя, а цифры. Смотреть надо на четыре величины:

Подробнее об этом — в статье «Как повысить конверсию сайта».

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

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

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

Чек-лист проверки удобства

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

• Сайт проверен на настоящем устройстве, а не в эмуляции браузера.
• Содержимое появляется быстрее трёх секунд на мобильном интернете.
• За две секунды понятно, куда человек попал и что здесь предлагают.
• Цена или её вилка указана на странице услуги, а не в общем прайсе.
• Телефон виден без прокрутки, кликабельный и контрастный.
• Основное действие на странице одно и визуально выделено.
• Форма содержит не больше трёх полей, поле «Комментарий» убрано.
• Для номера открывается цифровая клавиатура.
• Ничего не перекрывает кнопки и содержимое: ни чат, ни баннер, ни плашка о файлах cookie.
• Таблицы прокручиваются внутри своего блока.
• Нет всплывающих окон на входе и автозапуска звука.
• После отправки формы человек видит подтверждение.
• Из любой точки понятно, где вы находитесь и как вернуться назад.
• Город работы указан на основных страницах, а не только в контактах.

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

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

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

Как понять, что изменения сработали? По количеству обращений и конверсии страниц входа через три-четыре недели, с раздельной оценкой мобильных и десктопа. Один элемент за раз, иначе не поймёте, что именно дало эффект.

Что важнее: красота или удобство? Удобство. Красивый сайт, где не найти цену, проигрывает простому с ценой в первом экране, и это видно по конверсии на любом проекте.

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

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

Коротко

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

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