Рис. 6.4. Важно понимать, как граница, разделяющая шапку с основной частью, влияет на взаимодействие пользователя со страницей. Знание правильного расположения границы для различных пользователей — ключевое
Несмотря на то что сайты и газеты отличаются друг от друга, логика одинакова во всех случаях. Шапка сайта — это все, что можно видеть без пролистывания, поэтому первое, что пользователь видит на странице, определяет: будет он работать с вашим сайтом либо отправится на другой.
То, что размещено в шапке, по-прежнему актуально и важно — точно так же, как и для печатных изданий. Я сомневаюсь, что данная концепция когда-либо полностью утратит свою актуальность (за исключением, может быть, 3D-сайтов, но мы оставим эту тему до следующего раза).
Споры о длине страницы и шапке сайта пересекаются со многими универсальными логическими принципами конверсии, изложенными в этой книге. В главе, посвященной целевым страницам, мы обсудим, когда целесообразно проектировать длинную целевую страницу, требующую прокрутки, вместо простой, преимущественно состоящей из верхней области. Аналогично в главе, посвященной копирайтингу, поговорим, когда выгодно писать длинные описательные тексты вместо размещения информации в виде списка или перечня. Одним словом, все зависит от вашего продукта, предложения и контекста пользователя.
На целевых страницах доработка шапки сайта гарантированно приводит к повышению показателя конверсии. Время, проведенное посетителем в нижней части страницы, менее важно. Одно из наиболее распространенных исключений, которое я встречал, касается блогов и интернет-ресурсов, например Huffington Post (онлайн-СМИ и блог), который основной целью ставит привлечение пользователей и максимально долгое сохранение трафика, а не продажу товаров или услуг. Но даже для Huffington Post важен хороший заголовок, чтобы побудить людей читать информацию ниже: они, кстати, и славятся оформлением и размещением заголовков как в печатной периодике. В этом случае показатель конверсии основан на числе просмотров или кликов, поэтому так важно вынудить людей читать информацию в нижней части страницы. Однако если содержание шапки сайта омерзительно или отталкивающе, заставить посетителя заглянуть вниз никак не удастся. Все это подтверждает, что принципы оформления шапки сайта актуальны.
Использование визуальных разделителей для создания ясности, направления и фокуса
Использование визуального разделения — еще одна концепция дизайна макета, пришедшая в онлайн-мир из СМИ. Визуальные разделители — это линии, разделяющие страницу в вертикальном и горизонтальном направлениях и позволяющие выделить некоторые разделы и области. Графические линии или пустые пространства — все это вариации визуальных разделителей поля страницы. Этот прием позволяет четко распределить информацию так, чтобы это выглядело понятно, упорядоченно и не перегруженно.
Столбцы и строчки — отличные примеры естественных визуальных разделителей. Подумайте о них как о гиде, который ведет посетителя в нужном направлении. Можно использовать конкретные визуальные разделители, помогающие взгляду читателя определить место с интересующей его информацией (см. рис. 6.5). Например, такие сайты, как социальный интернет-сервис Pinterest (в онлайн-режиме позволяющий пользователям добавлять изображения, помещать их в тематические коллекции, а также делиться с другими пользователями). Он использует вертикальное разделение, что побуждает пользователей постоянно прокручивать страницу.
Рис. 6.5. Стрелки на рисунках иллюстрируют некоторые визуальные разделители макета
Такие элементы, как стрелки, указатели и фотографии, тоже могут выступать в качестве визуальных разделителей. К примеру, если персонаж на фото с вашей страницы смотрит на посетителя с явным выражением призыва к действию, то можно с уверенностью предполагать: посетитель сайта подсознательно последует этому невидимому призыву. Более подробно мы рассмотрим творческие принципы организации компоновки информации на сайте в разделе «Лаборатория опытов».
Расценивайте каждую видимую часть страницы как отдельную страницу
Чуть ранее мы говорили о шапке сайта как о части страницы, доступной пользователю без прокрутки. Аналогично можно говорить о тех областях страницы, которые будут доступны, если пользователь начнет прокручивать вниз: так называемые видимые части страницы. Шапка сайта — технически первая видимая часть, доступная без прокрутки. Поскольку размеры экранов и скорость прокрутки у пользователей различаются, соответственно, видимые доступные части также будут отличаться. Эти части веб-страницы не так легко определить: они вовсе не аналогичны страницам бумажной книги. Как мы уже обсуждали в главе о сборе данных, такие инструменты и сервисы, как Google Analytics и Crazy Egg, помогут обозначить видимые части.
Теперь, когда вы в курсе, что такое видимые части страницы, а также понимаете, что в зависимости от устройства они могут быть разными, займитесь оптимизацией каждой части. Иначе говоря, представляйте каждую часть как отдельную страницу, а затем выясняйте, каким образом можно ее доработать и улучшить, чтобы получить высокий показатель конверсии.
Вот реальный пример, способный побудить к немедленным действиям. Вы можете увеличить конверсию, если будете упоминать свое предложение не один раз на странице, а один раз в каждой видимой части. Если на странице имеется только одна кнопка «Купить сейчас», да еще расположенная в нижней части страницы, знайте: многие пользователи так никогда и не доберутся до нее. Довольно часто люди созревают к покупке (или иному конверсионному действию) гораздо раньше. Конечно, не стоит иметь 17 идентичных кнопок «Купить сейчас», это довольно навязчиво: можно подумать об альтернативном способе сделать то же самое, но менее очевидно. Вы можете добавить ссылку «Узнать больше» в первую видимую часть, кнопку — в следующую часть, ссылку на изображение товара с подписью под картинкой — в третью. Добавление побуждающих элементов в каждую видимую часть не только способствует увеличению вероятности конверсий, но и позволяет охватывать более широкий круг аудитории.
Посетители, которые прокручивают страницы, хотят получить как можно больше информации, лучше в подробностях, и узнать различные точки зрения. К таким предложениям можно отнести образовательные гиды, объемные учебные пособия и демонстрации, однозначно лучше всего срабатывающие в основной части сайта. Импульсивные пользователи, привыкшие принимать спонтанные решения, будут действовать, основываясь на шапке сайта. Для такой аудитории кнопку, ссылку или форму для заполнения целесообразно поместить в шапке. Определите, какой тип посетителей вероятнее всего сконвертируется в той или иной части сайта, и разместите провоцирующие элементы именно там. Не забывайте: вашу страницу посетят люди со всеми существующими типами характера, поэтому постарайтесь найти подход к каждому.
Давайте разберем этот принцип на примере сувенирной лавки. Вы наверняка знаете, что большинство музеев и тематических парков размещают выход в конце сувенирного магазина, заставляя вас пройти через весь салон. Это блестящая идея, объясняющая неплохой процент их доходов. Вы можете проделать этот трюк с видимыми частями страницы: сделайте так, чтобы пользователь посетил каждую часть — откройте выход в конце сувенирного магазина.
Что же это все в итоге означает? Один пример, побуждающий к действиям, мы рассмотрели. Другой пример для коммерческих сайтов — так называемая корзина, перемещающаяся одновременно с прокруткой сайта. Еще вариант — создание дополнительных ссылок внутри контента, позволяющих перейти к страницам с описанием продукта.
Основная идея такова: даже если вы позволяете посетителю уйти с текущей страницы, то только направив его туда, где конверсия еще более вероятна.
Адаптивный дизайн
Что происходит с вашим необыкновенно красивым и дорогим сайтом, когда кто-либо просматривает его на мобильном телефоне или iPad? До недавнего времени никто особо не задумывался, как дизайн выглядит на различных устройствах, так как мобильные технологии появились относительно недавно. Владельцы сайтов заботились лишь о том, как все будет выглядеть на экране компьютера. Но реальность такова: визуальные разделители, видимые части экрана, контент и изображения смешиваются в ужасном беспорядке в зависимости от устройства просмотра (планшет или телефон). У каждого телефона свои размеры экрана, более того — новые модели появляются на рынке почти ежедневно. Такое буйство технологии озадачивает дизайнеров: приходится думать и о том, как размер экрана влияет на восприятие. Постепенно все осознают, что опыт работы с сайтами может сильно отличаться от восприятия и опыта использования альтернативных устройств.
К счастью, в нашем случае процесс эволюции упрощает адаптивный дизайн. Но, к сожалению, он же и усложняет оптимизацию конверсии и сплит-тестирование. Адаптивный сайт реагирует на тип используемого для просмотра устройства, предлагая соответствующий дизайн. Весь процесс автоматический и предсказуемый, если сайт разработан соответствующим образом. В последнее время дизайнеры создают сайты различных размеров, позволяя адаптивным технологиям автоматически показывать корректный дизайн для разных видов устройств.
Адаптивный дизайн позволяет динамично изменять макет страницы, основываясь на размерах экрана (см. рис. 6.6). Вы сохраняете контроль над тем, где находятся визуальные разделители и что размещено в шапке сайта. Этот контроль чрезвычайно важен в отношении показателя конверсии, и нет разницы, какова на самом деле ваша цель — перемещение пользователей на другую страницу, где продается продукт, или подписка на бесплатную загрузку чего-либо.
Рис. 6.6. Адаптивный дизайн — это технология, позволяющая изменять макет и структуру страницы в зависимости от типа используемого устройства и размера его экрана. Помните: чтобы быть действительно клиентоориентированным, необходимо учитывать потребности каждого пользователя
Компании, применяющие адаптивный дизайн и соответствующие стратегии, получают выдающиеся показатели конверсии. Всегда хочется думать, что вы нанимаете дизайнерскую компанию, действительно способную создать адаптивный сайт. Но прошу вас: не верьте мне на слово. Воспользуйтесь сервисом Google Analytics, чтобы получить информацию об устройствах и размерах экранов ваших пользователей. Велико ли число посетителей, использующих мобильные устройства, чтобы под них оптимизировать конверсию? Только анализ данных может дать ответ; в дополнение ознакомьтесь с результатами исследований других организаций и институтов в этой области. Обоснованное решение вы сможете принять и после изучения трендов индустрии мобильных устройств. Правда, могут возникнуть трудности: не каждая дизайнерская компания озадачивается оптимизацией конверсий, поэтому грамотно выбирайте дизайнеров.
На практике действительно сложно отследить конверсии, основываясь на результатах сплит-тестирования для адаптивных сайтов. Тем не менее все более важным становится проведение сплит-тестов для различных устройств, так как миллионы людей переходят к потреблению веб-контента через мобильные устройства. Далее в книге мы более подробно обсудим дизайн сайта для них.
Типичные ошибки графического дизайна
Помните о невизуальных элементах. Убедительный текст так же важен, как приятное оформление, и иногда текст даже более важен. Если вы продаете что-то дорогостоящее или требующее подробных объяснений, текст может иметь решающее значение. Я встречал немало людей, которые тратили тысячи долларов на идеи, ориентированные исключительно на визуальную составляющую. Но они могли намного увеличить показатель конверсий, сосредоточив усилия на других вещах, таких как сообщение или письменное предложение.
Не забывайте, что текст — также часть дизайна. Подача текста на странице на самом деле неотъемлемая и важная составляющая графического оформления. Шрифты должны быть комфортны для чтения. Не делайте выбор в пользу более красивого шрифта, а не удобства чтения; вы можете выбрать красивый шрифт только в том случае, если провели тестирование и получили подтверждающие такую необходимость результаты. Остерегайтесь использовать курсив: он, как правило, труден для прочтения онлайн. Если нужно выделить слово или фразу, используйте подчеркивание, жирный шрифт, цвет или контраст.
Люди довольно чувствительны к обману, поэтому страницы с огромными красными заголовками, многочисленными подчеркиваниями и жирными шрифтами, а также с невероятным количеством восклицательных знаков не приносят желаемого результата. Как правило, такие приемы вызывают недоверие к сайту. В разумных пределах это приемлемо, но будьте осторожны, чтобы ваша страница не превратилась в подозрительную.
Не используйте адаптивный дизайн, если в этом нет необходимости. С точки зрения перспектив адаптивный дизайн имеет смысл использовать. С точки зрения микроконверсии это также может показаться логичным. Однако если рассматривать вопрос с точки зрения целостной конверсии, становится очевидным: необходимо оценить весь рынок и бизнес, прежде чем приступать к таким кардинальным преобразованиям. Выясните, скажутся ли данные преобразования на чистой прибыли.
Компании все чаще много инвестируют в адаптивный дизайн, хотя это и не жизненно важно. Несмотря на то что люди просматривают сайты на небольших экранах, для определения актуальности этой ситуации прежде всего оцените свой продукт и аудиторию. Немало энергии, времени и денег потребуется, чтобы создать три и больше версий сайта. Сплит-тестирование может оказаться сложным и трудоемким. Нужно выяснить, насколько быстро люди воспринимают мобильные технологии; изучить аналитику, определить целевую аудиторию; узнать, какие устройства используются чаще всего. А еще проанализировать данные за определенный период времени, чтобы определить тенденции и тренды, — это сделает ваше решение более обоснованным, поможет выделить дизайнерские задачи и преобразования.
Не будьте вызывающими. Каждый должен иметь flash-анимацию на стартовой странице, иначе это не круто, верно? Это я называю «синдромом анимации»: люди тратят так много времени, пытаясь сделать вещи крутыми, что забывают о конверсии. Действительно классное, уникальное интерактивное оформление может выделить вас среди других и даже помочь выиграть дизайнерскую награду, но в большинстве случаев снизит показатель конверсии: посетители не будут понимать, как взаимодействовать со страницей. Сбалансированное использование анимации — просто панацея. Мы обсудим это чуть позже в главе «Продвинутые стратегии».
Я встречал заказчиков, которые говорили что-то вроде: «У меня на сайте есть корзина, но она менее всего напоминает корзину из продуктового магазина. Мне бы хотелось, чтобы покупатель мог перетаскивать продукт в корзину и видеть выбранный товар в ней в уменьшенном виде или видимым, но находящимся там; нужно что-то реально крутое и анимированное».
Приходилось объяснять, почему люди с подобными идеями в конце концов отказывались от них. Посетители взаимодействуют с сайтом определенным образом. В интернете посетители, как правило, используют кнопки «Добавить в корзину» или «Купить сейчас». Хотя анимация — это круто и, казалось бы, легко, люди чаще всего не готовы к такому повороту событий. Сайты, внедрившие нечто подобное, имеют более низкие показатели конверсий, чем они могли быть, потому что посетители не знают определенно: как купить продукт. Они думают: «Где же кнопка “Добавить в корзину”? Почему ничего не происходит?» Как только вы не оправдываете чьих-либо ожиданий, тут же получаете плохие результаты. Трудно изменить устоявшиеся мнения. Главная мысль заключается в том, что понятие «круто» уместно лишь тогда, когда вы хотите удивить друзей или выпендриться; на деле же «круто», как правило, неуместно, если вы хотите создать реально высококонверсионный сайт.
Не используйте Web Fail.06. Иногда в нашем распоряжении слишком много полезных вещей. Возьмем, к примеру, Web 2.0 — да, определенные элементы, такие как закругленные углы, диагональные линии (направления), 3D-эффекты, действительно классные, однако несколько лет назад я написал о том, как можно переусердствовать. По результатам тестирования сайт, перенасыщенный использованием дизайна Web 2.0 (мы называем его Web Fail.0) и плохо проработанными его элементами, значительно ухудшает конверсии. Почему? Главным образом потому, что подобные элементы слишком бросаются в глаза, создают ощущение ненадежности.
Вы легко можете определить сайт Web Fail.0: это как мультфильм с гиперболизированными картинками, скругленными углами, градиентами и 3D-текстом. Это выглядит по-дилетантски, крайне непрофессионально. Вы потеряете доверие, и вполне естественно, что конверсии пострадают.
Поймите меня правильно: дизайн Web 2.0 можно выполнить хорошо. Однако нужно быть довольно талантливым дизайнером, тонко понимающим и применяющим элементы этого дизайна — так, что никакого нарочитого оформления вы можете даже не заметить, только содержание. Эта тонкая грань доступна далеко не всем специалистам, поэтому мы настоятельно рекомендуем отказаться от применения подобных элементов.
Дизайнеры, преуспевшие в Web 2.0, развили навыки проектирования до уровня Web 3.0, который использует красоту и простоту 2.0, — и такие профессионалы проектируют более функционально, надежно и продуктивно с точки зрения конверсий.