Збільшуємо конверсію у формі оплати за допомогою візуального поліпшення полів

    У цій статті піде мова про підвищення конверсії платіжних форм. До речі, висновками, які в ній представлені нехтують до 90% сайтів. Якщо ж врахувати викладені нижче рекомендації, то можна підвищити конверсію платежів на кілька десятків відсотків. Дослідження юзабіліті платіжних форм показали, що багато користувачів не замислювалися про безпеку, поки їм не довелося вводити дані своєї кредитної карти. Крім того, було зроблено інше цікаве спостереження: кілька учасників дослідження висловили свою думку з приводу окремих частин платіжної форми як про «надійних» і «ненадійних».
 
Наприклад, одна частина платіжної форми, що має ікони і значки безпеки, текстові або інші посилення захисту сприймалася як більш надійна, а друга, без візуальних знаків, викликала менше довіри — незважаючи на те, що ці поля були частиною однієї форми і розташовувалися на одній і тій же сторінці. З технічної точки зору, зрозуміло, між цими формами немає ніякої різниці, так як всі поля на HTTPS-сторінці однаково зашифровані. Тим не менше, більшість людей не знають про це, і вважають деякі частини платіжної форми більш безпечними, а інші — менш безпечними всупереч будь-якій логіці.
 
Філіп Каплан недавно опублікував замітку в своєму блозі, в якій стверджує, що завдяки деяким радам з цієї статті , він зміг збільшити конверсію на своєму сайті на 60%. Давайте розберемо більш детально, як у нього це вийшло, і подумаємо, що ще можна було б поліпшити.
 
Філіп розробив сервіс DistroKid , платна версія якого коштує 19.99 доларів на рік. Цей сервіс дозволяє музикантам опубліковувати свою музику на iTunes, Spotify і інших найбільших інтернет-майданчиках з продажу музики. 75% користувачів не хотіли вводити дані своєї кредитної карти. Але після впровадження рекомендацій перерахованих нижче, середній конверсійний курс збільшився з 25% до 40% (тобто конверсія виросла на 60%).
 
 Ось як виглядала платіжна форма до будь-яких змін:
 
 
 
 Ось так після змін:
 
 
 
 Ось список і опис тих змін, що були зроблені:
 
 
     
  • Велике зображення «замку»
     Замок + слова два рази і «зашифрований» дають зрозуміти користувачам, що сервіс піклується про їхню безпеку.
     
     
  •  
  • Сірий фон для полів для введення конфіденційної інформації
    Такий візуальний хід викликає у користувача думки на кшталт «все, що я друкую в поле на сірому тлі повністю безпечно». Слід зазначити, що якщо ви використаєте подібний стиль і в інших частинах форми для звичайних полів, ви не досягнете бажаного результату, і це не дозволить вам добитися необхідного рівня захисту потрібних полів в очах покупців. Тому, щоб домогтися ефекту уявної оболонки, поля кредитної картки, які викликають у користувачів підозри і настороженість, необхідно виділити і зробити несхожими на інші.
     
     
  •  
  • Логотипи кредитних карт.
     Вони дозволяють асоціювати сайт з фінансовими брендами, яким можна довіряти.
     
     
  •  
  • Логотип SSL від реєстратора GoDaddy прямо біля форми.
    Цей знак надає сайту солідність і ще раз підкреслює його захищеність. Розміщуючи знаки безпеки в безпосередній близькості до полів кредитної картки, ви нагадуєте клієнту про захищеність форми саме тоді, коли він вперше про це замислюється. Це — стратегічно правильне рішення, здатне переконати неспокійного клієнта. Крім того, помістивши їх поруч з полями, а не де-небудь вгорі чи внизу сайту, ви даєте зрозуміти, що логотип SSL відноситься саме до цих полів (хоча з технічної сторони це не має значення).
     
     
  •  
  • Виділення переваг, які дає оплата.
    На одній сторінці тричі згадується про те, що користувач отримує можливість «необмеженої закачування» файлів. Філіп взяв цю ідею у шлюбних агентств (і порносайтів), які часто вішають фотографії симпатичних дівчат на форми оплати. Таким способом вони немов говорять користувачеві: «Ти навіть зможеш побачити її або зустрітися з нею якщо підпишеш».
     
     
  •  
  • Вікно з переліком платіжних систем.
    Додавання окремого поля під вибір типу картки не здається логічним кроком на перший погляд. Але це тільки на перший погляд. При цьому по-замовчуванням вже вибрана Visa, тому що ця платіжна система є найпопулярнішою. Можливо, користувачі думають: «Ух ти! Поле вже заповнено і без мене ». Багатьом користувачам це скорочує час, що витрачається на введення даних.
     
     
  •  
  • Персоналізоване повідомлення.
    Висновок персонального сповіщення користувача під полями на сірому фоні, поліпшить запропоновані переваги, а також посилить довіру користувачів.
     
  •  
З технічної точки зору, немає ніяких відмінностей між оформленням захисту сайту Пилипа й іншими найбільшими інтернет-магазинами, які візуально не підсилили свої платіжні поля. Але при проектуванні своєї платіжної сторінки ви повинні враховувати, що більшість клієнтів зовсім не розбираються в принципах роботи веб-форм, перевірці на вразливість або SSL. Замість цього покупець покладається на свою інтуїцію і робить висновок: можна довіряти вашому сайту чи ні.
 
 
 
Можна додати, що для загального підвищення довіри до сайту, добре б розмістити на видному місці фізичну адресу вашої компанії і телефон. Ще, мені особисто, завжди не хочеться вводити дані своєї банківської картки на сайтах, які зберігають ці дані, я вважаю правильним підходом для невеликих сервісів відправляти номер кредитки та іншу інформацію, необхідну для обробки платежу, безпосередньо агрегатору платежів без збереження у своїй базі даних. І якщо у вас влаштованої саме так, про це теж слід сказати клієнту.
 
У разі, коли поля форми не мають пояснень, користувачі не завжди розуміють, яку інформацію від них хочуть отримати. Саме тому слід додавати до полів невеликі описи та приклади. Користувачі будуть особливо раді підказкам-ілюстраціям (наприклад, наочному зображенню місця, де на кредитній карті знаходиться дата закінчення її терміну дії). Для цього може стане в нагоді чудовий скрипт від Jesse Pollak, от як він працює:
 
 image
 
 Демо , исходники на Github . З особливостей можна виділити те, що все написано на чистому html, css і js без використання картинок, скрипт повністю безкоштовний і документований.
 
На завершення, хотілося б сказати, що це наш перший пост в рамках корпоративного блогу, який ми отримали минулого тижня за програмою «Стартап», за що велике спасибі адміністрації Хабра. Підписуйтесь на нас на Хабре , а також на нашому сайті Web-payment.ru , попереду багато цікавих постів про платіжні системи, кріптовалюти, розробку та інше.
 
 
    
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.