Od frustracji do aplikacji – porównanie UX/UI aplikacji finansowych

Julia Wolińska

Jeszcze kilkadziesiąt lat temu na polskim rynku zapłacenie kartą debetową graniczyło z cudem, a bez pliku banknotów można było zapomnieć o dokonaniu większego zakupu. Kilkanaście lat temu – wykonanie przelewu poprzedzała długa autoryzacja. Z tym, jak frustrująca była wycieczka do jednej z nielicznych placówek bankowych równało się tylko stanie w kolejce w urzędzie. Kilka lat temu – by płacić za granicą, zbroiliśmy się w potężny zapas gotówki w kantorze wymiany walut. No chyba że chcieliśmy liczyć się z kosztownym przewalutowaniem w banku.

Jak zatem doszło do tego, że w kilka ostatnich sezonów nauczyliśmy się odinstalowywać aplikacje płatnicze, w momencie gdy ich wygląd nie odpowiada naszym gustom? Dla banków i start-upów finansowych to nie kolejny wymóg, a szansa. Coraz więcej mówi się o konkursie piękności wśród aplikacji finansowych – UX (User Experience) wraz z UI (User Interface) w erze dyrektywy PSD2 mają stanowić czynnik wyróżniający. Gdzie leży sekret sukcesu? Porównamy trzy odmienne podejścia do projektowania UX/UI aplikacji bankowych.

Fintechy udowodniły: można inaczej

Oparte na technologii informacyjnej usługi finansowe przeżywają swój boom, a specjaliści są zgodni – to dopiero początek. W samych Stanach Zjednoczonych w ubiegłym roku zaobserwowano wzrost dochodów firm fintechowych na poziomie 43% względem poprzedniego, co doprowadziło do oszałamiającego wyniku 12.4 miliarda dolarów. Wystarczył rok. 

Nie dość, że innowacyjne rozwiązania są prostsze, wygodniejsze i bezpieczniejsze niż te, do których przywykły poprzednie pokolenia – są również bardziej spersonalizowane, dopasowane do prywatnego odbiorcy, a także… przyjemniejsze w użyciu. To właśnie doskonale przygotowane i skrojone na miarę potrzeb nowoczesnego użytkownika interfejsy aplikacji, karty płatnicze oraz sposoby rozwiązywania dawnych problemów stoją za niezwykłą popularnością takich fintechów jak Revolut czy N26. 

Wygoda i elegancja użytkowania wzięły górę nawet nad obiekcjami do płacenia telefonem. Fintechy pokazały inny świat i wyznaczyły go jako standard. 

Roszczeniowi millenialsi… czy wizjonerzy? 

Wraz z rozwojem nowoczesnych technologii wzrastały oczekiwania użytkowników urządzeń mobilnych. Można krytykować obecne pokolenie 20- i 30- latków za ich zamiłowanie do wygody, ale trzeba przyznać im jedno: przyczynili się do zmiany, której potrzebowaliśmy my wszyscy. Bankowość online i systemy płatności przestały być tylko użyteczne. Zaczęły być estetyczne i przyjemne w użyciu. 

Doszliśmy do momentu, w którym nie tylko środki zgromadzone w aplikacji czy na karcie płatniczej stanowią o prestiżu ich właściciela.

Pomyśleć inaczej o UX/UI usług finansowych 

Design to za mało, jeśli jest dziełem przypadku. Do tworzenia nowych produktów lub ulepszania poprzednich firmom potrzebne jest nowe podejście. I nic nie zobrazuje go lepiej od fenomenu Apple Card.

Fascynujące jest to, że Apple łączy ze sobą znane już wszystkim rzeczy, nie dodając funkcji, które innym wydają się niezbędne – i składa z tego value proposition. Krytycy zarzucają, że karcie brakuje obsługi NFC. Tylko że rolą kawałka tytanu z wytłoczeniem Goldman Sachs nigdy nie były płatności zbliżeniowe. Musisz podać tę kartę w recepcji hotelu, wyciągnąć ją w restauracji. Zrobisz to, mimo że otrzymasz niższy cashback niż przy płatności telefonem. Firmy nie doceniają siły piękna. Apple zrobiło lepszą kartę niż inni nie dlatego, że jest bardziej innowacyjna, ale dlatego, że jest produktem dla klienta. To świetny produkt z powodów “pozaproduktowych”. Firma doskonale czyta klientów, kiedy zaspokaja ich potrzebę prestiżu różnicą estetyczną.

Revolut – rozwiązania fintech kształtujące rynek europejski

Do pionierów, którzy zmienili postrzeganie systemów płatności należy Revolut. Na polski rynek fintech wkroczył w 2017 roku i szturmem zdobył zaufanie naszych rodaków. Podczas gdy banki zarzekają, że wszystko jest pod kontrolą, start-up właśnie ogłosił pierwszy milion klientów w Polsce. 

Wprowadzenie Revoluta przyniosło ze sobą wiele wygód, których przyjemność korzystania doświadczyliśmy poraz pierwszy. Nagle zaczęliśmy używać kart walutowych, które nigdy nie stosowały niekorzystnych przeliczników. Zakładanie konta – w przeciwieństwie do tego, do czego przyzwyczaiły nas rodzime banki – stało się banalne i okraszone niezwykle przyjemnym i przyjaznym UX oraz UI aplikacji. Czy jesteśmy tym, za kogo się podajemy, sprawnie sprawdzały procedury KYC; dzięki nim do założenia konta wystarczał jeden wieczór. Karta przychodziła do zamawiającego zaledwie po kilku dniach roboczych. Bez wyświechtanych kopert zapełnionych regulaminami napisanymi niezrozumiałym, prawniczym językiem. Wystarczyło eleganckie, rozsuwane opakowane, designem przywodzące na myśl projekty Apple. Było prosto i przyjemnie, czyli zupełnie inaczej niż zazwyczaj w przypadku CX (Customer Experience) usług bankowych. 

W pierwszej połowie 2018 roku z usług start-upu finansowego korzystało 1.7 miliona użytkowników. Zaledwie rok później – aż 4 miliony. 

Lekcja UX/UI designu od Revoluta

O przewadze ostatecznie zadecydowały nie proste zakładanie konta, i nie darmowa karta. Za sukcesem Revoluta w dużej mierze stoi jego przemyślany i dobrze rozplanowany design.

Od przejrzystego ekranu logowania (z użyciem linii papilarnych lub wybranego kodu), przez czytelną stronę główną, po intuicyjne oznaczenia – wszystko jest zgodne z kluczowymi zasadami UI designu. Użytkownika nie rozpraszają niepotrzebne elementy wizualne. Duże, kontrastowe przyciski przekierowują do najważniejszych funkcji, takich jak wykonanie przelewu czy sprawdzenie historii. Nie trzeba ich szukać – są dostępne w każdym momencie. Co istotne, Revolut umiejscowił swoją aplikację na planie responsywnej siatki zgodnej z wyznacznikami Material Design. Pozwala to na optymalne korzystanie z aplikacji niezależnie od rozdzielczości i rozmiaru urządzenia, z którego korzystamy. 

To sztuka zaprojektowania prostej aplikacji. Revolut jest minimalistyczny i wciąż ładny, gdy jego sobowtórzy – niby o tych samych elementach – wyglądają po prostu tanio. UI design porównujemy czasem do pola minowego. Przeważyć mogą nawet odległości pomiędzy ikonami. 

Zaprojektować newsletter

Wisienkę na torcie stanowi sposób komunikacji z użytkownikami. Nijakie, powtarzalne newslettery sprawiają wrażenie wysyłanych przez automat do tysięcy użytkowników. Dostosowanie się do najnowszych trendów z dziedziny skutecznego marketingu pozwoliło fintechowi stworzyć iluzję, że jest inaczej. To nie odręcznie napisany list. Ale wystarczająco dużo, aby trafić do nowoczesnego odbiorcy. 

Podobnie jak w aplikacji mamy do czynienia z prostym i czytelnym CTA, świetnym, spójnym designem przycisków czy dobrze skrojonym microcopy. Elementy są powtarzalne, a to sprawia, że użytkownik po czasie intuicyjnie wykonuje wskazane akcje. Spójny kod kolorystyczny skraca czas reakcji do minimum. “Prosto do celu” – strategia języka marki wzbudza poczucie bezpieczeństwa, bo firma wygląda na  przejrzystą i szczerą w komunikacji.

Rozwiązania fintech w polskich bankach 

Trend dynamicznie podchwyciły nasze rodzime banki. W ciągu ostatnich lat skupiały się na dostosowywaniu rozwiązań płatniczych, UX i związanego z nim UI do urządzeń mobilnych. Nic dziwnego – w końcu aż 9 milionów Polaków przyznało, że korzysta z bankowości na telefonie.

Największym problemem dla designerów okazało się znalezienie złotego środka pomiędzy minimalizmem a funkcjonalnością interfejsu. Kiedyś nie wyobrażaliśmy sobie odwiedzania placówki banku z powodu brakującej funkcji na stronie internetowej. Dzisiaj z niechęcią myślimy o włączaniu samej strony.

Co więcej, dobra aplikacja startupu finansowego lub banku to teraz taka, która jest bardziej czytelna i przyjazna dla użytkownika niż natywne aplikacje znanych social media. Fintech zrewolucjonizował, a wśród polskich aplikacji bankowych nie ma takich, które są do siebie podobne. Porównamy trzy sposoby projektowania UX (User Experience) i związanego z nim UI (User Interface) w najpopularniejszych z nich. 

Nowoczesna aplikacja mBanku 

W odróżnieniu od nas klienci (raczej) nie spędzają czasu na analizie aplikacji bankowych. mBank stworzył aplikację, która na pierwszy rzut oka odpowiada nowoczesnym trendom w dziedzinie UX oraz UI. 

Zamiast przeładowania treścią dostajemy czytelne, spójne kolorystycznie sekcje. Oprócz tego, że łatwo wykonać przelew, dostęp do historii płatności nie wymaga żmudnych poszukiwań. Aplikacja jest responsywna na różnych urządzeniach mobilnych – a więc dostosowana nie tylko do smartfonów, ale też każdego tableta. Do najważniejszych opcji użytkownik swobodnie sięga kciukiem, w tak zwanym “thumb zone”, co, niestety, nie jest jeszcze standardem. Miłe zaskoczenie. Aplikacja również została zaprojektowana na czytelnej siatce, a przyciski w większości odpowiadają standardowym wymiarom, czyli 44 x 44 – rozmiarowi, który jest uznawany jest za najwygodniejszy do wciśnięcia na ekranie. 

Są dwa główne powody, dla których “klika się” swoją aplikację bankową: aby sprawdzić stan konta i wykonać przelew. W mBanku saldo to pierwszy widoczny element po zalogowaniu. Od momentu wyboru aplikacji na ekranie głównym do wykonania przelewu do ustalonego odbiorcy wystarczą zaledwie trzy kliknięcia. Najważniejszy przycisk – “wyślij przelew” – zajmuje praktycznie całą szerokość ekranu i ma kontrastowy, przykuwający wzrok kolor. 

Podążanie za trendami

Personalizacja została uznana za jeden z najważniejszych trendów w bankowości 2020 r. W testowanej aplikacji użytkownik decyduje o tym, czy chce widzieć miesięczne podsumowania wydatków na ekranie głównym, oznaczać poszczególne transakcje odpowiednimi kategoriami, czy skorzystać z innych usług finansowych. Do pełnej personalizacji – najlepiej takiej, która wykorzystuje analitykę – jeszcze sporo brakuje. 

Warto wspomnieć, że mBank, podobnie jak fintech Monese, poszedł za ciosem i postanowił eksperymentować z nową formą. Od niedawna oferuje użytkownikom pionowe, minimalistyczne karty płatnicze.

Projekt w światowej czołówce aplikacji – PKO

Jeśli chcesz obrazić bankiera, powiedz mu, że polska bankowość jest zacofana. Kolejne konkursy udowadniają, że to niesprawiedliwie przyklejona łatka. Aplikacja IKO podlegająca PKO Bankowi Polskiemu została mianowana najlepszą bankową aplikacją… na świecie. I to aż dwukrotnie! Z tego rozwiązania korzystają 4 miliony użytkowników.

Przy okazji testów staje się jasne, dlaczego. Przez przejrzysty interfejs utrzymany w stonowanej kolorystyce dotrzemy do wszystkich najważniejszych funkcji. Wprowadzono kilka usprawnień. Płatności są łatwiejsze, gdy wystarczy zeskanować kod do natychmiastowego zapłacenia należności. Projekt IKO nie zakłada mikrointerakcji, animacji, ani nie jest zbyt ozdobny. Nie dlatego, że zabrakło koncepcji – od początku założono, że aplikacja ma wzbudzać duże zaufanie każdej grupy wiekowej. Bardziej, niż w przypadku innych banków aplikacja koresponduje z wersją desktopową konta bankowego. Jest bez porównania czytelniejsza dla starszych użytkowników. Naprawdę, z mobilnej bankowości korzystają nie tylko millenialsi. 

Najczęściej wybierane opcje, takie jak wykonanie przelewu, zaznaczono kontrastowym, granatowym kolorem. Rozmiar przycisków nie sugeruje tu hierarchii wyboru akcji. Jeszcze przed sprawdzeniem spodziewaliśmy się zastosowania standardowego hamburger menu, umieszczonego w lewym górnym rogu. To typowa techniką w przypadku, gdy stawiamy na bezpieczny design, czytelny dla każdego typu odbiorców. 

Crédit Agricole – francuska elegancja i… dark mode, nim to było modne

Messenger, iOS, Slack… – ciemny tryb interfejsu staje się obowiązkowym elementem aktualizacji kolejnych aktualizacje systemów i aplikacji. Aplikacja mobilna banku Crédit Agricole przejawia zupełnie inne podejście do projektowania UI niż aplikacja IKO. Łatwiej wymienić różnice niż nieliczne podobieństwa do wersji desktopowej.

Półprzezroczyste przyciski, elegancki i minimalistyczny design ikon, mikrointerakcje i mikroanimacje, jakie występują przy przesuwanych menu – to wszystko sprawia, że gdy przyzwyczaimy się do obsługi, staje się ona przyjemnością. Wcześniej nieco zmyli starszych lub mniej obeznanych z podejściem mobile-first użytkowników. 

Zaawansowane opcje ukryto w interfejsie, przez co aplikacja tylko pozornie sprawia wrażenie najmniej rozbudowanej. Co ciekawe, Credit Agricole do niczego nie zmusza swoich klientów. Zarówno opcja wykonania przelewu, jak i historia, książka odbiorców czy opcja założenia lokaty mają takie same rozmiary oraz kolorystykę. Jedynym wyróżniającym się elementem w hamburger menu jest opcja “moje produkty”  – uznana za najważniejszą, a więc łatwiejszą do znalezienia. Gdyby bank ułatwił jeszcze dostęp do wysoko umiejscowionych na ekranie funkcji, aplikację można by obsługiwać jedną ręką. 

Klucz do sukcesu to udany projekt UX/UI

Wkraczamy w niezwykle intensywny i ciekawy okres dla fintechu. Możemy przebierać w dziesiątkach różnorodnych podejść do tworzenia aplikacji mobilnych usług bankowych, obserwować pionierów na rynku, którzy w ciągu zaledwie kilkunastu miesięcy tworzą wielomilionowe imperium, i kreować doświadczenia użytkowników doskonale skrojone do ich potrzeb. Mamy możliwość zamiany dotychczas nieprzyjemnego, powodującego frustrację i stres przeżycia, jakim było obcowanie z bankami, w przyjemny element codzienności. Taki, który doskonale dopełnia styl życia nowoczesnego odbiorcy. 

Bo w końcu – czy nie to właśnie projektowanie pozytywnych przeżyć użytkownika stanowi istotę dobrego UX oraz UI designu…?


Podobne artykuły

Blockchain i CarSharing zmieniają oblicza miast. Jak technologia wprowadza ruch uliczny w XXI wiek.

Maciej Zieliński Na świecie jest już ponad miliard samochodów. Jako ludzkość jesteśmy w nich wręcz zakochani. Jednak przez blisko 150 lat swojego istnienia oprócz korzyści...

Maciej Jędrzejczyk o przyszłości biznesowych zastosowań blockchain

Wywiad z Maciejem Jędrzejczykiem, CEE Blockchain Leader w IBM o przyszłości blockchain i o tym dlaczego to technologia powinna przystosowywać się do biznesu, a nie...

callendar
Otrzymaj darmowy kosztorys w 24 h

Zacznij swój projekt z nami!

Konrad Szałapak

Konrad Szałapak

COO of Development

Zakres projektu

API/Backend

Strony Internetowe

Aplikacje Mobilne

Projektowanie

Rozwiązania Blockchain

Usługi Internetowe

Tomasz Sienicki

Tomasz Sienicki

Blockchain Strategy Manager, Alior Bank

Next Enterprises zapewniło bankowi usługę technologiczną potrzebną do wprowadzenia projektu opartego na blockchainie. W ramach współpracy firma zaprojektowała usługę w modelu SaaS. Rozwiązanie przechowuje na swoich serwerach, udostępniając je bankowi i jednocześnie gwarantując jakość zgodną ze standardami zawartymi w umowie.

Kajetan Komar-Komarowski

Kajetan Komar-Komarowski

Współzałożyciel i prawnik Lex Secure

Współpraca z zespołem Nextrope wyznacza zupełnie nowy poziom jakości, innowacyjnych rozwiązań i profesjonalnych usług. Jeśli potrzebujesz wsparcia przy technologii blockchain, trafiłeś na profesjonalistów. Zdecydowanie polecam!

Maciej Skrzypczak

Maciej Skrzypczak

CEO Gameset

W listopadzie 2017 r. opublikowaliśmy grę wykorzystującą inteligentne kontrakty jako mechanizm dystrybucji i transakcji. Zespół Nextrope wspierał nas w najważniejszej części projektu - tworzeniu i testowaniu bezpieczeństwa inteligentnych kontraktów blockchain w sieci Ethereum. Mogę gorąco polecić Mateusza i jego zespół - to prawdziwi eksperci w dziedzinie blockchaina.