В этот момент специалист по оптимизации конверсии может быть очень кстати, его опыт в работе с различными проектами окажется весьма полезен. Мы можем найти лучшее место, с которого стоит начать работу по достижению максимальной доходности. Если у вас нет консультанта или специалиста, определите, какой информацией вы владеете на данном этапе, а затем начните тестирование. Не пытайтесь запланировать все заранее: нельзя ничего знать наперед. Каждый сайт отличается, контексты пользователей тоже, конверсии меняются из проекта в проект — имейте это в виду.
Посетители оценивают вашу страницу за долю секунды
Вы когда-нибудь слышали о «мозге рептилии»? Так именуется та часть человеческого мозга, которая подсознательно оценивает происходящее за считаные доли секунды. «Мозг рептилии» позволяет оценить степень важности происходящего, степень безопасности, а также необходимость немедленно обратиться в бегство, дрожа от страха. Он реагирует на опасность, помогает чувствовать нутром, хотя мы можем не отдавать себе в этом отчета. Проще говоря, это инстинкт.
Феномен «мозга рептилии» играет значительную роль для показателя конверсии. С точки зрения психологии существуют три психологические контрольные точки конверсии, которые ваш мозг проходит за долю секунды, прежде чем в работу включится сознание. При просмотре веб-страниц бессознательно возникают три вопроса: оказывается ли страница релевантной (соответствующей запросу), заслуживает ли доверия и, наконец, приемлема ли для вас полезность (цена, важность товара, услуги, информации) (см. рис. 6.1).
Психологически контрольные точки конверсии
Рис. 6.1. «Мозг рептилии» оценивает первые две контрольные точки, прежде чем мы начинаем осознавать, на что смотрим. Третья точка — так называемая полезность — требует для осознания немного больше времени и оценивается с позиции потенциального покупателя (клиента)
Полезность иногда оценивается подсознательно, например когда вы решаете, можете позволить себе купить вещь с картинки или нет. Но чаще всего предложение должно пройти повторную проверку — на стадии принятия сознательного решения.
Давайте рассмотрим простой пример. Вы наверняка слышали о показателе отказов, определяемом процентом людей, которые заходят на страницу, но вскоре возвращаются на стартовую страницу поиска Google (или любой другой поисковой системы). Высокий показатель отказов или короткое время, проведенное на сайте, в веб-аналитике сигнализируют, что с вашей страницей что-то не так. Посетители не видят того, что ожидали. Если вы обнаружили подобную проблему, это значит, что мозг посетителя не может успешно пройти все контрольные точки. Так вы определите стартовую позицию, с которой следует начать устранять проблемы. Конечная цель — создание такого дизайна веб-страницы, который позволит подсознанию потенциального клиента успешно пройти все три точки. Если дизайн не работает на эту цель, посетитель может задержаться на странице или даже совершить конверсионные действия, но все же гораздо лучше, если оформление соответствует всем трем критериям изначально.
Объективно посмотрите на страницу и спросите себя:
Соответствует ли страница запросам аудитории?
Вызывает ли она доверие у целевых посетителей? Достаточно ли профессионально выполнена?
Полезно ли наше предложение? Соответствует оно истинным желаниям посетителей?
Понятно ли предложение? Доступно ли за время нахождения на странице?
Если вы ответили «нет» хотя бы на один вопрос, значит, нашли то место, с которого следует начать работу. Не стоит полагаться только на собственные подсознательные ощущения: соберите как можно больше информации.
Насколько важен брендинг для конверсии
Люди из дизайнерской среды постоянно твердят, как важен для бизнеса брендинг. Ваш логотип, ваши цвета, ваше название — все, что составляет ваш бренд, — это то, что занимает их умы в первую очередь. Я согласен, что брендинг крайне важен в офлайн-мире, ведь люди должны помнить о вас, чтобы покупать именно ваши товары. В онлайн-конверсиях цель — покупка (или иное конверсионное действие), что делает важность хорошего брендинга относительной. В большинстве случаев доверие играет более важную роль, чем узнаваемый бренд.
Когда дело доходит до конверсии, брендинг становится главным индикатором надежности и доверия, а иногда и полезности. Но наличие узнаваемого бренда часто менее важно, чем вы думаете. Даже неизвестный бренд может пройти все три контрольные точки конверсии, что неизмеримо ценнее. В отличие от офлайн-мира вы можете провести сплит-тест брендинга с относительно небольшими затратами, чтобы понять, какой вариант работает лучше. Итак: не позволяйте вопросам брендирования вставать на пути к вашей цели.
Использование цветов и контрастов
Дизайнеры и бизнесмены, как правило, уделяют огромное внимание цветовому решению бренда, не осознавая, что размещение цвета и контрастов на странице также может влиять на показатель конверсии. Я понимаю, что, возможно, нет выбора, если вы используете устоявшийся бренд, но все равно применение цветовых гамм и контрастов может оказаться в вашу пользу.
Правда в том, что не существует однозначно правильных или неправильных цветов для конверсии. Однако способ цветового оформления и распределение цвета на определенных местах страницы могут подсознательно воздействовать на пользователей, а также значительно влиять на их поведение на странице. Даже если страница уже существует, важно использовать этот набор логических решений для целенаправленного улучшения конверсий. Простой пример: если вся страница выполнена в черно-белых тонах, а в правом нижнем углу ярко-красный элемент, то он мгновенно привлекает внимание посетителя страницы, ярко выделяясь на общем фоне. Это может показаться очевидным, но та же логика срабатывает, даже если различие в контрастах небольшое.
Каждый цвет имеет контраст. Одно из его определений — разница в яркости или цвете, отличающая один объект от другого в том же поле зрения. Другими словами, контраст выделяет один объект и делает его более видимым, чем что-либо другое, например фон или другой объект на странице. Людям с нарушениями восприятия цвета синие и красные объекты с одинаковым контрастом могут казаться оттенками серого. Высокий контраст подсознательно привлекает взгляд на элемент и выделяет его. Бледный контраст делает элемент незаметным.
Еще один пример, который я люблю приводить, — старое телевизионное шоу «Я люблю Люси» (I love Lucy). Актеры постоянно говорили о ярко-рыжих волосах Люси. В первые дни показа зрители не могли в этом убедиться, потому что шоу было черно-белым. Зрители включали воображение, потому что единственное, что они могли видеть, — контраст цветов, но не сам цвет. Она могла покрасить волосы даже в зеленый, но количество зрителей не сократилось бы. Когда шоу сняли на цветную пленку, все смогли лицезреть потрясающие рыжие волосы Люси.
Один тип контраста — насколько тот или иной цвет яркий или темный в спектре черного и белого, как в примере с Люси, но также есть тип контраста, содержащий соотношение двух и более цветов друг к другу. Если необходимо что-то выделить, воспользуйтесь яркими контрастами — цветами, значительно отличающимися друг от друга. Если же вы хотите снизить приоритет какого-либо элемента для посетителя, поэкспериментируйте с уменьшением контрастов.
Например, черный фон с мелким белым текстом очень часто труден для восприятия ввиду высокого контраста. Фон выделяется, а для прочтения текста приходится щуриться. Если сделать наоборот — белый фон и черный текст, — внезапно станет гораздо проще читать, потому что текст будет выделяться на фоне. Именно поэтому книги печатаются черными чернилами на белом фоне.
Вы можете использовать эти принципы и привлечь внимание людей туда, куда необходимо. Если на странице все выполнено в одной цветовой гамме, внимание посетителя будет направлено к наиболее контрастному соотношению темного и светлого (рис. 6.2).
Рис. 6.2. Контраст — наиболее важная часть дизайна. Использование контрастных цветов и элементов может привлечь внимание на наиболее желаемые места или указатели либо определить порядок действий пользователя
Несколько лет назад среди графических дизайнеров бытовало заблуждение, что использование серого текста на белом фоне вместо черного упрощает восприятие и выглядит более привлекательно. К сожалению, если вам необходимо, чтобы люди действительно читали ваш текст, этот низкий контраст, скорее, наоборот, снизит показатель конверсии: текст окажется трудным для восприятия. Он даже может визуально потускнеть, слиться с общим фоном. Эту идею неплохо использовать с точностью до наоборот. С теми частями сайта, которые участвуют в поисковой оптимизации (SEO), не несущими смысловой нагрузки и не обязательными к прочтению пользователями, вы можете поэкспериментировать. Например, вместо 100% используйте 80%-ный контраст. Заголовки и важные элементы должны оставаться со 100%-ной контрастностью.
Рис. 6.2. Контраст — наиболее важная часть дизайна. Использование контрастных цветов и элементов может привлечь внимание на наиболее желаемые места или указатели либо определить порядок действий пользователя
Несколько лет назад среди графических дизайнеров бытовало заблуждение, что использование серого текста на белом фоне вместо черного упрощает восприятие и выглядит более привлекательно. К сожалению, если вам необходимо, чтобы люди действительно читали ваш текст, этот низкий контраст, скорее, наоборот, снизит показатель конверсии: текст окажется трудным для восприятия. Он даже может визуально потускнеть, слиться с общим фоном. Эту идею неплохо использовать с точностью до наоборот. С теми частями сайта, которые участвуют в поисковой оптимизации (SEO), не несущими смысловой нагрузки и не обязательными к прочтению пользователями, вы можете поэкспериментировать. Например, вместо 100% используйте 80%-ный контраст. Заголовки и важные элементы должны оставаться со 100%-ной контрастностью.
Когда посетители смотрят на веб-страницу, взгляд сознательно определяет наиболее весомые места. Это явления я называю визуальным весом элемента. Речь идет об элементе, на котором вы хотите сфокусироваться. Яркие и темные цвета всегда увеличивают его вес и притягивают взгляд посетителя; то же самое происходит с более контрастными и темными элементами.
Большинство сайтов, которые я встречал в своей жизни, как правило, имели относительно одинаковый вес элементов — либо ни одного, привлекающего внимания, либо слишком много. Запутанные или перегруженные сайты повсюду содержат элементы с высокой контрастностью. Дизайнер может сделать все красивым и привлекательным, не осознавая негативного эффекта. Это сродни прогулке по Тайм-сквер ночью, когда тысяча огней мигает одновременно. На что вы обратите внимание? Довольно трудно выделить один голос, когда все вокруг кричат. Если вы думаете, что этот пример не про ваш сайт, помните — все примеры слегка преувеличены. Тонкие различия в контрасте или цвете могут изменить способ взаимодействия сайта и пользователя.
В дополнение к контрастам, цвета вызывают у человека определенные ассоциации. Вы наверняка слышали, что зеленый цвет безмятежен, подобно лугу, а красный интенсивен, как огонь. А еще вы наверняка считаете, что зеленый цвет побуждает идти, а красный — стоять. С рождения у каждого человека формируется собственное ассоциативное восприятие цвета, основанное на культуре. Знаки «стоп», светофоры и прочие повседневные явления усиливают восприятие. Типы ассоциаций вызывают разные реакции на одни и те же цвета вашей страницы. Ярко-красный элемент может заставить остановиться, прочитать, а уже потом совершить покупку. Зеленая кнопка «Принять» побуждает людей нажать ее. Однако неправильный оттенок зеленого может вызвать недоверие к кнопке — например, если он слишком яркий. Также не забывайте, что разные цвета имеют разные ассоциации в разных культурах. Рассмотрим желтый цвет: в Северной Америке он, как правило, веселый, приветливый, ассоциирующийся с солнцем, летом и счастьем. В Латинской Америке и Египте желтый может ассоциироваться с трауром или утратой. Просто задумайтесь о своей целевой аудитории и о том, что цвета могут для нее значить.
Теперь взгляните на свою страницу и решите, где должны находиться базовые элементы. Затем увеличьте контраст этих элементов или уменьшите тон других. Изучите контраст не только на самой странице, но также и внутри элементов, включая текст на кнопках. Используйте эту концепцию, чтобы помочь посетителям расставить правильные приоритеты на странице. Помните, что цвет и контраст — разные вещи. Хотя цвета и имеют контраст, некоторые выглядят на экране ярче. Применяйте универсальные логические принципы конверсии в свою пользу и не забывайте проверять результаты.
Использование техники «размытого глаза» для выделения веса элемента
Мы уже говорили об айтрекинге (окулография) и отслеживании движений мышки или курсора (трекинг курсора) — специальное программное обеспечение и устройства позволяют увидеть траекторию движения взгляда посетителей или мышки по странице и понять, куда они идут, как взаимодействуют со страницей. Однако технология и процессы, необходимые для айтрекинга, могут быть весьма затратными, а также для анализа необходимо иметь завершенную страницу.
Когда вам необходимо внедрить дизайнерские решения, но ваш бизнес мал или бюджет ограничен, мы бы рекомендовали использовать технику «размытого глаза». Идея заключается в том, что необходимо смотреть на экран и косить глаза до тех пор, пока взгляд не перестанет фокусироваться и экран не станет размытым (как если бы вы носили очки и внезапно сняли их).
Когда вы это сделаете, сразу увидите некоторые перемены. Мелкий текст на странице исчезнет, элементы с низкой контрастностью (например, серый текст на белом фоне) также словно растворятся — вы даже не заметите их. Остальные яркие или контрастные элементы резко выделятся. Сразу станет четко понятно, как пользователь оценивает страницу и ее элементы с точки зрения цветов и контрастов.
Если вы все еще можете прочесть заголовок, в то время как остальные части страницы гораздо более размыты, знайте — это отличный признак: пользователь прочтет ваш заголовок в первую очередь. Если же его прочесть не удается, подумайте о размере шрифта или цветовом контрасте. Примерно вот так: ярко-красный элемент расположите в углу, а остальные компоненты страницы выполните в черно-белых тонах. Благодаря технике «размытого глаза» вы увидите общую серую зону и красный блок в углу: взгляд просто не сможет избежать этот кричащий акцент (см. рис. 6.3).
Рис. 6.3. Используйте технику «размытого глаза», чтобы быстро оценить размер, цвет и контраст, а также вес элементов на странице
Это отличный способ представить, как подсознательный «мозг рептилии» потенциального клиента видит вашу страницу при первом взгляде. «Мозг рептилии» оценивает, что стоит внимания, расставляет приоритеты за долю секунды до того, как сознательная составляющая мозга включится в процесс. Все решения потенциального клиента не совсем добровольные, как мы привыкли считать. Если вы грамотно расставите акценты, с уверенностью можете поздравить себя — вы на верном пути.
Как макет страницы влияет на конверсии
Макет — важная составляющая дизайнерской концепции, влияющая на эффективность конверсий. Возможно, вы замечали, что макеты газет практически не изменились за целый век — видимо, по той причине, что людям они привычны, люди не любят перемен. Однако изменений не было лишь потому, что макеты действительно хорошо работают. Издатели оптимизировали их до некой степени совершенства — это подтверждают данные более чем за 100 лет.
На первую страницу помещаются главный заголовок и изображение, призванные привлечь внимание и заинтриговать. Кстати, заинтриговать — основная задача: вы непременно должны остановиться у киоска с прессой, увидев первую страницу, и купить именно это издание. Раньше уличные торговцы и разносчики газет намеренно выкрикивали заголовки газет, чтобы привлечь внимание прохожих. Боковые колонки предназначены для менее важных новостей, небольших статей, рекламы — но они необходимы для придания еще большей интриги. Обложки журналов устроены по такому же принципу, отличается лишь макет: изображение привлекает внимание, заголовки вызывают непреодолимое желание открыть журнал и прочесть. Преимущество журналов — использование высококачественной цветной печати и бумаги. Газетный лист, конечно, больше, но цвета скучные — как правило, черные и белые. Все издания преследуют одну цель: захватить ваше внимание, побудив тем самым желание открыть, посмотреть — и в итоге купить его.
Хотя и считается, что каждый сайт должен иметь индивидуальный макет, созданный с нуля, все те же универсальные логические принципы конверсии имеют место быть. Вероятно, вы все еще хотите использовать крупный шрифт и большие фотографии, чтобы сфокусировать внимание посетителя? А может быть, вам просто необходимы отлично написанные заголовки и глубокое содержание для возбуждения интереса аудитории?
Как я упоминал во введении к «Универсальным логическим принципам», люди, как правило, интерпретируют и анализируют страницу согласно правилам чтения своего родного языка. Например, те, кто привык читать тексты на английском, обычно анализируют страницу слева направо и сверху вниз. С другой стороны, читающие на иврите или арабском языке начинают с правой стороны. Мы останавливаемся на этой теме с подробными примерами в пункте онлайн-лаборатории опытов. А пока, создавая макет, просто держите этот принцип в голове. Благодаря анализу макетов журналов и газет мы выяснили, что информация в шапке сайта призвана побуждать нас купить издание. Но слышали ли вы что-либо о термине «шапка сайта» с точки зрения оптимизации показателя конверсии (см. рис. 6.4)?