Современный UX/UI для сайтов банков: лучшие решения на украинском рынке, чтобы улучшить клиентский опыт
Убедить людей воспользоваться продуктом или услугой всегда трудно. Но одно дело, когда речь идет о летней одежде, а другое — когда вы убеждаете клиентов положить сбережения на депозит или взять кредит на длительный срок. Люди доверяют свои средства только надежным банковским учреждениям, а дизайн сайта является одним из критериев доверия. Так, 94% первых впечатлений создается именно благодаря веб-дизайну.
Но какой он — качественный и удобный UX/UI дизайн для сайта банковских услуг? Как подать сложную информацию просто, понятно и непринужденно? В этой статье мы рассмотрим интересные фишки на примере ведущих веб-сайтов банков Украины и сделаем полезные выводы.
Почему качественный веб-дизайн важен для сайта банковских услуг?
Веб-сайт — это цифровое лицо бренда. Его внешний вид, простота и одновременно функциональность оказывает непосредственное влияние на пользовательский опыт. Однако банковская ниша довольно специфична, ведь клиентам нужно объяснить сложные вещи простыми словами, а также укрепить их лояльность к самому бренду. Зачем банкам нужно заботиться о качественном веб-дизайне:
- Хороший дизайн веб-сайта делает банковские услуги более доступными и легкими в управлении. Клиенты могут в любое время войти в личный кабинет, чтобы проверить состояние банковского счета, перевести средства или оформить кредит.
- Качественный сайт помогает банкам удерживать клиентов и повышать лояльность среди существующих. Интуитивно понятный пользовательский интерфейс поощряет клиентов оставаться с брендом на протяжении многих лет.
- Хороший дизайн сайта укрепляет доверие, ведь помогает защитить клиентов от потенциальных киберугроз с помощью безопасных банковских услуг и усовершенствованных методов шифрования. Это особенно важно, поскольку все больше людей совершают банковские операции онлайн и используют цифровые платежные системы для транзакций.
Фишки UX/UI дизайна веб-сайтов украинских банков в 2024 году
Дизайн веб-сайта
Современные веб-сайты все больше тяготеют к минимализму. Сдержанный и лаконичный дизайн помогает избежать визуального шума, рекламной нагрузки и разработать эстетический подход к позиционированию бренда.
Один из ярких примеров — Sense Bank. Главная страница разделена на блоки с основной информацией, а также содержит интерактивный баннер. Ненавязчивый шрифт без засечек позволяет сохранить пространство на странице.
Удачным является расположение элементов и их общее соотношение. Четко прослеживаем иерархию страницы: самая важная информация представлена большим шрифтом и вынесена в отдельные блоки. Отдельно выделены важные кнопки — помощь, вход в личный кабинет, переключатель языковых версий.
Вместе с тем минимализм может проявляться по-разному: например, некоторые бренды тяготеют к аутентичным иллюстрациям, пиктограммам и 3D изображениям. Яркий пример Приватбанк, который использует 3D изображения для объяснения специфики продуктов и услуг (особенности карты или мобильного приложения, условия предоставления кредита или депозита):
Еще один подход — микс иконок для описания услуг и реалистичных изображений для конкретных продуктов. Например, на сайте Пиреус Банка гармонично сочетаются 3D иллюстрации для разделов с услугами, однако изображения мобильного приложения и карт иллюстрируют реальный продукт:
Еще одна тенденция, которую мы можем наблюдать в банковской нише, это приближение компаний к клиентам. Так, подход к коммуникациям становится все более упрощенным, а дизайн-система лишь усиливает этот тренд.
Например: все элементы, использованные на сайте Sense Bank, внедрены и в других точках соприкосновения с брендом (в дизайне продукта, оформлении оффлайн отделений, в коммуникациях в социальных сетях и т.п.). Так, комплексная и согласованная дизайн-система унифицирует контакт бренда с клиентом, что повышает узнаваемость компании и помогает ей выделиться среди конкурентов.
Навигация
Задача навигации вебсайта — сделать путь пользователя максимально простым и понятным. Поскольку банки имеют множество предложений для своих клиентов, важно внедрить базовый функционал, который поможет посетителям быстро находить необходимую информацию.
Например:
- Шапка веб-сайта, что содержит список основных услуг. Большинство брендов используют скрытое меню, что экономит место на главной странице, но в то же время содержит и ключевые предложения банка:
Антипримером в этом случае является веб-сайт OTP банка. Панель с основными услугами скрыта справа, а виджеты кажутся непонятными с первого взгляда:
- Функция поиска, которая позволяет найти нужную информацию по ключевым словам. Поисковое поле должно быть размещено на видном месте, а также понятно выглядеть. Самое распространенное решение — поисковая лупа в шапке сайта. Так, на сайте ПриватБанка при наведении курсора на лупу веб-страница темнеет, тем самым акцентируя внимание пользователя на осуществлении поискового запроса:
- Наличие блоков Q&A, что содержат краткие ответы на самые распространенные вопросы по отдельным темам. Чаще всего блоки «вопрос-ответ» расположены в тематических разделах. Так, на сайте Пумб есть краткий перечень самых распространенных вопросов. При необходимости пользователь может ознакомиться с большим количеством ответов с помощью кнопки «Показать больше»:
- Кликабельный логотип, позволяющий вернуться на главную страницу с любой точки взаимодействия. Такая функция является базовой, а значит, реализована на большинстве банковских ресурсов.
- Закрепленное меню на главной странице. Это может быть набор из баннеров с перечнем самых популярных услуг, благодаря чему посетителям не нужно тратить время на поиск нужной информации. Например, Sense Bank имеет 20 баннеров, однако удобный переключатель позволяет легко ими передвигаться:
- Хлебные крошки, что информируют пользователя о его текущем местоположении. Благодаря им можно вернуться к предыдущему шагу только за один клик. Интересным является интерактивное решение Банка Південного: при наведении курсора исчезает нижнее подчеркивание, а текст меняет цвет.
- Футер веб-сайта содержит дополнительную информацию: ссылки на социальные сети и мобильные приложения, контактную информацию, лицензии и разрешения на работу банка. Прекрасный пример — Пумб. При наведении курсора на раздел текст имеет нижнее подчеркивание. К тому же расставлены акценты на кнопки для загрузки мобильного приложения, социальных сетей и связи с оператором:
- Важные для взаимодействия кнопки имеют понятный внешний вид. К примеру, на вебсайте Райффайзен Банка иконки дополнительно подписаны текстом.
Отдельно стоит отметить переключатель языковых версий. С началом полномасштабного вторжения все большее количество украинских сайтов отказываются от российской версии. Так, А-Банк разместил переключатель языковой версии в футере сайта. При выборе русского языка пользователь попадает на отдельную страницу с Qr-кодом для загрузки мобильного приложения, через которое можно задонатить на ВСУ:
Инклюзивность
Анализ 1 млн главных страниц самых популярных веб-сайтов в мире за 2023 год показал, что 96,3% веб-страниц не соответствуют критериям доступности веб-контента. Согласно Национальной стратегии создания безбарьерного пространства, доступность веб-сайтов является одной из стратегических целей государственной политики в Украине.
Ощадбанк можно считать образцом в сфере инклюзивного веб-дизайна, ведь ресурс адаптирован для людей с нарушениями зрения и слуха. Специальная иконка в виде глаза закреплена на верхней панели, благодаря чему пользователи могут адаптировать любую страницу в соответствии со своими потребностями.
Среди опций — настройка размера шрифта и изменение режима отображения страницы:
Еще одно проявление инклюзивного веб-дизайна – возможность передвигаться по сайту с помощью клавиатуры. Такая функция реализована у большинства банковских ресурсов, в частности: Приватбанк, Пумб, Sense Bank, Пиреус Банк и т.д.
Интерактивность
Интерактивный контент увеличивает количество страниц, просмотренных за один сеанс, в 4-5 раз. Среди основных проявлений интерактивности банковских сайтов:
- масштабирование элементов при наведении курсора;
- отдельные элементы меняют цвет при наведении курсора;
- при скроллинге страницы блоки с информацией появляются плавно и постепенно.
Еще одно интересное решение — интерактивные гайды и инструкции. Так, на сайте ПриватБанка пользователи могут ознакомиться с исчерпывающими гайдлайнами без лишних кликов. Следующие разделы автоматически отображаются при наведении курсора на соответствующий пункт:
Разнообразить пользовательский опыт позволяет анимация логотипа при загрузке страницы. Например, Пумб зашел еще дальше и сделал свой логотип интерактивным на постоянной основе. Так, желто-голубой флаг развевается и привлекает внимание пользователя с любой страницы веб-сайта:
Ощадбанк выбрал несколько иной подход, и при загрузке главной страницы мы наблюдаем анимированный слоган бренда:
Виджеты
Виджеты можно считать дополнительным элементом интерактивности и своеобразным выходом из ситуации, когда нужно объяснить что-то сложное простыми словами.
Среди главных фишек для сайта банковских услуг:
- Интерактивная карта поиска физического отделения. При наведении курсора пользователь видит адреса физических отделений Ощадбанка, что позволяет быстрее найти контактную информацию или записаться на прием.
- Онлайн-калькуляторы — например, депозитов и кредитов. Пользователь может ввести входящие данные, соответствующие его запросам, и ознакомиться с условиями предоставления услуги. К примеру, на сайте Пумб можно выставить параметры с помощью ползунка. Все изменения автоматически отображаются на панели справа:
- Чат-боты и служба поддержки. Иконка закреплена в видимом месте, при взаимодействии меняет цвет или масштабируется. При этом следует обеспечить омниканальный подход, чтобы пользователь мог выбрать наиболее удобную платформу для коммуникации. Например, кнопка «Помощь» на сайте Sense bank закреплена на нижней панели и доступна с любой страницы. К тому же, на выбор есть шесть способов связаться со службой поддержки:
Адаптивность и скорость загрузки
Скорость загрузки сайта является одним из факторов ранжирования в Google.
Всем веб-сайтам, независимо от ниши, важно заботиться об этом критерии, ведь он оказывает непосредственное влияние на пользовательский опыт. Так, страницы, что загружаются за 1-2 секунды, имеют средний показатель отказов 9%. В то же время страницы, что загружаются пять секунд и более, имеют средний показатель отказов 38%.
Мы провели небольшой «краш-тест» на соответствие сайтов украинских банков требованиям скорости загрузки (рекомендовано — до 2 секунд) и сравнили результаты с показателями мировых банков.
| Название банка | Скорость загрузки для мобильных устройств | Скорость загрузки для компьютерных устройств |
| Приватбанк | 1,9 секунд | 1,8 секунд |
| Ощадбанк | 7,8 секунд | 6,3 секунд |
| Sense bank | 3,8 секунд | 2,5 секунд |
| ING | 2,2 секунды | 1,4 секунды |
| Deutsche Bank | 3,5 секунд | 2,7 секунд |
| Intesa Sanpaolo | 2,3 секунды | 1,4 секунд |
По результатам эксперимента можно сделать выводы, что в большинстве случаев показатели не соответствуют заявленным рекомендациям. Больше всего страдает скорость загрузки страниц для мобильных устройств, и это является существенным недостатком. Так, в банковской нише 39% пользователей осуществляют поиск со смартфонов.
Мнение Webpromo: следует учитывать, что банковский сайт всегда значительно тяжелее условно информационных ресурсов. Он содержит большое количество информации, которую нужно предоставить максимально понятно с помощью инфографики, видео и других «тяжелых» элементов. Так, скорость загрузки страниц Ощадбанка неудовлетворительна. Вместе с этим ресурс содержит большое количество интерактивных элементов, которые улучшают пользовательский опыт и восприятие информации.
В банковской нише отличаются и поведенческие сценарии пользователей. К примеру, клиенты банка готовы подождать несколько лишних секунд ради безопасности своих данных и доступа к необходимым им услугам. В то же время для лендингов или e-commerce ресурсов скорость загрузки является критичной. Ведь в противном случае пользователь оставит страницу и предпочтет конкурентов.
Выводы
В этой статье мы проанализировали веб-сайты самых популярных украинских банков. Исходя из вышеприведенных тезисов, мы можем сделать следующие выводы относительно трендов UX/UI дизайна банковской ниши в 2024 году:
- Дизайн веб-сайта: сдержанный и минималистичный, не отвлекающий пользователя от восприятия основной информации. При этом банковские учреждения постепенно отходят от серьезности и официоза, делая ставки на непредсказуемые цвета и близкие к аудитории коммуникационные стратегии.
- Навигация: функция поиска, хлебные крошки, понятная иерархия — маст-хэв для финансовых учреждений. Прежде всего, это связано со специфичностью информации, которую нужно предоставить максимально понятно и структурировано. При этом следует убедиться, что на веб-сайте указана информация о лицензии банка, его государственной регистрации, предоставлена финансовая отчетность и т.д.
- Интерактивность: современного пользователя уже не удивишь одностраничными статическими лендингами, поэтому современный сайт банка должен быть динамичным. Среди самых популярных решений — hover-эффекты и масштабирование отдельных элементов, наличие видео, интерактивное меню. При этом следует учитывать, что большое количество динамических элементов может повлиять на скорость загрузки сайта.
- Инклюзивность: один из главных признаков хорошего веб-дизайна — это доступность ресурса для всех сегментов пользователей. В диджитале следует позаботиться о возможности персонализации страницы под индивидуальные потребности пользователя. При этом физические отделения банка должны учитывать индивидуальные особенности клиентов с инвалидностью.
Для улучшения пользовательского опыта оптимизируйте скорость загрузки веб-сайта и позаботьтесь о его адаптивности для мобильных устройств. В частности, современный банк должен постоянно общаться со своими клиентами — интегрируйте веб-сайт с социальными сетями, а также позаботьтесь о многоканальной службе поддержки.
