Дизайн лендинга: как визуал ведёт посетителя к заявке

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

Что решает дизайн лендинга

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

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

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

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

Что должно бросаться в глаза на первом экране?

Предложение, адресат и кнопка. Первый экран получает больше всего внимания: в исследовании NN/g с отслеживанием взгляда люди проводили выше линии сгиба около 57 % времени просмотра страницы, а на первые два экрана приходилось 74 %.

Отсюда прямая рекомендация NN/g — держать главные призывы к действию выше линии сгиба. На первом экране лендинга кнопка заявки видна без прокрутки и на компьютере, и на телефоне. Заголовок с предложением — самый крупный текст экрана, подзаголовок поясняет его, а фоновое изображение не спорит с ними за внимание.

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

Факт. NN/g: около 57 % времени просмотра страницы приходится на область выше линии сгиба, а 74 % — на первые два экрана.

Как выстроить визуальную иерархию лендинга

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

• Размер — самое важное делают самым крупным. NN/g советует обходиться тремя размерами текста — мелким, средним и крупным — и держать на экране не больше двух крупных элементов.
• Цвет и контраст — яркое и контрастное выдвигается вперёд, приглушённое отступает. Кнопке заявки достаётся самый заметный цвет экрана.
• Группировка — элементы, стоящие рядом, воспринимаются как одно целое. Заголовок прижимают к своему тексту, а между блоками оставляют заметный отступ.

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

Сколько цветов взять для лендинга

Меньше, чем хочется. Для несложного дизайна NN/g рекомендует ограничиться двумя основными и двумя дополнительными цветами. Когда цветов много и они одинаково насыщенные, иерархия теряется: глаз не понимает, что главное.

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

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

Красный и другие тёплые яркие цвета NN/g советует оставить для предупреждений и ошибок. Красная кнопка заявки рядом с красными сообщениями об ошибке в форме путает сигналы: человек не сразу понимает, где действие, а где проблема.

Мнение. Если сомневаетесь, сколько цветов оставить, начните с фирменного цвета, нейтрального фона и одного акцента для кнопок. Добавляйте цвет, только когда он что-то обозначает.

Какой контраст нужен тексту и кнопкам?

Достаточный, чтобы текст читался на любом экране и при плохом освещении. В России требования к контрасту веб-контента задаёт ГОСТ Р 52872-2019, который, как сказано в самом стандарте, разработан на основе WCAG 2.1 — международного руководства по доступности.

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

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

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

Как сделать кнопку заявки заметной

Кнопка заметна, когда она похожа на кнопку и отличается от всего вокруг. NN/g перечисляет сигналы кликабельности: рамки, цвет, размер, единообразие, расположение и следование веб-стандартам. Чем больше сигналов совпадает, тем быстрее человек находит, куда нажать.

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

Главное действие на экране одно. Если рядом стоят «Оставить заявку», «Скачать каталог» и «Подписаться» одинакового вида, человек тратит внимание на выбор. Второстепенное действие оформляют спокойнее: ссылкой или кнопкой с контуром без заливки.

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

Как посетитель просматривает лендинг

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

Для лендинга это хорошая и плохая новость одновременно. Плохая: длинные абзацы читают по первой строке, остальное пропускают. Хорошая: NN/g отмечает, что хороший дизайн предотвращает F-образный просмотр, если дать глазу опоры.

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

Какие картинки работают на лендинге

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

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

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

Зачем лендингу пустое пространство

Пустое пространство разделяет блоки и показывает, что с чем связано. По принципу группировки, который NN/g описывает в статье о визуальной иерархии, элементы рядом воспринимаются как одна группа, а отступ отделяет одну мысль от другой.

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

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

Как проверить дизайн лендинга до запуска

Макет проверяют до вёрстки: на этом этапе исправление стоит меньше всего.

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

Источники

• Scrolling and Attention — Nielsen Norman Group
• Visual Hierarchy in UX: Definition — Nielsen Norman Group
• Beyond Blue Links: Making Clickable Elements Recognizable — Nielsen Norman Group
• F-Shaped Pattern of Reading on the Web — Nielsen Norman Group
• Photos as Web Content — Nielsen Norman Group
• ГОСТ Р 52872-2019 «Требования доступности для людей с инвалидностью и других лиц с ограничениями жизнедеятельности» — Росстандарт