Пользовательский опыт

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

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

Как человек на самом деле читает страницу

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

Из режима сканирования следует несколько практических вещей:

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

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

Первые секунды и три вопроса

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

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

Самые частые способы провалить первый экран:

1. Слайдер с абстракциями. Три сменяющихся баннера про динамичное развитие и индивидуальный подход. Ни одного факта, зато уезжающая картинка мешает читать.
2. Большая картинка вместо содержания. Экран занят фотографией на всю высоту, а любые слова начинаются ниже — человек не понимает, что тут есть текст.
3. Заголовок про компанию, а не про задачу. «Мы работаем с 2010 года» вместо «Ремонт стиральных машин с выездом в день обращения».
4. Ответ, не совпадающий с обещанием из поиска. Человек кликнул по строке про конкретную услугу, а попал на общую страницу. Такое расхождение возвращает его в выдачу почти мгновенно.
5. Меню, съедающее весь экран. Огромная шапка с логотипом, контактами и навигацией, после которой на содержимое остаётся полоска в несколько сантиметров.

Что перехватывает внимание и рушит опыт

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

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

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

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

Скорость: сколько человек готов ждать

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

Что чаще всего тормозит сайт малого бизнеса:

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

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

8:14

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

Почему текст не читается

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

Параметр	Рабочее состояние	Признак проблемы
Размер основного текста	Не мельче стандартного размера браузера на телефоне	Приходится увеличивать страницу пальцами
Контраст	Тёмный текст на светлом фоне без полутонов	Серый по светло-серому, текст поверх фотографии
Длина строки	Умеренная, взгляд не теряет начало следующей строки	Текст на всю ширину широкого монитора
Межстрочный интервал	Строки визуально разделены	Текст слипается в плотный блок
Длина абзаца	Три-пять строк, одна мысль	Экран сплошного текста без пауз
Выделения	Смысловые, несколько на экран	Половина текста жирная или цветная
Выравнивание	По левому краю	По ширине с рваными дырами между словами на телефоне

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

Навигация, которую спрятали

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

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

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

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

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

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

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

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

Как проверить сайт на живых людях

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

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

Порядок простой:

1. Найдите пять человек. Пяти достаточно: одни и те же затруднения повторяются уже на третьем. Важно, чтобы люди не знали ваш сайт и не работали в вашей сфере.
2. Дайте задачу, а не страницу. Не «посмотри, как тебе сайт», а «тебе нужно узнать, сколько стоит замена крана, и записаться на выезд». Оценка внешнего вида бесполезна, поведение при решении задачи — нет.
3. Попросите проговаривать мысли вслух. Что ищет, чего ждёт, что непонятно. Именно в этот момент вскрывается расхождение между вашей логикой и логикой посетителя.
4. Молчите и не подсказывайте. Каждое ваше объяснение уничтожает результат теста: на настоящем сайте вас рядом не будет.
5. Записывайте затруднения, а не мнения. Ценно то, где человек застрял, куда нажал напрасно, что не нашёл. Фраза «мне нравится дизайн» не значит ничего.
6. Проводите тест на телефоне. Хотя бы у троих из пяти, потому что там живёт большинство аудитории.

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

Подробнее об этом — в статье «Пользовательский контент: как создавать, распространять и контролировать качество на онлайн-платформах».

Что смотреть в вебвизоре и картах кликов

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

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

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

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

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

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

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

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

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

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

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

Коротко

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

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