оптимизация
Юзабилити

Альтернативный взгляд на классическую оптимизацию: 4 важных момента

Автор: Денис Давыдов07.09.2015

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

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

Кнопки

Что касается такого важного элемента как СТА-кнопки, то на его счет приходится несколько устойчивых подходов, а именно – кнопка должна быть большой, должна быть единственной и должна располагаться до линии сгиба. Эти три стандартных паттерна настолько прочно вошли в нашу повседневную практику, что мы очень часто применяем их без оглядки на контекст и на уместность метода в каждом конкретном случае.

СТА-кнопка должна быть большой

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

оптимизация

оптимизация

Показательный тест: в первом случае увеличение СТА-кнопки вкупе с новым текстом привело к повышению конверсии на 31%, в то время как такое же изменение размера элемента без изменения текста привело к падению конверсии на 10%.

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

оптимизация

Еще один кейс: несмотря на то, что условно «главная» СТА-кнопка значительно больше маленькой, расположенной в правом верхнем углу, именно небольшую «Free Trial» предпочитает нажимать большинство пользователей.

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

СТА-кнопка должна быть единственной

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

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

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

Отличный пример эффективного размещения двух равноценных СТА-элементов демонстрирует GetResponse.com – к основной кнопке «Buy Now» была добавлена кнопка «Free Trial», предоставляющая пользователю доступ к триальной версии продукта. В итоге количество пользователей, воспользовавшихся бесплатным периодом действия продукта выросло на 158%.

оптимизация

Эксперимент GetResponse.com по добавлению второго СТА-элемента увенчался внушительным ростом конверсии в 158%

Еще одно изящное совмещение двух СТА-кнопок на одной странице можно увидеть на сайте Soundcloud.com, когда одна копка непосредственным образом побуждает пользователя создать аккаунт, а вторая – испытать возможности сайта без необходимости регистрироваться.

оптимизация

Главная страница Soundcloud с двумя СТА-кнопками

СТА-кнопка должна быть расположена выше линии сгиба

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

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

Решение о том, где в конкретном случае следует размещать СТА-кнопку, полностью зависит от того, в каком месте вашего лендинга большая часть пользователей готова стать лидами. Изучите поведение аудитории и определите то количество контента, которое необходимо пользователю для принятия решения.

оптимизация

Лендинг, заработавший после перемещения CTA-кнопки ближе к концу страницы: +304% конверсии

Слайдеры

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

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

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

оптимизация

Пример простого и понятного слайдера, который оказался уместнее видео и дал прирост конверсии в 30%. Следует также обратить внимание на менее громоздкий заголовок в случае использования слайдера.

Слишком короткие формы для заполнения и слишком короткий лендинг

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

Считается, что чем короче форма для заполнения, тем больше вероятность того, что пользователь решит ее заполнить. Действительно, обширные и запутанные формы отталкивают, в то время как простые действия, такие как заполнение формы в 1-3 поля, способствуют конверсии. На практике же истина, как всегда, находится где-то посередине – слишком короткие формы, как это ни странно, также могут смущать пользователя и создавать для него дополнительные сложности. Этот парадокс случается тогда, когда в погоне за простотой мы чрезмерно упрощаем форму, убирая из нее те элементы, к которым пользователь привык и которые он ожидает увидеть. Проще говоря, не стоит жертвовать функционалом в угоду краткости формы.

оптимизация

В данном случае достаточно было убрать поле длительности подписки (которое пользователь привык видеть) для того, чтобы конверсия сайта упала на критические 40%

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

Очень показательным является кейс CrazyEgg – когда компания только выходила на рынок, ей пришлось создать длинный и содержательный лендинг, на котором потенциальный клиент мог найти всю необходимую информацию о том, что представляет собой новый продукт. При тестировании двух версий лендинга – короткой и длинной – длинная версия показала невероятный рост конверсии в 363%

оптимизация

Короткая и длинная версия лендинга CrazyEgg. Обратите внимание на то, насколько объемной получилась версия, обеспечившая +363% конверсии.

Длина лендинга также напрямую связана с тем, на каком этапе находится продвигаемый бизнес. Если компания находится на рынке продолжительное время и уже успела заявить о себе, создав определенную репутацию, то лендинг не стоит перегружать очевидной информацией – в этом отношении пример компании CrazyEgg также показателен – спустя несколько лет, когда компания стала известна целевой аудитории, огромный лендинг, давший когда-то прирост конверсии в 363% был существенно сокращен, в результате чего конверсия увеличилась на дополнительные 13%.

оптимизация

Крайний правый вариант оказался самым продуктивным при проведении второй оптимизации лендинга CrazyEgg

Изображение людей на лендингах

К сожалению, фотографии людей, излучающих радость, удовлетворение и счастье, далеко не всегда уместны на целевых страницах. Как и в других рассмотренных нами сегодня случаях, добавление привлекательных улыбающихся людей во многих случаях действительно приводит к росту конверсии. Однако, не редко можно встретить примеры, когда наличие фотографий людей приводило к не самым лучшим результатам. В этом отношении показателен кейс интернет-магазина Felix – после того, как оптимизаторы убрали со страницы привлекательную девушку в очках (которые являются основным товаром магазина) и заменили фотографию простым изображением товара, конверсия выросла на 72%

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

оптимизация

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

Реакция на статью
поделюсь
0%
интересно
0%
полезно
0%
не уверен
0%
скучно
0%
где автор?
0%
Денис Давыдов
Всем привет! Я Денис Давыдов – автор статей о юзабилити, интерфейсах и интернет-маркетинге. Будучи энтузиастом в сфере электронной коммерции и UX, сотрудничаю с различными российскими компаниями, предоставляя качественный контент и публицистику для веб-проектов. Изучаю актуальную культуру и политику, пишу очерки по мотивам наиболее острых и любопытных феноменов современности.
Комментарии
Оставить отзыв

You must log in to post a comment