Визуальные приемы, которые позволяют повысить конверсию

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

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

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

В этой статье мы опишем несколько неявных направляющих взгляд пользователя визуальных приемов.

Свободное пространство

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

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

В этом примере приглушенные тона позволяют нам сразу сфокусировать взгляд на олене.

Цвет

Цвет позволяет вызвать у пользователей эмоциональный отклик. Многие цвета уже ассоциируются у пользователей с определёнными действиями. Голубой, оранжевый цвет – это прекрасный выбор для оформления кнопки или ссылки.

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

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

Используйте для оформления страницы один цвет (с множеством тонов) за исключением области призыва к действию.

Контраст

Если вы используете черный/серый текст, то оформление призыва к действию в белом или черном цвете не будет работать – так вы не добьетесь эффекта контраста. Гораздо лучше в данной ситуации сработает выделение призыва к действию каким-нибудь другим цветом.
На картинке пример использования контраста для выделения объектов.

Глядя на эту картинку, наш взгляд сначала фокусируется на камнях, возвышающихся из озера, а затем перемещается вниз – к кустарнику.

Сила взгляда

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

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

На второй картинке эффект усиливается тем, что вниз опущен не только взгляд, но и вся голова койота.

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

Удивление, эффект неожиданности

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

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

Чтобы предотвратить это, вы должны удивить людей.

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

Это не означает, что вы должны поместить на странице провокационное фото голого мужика. Можно попробовать что-нибудь попроще, например, перевернуть вашу кнопку с призывом к действию на 30 градусов, чтобы создать необычную форму. Это необычно и привлекает внимание.

Помещение в центр

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

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

Использование описанных выше приемов может повысить конверсию вашей целевой страницы. А какие визуальные приемы для привлечения внимания знаете вы?

[via]