Давайте взглянем на рисунок ниже:

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

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

Для меня, как потенциального покупателя, является слишком большой работой чтение горы этого сухого текста. У кого есть время для таких вещей? Скорее всего, я просто перейду на другой сайт.

Использование визуальной иерархии для направления внимания посетителя

Поэтому у Вас есть всего несколько секунд для того чтобы захватить внимание посетителя и объяснить ему, для чего служит ваш сайт. Это именно тот случай, где применяется визуальная иерархия.

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

Сайт “Underwater Audio”недавно испытал эту концепцию на практике.

Это оригинал страницы, который был использован до изменений

Потребности бизнеса

Как следует из названия, Underwater Audio, представляет собой интернет-магазин, который реализует уникальную продукцию аква-продуктов, таких как водонепроницаемые плееры и наушники, очки и одежду для плавания. И как и у любого другого магазина электронной коммерции главная его цель – это увеличение реализации продукции через их сайт.

Тест «гипотеза»

Гипотеза заключалась в том, что размещение кнопки, призывающей к действию после заголовка и описания, усиливает убедительность текста (увеличивает продажи соответственно).

Дополнительным преимуществом является то, что перемещение описания влево освобождает пространство для демонстрации продукта.

Так выглядит страница после внесенных изменений:

Результат

Как и ожидалось, измененная страница бьет исходную с увеличением продаж на 35,6%.

Вот сравнительный рисунок, для того чтобы оценить, что было сделано:

Это исследование подчеркивает то, что сайт с хорошим дизайном должен включать в себя не только эстетику, но и хорошее юзабилити.

В конце концов, порядок выстроенный на сайте Underwater Audio помог понять им историю, узнать как посетитель вел себя на их странице.

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

Так же Вы можете заметить, что этот случай демонстрирует нам, как неправильное размещение кнопки призывающей к действию может ухудшить конверсию сайта. Кажется вполне вероятным, что посетитель, который переходил на следующую страницу, не читал характеристику.

Есть еще несколько пунктов, способствующих увеличению конверсии, о которых следует упомянуть:

• Рекомендация профессионального пловца, касательно товара, представленного на сайте так же способствует увеличению доверия посетителя к данному сайту.
• Яркий цвет кнопки «Узнать больше», выделяет ее на относительно однородном фоне.
• Увеличенный размер шрифта служит для привлечения внимания к важной части текста.
• Более конкретные детали (цена, условия доставки и т.д.) не упоминаются на странице, чтобы случайно не отпугивать людей. Вместо этого они появятся на следующей странице, как только посетитель проявит свой покупательский интерес.
• Наиболее важные категории «Продукты» в верхней навигационной панели, выделены увеличенным шрифтом.
• Четкое отображение числа обслуженных клиентов в правом верхнем углу и печатью безопасности от Go Daddy в левом верхнем углу, используется как добавление доверия к сайту.
• Бесплатная доставка, гарантийный срок и доступные способы оплаты позволят посетителю без особых раздумий перейти к оплате заказа.

Наконец, важно понять, что для построения эффективной визуальной иерархии необходимо понять цели, которые преследует веб-страница.

Тесты, которые можно опробовать

• Добавление фото/сайта/страницы в социальной сети профессионального пловца, дающего рекомендацию. Это так же может увеличить покупательское доверие к Вам.
• Так как на сайте не уточняется ни число работников службы поддержки ни является ли звонок междугородним, было бы отличным решением разместить на странице живой чат с работником магазина. Это поможет посетителям, застрявшим в процессе покупки или нуждающимся в более детальной консультации.