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

Рис. 6.3.Используйте технику «размытого глаза», чтобы быстро оценить размер, цвет и контраст, а также вес элементов на странице

Это отличный способ представить, как подсознательный «мозг рептилии» потенциального клиента видит вашу страницу при первом взгляде. «Мозг рептилии» оценивает, что стоит внимания, расставляет приоритеты за долю секунды до того, как сознательная составляющая мозга включится в процесс. Все решения потенциального клиента не совсем добровольные, как мы привыкли считать. Если вы грамотно расставите акценты, с уверенностью можете поздравить себя — вы на верном пути.

Как макет страницы влияет на конверсии

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

На первую страницу помещаются главный заголовок и изображение, призванные привлечь внимание и заинтриговать. Кстати, заинтриговать — основная задача: вы непременно должны остановиться у киоска с прессой, увидев первую страницу, и купить именно это издание. Раньше уличные торговцы и разносчики газет намеренно выкрикивали заголовки газет, чтобы привлечь внимание прохожих. Боковые колонки предназначены для менее важных новостей, небольших статей, рекламы — но они необходимы для придания еще большей интриги. Обложки журналов устроены по такому же принципу, отличается лишь макет: изображение привлекает внимание, заголовки вызывают непреодолимое желание открыть журнал и прочесть. Преимущество журналов — использование высокока­чественной цветной печати и бумаги. Газетный лист, конечно, больше, но цвета скучные — как правило, черные и белые. Все издания преследуют одну цель: захватить ваше внимание, побудив тем самым желание открыть, посмотреть — и в итоге купить его.

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

Как я упоминал во введении к «Универсальным логическим принципам», люди, как правило, интерпретируют и анализируют страницу согласно правилам чтения своего родного языка. Например, те, кто привык читать тексты на английском, обычно анализируют страницу слева направо и сверху вниз. С другой стороны, чита­ющие на иврите или арабском языке начинают с правой стороны. Мы останавливаемся на этой теме с подробными примерами в пункте онлайн-лаборатории опытов. А пока, создавая макет, просто держите этот принцип в голове. Благодаря анализу макетов журналов и газет мы выяснили, что информация в шапке сайта призвана побуждать нас купить издание. Но слышали ли вы что-либо о термине «шапка сайта» с точки зрения оптимизации показателя конверсии (см. рис. 6.4)?

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

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

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

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

На целевых страницах доработка шапки сайта гарантированно приводит к повышению показателя конверсии. Время, проведенное посетителем в нижней части страницы, менее важно. Одно из наиболее распространенных исключений, которое я встречал, касается блогов и интернет-ресурсов, например Huffington Post (онлайн-СМИ и блог), который основной целью ставит привлечение пользователей и максимально долгое сохранение трафика, а не продажу товаров или услуг. Но даже для Huffington Post важен хороший заголовок, чтобы побудить людей читать информацию ниже: они, кстати, и славятся оформлением и размещением заголовков как в печатной периодике. В этом случае показатель конверсии основан на числе просмотров или кликов, поэтому так важно вынудить людей читать информацию в нижней части страницы. Однако если содержание шапки сайта омерзительно или отталкивающе, заставить посетителя заглянуть вниз никак не удастся. Все это подтверждает, что принципы оформления шапки сайта актуальны.

Использование визуальных разделителей для создания ясности, направления и фокуса

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

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