Сучасний UX/UI для сайтів банків: найкращі рішення на українському ринку, щоб покращити клієнтський досвід

• CRO/UX

• 
  Редакторка блогу Webpromo
  Анастасія Чернушенко

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

Але який він — якісний та зручний UX/UI дизайн для сайту банківських послуг? Як подати складну інформацію просто, зрозуміло та невимушено? У цій статті ми розглянемо цікаві фішки на прикладі провідних вебсайтів банків України та зробимо корисні висновки.

Чому якісний вебдизайн важливий для сайту банківських послуг?

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

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

Фішки UX/UI дизайну веб-сайтів українських банків у 2024 році

Дизайн вебсайту

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

Один із яскравих прикладів — Sense Bank. Головна сторінка розділена на блоки з основною інформацією, а також містить інтерактивний банер. Ненав’язливий шрифт без засічок дозволяє зберегти простір на сторінці.

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

Натомість мінімалізм може проявлятись по-різному: наприклад, деякі бренди тяжіють до автентичних ілюстрацій, піктограм та 3D зображень. Яскравий приклад Приватбанк, який використовує 3D зображення для пояснення специфіки продуктів та послуг (особливості картки чи мобільного застосунку, умови надання кредиту чи депозиту):

Ще один підхід — мікс піктограм для опису послуг та реалістичних зображень для конкретних продуктів. Наприклад, на сайті Піреус Банку гармонійно поєднані 3D ілюстрації для розділів із послугами, однак зображення мобільного застосунку та карток ілюструють реальний продукт:

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

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

Навігація

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

Наприклад: 

• Шапка вебсайту, що містить перелік основних послуг. Більшість брендів віддають перевагу прихованому меню, що економить місце на головній сторінці, але водночас містить і ключові пропозиції банку:

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

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

• Наявність блоків Q&A, що містять стислі відповіді на найпоширеніші запитання з окремих тем. Найчастіше блоки «питання-відповідь» розташовані у тематичних розділах. Так, на сайті Пумб є стислий перелік найпоширеніших запитань. За потреби користувач може ознайомитись із більшою кількістю відповідей за допомогою кнопки «Показати більше»:

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

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

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

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

Окремо варто зазначити про перемикач мовних версій. Із початком повномасштабного вторгнення все більше українських сайтів відмовляються від російської версії. Так, А-Банк розмістив перемикач мовної версії у футері вебсайту. При виборі російської мови користувач потрапляє на окрему сторінку із Qr-кодом для завантаження мобільного застосунку, через який можна задонатити на ЗСУ:

Інклюзивність

Аналіз 1 млн головних сторінок найпопулярніших вебсайтів світу за 2023 рік показав, що 96,3% вебсторінок не відповідають критеріям доступності вебконтенту. Згідно із Національною стратегією зі створення безбар’єрного простору, доступність вебсайтів є однією із стратегічних цілей державної політики в Україні.

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

Підпишись на гарячі

Маркетинг-новини

МАРКЕТОЛОГ 2.0 >

Підпишись на щомісячний

Дайджест новин

Серед опцій — налаштування розміру шрифту та зміна режиму відображення сторінки:

Ще один прояв  інклюзивного вебдизайну — можливість пересуватись сайтом за допомогою клавіатури. Така функція реалізована у переважної більшості банківських ресурсів, зокрема Приватбанк, Пумб, Sense Bank, Піреус Банк тощо.

Інтерактивність

Інтерактивний контент збільшує кількість сторінок, переглянутих за один сеанс, у 4-5 разів. Серед основних проявів інтерактивності банківських сайтів:

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

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

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

Ощадбанк обрав дещо інший підхід, і при завантаженні головної сторінки ми спостерігаємо анімований слоган бренду:

Віджети

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

Серед головних фішок для сайту банківських послуг:

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

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

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

Адаптивність та швидкість завантаження

Швидкість завантаження вебсайту є одним із факторів ранжування у Google. 

Усім вебсайтам, незалежно від ніші, важливо дбати про цей критерії, адже він безпосередньо впливає на користувацький досвід. Так, сторінки, які завантажуються лише 1-2 секунди, мають середній показник відмов 9%. Водночас сторінки, які завантажуються п’ять секунд і більше, мають середній показник відмов 38%.

Ми провели невеликий «краш-тест» на відповідність сайтів українських банків вимогам швидкості завантаження (рекомендовано — до 2 секунд) та порівняли результати із показниками світових банків.

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

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

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

Висновки

У цій статті ми проаналізували вебсайти найпопулярніших українських банків. Виходячи із вище наведених тез, можемо зробити такі висновки щодо трендів UX/UI дизайну банківської ніші у 2024 році:

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

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