Бенджи Рэбхэн - От кликов к продажам

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

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

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

Использование техники «размытого глаза» для выделения веса элемента

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

Когда вам необходимо внедрить дизайнерские решения, но ваш бизнес мал или бюджет ограничен, мы бы рекомендовали использовать технику «размытого глаза» . Идея заключается в том, что необходимо смотреть на экран и косить глаза до тех пор, пока взгляд не перестанет фокусироваться и экран не станет размытым (как если бы вы носили очки и внезапно сняли их).

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

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