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

Слава Шестопалов, Lead Designer в ELEKS, з’ясовує, як оформлювати блоки з цінами так, щоб вони були водночас гарними і дієвими.

Стаття англійською.

Читайте також: Чому UX, UI, CX, IA, IxD та інші види дизайну – це дурниця?

Зображення: dribbble.com

Економічна теорія припускає, що люди діють логічно і шукають найвигідніший варіант. Однак ми не завжди керуємося логікою під час вибору. Інколи нас задовольняє цілком хороший варіант, а не ідеальний. Багато наших дій автоматичні й засновані на шаблонах мислення, або евристиках. Ці шаблони виявив у 1950-х роках Герберт Саймон, американський економіст, когнітивний психолог і лауреат Нобелівської премії. У 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 році, означає вплив суспільства на наші персональні рішення. Якщо люди не можуть вирішити самі, вони схильні копіювати дії інших. Це вплив наших когнітивних лінощів — бажання думати менше — та віри в те, що інші люди більше ознайомлені з темою. В електронній комерції соціальний доказ діє через розділ «Наші клієнти», а також коментарі інших покупців і рейтинг товарів.

Запитання для дизайнера

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

Неприйняття втрат

Зазвичай люди більше хочуть уникати втрат, аніж отримувати переваг. Наприклад, не загубити 100 гривень краще, ніж знайти 100 гривень. Деякі дослідники навіть кажуть, що ми переживаємо через втрати у чотири рази сильніше, ніж радіємо прибуткам. Тому інколи варто показати уникнення втрат як перевагу. Однак перебільшувати не варто, можна налякати людей та викликати протилежний ефект — реактивний опір.

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

Запитання для дизайнера:

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

Реактивний опір

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

Запитання для дизайнера

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

Ефект фон Ресторф

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

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

Запитання для дизайнера

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

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

Анатомія сторінок із цінами

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

Картки

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

Типові складники:

• назви пропозицій (часто з іконкою або ілюстрацією);
• короткі описи (або перелік 2–5 особливостей);
• ціни і термін дії (місячний, тижневий, річний план тощо);
• позначки на зразок «Популярний план», «Рекомендуємо»;
• бонуси (за купівлю великого набору послуг, передоплату тощо);
• кнопки із закликом до дії.

Таблиці

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

Типові складники:

• назви планів (інколи з коротким описом);
• перелік функцій (згрупований, якщо довгий; з поясненнями, якщо складний);
• ціни і терміни дії;
• позначки на зразок «Популярний план», «Рекомендуємо»;
• бонуси (за купівлю великого набору послуг, передоплату тощо);
• кнопки із закликом до дії.

Слайдери (повзунки)

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

Типові складники:

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

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

Найкращі практики

Шукати натхнення в роботах інших дизайнерів малокорисне, якщо не знати, на що звертати увагу. Я зібрав низку варіантів дизайну цін і ситуацій, де вони корисні, а де шкідливі.

Робіть пропозиції збалансованими

Скільки пропозицій показати і що в них має бути? Це треба ретельно продумати власнику компанії та дизайнеру. Якщо опцій забагато, люди губляться і взагалі нічого не купують, особливо якщо вони не мали справу з цим типом товарів раніше. Уявіть, що перед вами 130 кулькових ручок чорного кольору, а ви — не гуру канцелярії. Яку ручку виберете? І як довго будете думати? У цифровому світі це ще тяжче, адже ви не можете відчути об’єкта купівлі на дотик, обрати за текстурою, запахом, вагою. Тому що менше варіантів, то менше проблем, найкраще показати 2–4 пакети або й узагалі один.

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

Product Interface Design Professium

Називайте опції згідно з їхнім призначенням

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

Виділяйте важливу інформацію

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

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

Піклуйтеся про зручність порівняння

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

Підготуйте користувача до незручностей

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

Стежте за інформацією, що повторюється

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

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

Кнопки потрібні у будь-якому інтерфейсі, але на сторінці з цінами вони безпосередньо впливають на конверсію. Якщо на кнопці написано «Спробувати безплатно» або «Завантажити безкоштовну пробну версію», а потім з’являється форма «Зв’яжіться з нами», це розчаровує клієнтів і вони йдуть. Ще один приклад: кнопка «Більше інформації» замість безпосередньої можливості купити продукт. Якщо кнопка своїм розташуванням говорить «Придбати» або «Купити зараз», вона повинна вести до форми оплати. Якщо «Спробувати» або «Завантажити пробну версію», то наступним кроком має бути або реєстрація, або навіть простіше — перший демо-проект.

Однозначно показуйте ціни

Згідно з дослідженням «Cornell University Hospitality Report 2009», вилучення символу валюти ($) або її назви (долари) з ресторанного меню збільшило середній чек на 12%. Валюта нагадує про витрату грошей, а люди, як ми пам’ятаємо, вкрай не люблять що-небудь втрачати. Ми переживаємо втрати більше, ніж радіємо знахідкам. На жаль, дизайнери і маркетологи неправильно тлумачать це дослідження і або приховують ціну, або починають гратися зі шрифтами. Потрібно знайти баланс: не концентруватися на грошах і бути чесним із людьми.

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

Скеровуйте, але не дуріть

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

Відповідайте на поширені запитання

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

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

Раніше Telegraf.Design писав про інтерфейси як мистецтво.