5 законів високої конверсії

1. 1. Закон змістовності
2. 2. Закон минулого досвіду
3. 3. Закон вигоди
4. 4. Закон Фіттса
5. 5. Розпізнавання осіб
6. Висновок: Довіряйте поведінкової психології, але перевіряйте

Редактор-перекладач SEOnews

У вас бувало, що ви всю душу вклали в A / B-тестування, а воно провалилося? Оцінити потенціал тесту і передбачити його корисність допоможе поведінкова психологія, а з сервісами типу Visual Website Optimizer провести сам експеримент не складе труднощів.

Всього допоможуть вам знайти найбільш вдалі реалізації для збільшення конверсії сайту, а приклади з практики 20 компаній покажуть, що це дійсно працює.

1. Закон змістовності

Один з центральних принципів гештальтпсихології - Закон прегнантности (Prägnanz), або Закон змістовності. Згідно з ним, ми прагнемо до сприйняття більш простих і симетричних форм, наш мозок віддає перевагу зрозумілість і організованість і уникає складних ідей і дизайну. Інстинктивно ми знаємо, що прості речі в меншій мірі можуть піднести нам неприємні сюрпризи, тому ми в жаху від переліку умов обслуговування кредитної карти і любимо просту політику повернень.

Як дотримання цього закону допомагає підвищити конверсію?

Приклад № 1: The Sims 3 (+ 128%)

Незважаючи на статус однієї з найуспішніших ігрових франшиз, виробники The Sims 3 продовжували шукати варіанти для збільшення конверсії.

Оригінальний дизайн головної сторінки сайту містив 4 призову до дії:

1. зареєструватися (або увійти);
2. знайти магазин;
3. прочитати останні новини;
4. отримати щось безкоштовно.

Щоб поліпшити показники, вони протестували 6 нових варіацій, кожна з яких містила одну CTA-кнопку.

З'ясувалося, що кожна реалізація підвищувала конверсію принаймні на 43%, але найкращим виявився варіант D, що пропонує після реєстрації отримати безкоштовний місто.

Якщо у вас є десятки дивовижних пропозицій, вітаємо! Але не закидайте ними ваших потенційних клієнтів відразу, виберіть найпотужніше.

Приклад № 2: Device Magic (+ 35%)

У B2B компанії Device Magic, що спеціалізується на мобільній продуктивності, була красива головна сторінка, на якій розмістили величезну кількість списків, опцій для організацій і розробників, а також відео про те, як все працює.

Занепокоївшись тим, що це занадто складно для сприйняття, вони вирішили спробувати більш простий варіант без відео, списків і навіть поділу для організацій і розробників. Тестований варіант містив тільки короткий опис і карусель з зображеннями.

Відвідувачам стало легше розібратися в продукті в новому дизайні, і кликабельность кнопки реєстрації зросла на 35%.

Приклад № 3: Highrise (+ 37,5%)

Щоб збільшити конверсію у популярній Highrise CRM, компанія 37signals внесла на сторінку кілька кардинальних змін.

Оригінальний дизайн (ліворуч) містить велику кількість зображень, стрілок і заголовків, увагу відвідувача привертають 12 різних блоків одночасно. Це все тільки ускладнює. У новому дизайні заголовок привертає увагу, а єдина стрілка веде відвідувача до читання цікавої інформації. Все просто.

Полегшите завдання відвідувачам сайту, розробіть сторінку зі зрозумілою ієрархією. Одна цільова сторінка - одна дія.

Приклад № 4: Daily Burn (+ 20,45%)

На головній сторінці сайту Daily Burn (раніше Gyminee), сервісу відеороликів з тренуваннями від кращих інструкторів, розміщувалися скріншоти, опис функціоналу і навіть лічильник калорій. Вирішивши провести редизайн, творці сервісу пішли простим шляхом і видалили частину контенту сторінки.

Через пару тестів, вони прибрали блок з постами в блозі, лічильник калорій і розширений футер, поступово сфокусувавши сторінку на єдиному важливому елементі - кнопці реєстрації. Обидва спліт-тесту показали збільшення конверсії в середньому на 20,45%.

А які елементи відволікають користувача від головної мети на вашому сайті?

Приклад № 5: DesignBoost (+ 13%)

DesignBoost (додаток для навчання дизайну) почали з тестування короткої версії сторінки. Зазвичай вони ефективніше при просуванні безкоштовних додатків. Зверніть увагу на слово «звичайно». Незважаючи на те, що є загальні принципи, такі як простий дизайн, варіювання довжини сторінки і закликів до дії, вони по-різному працюють на різних сайтах і з різною аудиторією, тому без тестів не обійтися.

Як і передбачалося, коротка сторінка підвищила конверсію на 13%. Але ось що цікаво: при глобальні зміни, таких як видалення більшої частини контенту цільової сторінки, ви не можете приписувати отриманий результат впливу одного фактора. У випадку з DesignBoost сторінка стала коротше, але для цього були видалені четвертий заголовок ( «Як працює курс?»), Порівняльна діаграма і третє зображення продукту.

Макрозмін можуть принести величезні результати, але мікрозміни дадуть вам більше інформації.

2. Закон минулого досвіду

Також відомий як концепція ментальних моделей. Згідно з ним, наш попередній досвід впливає на сприйняття поточної ситуації.

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

Приклад № 6: Fab.com (+ 49%)

Для великого інтернет-магазину Fab.com було важливо домогтися навіть невеликого збільшення числа кліків по кнопці «Додати в корзину». Версія з збільшене зображення товару і красивою іконкою на кнопці була хорошою, але завжди є, що поліпшити.

У тестованих варіантах змін зазнали два елементи:

• найменування виробника (by Blu Dot x Fab, by Qualy);
• заклик до дії ( «Додати в корзину», «+ Кошик»).

Перший варіант приніс значний результат - опис і кнопка з текстом «Додати в корзину» збільшили кликабельность на 49%. Другий варіант з додатковим описом і злегка модифікованим закликом до дії збільшив конверсію на 15%. Скромно, але статистично значимо.

Що могло викликати таке значне зростання? Все просто: мила і зрозуміла іконка кошика вводить в оману. Грунтуючись на багаторічному досвіді онлайн-шопінгу, ми очікуємо, що на кнопці оформлення замовлення буде написано «Додати в корзину» (подивіться на Amazon). Відмова від цієї ментальної моделі може бути розцінений як прорив в дизайні, а може відлякати потенційного покупця.

Пам'ятайте, що ваші клієнти не tabula rasa.

Приклад № 7: TycoonU (+ 130%)

TycoonU, платформа, яка пропонує дистанційні курси для інвесторів, зіткнулася з тим, що 80% потенційних клієнтів йшли на етапі оформлення покупки курсу. Це досить велика кількість, тому було вирішено провести редизайн форми покупки.

Що відразу кидається в очі? Початковий варіант схожий на форму Google, а редизайн виглядає як звична сторінка оформлення замовлення. Коли люди бачать анкету, вони розцінюють сервіс як небезпечний і непрофесійний.

Нова версія запускає безліч тригерів склалася ментальної моделі:

• стовпець праворуч (нівелює схожість з анкетою);
• значки безпеки (підвищують довіру);
• онлайн-помічник (відповідає на ці запитання);
• номер телефону (підвищує довіру і допомагає вирішувати питання).

Таким чином, дизайн в цілому і окремі елементи (наприклад, зображення кредитних карт і чекбокс з правилами використання) апелюють до минулого досвіду, а McAfee badge і акредитація BBB (Better Business Bureau) підвищують довіру.

Приклад № 8: AMD (+ 3600%)

Виробник комп'ютерної електроніки AMD використовує сайт не для продажу, а для реклами і підтримки клієнтів, тому основним завданням стало збільшення кількості расшаріваніє в соціальні мережі за рахунок переміщення кнопок і зміни їх виду. Досвідчений користувач очікує знайти соцкнопкі в конкретному місці. Наприклад, ви з меншою ймовірністю скористаєтеся кнопками в футере в порівнянні з кнопками, розташованими збоку.

Щоб знайти оптимальний варіант, в AMD випробували різні варіанти. Зокрема, досліджувалося найбільш вдале розташування (зліва, справа, знизу) і розмір іконок.

У підсумку найкращою стала версія, в якій зліва розміщувалися великі іконки - вона підвищила конверсію в 37 разів у порівнянні з оригінальною конфігурацією, коли кнопки розшарювання перебували в футере.

Як таке незначне зміна призвело до такого неймовірного результату? По-перше, воно більше відповідає очікуванням користувачів, оскільки багато сайтів використовують схожий варіант (наприклад, плагін Digg Digg для WordPress). По-друге, таке розміщення робить кнопки помітніше. Багато хто не прокручують сторінку настільки, щоб знайти кнопки, заховані в футере. По-третє, розміщення кнопок зліва відповідає теорії, що погляд користувача описує траєкторію, за формою нагадує латинську букву F (звичайно ж, якщо ваші користувачі читають зліва направо).

Приклад № 9: Veeam Software (+ 161%)

Що якби було можливо підвищити конверсію, змінивши всього два слова?

Компанія Veeam Software почала з вивчення своїх користувачів і організували опитування, щоб з'ясувати, якої інформації не вистачає на цільовій сторінці. З'ясувалося, що не вистачало розрахунку вартості.

Але зачекайте! Veeam вже розмістили посилання «Розрахувати квоту» (Request a quote), чому користувачі запитують розрахунок вартості? Щоб говорити з потенційними клієнтами на одній мові, Veeam Software замінили фразу «Розрахувати квоту» (request a quote) на «Розрахувати вартість» (request pricing) і виміряли результати.

Змінивши всього одну фразу, Veeeam підвищили CTR на 161%!

Яке наукове обгрунтування того, що сталося? Ваші клієнти не є чистим аркушем, у них є конкретні питання і потреби. Ті, хто хоче дізнатися про вашу компанію, будуть шукати фразу «Про нас» / «Про компанії», ті, хто хочуть з вами зв'язатися, будуть шукати «email» в футере або зверху. Треті захочуть зареєструватися - вони будуть шукати слова «реєстрація» або «вартість».

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

3. Закон вигоди

Елліот Шмуклер (LinkedIn і Wealthfront) одного разу сказав, що зростання можна стимулювати за допомогою трьох важелів:

1. збільшення охоплення;
2. зменшення «тертя», що полегшить виконання цільового дії;
3. посилення стимулу отримати більшу вигоду.

Закон вигоди стосується двох останніх пунктів. Наша поведінка залежить від співвідношення користі від дії (завантажити електронну книгу) і передбачуваних витрат на його вчинення (залишити email). Саме тому люди із задоволенням залишать адреса електронної пошти, щоб отримати корисну книгу, але навряд чи стануть заповнювати багатосторінкову анкету, щоб отримати ту ж книгу.

Як принцип вигоди працює в веб-дизайні?

Приклад № 10: Офіційний магазин Олімпіади-2010 у Ванкувері (+ 21,8%)

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

Спочатку процес оформлення покупки розтягувався на 4 сторінки: увійти / зареєструватися, інформація про доставку, платіжна інформація та підтвердження. Новий варіант містив одну сторінку для покупки, а наступна за нею сторінка закликала створити акаунт.

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

На додаток крок створення аккаунта був переміщений в кінець процесу оформлення покупки. Це збільшило кількість покупок, тому що крок створення аккаунта не відволікає від головного, і кількість створених облікових записів, так як вся необхідна інформація заповнювалася в процесі покупки і був потрібний один клік.

У сукупності ці зміни допомогли підвищити конверсію на 21,8%, прибравши зайві перешкоди і тим самим поліпшивши співвідношення витрати / користь.

Пр имер № 11: Meebox (+ 121%)

Предметом багатьох A / B-тестів зазвичай є кнопки, наповнення, дизайн, але що ви скажете про спліт-тестуванні бізнес-моделі?

Meebox, хостинг-провайдер з Данії, вирішили провести ревізію структури ціноутворення і стали надавати величезні знижки (до 40%) для користувачів, які оформили два роки використання.

Варіанти зі знижкою підвищили прибуток на 112% (на 51% збільшився показник конверсії, на 46% збільшився середній чек).

Чому це спрацювало? Знижка знижує ризик, який бере на себе клієнт, здійснюючи покупку, що підкреслює вигідність співпраці. До того ж легше стимулювати поточного клієнта купити більше, ніж переконати нового зробити першу покупку.

Приклад № 12: Soocial (+ 28%)

Soocial, компанія з управління контактами, привертала багато нових клієнтів завдяки великій кнопці реєстрації на головній сторінці.

Так як поліпшення в верхній частині воронки продажів гарні тільки для починає свій шлях компанії, було вирішено поміняти кнопку реєстрації. У початковій версії була велика кнопка «Зареєструватися зараз!». У новому варіанті текст на кнопці не змінився, а поруч з'явився напис «Безкоштовно!».

Вказавши на перевагу, це слово збільшило CTR на 28%.

«Безкоштовно» - сильне слово, але майте на увазі дві речі:

1. якщо товар насправді платний (або не зовсім), ви отримаєте розчарованих клієнтів;
2. «Безкоштовний» часто має на увазі «дешевий». Якщо ваша пропозиція будується навколо якості, слово «безкоштовний» може залучити не тих покупців, які вам потрібні.

Приклад № 13: Expedia (+ $ 12M)

У туристичній компанії Expedia з'ясували, що навіть необов'язкове поле може стати перешкодою на шляху користувача сайту до скоєння цільового дії.

У 2010 Expedia протестували два варіанти заповнення платіжного адреси. Исходник припускав введення імені користувача і адреси, а також необов'язкове поле введення назви компанії. У новому варіанті ніяких додаткових полів не було, тільки ім'я і адресу.

Це проста зміна збільшило прибуток на 12 млн. Доларів. Як?

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

4. Закон Фіттса

Час завантаження сторінки значно впливає на конверсію, а що стосовно часу, потрібного для завершення дії?

Відповідно до закону Фіттса, час, що витрачається на те, щоб привести курсор в потрібну область (наприклад, до кнопки реєстрації), пов'язане з відстанню до цілі і її розміром. Можна значно збільшити CTR, якщо збільшити розмір кнопки (саме кнопки, а не тексту на ній) і розмістити її недалеко від передбачуваного місця розташування покажчика миші (якщо форма розбита на кілька сторінок, кнопки потрібно розмістити на одному місці, щоб мінімізувати руху мишею). Вірно і зворотне: можна знизити відсоток скоєння небажаних дій, розмістивши маленьку кнопку або посилання на відстані від початкового положення курсора (в нижній частині сторінки).

Наприклад, WordPress слідує закону Фіттса: часті дії, такі як публікація, позначені великими кнопками, менш часті дії, наприклад, переміщення в корзину, позначені текстовими посиланнями.

Приклад № 14: Hyundai (+ 62%)

Компанія Hyundai запустила сайт, щоб запросити користувачів на тест-драйв і поширювати буклети в Нідерландах, але не отримала бажаного результату.

Щоб виправити ситуацію, маркетологи Hyundai внесли такі зміни:

1. розмістили SEO-тексти;
2. збільшили розмір зображень;
3. додали дві великі CTA-кнопки.

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

У сукупності ці зміни підвищили CTR на 208%, а кількість записів на тест-драйв і завантажень брошури - на 62%.

Це приклад правильного багатовимірного спліт-тестування. Замість того, щоб внести три зміни і гадати, що ж вплинуло на підвищення конверсії, в Hyundai створили вісім варіантів, в яких було різну кількість змін. У підсумку варіант, в якому відразу були присутні три нововведення, приніс найбільшу конверсію.

Приклад № 15: Передвиборна кампанія Барака Обами 2012 (-22% відмов від розсилки)

Перед президентськими виборами в 2012 році email-кампанія Обами привернула пожертвування в розмірі 500 млн доларів. Команда проекту оптимізувала всі, що можна. В одному з тестів вирішили перевірити варіанти посилання для відписки.

Спочатку показник відписок був разюче низьким (195 осіб з 578 994 одержувачів), але після того, як посилання на відписку стала менш помітна ( «тут» замість «Відмовитися»), кількість відмов від розсилки знизилося на 22%.

Поряд з законом Фіттса новий варіант такоже відповідає закону, зворотнього закону Минулого досвіду. Коли ми шукаємо посилання, щоб відписатися від розсилки, ми автоматично шукаємо слово «відписатися». Заміна звичної формулювання на «Якщо ви більше не хочете отримувати ці повідомлення, клікніть тут» ускладнила завдання.

Приклад № 16: SAP (+ 32,5%)

Виробник програмного забезпечення SAP поставив собі за мету підвищити кількість завантажень їх програмного продукту Crystal Reports. Спочатку сторінка виглядала як на звичайному корпоративному сайті - досить формально з великою кількістю тексту, а посилання на скачування була текстової.

У SAP протестували кілька варіантів, які відповідали найкращим практикам і відповідали вимогам корпоративного брендингу.

У найбільш ефективному варіанті були прибрані відволікаючі елементи, доданий другий заклик до дії внизу сторінки, але одне нововведення особливо впадало в очі: кнопка скачування виділялася на тлі решти контенту. Тепер скачати софт можна, натиснувши на помітну кнопку. Результат - на 32,5% більше завантажень.

Зверніть увагу, що більше не завжди краще. Великі кнопки збільшать CTR, але всьому є межа: одного разу кнопка стане схожа на поле і відвідувачі сайту почнуть плутатися.

Приклад № 17: The Vineyard (+ 32%)

Спліт-тестування відмінно підходить для інтернет-магазинів, але що якщо ваш бізнес пов'язаний з офлайн? The Vineyard, розкішний готель недалеко від Лондона, з'ясував це на власному досвіді. При тестуванні компанія зосередилася на змінах, які з більшою ймовірністю підвищать конвертацію користувача сайту в гостя готелю.

У первинному варіанті на сторінці присутня красива фотографія номера і текст, що розповідає про цей готель. Внизу сторінки розміщувалася маленька посилання для бронювання. У тестовій версії все залишилося як і раніше, тільки у верхній частині сторінки додалася яскрава кнопка «Забронювати онлайн».

Це збільшило CTR на 32%.

Так як це той рідкісний приклад, коли зміна всього лише одного елемента принесло результат, ми можемо приписати результат дії Закону Фіттса: заклик до дії підняли вище, скоротивши відстань до курсора, а кнопка збільшила розмір мети.

5. Розпізнавання осіб

Ми підсвідомо спостерігаємо за собі подібними. Коли ми зустрічаємо обличчя людини на сайті, ми, по-перше, звертаємо на нього увагу і, по-друге, оцінюємо висловлені їм емоції. Обидва дії абсолютно спонтанні . Чи підвищить це конверсію?

Так, двома способами:

1. Прівертає увагу.

За допомогою особи ви можете привернути увагу відвідувачів сайту до ключових елементів на сторінці. Наприклад, якщо людина дивиться на цільову кнопку, більшість відвідувачів сайту подивляться туди ж.

У 60-х група психологів провела дослідження поведінки людей. Суть експерименту: люди стояли на тротуарі і пильно дивилися вгору. На одну людину ніхто не звернув уваги, а ось група з 15 осіб, одночасно дивляться в небо, привернула увагу більше 40% перехожих.

2. Передає емоції.

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

Приклад № 18: Highrise (+ 102,5%)

Highrise, CRM для малого бізнесу, перевірили дієвість принципу розпізнавання осіб.

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

Цей варіант не тільки відповідає закону змістовності, а й привертає увагу відвідувача, одночасно роблячи його щасливим. Це збільшило конверсію на 102,5% в порівнянні з ісходником.

Далі Highrise протестували різні особи в тому ж дизайні. Хоча деякі варіанти принесли поліпшення лише в 5%, з'ясувалося, що якась конкретна особа ролі не грало.

Приклад № 19: Medalia Art (+ 95,4%)

На головній сторінці художнього онлайн-бутіка Medalia Art розміщувалися роботи художників. Клікнувши на вподобану, відвідувачі сайту потрапляли на сторінку автора, де могли придбати картину.

Мета спліт-тестування: розробити варіант сторінки, який збільшить кількість переходів в профіль художників. Так як багато конверсійні дії відбувалися з мобільних пристроїв, мініатюри картин замінили на фотографії художників.

В результаті CTR на сторінках художників виріс на 95,4%.

Особи людей привертали увагу. Ми ніколи не купуємо продукт, ми купуємо історію. Medalia розповідають історії за допомогою фотографій художників.

Приклад № 20: Harrington Movers (45,45%)

Компанія Harrington Movers на своєму сайті розмістила стокові фото усміхнених людей. У пошуках можливостей для збільшення конверсії, вони спробували дві варіації:

1. розмістили фото своєї команди;
2. замінили його на зображення вантажівки компанії.

Обидва тести показали хороший приріст конверсії (45,45% і 45,05% відповідно).

Якщо фото з людьми ще можна пояснити, то в чому секрет фото з вантажівкою? Можливо, тут замішані дві причини: по-перше, це викликає довіру, так як логотип на автомобілі переконує користувача сайту, що компанія дійсно існує, по-друге, допомагає візуалізувати ( «Мій будинок поміститься в їх вантажівка»).

Висновок: Довіряйте поведінкової психології, але перевіряйте

Закони поведінкової психології - теорія, яка працює, але це не означає, що вони бездоганні. Найчастіше вони виключають один одного: поки ви застосовуєте один з них, ви одночасно (і несвідомо) порушуєте інший.

Розглянуті принципи допоможуть вам при плануванні A / B-тестування, але тільки на практиці ви зможете з'ясувати, чи працює змінена версія цільової сторінки.