Короткий ответ
Лендинг работает, если человек, который видит его впервые, через несколько секунд может назвать предложение, аудиторию и следующий шаг. Проверьте это пятисекундным тестом: коротко покажите первый экран, уберите его и задайте открытые вопросы. Затем убедитесь, что основной контент появляется быстро (web.dev считает хорошим показатель Largest Contentful Paint не более 2,5 секунды), а контраст текста, управление с клавиатуры и размер кнопок отвечают базовым требованиям WCAG 2.2.
Незнакомец за секунды решает, заслужила ли страница минуту
Человек приходит на лендинг с вопросом: из рекламы, из поиска или по ссылке в сообщении. Проявлять терпение он не обязан. В статье 2011 года для Nielsen Norman Group Якоб Нильсен подытожил анализ посещений страниц, сделанный Microsoft Research: пользователи часто уходят с веб-страниц через 10–20 секунд, но страницы с ясным ценностным предложением удерживают внимание намного дольше.
Подробности важнее среднего значения. По данным той же статьи, первые 10 секунд решают, останется человек или уйдёт, а в следующие 20 вероятность ухода всё ещё высока. Вывод Нильсена: ценностное предложение нужно ясно донести за 10 секунд.
Поэтому полезный аудит лендинга начинается не с цвета, анимации или вкуса. Он начинается с трёх вещей, которые новый посетитель должен суметь назвать почти сразу: что предлагают, кому и какой шаг следующий. Эти цифры описывают поведение в сети в целом, а не норматив с секундомером, но порядок работы они задают: сначала ответ, потом всё, что позволяет его увидеть.
Пятисекундный тест так, как его описывают исследователи
В руководстве Nielsen Norman Group по тестированию визуального дизайна пятисекундный тест назван тестом первого впечатления: макет показывают пять секунд, чтобы поймать непосредственную реакцию. Прочитать текст за это время нельзя, сказано там, но составить впечатление о визуальном стиле можно. Тот же короткий показ подходит и для вопроса посложнее: понял ли человек само предложение.
Подготовка занимает несколько минут. Сделайте снимок первого экрана в том виде, в каком он открывается на телефоне. Найдите несколько человек, похожих на ваших клиентов и ни разу не видевших страницу; коллеги поэтому не подходят. В руководстве есть ещё одно указание: не предупреждайте участников, что изображение исчезнет через пять секунд, иначе они начнут запоминать детали.
Покажите снимок, уберите его и задайте открытые вопросы в одном и том же порядке. Что предлагает эта компания? Для кого это? Что бы вы сделали дальше? Ответы записывайте дословно. Руководство не советует сочетать такой короткий показ с длинным списком прилагательных на выбор: к концу списка люди уже плохо помнят, что видели.
Как оценить ответы и не польстить собственной странице
До первой встречи запишите одной фразой ответ, который надеетесь услышать, например: «бухгалтерская программа для фрилансеров, попробовать можно бесплатно». Ответ засчитан, если человек называет предложение и аудиторию словами, близкими к вашим. Не засчитан, если он ошибается с категорией, описывает оформление («что-то с синим градиентом») или отделывается словами «какие-то решения».
По тому, как именно ошибаются, видно, что менять. Если помнят картинку, но не предложение, изображение перевешивает сообщение. Если повторяют заголовок, но не могут сказать, что делать дальше, кнопку не восприняли как главное действие. Если ответы у разных людей сильно расходятся, первый экран, скорее всего, говорит о нескольких вещах сразу.
Пятисекундный тест измеряет ясность первого впечатления, а не убедительность: он не скажет, верна ли цена и работает ли форма. В том же руководстве описан дополняющий метод — тест первого клика: участнику дают задание и останавливают его после первого нажатия. Так видно, можно ли найти следующий шаг.
Что обязан нести первый экран и что может подождать
За пять секунд никто не прокручивает страницу, так что на деле это тест первого экрана. Ему нужны четыре вещи: заголовок, который называет предложение словами клиента; строка о том, для кого оно или какого результата ждать; одно главное действие с подписью, из которой ясно, что будет после нажатия; и одно доказательство, которое можно проверить, например снимок продукта или клиент, названный по имени.
Почти всё остальное может подождать ниже: история компании, полный список возможностей, второстепенные предложения. Нижние блоки нужны тем, кто уже понял, о чём страница, и ищет доводы. Но первый экран не должен выглядеть как вся страница. Первый блок, растянутый на весь экран, без намёка на продолжение, читается как конец истории.
Сначала оценивайте версию для телефона: этот экран самый маленький. Когда свою долю заберут баннер согласия на cookie, закреплённая шапка и кнопка чата, заголовок может оказаться ниже видимой области, а кнопка и вовсе исчезнуть. Снимок для теста делайте на настоящем телефоне, с баннером, каким его видит новый посетитель, а не берите аккуратный макет из файла дизайнера.
Показатель Largest Contentful Paint: когда ответ действительно появляется на экране
Секунды посетителя начинаются с нажатия, а не с момента, когда страница догрузилась. В документации Google на web.dev это измеряют показателем Largest Contentful Paint (LCP): временем отрисовки самого крупного изображения, текстового блока или видео в видимой области, считая от момента, когда пользователь перешёл на страницу. Он отмечает точку, в которой основной контент, вероятно, уже загружен.
Сайтам, по словам web.dev, стоит стремиться к LCP не более 2,5 секунды; измерять его советуют по 75-му процентилю загрузок страницы, отдельно для мобильных устройств и компьютеров. Иначе говоря, в трёх посещениях из четырёх основной контент должен появиться за это время. Если главному изображению нужно четыре секунды (пример условный), большая часть первых пяти секунд проходит до того, как появится предложение.
Там же перечислено, где смотреть это число: PageSpeed Insights и Search Console показывают данные реальных посещений, Lighthouse и Chrome DevTools дают лабораторный замер. На лендинге сначала проверьте главное изображение и шрифты заголовков: изображение учитывается только после загрузки, отмечает документация, а текст, набранный веб-шрифтом, не считается отрисованным, пока действует период блокировки шрифта.
Основы доступности: можно ли вообще прочитать ответ
Сообщение, которое нельзя прочитать, не доставлено. В Web Content Accessibility Guidelines (WCAG) 2.2, рекомендации W3C по доступности веб-контента, есть критерии, которые прямо касаются первого экрана. Самый известный касается контраста: коэффициент контрастности текста с фоном должен быть не ниже 4,5:1, для крупного текста не ниже 3:1 (критерий 1.4.3, уровень AA). Чаще всего проверку не проходят бледно-серый текст на белом и надписи поверх фотографии.
Дальше идут изображения и клавиатура. Нетекстовому контенту нужна текстовая альтернатива, выполняющая ту же задачу (1.1.1, уровень A), поэтому предложение, которое существует только внутри картинки-баннера, остаётся немым для того, кто пользуется программой экранного доступа. Вся функциональность должна быть доступна с клавиатуры (2.1.1), а индикатор фокуса должен быть виден (2.4.7). Для проверки нажимайте Tab, пока не дойдёте до главной кнопки, затем Enter.
В версии 2.2 появился минимальный размер цели для указателя, 24 на 24 пикселя CSS, с исключениями, например для ссылок внутри предложения (2.5.8, уровень AA), а полям, требующим ввода, нужны подписи или инструкции (3.3.2). Эти быстрые проверки не заменяют аудит соответствия. Обязана ли компания по закону соблюдать WCAG, зависит от национального права; это вопрос к квалифицированному консультанту.
Дизайнерские трюки, которые встают между посетителем и ответом
Классический пример — вращающийся баннер. Карусель ставит несколько сообщений на место одного, и в пятисекундном тесте часть участников может описать второй слайд, хотя ваше предложение на первом. В WCAG для этого есть правило: движущийся контент, который запускается сам, длится больше пяти секунд и показан рядом с другим содержимым, должен сопровождаться возможностью поставить его на паузу, остановить или скрыть, если только движение не является существенным (2.2.2, уровень A).
Эффекты появления отнимают время не так заметно. Заголовок, который проявляется после двухсекундной анимации, потратил две из пяти секунд посетителя впустую. Крупное видео на первом экране может оказаться тем элементом, по которому считается LCP; web.dev уточняет, что для видео учитывается постер или первый кадр, смотря что появится раньше. А остроумный заголовок, который подошёл бы любой компании («Решения для лучшего завтра»), не отвечает ни на что.
Украшение от помехи отделяет одна проверка: помогает ли эффект незнакомому человеку быстрее ответить на один из трёх вопросов? Если нет, перенесите его ниже первого экрана или уберите. Это не довод против мастерства. В руководстве Nielsen Norman Group замечено, что сильное первое впечатление способно вызвать доверие и интерес, и спокойный, хорошо сделанный первый экран делает именно это.
Повторяемый порядок: что проверять и что исправлять сначала
Выстройте проверки в одну последовательность, и аудит лендинга уложится в полдня. Запишите фразу, которую посетители должны повторить. Проведите пятисекундный тест на снимке с телефона, затем тест первого клика. Посмотрите LCP в данных реальных посещений. Закончите контрастом, текстовыми альтернативами, клавиатурой и размером целей.
Исправляйте в том порядке, в каком проблемы мешают ответу. Начните с того, что нельзя прочитать: это слабый контраст и текст, запертый в изображениях. Затем займитесь тем, что неясно: заголовком, поясняющей строкой и подписью на кнопке. После этого устраните медленное, начиная с элемента, который LCP называет самым крупным. Движение и украшения идут последними.
Повторный тест проводите с новыми людьми: тот, кто уже видел страницу, перестал быть новым посетителем. Ведите запись каждого круга с датой: снимок, вопросы и ответы так, как они прозвучали. Тогда разбор перестаёт быть спором мнений и становится сравнением версий. Когда незнакомые люди повторяют вам вашу фразу, страница готова к A/B-тесту, который измеряет убедительность, а не ясность.
Практический чеклист
- Запишите одной фразой предложение, аудиторию и нужное действие до того, как показывать страницу кому-либо.
- Покажите снимок первого экрана с телефона на пять секунд тем, кто не видел страницу, и запишите их ответы дословно.
- Найдите Largest Contentful Paint страницы в данных реальных посещений и сравните с 2,5 секунды, которые web.dev называет хорошим результатом.
- Проверьте текст заголовка и кнопки на контраст 4,5:1 из WCAG 2.2 и дойдите до главного действия с одной клавиатуры.
- Перенесите ниже первого экрана или уберите каждый движущийся элемент, который не делает предложение понятнее новому посетителю.
Вопросы и ответы
Что такое пятисекундный тест лендинга?
Это быстрая проверка первого впечатления. Вы показываете снимок страницы человеку, который с ней не знаком, через пять секунд убираете и спрашиваете, что продаёт компания, для кого и куда бы он нажал. Nielsen Norman Group описывает метод как способ поймать непосредственную реакцию: времени слишком мало, чтобы читать текст, поэтому остаётся только то, что понятно сразу.
Сколько человек нужно для пятисекундного теста?
Источники, на которые опирается эта статья, описывают метод, но числа не называют. Как рабочее правило, нескольких человек из вашей аудитории достаточно, чтобы увидеть закономерность: тест качественный, вы ищете повторяющиеся недоразумения, а не проценты. Если один и тот же неверный ответ дают несколько человек, это находка. После каждого изменения страницы приглашайте новых участников.
Что должно быть на первом экране лендинга?
Только то, что нужно новому посетителю, чтобы решить, оставаться ли: заголовок с названным предложением, фраза об аудитории или ожидаемом результате, одно ясно подписанное главное действие и одно проверяемое доказательство. Возможности, сведения о компании и второстепенные предложения уходят ниже. Проверьте отбор на телефоне: баннеры и закреплённые панели оставляют гораздо меньше места, чем кажется по макету.
Какой показатель Largest Contentful Paint считается хорошим?
Документация Google на web.dev называет признаком хорошего пользовательского опыта 2,5 секунды или меньше. Мерило здесь 75-й процентиль: уложиться должны не менее трёх загрузок страницы из четырёх, причём телефоны и компьютеры оцениваются отдельно. Число относится к реальным посещениям, поэтому смотрите его в полевых инструментах вроде PageSpeed Insights или Search Console. Лабораторные инструменты, например Lighthouse, помогают найти причину медленного результата.
Заменяет ли пятисекундный тест A/B-тестирование?
Нет, они отвечают на разные вопросы. Пятисекундный тест показывает, понимают ли незнакомые люди страницу с первого взгляда, и его можно провести на черновике, ещё не покупая трафик. A/B-эксперимент сравнивает, как две работающие версии ведут себя на реальных посетителях, и говорит уже об убедительности. Ясность идёт первой: на версию, которую никто не понимает, нет смысла вести трафик.