grafika: fotolia
Zobacz również
A czy ten sam efekt możliwy jest do odtworzenia na poziomie strony internetowej? Poniżej przedstawiamy 7 rozwiązań i inspiracji dzięki którym bankowe serwisy będą nie tylko przyjazne, ale i funkcjonalne!
1. Responsive web design
Urządzenia mobilne coraz częściej obecne są w naszym życiu – według Diagnozy Społecznej 2013, z tabletów korzysta się już w niemal co dziesiątym gospodarstwie domowym, a blisko co czwarty Polak posiada smartfona. Te liczby z pewnością będą wzrastać, dlatego stosowanie strategii responsive web design w przypadku serwisów bankowych traktować trzeba bardziej jako konieczność, niż modę czy trend.
Movember/Wąsopad: jak marki zachęcają do profilaktyki męskich nowotworów [PRZEGLĄD]
![Movember/Wąsopad: jak marki zachęcają do profilaktyki męskich nowotworów [PRZEGLĄD]](https://nowymarketing.pl/wp-content/uploads/2024/11/Cover-photo-2024-11-06T140221-142x0-c-default.png)
[Rys. www.premierbanking.com Po lewej – wersja desktopowa, po prawej – wersja w rozdzielczości przystosowanej do wyświetlania na smartfonie.]
Słuchaj podcastu NowyMarketing
Tworzenie wersji mobilnej wymusza zwykle nie tylko zmianę układu poszczególnych elementów, ale także dostosowanie wielu funkcjonalności do specyfiki urządzeń mobilnych. W przypadku tego serwisu „zwinięto” główną nawigację, która w wersji smartfonowej jest dostępna po naciśnięciu na ikonę umieszczoną nad głównym bannerem. Takie rozwiązanie pozwala na zaoszczędzenie cennych pikseli, które stają się tym bardziej wartościowe, im mniejszym ekranem dysponuje docelowe urządzenie.
Stworzenie strony składającej się z wielu pozornie niezależnych modułów ułatwia późniejsze prace nad wersjami przystosowanymi do urządzeń o różnej wielkości ekranu.
[Rys. www.gcbaz.com. Od lewej: wersja desktopowa, wersja przystosowana do wyświetlania na tablecie w trybie portretowym, wersja przystosowana do wyświetlania na smartfonie.]
Doskonale widać to na przykładzie trzech wersji serwisu Gateway Bank. Alternatywne układy elementów w wersjach przeznaczonych dla urządzeń różnego typu różnią się od siebie głównie rozmieszczeniem wspomnianych modułów w obrębie ekranu.
2. Dodatkowa nawigacja przyjazna użytkownikowi
Oferta banków i innych instytucji finansowych zwykle jest bardzo obszerna i składa się z wielu grup produktów. W związku z tym, stworzenie właściwej architektury informacji, która pozwoli użytkownikom na intuicyjne poruszanie się w obrębie serwisu i szybkie docieranie do poszukiwanych treści może być dużym wyzwaniem. Jako najwyższą kategorię nawigacji w serwisach bankowych zwykle stosuje się podział na typy klientów (indywidualni, biznesowi itp.) W takiej sytuacji kliknięcie na właściwą zakładkę pozwala na wstępie odfiltrować wiele informacji, które na pewno nie będą interesujące dla klienta z danej grupy.
Potrzeba logicznego uporządkowania pozostałych treści sugeruje zastosowanie w dalszej kolejności podziału oferty według typów produktów. Taki podział ma jednak swoje słabe strony: w przypadku, gdy klient nie zna dobrze specyficznego słownictwa, lub gdy jego wiedza na tematy związane z bankowością jest niewielka, może zniechęcać go to do eksplorowania serwisu. Dlatego ciekawym rozwiązaniem wydaje się być dodanie alternatywnej nawigacji, która będzie bardziej przyjazna dla użytkowników.
[Rys. grong-sparebank.no/privat]
W przypadku tego serwisu, zastosowano dodatkową nawigację według zdarzeń życiowych (np. narodziny dziecka, podróże), ilustrowanej dodatkowo przez ikony. Może to umożliwić klientom szybkie odnalezienie właściwych informacji, bez konieczności zagłębiania się w strukturę serwisu.
3. Kalkulatory i symulatory
Kolejną funkcjonalnością, która jest przydatna dla użytkowników, a dodatkowo może nieco odciążyć dyżurujących na infolinii konsultantów jest możliwość samodzielnego dokonania obliczeń dotyczących np. wysokości raty czy też własnej zdolności kredytowej.
[Rys. www.commbank.com.au]
Widoczny na ilustracji kalkulator daje użytkownikowi możliwość samodzielnego sprawdzenia, jak dużą pożyczkę może zaciągnąć. Po dokonaniu kalkulacji użytkownik ma również możliwość bezpośredniego przejścia do formularza aplikacji o kredyt.
4. Wizardy
Wizardy mogą być stosowane przede wszystkim jako narzędzie, które pozwala na szybkie wyszukanie i zawężenie treści.
[Rys. www.thatsmybank.com/personal/checking/account-wizard.html]
Na zrzucie z ekranu widać rozwiązanie zastosowane w jednym z banków. Zaznaczenie funkcjonalności, które klient chciałby otrzymać w ramach zakładanego konta pozwala na sprawny wybór odpowiedniego produktu.
Wizardy przede wszystkim pozwalają oszczędzić czas użytkownika: po udzieleniu odpowiedzi na kilka pytań, serwis sam może mu zaproponować właściwe dla jego sytuacji rozwiązanie. Dzięki temu klient nie musi tracić czasu na samodzielne przeglądanie tabel i opisów oferowanych produktów.
5. Personalizacja
[Rys. www.audicardartist.com/R1.1.30/]
Wizardy i konfiguratory nie muszą dotyczyć tylko i wyłącznie wyboru produktów. Bank Audi (banqueaudi.com) proponuje swoim klientom narzędzie, które pozwala na stworzenie layoutu własnej karty kredytowej. Za pomocą tego kreatora użytkownik może dobrać grafikę, napisy, a nawet wykorzystać zdjęcie z własnej kolekcji.
6. Nieinwazyjne formy reklamy
Oferta czy też promocja może być zaprezentowana na wiele sposobów. Badania użyteczności, również z wykorzystaniem eyetrackingu, wskazują jednak, że nie wszystkie będą tak samo skuteczne. Aby taka informacja nie padła ofiarą zjawiska nazywanego ślepotą bannerową (czyli nawykowego ignorowania przez użytkowników obiektów zbytnio przypominających reklamy), warto postawić raczej na prostotę przekazu niż na krzykliwe bannery lub slidery.
[Rys. kiwibank.co.nz]
Kiwi Bank na swojej stronie głównej prezentuje ofertę w sposób bardzo oszczędny graficznie. Elementem, który ma przyciągać uwagę użytkowników do tych informacji są same kwoty oprocentowania. Zgodnie z obserwacjami na podstawie badań eyetrackingowych, liczby same z siebie bardzo często przyciągają uwagę użytkowników, ponieważ są oni przyzwyczajeni, że zwykle mają one dużą wartość informacyjną. Tak więc – bardzo często może sprawdzić się powiedzenie, że więcej znaczy mniej – często dodanie kolorów, specjalnego formatowania, bądź animacji wbrew pozorom może sprawić, że taka oferta zostanie zignorowana.
7. Pomysł na stronę główną – duża grafika czy one-pager?
Wykorzystanie dużej grafiki w charakterze tła spełnia przede wszystkim funkcję komunikatu oddziałującego na emocje użytkownika. Zależnie od charakteru użytej grafiki można aktywować skojarzenia zarówno dotyczące profesjonalizmu, czy wielkości organizacji, jak i „ocieplić jej wizerunek”.
[Rys. www.bankwest.com.au ]
Co więcej, nawet duża grafika nie musi ograniczać dostępności kluczowych funkcjonalności na takiej stronie. Tak jak w przykładzie widocznym powyżej, poprzez dobre rozplanowanie kontentu na takiej podstronie mogą znaleźć się wszystkie najważniejsze funkcje, czyli nawigacja, pole logowania, dobrze widoczna wyszukiwarka czy nawet prezentacja oferty. Tego rodzaju elementy graficzne mogą znaleźć swoje zastosowanie zwłaszcza na stronie głównej oraz podstronach poszczególnych kategorii.
Innym sposobem na otrzymanie strony o oryginalnym i „świeżym” układzie jest zaprojektowanie witryny „jednostronicowej”. W takim przypadku nie zakłada się, że użytkownik będzie nawigował w serwisie przechodząc miedzy kolejnymi zakładkami, tylko zobaczy wszystkie najważniejsze informacje przewijając ją w dół.
[Rys. www.commbank.com.au]
W przypadku stron bankowych trudno jednak brać to założenie dosłownie – z uwagi na ich obszerną i skomplikowaną ofertę. Na powyższym przykładzie widoczne jest jednak kreatywne zapożyczenie części logiki działania typowych „one pagerów” – na długiej stronie głównej znalazła się rozwinięta nawigacja, zaprezentowana za pomocą modułów. Kliknięcie na element pozwala dotrzeć do danej funkcjonalności lub opisu produktu. Takie rozwiązanie może sprawić, że przewijający stronę użytkownik zauważy pewne funkcjonalności, do których nie dotarłby podczas eksplorowania serwisu w tradycyjny sposób.
Justyna Janik
Psycholog i badacz. W Studiu Edisonda zajmuje się tematyką użyteczności: prowadzeniem testów z użytkownikami i badań z wykorzystaniem eyetrackingu.