Дизайн сторінки ціноутворення з психологією розуму

Наукові методи підвищення юзабіліті та конверсії. Написано виключно для блогу STUDIO. Ось японська версія.

Настільки багато прекрасних концепцій ціноутворення на Dribbble і Behance, але в реальному житті їх часто відкидають. Що не так з усіма цими яскравими картами та милими паперовими площинами та ілюстраціями космічного човника? Зазвичай причиною є низька конверсія. Бізнес може вибачити вам об'ємний інтерфейс користувача та непослідовні кольори, але якщо сторінка не продається, це проблема. У цій статті ми дізнаємось, як зробити цінові сторінки, продаючи і водночас дотримуючись принципів дизайну.

Ілюстрація для привернення уваги (дивіться її на Dribbble)

Психологія вибору

Економічні теорії передбачають, що люди діють логічно і шукають найбільш вигідний варіант. Але ми не обираємо весь час логічно. Ми можемо залишитися із задовільним варіантом, не обов'язково ідеальним. Багато варіантів є автоматичними і засновані на шаблонах мислення - евристиці. Їх виявив у 50-х роках Герберт Саймон, американський економіст, когнітивний психолог та лауреат Нобелівської премії. У 1970-х роках ізраїльсько-американські психологи Амос Тверський та Даніель Канеман досліджували когнітивні упередження та ефекти, які вводять нас в оману при прийнятті рішень. Отже, давайте проаналізуємо основні звички людини робити вибір.

Доступність евристична

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

Питання дизайнеру для роздумів:

  • Що знаходиться вгорі головної сторінки? Іншими словами, що побачать люди, перш ніж натиснути на меню посилання "Ціни"?
  • Що розповідає веб-аналітика про сторінки, які відвідують люди перед "Ціноутворенням"?
  • Що зазвичай роблять люди, перш ніж відвідувати ваш сайт? Це розслаблення в п’ятницю ввечері чи сортування тонни електронних листів у понеділок вранці?

Впливають на евристику

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

Питання дизайнеру для роздумів:

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

Репрезентативність евристична

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

Питання дизайнеру для роздумів:

  • Яку «категорію» аудиторія зазвичай присвоює вашому продукту? Вони вважають, що це розкішно, безпечно, практично?
  • Які характеристики повинні мати продукт, щоб люди пов'язували його з потрібною категорією?

Принцип золотистості

Як правило, клієнти вибирають серединний варіант, особливо за ціною. Люди вважають, що вони розумні покупці і не переплачують. У той же час вони відчувають можливість дозволити собі кращу послугу, ніж безкоштовний або найдешевший план. Середній варіант також пов'язаний з евристичністю репрезентативності; іншими словами, здається, типовим. До речі, ефект Золотоверху названий на честь казки «Три ведмеді», в якій маленька дівчинка Голлодокс смакує три різні миски з кашею і виявляє, що вона віддає перевагу каші, яка ні занадто гаряча, ні занадто холодна - має просто потрібну температуру .

Питання дизайнеру для роздумів:

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

Ефект мазі

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

У 2018 році дослідники з Колорадоського університету та Китайської академії наук вивчали поведінку працівників харчових заводів. Протягом перших 20 днів працівники отримували дезінфікуючі засоби для чищення рук щогодини. Тоді дослідники запропонували їм вибір звичайного спрею або менш зручних варіантів - пляшку з віджимом або умивальник. Робітники збільшили використання оригінального спрею з 60% до понад 90%.

Питання дизайнеру для роздумів:

  • Який пакет найбільше хоче продати компанія? Чи сприймають це люди як найвигіднішу?
  • Який варіант є найпопулярнішим? Чому люди обирають це так часто?
  • Що може зробити дорогі пакунки вигіднішими?

Анкерний ефект

Прив’язка - це тенденція занадто сильно покладатися на одну інформацію (як правило, першу) під час вибору. Коли встановлюється якір, на нього впливатимуть усі подальші судження та оцінки. Наприклад, перша ціна, яку ви побачите, стане якорем, і ви підсвідомо порівняєте всі інші ціни з нею. Був експеримент, коли люди повинні були помножувати числа від 1 до 8. Час навмисно був обмежений, і їм довелося оцінювати замість точного обчислення. Ті, хто помножив у порядку «1 × 2 × 3 × 4 × 5 × 6 × 7 × 8», відгадали суму в чотири рази менше, ніж ті, хто помножив «8 × 7 × 6 × 5 × 4 × 3 × 2 × 1. Перший розрахований продукт став якорем і визначив подальший процес мислення.

Питання дизайнеру для роздумів:

  • З якими якорями можуть завітати клієнти на ваш веб-сайт?
  • Що спочатку повинні бачити клієнти, щоб бути готовими до вибору та придбання товару чи послуги?

Соціальний доказ

Цей термін був винайдений Робертом Сіалдіні в 1984 році і означав вплив інших людей на наші рішення. Якщо люди не можуть вирішити чи вибрати оптимальну поведінку, вони схильні копіювати дії інших. Ефект соціального доказування - результат нашої пізнавальної ліні - бажання зменшити зусилля для мислення - та віри в те, що інші люди мають більше знань про поточну ситуацію. В електронній комерції соціальне підтвердження застосовується за допомогою відгуків, розділу "Наші клієнти" та рейтингів товарів.

Питання дизайнеру для роздумів:

  • Хто є лідером думок для вашої аудиторії? Як ви можете підтримати пропозицію товару з їх допомогою?
  • Хто з ваших нинішніх клієнтів може мати достатню репутацію та може слугувати моделлю для інших?

Відраза до втрат

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

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

Питання дизайнеру для роздумів:

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

Реакція

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

Питання дизайнеру для роздумів:

  • Як люди сприймають повідомлення на вашому веб-сайті? Хіба вони не надто сильно натискають? Вони досить переконливі?
  • Що може мотивувати клієнтів купувати, але дотримуватися їх особистих лімітів?

Фон-ефект відновлення

Цей ефект спостерігав Хедвіг фон Ресторф у дослідженні 1933 року. Люди, як правило, краще запам'ятовують предмет, який виділяється або виділяється. Деякі вчені вважають, що люди репетирують окремі предмети в робочу пам’ять довший час. Інша теорія стверджує, що запам'ятовування ізольованих предметів запускає окреме завдання в мозок; тоді як подібні предмети запам'ятовуються разом як категорія і потребують більше зусиль. Наприклад, якщо товар у списку покупок виділений жовтим кольором, люди, швидше за все, запам'ятають його, ніж решта товарів. Те саме працює зі значенням слова: У списку - професійний, безпечний, надійний, довговічний, якісний, магічний, відповідальний - «магічний» виділяється та запам'ятається найбільше.

Питання дизайнеру для роздумів:

  • На що бізнес хоче звернути увагу клієнтів? Як витончено виділити цей варіант?
  • Що зараз виділено на ціновій сторінці? Це правильно зберігати у свідомості клієнтів? Чи має він зв’язок із конверсією?

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

Анатомія інтерфейсів ціноутворення

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

Картки

Картки є компактними та представляють 2–3 способи самостійної роз'яснення оплати. Вони найкраще працюють, коли різниця між пакетами помітна. Якщо картки стають занадто довгими і не можуть поміститися на екрані, краще або вирізати вміст, або вибрати формат таблиці. Картки часто з’являються у простих та простих продуктах для неспеціалістів.

Типові компоненти.

  • Назви плану (найчастіше з піктограмою чи ілюстрацією).
  • Короткі описи (або список із 2–5 функцій).
  • Ціни та графік платежів (щодня, щотижня, щорічно тощо).
  • "Рекомендовано", "Популярно" або інші ярлики.
  • Бонуси (за дорогий план, оплата заздалегідь тощо).
  • Кнопки із закликом до дії.

Столи

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

Типові компоненти.

  • Назви плану (іноді з коротким описом або метою).
  • Список функцій (згрупований, якщо він дуже довгий, та з поясненнями, якщо він містить нішеві терміни).
  • Ціни та графік платежів.
  • "Рекомендовано", "Популярно" або інші ярлики.
  • Бонуси (за дорогий план, оплата заздалегідь тощо).
  • Кнопки із закликом до дії.

Повзунки

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

Типові компоненти.

  • Слайдер або набір повзунків для різних параметрів.
  • Функції та послуги, включені незалежно від положення повзунка.
  • Ціна (як правило, оновлення на льоту).
  • Бонуси (за дорогий план, оплата заздалегідь тощо).
  • Кнопки із закликом до дії.

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

Кращі практики

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

Складіть набір пакетів збалансовано

Скільки варіантів подарувати і що запакувати всередину? Ось що слід уважно розглянути власник бізнесу та дизайнер. Якщо варіантів занадто багато, люди губляться і прагнуть взагалі не вибирати, особливо якщо раніше не купували цей товар. Наприклад, ви не гуру канцелярських товарів і бачите 130 чорних ручок з чорнилом. Кого обрати? Як довго ви будете обирати? У цифровому світі це ще важче, оскільки ви не можете “торкнутися” параметрів і вибрати за фактурою, вагою, запахом тощо. Отже, чим менше варіантів, тим менше плутанини - оптимально, два-чотири пакети - або взагалі один варіант. .

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

Вітальне цільове найменування опцій

Такі назви, як "Економ / Стандарт / Преміум", не розкривають функції пропозиції і можуть здаватися дискримінаційними. Такі імена змушують людей занурюватися в описи, щоб дізнатися, що відповідає їх потребам. Кращим підходом є називання через ситуацію використання, наприклад, "Індивід / Команда / Корпорація" або "Особистий / Бізнес". Це дає додаткові підказки щодо того, що вибрати. Таке іменування як "Основне / Плюс / Максимальне" також працює. Це показує, що різниця полягає у потужності чи обсязі обслуговування.

Зберігайте критичну інформацію завжди видимою

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

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

Зробіть порівняння завжди зручним

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

Попередьте про чутливі дії

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

Розум повторної інформації

Якщо наступний пакет дорівнює попередньому плюс додаткові функції, дизайнери пишуть щось на кшталт "Те саме, що" Основні ", але з покращеною перевіркою безпеки та особистим консультантом." Це робить інтерфейс трохи чистішим; однак людині потрібно прочитати попередній варіант, пам’ятати про це та додавати додаткові функції. Це стає дратівливим, коли формула «така ж, як A плюс Z» повторюється двічі або більше. Тоді ви не можете зрозуміти наступний варіант, не прочитавши всі попередні.

Заклик до дії чесно

Кнопки є важливими для будь-якого інтерфейсу, але на сторінці "Ціноутворення" вони безпосередньо впливають на конверсію. Якщо кнопка називається "Спробуйте безкоштовно" або "Почніть свою безкоштовну пробну версію", а після натискання кнопки ви побачите форму "Зв'яжіться з нами", вона розчарує і призведе до втрати клієнтів. Ще один розчаровуючий приклад - “Більше інформації”, а не можливість купити товар відразу. Якщо кнопкою логічно написано "Купити" або "купити зараз", воно повинно керуватися формою платежу. Якщо він називається "Спробуйте" або "Почніть випробування", наступним кроком має стати створення профілю або ще простіше - перехід до порожнього або демонстраційного проекту.

Відображати ціни однозначно

Відповідно до звіту про гостинність Cornell Unversity 2009, видалення символу валюти ($) або імені (доларів) у меню ресторанів збільшило середні витрати на 12%. Валюта - це додаткове нагадування про витрачання грошей, що пов'язане з відразою від збитків. Люди чутливіші до того, що втрачають, а не до того, що отримують. На жаль, дизайнери та маркетологи неправильно трактують це дослідження і або приховують ціну, або починають грати з розміром шрифту. Дизайнери повинні балансувати між не зосередженням уваги на грошах та чесністю до користувачів.

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

Керівництво, але не обманюйте

"Рекомендовано", "Популярний вибір", "Наші клієнти вибирають", а великі яскраві кнопки "Купуйте зараз" можуть підвищити конверсію, а також різко зменшити її. Через ефект реакції в якийсь момент люди починають відчувати маніпуляції і відмовляються дотримуватися візуальної ієрархії в інтерфейсі. Коли платні варіанти настільки помітні, що "кричать вголос" на вас, а безкоштовний варіант є сірим і крихітним, люди можуть перестати вам довіряти.

Відповідайте на часто задані питання

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

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

Подальше читання

  • "Я проаналізував 250 цінових сторінок SaaS. Ось, що я знайшов", стаття Бенджаміна Брендалла для наступної мережі.
  • "Психологія ціни в UX", стаття Андерса Токсбоя в блозі веб-дизайну Depot.
  • «Показати ціни на загальні сценарії», статтю Якоба Нільсена для блогу Nielsen Norman Group.
  • "Перевантаження вибору шкодить вашим користувачам", відео Аліти Джойс для блогу Nielsen Norman Group.
  • «Список когнітивних упереджень», стаття з Вікіпедії.
  • "Як створити сторінку ціноутворення, яка конвертує", стаття Валя Гейслера для блогу додатків Invision.
  • "11 прикладів сторінок з цінами, щоб надихнути власний дизайн", статтю Ліндсі Коловіч для блогу Hubspot.

Не соромтеся зв’язатися в інших місцях: Dribbble, Behance, Instagram, Twitter.