Почему стереотипныe лендинги и сайты конвертируют лучше?

Posted on by riasevastopol

На протяжении изучения, совершённого Гугл в августе 2012 года, было обнаружено, что online визитёры определяют любую веб-страницу (лендинг пейдж, товарную страницу eCommerce сайта и т. д.) как «прекрасную» либо «некрасивую» за 1/50 ? 1/20 долю секунды, что именуется, «в мгновение ока». После этого последовал совсем уже неожиданный вывод: визуально сложные целевые страницы оцениваются пользователями как менее прекрасные, нежели их более простые аналоги.

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

Иначе говоря изучение Гугл продемонстрировало: чем несложнее, тем лучше. Ниже мы постараемся ответить на вопрос, из-за чего дело обстоит как раз так, и разглядим, как когнитивная скорость и лёгкость визуальной обработки информации смогут сыграть решающую роль в упрощении веб-дизайна, а несложный шаблон приведет к повышению конверсии.

  • Психофизиология восприятия: из-за чего успех измеряется в миллисекундах?

pЧто такое стереотипный лендинг либо сайт?

Проделаем мелкий мысленный опыт: какой образ наверное всплывет в вашем сознании, в случае если кто-то скажет слово «мебель»?Почему стереотипныe лендинги и сайты конвертируют лучше? Если вы похожи на 95% окружающих вас людей, то вы поразмыслите об простом стуле. Ну и в случае если продолжить данный незатейливый опыт, то результаты будут приблизительно таковы: «классический цвет одежды для мальчиков» — светло синий, «девичий цвет» — розовый, «автомобиль» — с кузовом седан, птица — воробей и т. д.

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

Неспециализированный прототип «совершенного» online-ресурса распадается на пара небольших категорий: в отечественном сознании существует конкретный мысленный образ страницы социальной сети, online магазина, лендинга, блога, новостного сайта и т. д.

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

Вот некто произносит «online магазин одежды для актуальной молодежи двадцати с маленьким лет», и вы в полной мере имеете возможность представить что-то наподобие для того чтобы сайта:

Данный дизайн связан со стереотипным (прототипическим) понятием о «интернет-бутике» так тесно, что он во многих чертах повторится и в дизайне online магазина, торгующего одеждой в стиле хип-хоп.

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

  • Первое чувство имеет значение, либо Из-за чего ответствен качественный дизайн

Что такое когнитивная легкость?

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

«Когнитивная легкость направляет отечественное мышление в обстановках, в то время, когда мы не понимаем, как что-то трудится. Данный фактор действует на нас в любой ситуации, требующей взвешивать данные», — Коллин Роллер (Colleen Roller), эксперт по юзабилити.

Когнитивная легкость (простота распознавания объекта) проистекает из другого поведенческого паттерна — «несложного результата показа/экспозиции» (Mere Exposure Effect), он же «принцип близкого знакомства» (The Familiarity Principle). В максимально дешёвом изложении он бывает растолкован так:

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

Надпись гласит: «Чем лучше мы знакомы с чем-то, тем более оно нам нравится. Это и имеется “принцип близкого знакомства”».

Эти правила психофизиологии действуют и в сети.

Вы «близко привычны» с блогами, исходя из этого вы по привычке, не вспоминая, станете искать поле отписки (opt-in) в правом сайдбаре. Как раз Mere Exposure Effect применяют дизайнеры и маркетологи, размещая лого бренда в верхней левой части экрана, а поблизости — заголовок лендинга либо реализовывающей страницы.

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

Ниже размещены примеры обычных сайтов электронной коммерции. Как раз принадлежность к одной категории обуславливает их определенное визуальное сходство.

Предупреждение:

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

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

  • Минимизируйте когнитивную нагрузку для оптимизации юзабилити и конверсии

Что будет, в случае если дизайн не оправдает ожидания визитёров?

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

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

Действительно, их достаточно легко исправить, что возможно наглядно заметить на следующем кейсе.

Интернет-бутик Skinnyties.com, торгующий эксклюзивными галстуками, в октябре 2012 года прибег к редизайну интерфейса как раз по данной причине: быть может, что ветхий дизайн магазина смотрелся не меньше стильно, чем его универсальные торговые предложения, но визитёр, не посвященный в сущность оффера, имел возможность и не осознать сходу, что перед ним такое.

На протяжении реконструкции были осуществлены пара главных трансформаций:

Начальная версия…

…и конвертирующая версия.

Дизайн сайта приблизился к стереотипному макету online магазина.

Страница стала более приемлемой для восприятия за счет применения пробелов (т. е. повысилась «когнитивная легкость»).

Офферы сейчас отображены отличными изображениями в контрастных относительно фона цветах по принципу «одно УТП — одна картина».

Результаты редизайна практически поражают воображение:

Рост доходов (неспециализированный) при посещении магазина с любых устройств (ПК, ноутбук, смартфон) — 42,4%;
Рост доходов при посещении магазина с iPhone — 377,6%;
Коэффициент конверсии (неспециализированный) возрос на 13,6%;
Коэффициент конверсии при посещении магазина с iPhone — на 71,9%;
Показатель отказов (Bounce Rate) сократился на 23,2%;
Продолжительность визита сайта выросла на 44,6%.

Увидим, что в новом варианте нет ничего выделено инновационного, — напротив, налицо «возврат к истокам»: достигнута высокая релевантность ожиданиям потенциального клиента о том, как выглядит сайт современного ритейлера аксессуаров и модной одежды.

Открытый, адаптивный, привычный дизайн, но в случае если сопоставить его с внешним видом страниц Skinnyties.com до реконструкции, станет ясно, из-за чего «нишевый дизайн» должен быть узнаваем визитёром.

  • Когнитивный интернет и диссонанс-маркетинг

корреляция и Визуальная обработка информации ее со сложностью макета

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

К примеру, носителям научной степени PhD не нравятся броские красочные сайты. 🙂

Но кроме того научные работники из Harvard, University of Maryland и University of Colorado не смогли вывести неспециализированные правила визуальной привлекательности сайтов, универсальные для всех случаев.

По вертикальной оси откладывается некая условная привлекательность сайта, по горизонтальной — его визуальная сложность

Единственное, что возможно заключить конкретно: чем сложнее сайт, тем ниже его визуальная привлекательность.

С позиций физиологии: из-за чего несложная картина обрабатывается мозгом легче

Человек ленив по большому счету. Самый умный его орган — мозг— ленив, соответственно, в высшей вероятной степени. 🙂

Чем несложнее визуально выглядит лендинг либо сайт, тем более «прекрасным» он думается мозгу (и глазам), лишь вследствие того что несложный веб-ресурс не требует от человека избыточной затраты упрочнений: на декодирование, хранение и обработку несложной информации не тратится столько энергии, сколько на обработку сложной.

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

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

Увидим, что данный процесс по собственной сути аналоговый, и правильную цифровую модель до тех пор пока что выстроить не удается кроме того ученым из Гарварда. Но еще от физиологов и физиков 18-го века до нас дошла истина:

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

Вот как об этом пишет Сол МакЛеод (Saul McLeod) из университета Манчестера (University of Manchester): «Глаз приобретает визуальную данные и кодирует ее в условные «биты информации» (отметим, что аналоговые процессы, происходящие в мозгу человека, разглядывать в “цифровой логике 0 и 1”, очень ошибочно!), после этого данный продукт электрической активности нейронов хранится в закодированном виде. Эта информация возможно использована вторыми частями мозга, связанными с этими видами умственной деятельности как память, внимание и восприятие».

  • Психофизиология восприятия: из-за чего успех измеряется в миллисекундах?

Любой элемент изображения несет в себе данные, принимаемую на подсознательном уровне

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

Все упомянутые элементы несут в себе «узкую данные» о бренде (иначе говоря действуют на подсознательном уровне).

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

Это в корне неверное ответ: любой избыточный элемент сайта либо посадочной страницы усложняет когнитивное восприятие оффера.

Упростите путь информации «от глаза до сознания», удалив все лишнее со своей страницы — вот малейшая формула оптимизации визуального восприятия вашего УТП.

«Рабочая память» как «Святой Грааль» конверсии

«Простота хуже воровства», — гласит известная русская поговорка. Отнюдь нет, не везде и не всегда: Джордж Миллер (George A. Miller), психолог из Принстонского университета (Princeton University) еще в 50-х годах прошлого века вывел собственный известное «правило 7».

Напомним, как формулируется это правило:

«Любой взрослый здоровый человек способен хранить в один момент от 5 до 9 порций информации в собственной краткосрочной/рабочей памяти».

Краткосрочная память трудится так: включаясь на пара секунд, она заполняет новыми образами «временное хранилище» (temporary storage), где поступившая информация обрабатывается, а после этого происходит фокусировка внимания на ответе задачи.

Несправедливо уподобив для простоты понимания краткосрочную память человека чему-то наподобие оперативной памяти компьютера, мы можем сообщить:

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

Кратко, все сообщённое нами до этого момента сводится к нижеследующему тезису:

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

На несложном, стереотипном, «стандартном» лендинге визитёр легко воспримет самые ответственные для его сознания 5?9 параметров, каковые лишь и может уместить его «оперативная память». Для online магазина это будут гарантии, условия шоппинга, описание оффера, цена, изображение товара и, допустим, отзывы клиентов. В то время, когда рабочая память визитёра будет сосредоточена на ответе неприятности (и ни на чем втором), то он будет пробовать разобраться с ней как возможно стремительнее — конверсия, наверное, случится.

  • Факты и лишь факты: информационная перегрузка

Отклонение от стереотипа как обстоятельство отказа от конверсионного действия

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

Вторыми словами: излишняя когнитивация — неприятель конверсии. Поясним это утверждение иллюстрацией: в ее правой части условно начинается процесс обработки поступающей информации (т. е. когнитивация). Этому процессу смогут быть подвергнуты музыка (music), мысли (thoughts), идеи (ideas), что-то ответственное (big stuff) и что-то неважное (other stuff).

В случае если поступающая информация соответствует имеющейся у каждого человека матрице стереотипов восприятия (в правой части имеется условная матрица 3х4; в ней размещены подробности и факты из персонального опыта индивида, помогающие выявить и классифицировать новую данные), то она будет усвоена, а в сознании будет инициирован импульс к некому действию (конверсии).

Рабочая (краткосрочная) память сама по себе трудится весьма интересно: она извлекает из памяти пользователя паттерны поведения и стереотипы восприятия, каковые смогут понадобиться для ответа актуальной задачи («приобрести джинсы Levi s — 501 со скидкой за 40 долларов»).

В то время, когда же долговременная память неимеетвозможности содействовать ответу задачи в том же самом интернет-бутике («приобрести джинсы Armani с неслыханной скидкой, всего за 250 евро!»), то процесс восприятия информации (и, вероятнее, конверсии) прервется. Рабочая память переполнится новой информацией, которую человек будет пробовать обработать прежде всего. Ясно, что визитёр как-то справится с когнитивной перегрузкой, но шансы на конверсию быстро упадут.

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

Вместо заключения

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

Ясно, что подобное настроение не содействует конверсии ни в одной ее форме.

Вот 6 советов для разработки несложного, но «научно выверенного» дизайна:

  1. Знайте собственную целевую аудиторию, установите, по каким маркетинговым каналам она прибывает к вам.
  2. Создайте коллекцию «рабочих компонентов» вашего сайта либо целевой страницы — они уже принесли вам конверсию, для чего от них отказываться в пользу чего-то нового?
  3. Ни при каких обстоятельствах не нарушайте правило «когнитивной легкости» — пускай все будет на своем месте.
  4. Не забывайте, что комплексное визуальное ответ вашего бренда — фирменные цвета, шрифт и логотип — воздействуют на визитёров сайта совершенно верно, четко и на подсознательном уровне. изображения и Тексты, противоречащие неспециализированной маркетинговой концепции, должны быть исключены без сожаления.
  5. Пускай все будет как возможно несложнее — одна громадная картина против десятка мелких, верстка в одну колонку против макета с 2 столбцами текста и т. д.
  6. Не забывайте, что «стереотип/прототип» отнюдь не означает «старая замшелая окаменелость».

Не думайте о вашем ресурсе как об неповторимом шедевре — это легко метод дать пользователю хороший пользовательский опыт, а вам — доходы и конверсию!

Высоких вам конверсий!

По данным conversionxl.com, image source JoyHey

Случайные статьи:

Сайт или лендинг? Ключевые отличия сайта от лендинга.


Подборка похожих статей:

riasevastopol

More Posts