Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Полный спектр продвижения в сети
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
31
Битрикс24

Битрикс24

www.bitrix24.ru

16
Tados

Tados

tados.ru

15
YAGLA

YAGLA

yagla.ru

13
myPreza

myPreza

mypreza.ru

12
Devicerra

Devicerra

devicerra.com

12
Perezvoni.com

Perezvoni.com

perezvoni.com

11
Expresso

Expresso

www.expresso.today

9
Reader

Reader

Интернет-журнал о современных технологиях.

9
THE NN

THE NN

thenn.ru

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

Улучшенная визуальная иерархия увеличивает продажи на 35.6%

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

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

1.png

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

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

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

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

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

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

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

2.jpg

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

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

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

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

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

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

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

3.jpg

Результат

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

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

44.jpg

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

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

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

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

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

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

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

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

  • Добавление фото/сайта/страницы в социальной сети профессионального пловца, дающего рекомендацию. Это так же может увеличить покупательское доверие к Вам.
  • Так как на сайте не уточняется ни число работников службы поддержки ни является ли звонок междугородним, было бы отличным решением разместить на странице живой чат с работником магазина. Это поможет посетителям, застрявшим в процессе покупки или нуждающимся в более детальной консультации.
+1
Первые Новые Популярные
WriteContent
Авторские статьи для развития бизнеса
Максим Кузнецов
Интересная статья. Спасибо. Заметил что в нашей тусовке вы недавно. Добро пожалуйста. Материалы Ваши очень интересные. Спасибо
Ответить
BarrakudaPRO
Полный спектр продвижения в сети
WriteContent
Авторские статьи для развития бизнеса
Максим Кузнецов
А в карточке товара тоже нужно использовать F образную структуру?
Я часто встречал магазины где картинки одна большая слева, описание и характеристики справа.
Ответить
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать