Дизайн landing page: предварительная оптимизация

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

Предварительно нужно провести тестирование и оптимизацию лендинга.

Оптимизация лендинга перед запуском

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

Прогнозирование поведения пользователя

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

В качестве примера использования подобных инструментов, приведем эксперимент, который проводили в агентстве Blue Acorn.

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

Макет нашей landing page изначально выглядел так:

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

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

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

Прогнозирование зрительного пути

Ключ к оптимальному размещению

Технология Eye Tracking позволяет измерить восприятие и оптимизировать визуальные средства коммуникации с потребителями. Используя определенные алгоритмы, мы можем построить естественный путь, который должен пройти взгляд посетителя при изучении страницы. В результате получается визуальная карта следующего вида.

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

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

Результат

Направляем взгляд посетителя в нужное место

После внесения изменений в макет страницы было снова проанализировано движение взгляда посетителя.

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

Таким образом, посетитель увидит всю информацию на странице раньше, чем призыв к действию. Лендинг оптимизирован перед его запуском, но на этом его оптимизация не заканчивается. Дальше нужно проводить исследование поведения реальных посетителей, отслеживать время просмотра, источник посещения, звонки, количество просмотров видео. Полезно запустить A/B-тестирование нового и старого дизайна, чтобы определить, какой из них способствует более высокой конверсии.

‍