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

UI дизайнер Іван Тараненко розповідає, як разом зі студією Vintage Web Production вони розробили новий дизайн Альфа банку та якими принципами керувалися, працюючи над wow-елементами у банківській сфері.

Дизайн банків: сучасні тренди

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

Читайте також: Всередині Дії: як працює дизайн-команда Мінцифри

У дизайні сайтів та додатків для банківської сфери теж можна виділити декілька тенденцій. Банки працюють з величезною та різноманітною авдиторією, тому їхні сайти мають добре показуватися на будь-яких пристроях — старих, нових, великих та маленьких. Наразі 70% трафіку йде з мобільних телефонів, а отже банківські сайти мають бути зручними, адаптивними та швидко завантажуватися. Через це деякі команди дизайнерів віддають перевагу так званій mobile first розробці. Тобто, спершу створюють дизайн мобільної версії сайту. Ми в Vintage Web Production дотримуємося класичного підходу — спочатку робимо десктопну версію, а потім мобільну. Адже мобільна версія — це урізана по функціоналу та зовнішньому вигляду елементів копія десктопу. І ми вважаємо, що легше спростити складне, ніж ускладнити просте.

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

Особливості дизайну в банківській сфері

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

• Складність прийняття рішень. Структура банку складається з великої кількості продуктів та послуг. І кожен із цих продуктів має свого менеджера, який прагне внести свою лепту в дизайн. Скажімо, ви розробили дизайн-стиль для приватних користувачів, аж тут до вас приходять менеджери бізнес відділу банку зі своїм баченням. Вони — серйозні дядьки, які не п’ють смузі, а натомість мають купу складної документації та таблиць, і ви якось маєте підверстати це під загальний стиль. Об’єднання різних гілок діяльності банку на одному сайті потребує значних зусиль.
• Широка цільова авдиторія. На наше питання «хто ваші клієнти?» банки зазвичай відповідають: «все населення». Звісно, банки мають певне позиціювання й особливості таргетування. Скажімо, якісь банки більше орієнтуються на бізнес, тоді як інші — на приватних осіб. Але, в цілому, банки взаємодіють з усіма людьми, що мають гроші та рахунок. А це дуже багато людей. Тому потрібно брати до уваги, що вашим сайтом можуть користуватися юзери з невисокою комп’ютерною грамотністю.
• Масштаб. Банк — це величезна корпорація. Розробляючи дизайн, потрібно відразу планувати дизайн-систему, розуміти логіку складної роботи сайту та взаємодій з користувачами. З перших днів продумувати, як можна перевикористати блоки на інших сторінках або в інших станах. Намагатися застосовувати компонентний підхід та використовувати одні й ті самі елементи по декілька разів. Це суттєво полегшить життя, по-перше, користувачам, а по-друге, розробникам.

У Vintage Web Production ми встигли попрацювати над дизайном сайтів для Альфа банку, Ощадбанку, ПУМБу та Південного. У дизайні ми намагаємося відходити від консервативного стилю та додавати wow-елементи. На прикладі кооперації з Альфа банком продемонструю, як ми це робимо.

Кейс Альфа банку: як все починалось

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

Ідея та концепції

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

Від початку ми показували Альфі саме такі консервативні та стримані варіанти. Нашою метою було «промацати» клієнта. Зрозуміти, на що вони здатні піти. Але вони звісно бачили наше портфоліо, знали, які сайти ми можемо створювати, тому сказали «ви ж раніше робили круто, чому ви нам стандартні картки пропонуєте?». І для нас це як червона ганчірка для бика. Ми почали робити як вміємо.

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

Є такий метод тренування креативності: ви маєте за певний час накидати 20 різних варіантів. Перші 5 йтимуть легко, бо вони знаходяться у першому ряді асоціацій. Далі вигадувати стає складніше. Якщо зупинитися на цьому стиці, то вийде стандартний варіант, якщо піти далі — можна вигадати складніші речі. Концепція головної сторінки Альфи народилася далеко не у першій п’ятірці ідей, а тоді, коли нам вже було максимально важко креативити.

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

Wow-ефект у дизайні банків

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

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

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

Ми робимо тільки те, що подобається нам самим. На етапі генерації ідей ми накидуємо різні концепції. Дивимося на комунікацію банку, їхні рекламу та tone of voice і просто щось вигадуємо. Але ми ніколи не показуємо клієнтам ті варіанти, які не подобаються нам самим. Адже потім нам може довестися працювати над концептом, що нам не до вподоби.

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

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

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

Труднощі при створенні wow-ефектів

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

В цілому, ми не намагаємося протиснути креативні ідеї, коли зустрічаємо спротив банку. Ми знаємо, що іноді ці ідеї дійсно класні. Але ми також розуміємо, що наша задача — не реалізовувати власні дизайнерські амбіції, а розв’язувати задачу клієнта. Якщо клієнт каже «зробіть мені стандартні картки», то ми зазвичай робимо в одному варіанті стандартні картки, а в іншому — щось від себе. Іноді клієнт обирає наш варіант, а іноді так і лишається при своїй думці.

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

Telegraf.Design живе за підтримки спільноти. Підтримуйте Telegraf.Design на Patreon.