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

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

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

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

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

Рис. 6.5.Стрелки на рисунках иллюстрируют некоторые визуальные разделители макета

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

Расценивайте каждую видимую часть страницы как отдельную страницу

Чуть ранее мы говорили о шапке сайта как о части страницы, доступной пользователю без прокрутки. Аналогично можно говорить о тех областях страницы, которые будут доступны, если пользователь начнет прокручивать вниз: так называемые видимые части страницы . Шапка сайта — технически первая видимая часть, доступная без прокрутки. Поскольку размеры экранов и скорость прокрутки у пользователей различаются, соответственно, видимые доступные части также будут отличаться. Эти части веб-страницы не так легко определить: они вовсе не аналогичны страницам бумажной книги. Как мы уже обсуждали в главе о сборе данных, такие инструменты и сервисы, как Google Analytics и Crazy Egg, помогут обозначить видимые части.

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

Вот реальный пример, способный побудить к немедленным действиям. Вы можете увеличить конверсию, если будете упоминать свое предложение не один раз на странице, а один раз в каждой видимой части. Если на странице имеется только одна кнопка «Купить сейчас», да еще расположенная в нижней части страницы, знайте: многие пользователи так никогда и не доберутся до нее. Довольно часто люди созревают к покупке (или иному конверсионному действию) гораздо раньше. Конечно, не стоит иметь 17 идентичных кнопок «Купить сейчас», это довольно навязчиво: можно подумать об альтернативном способе сделать то же самое, но менее очевидно. Вы можете добавить ссылку «Узнать больше» в первую видимую часть, кнопку — в следующую часть, ссылку на изображение товара с подписью под картинкой — в третью. Добавление побуждающих элементов в каждую видимую часть не только способствует увеличению вероятности конверсий, но и позволяет охватывать более широкий круг аудитории.