A felhasználók egyre nagyobb számban intézik digitális ügyeiket mobil alkalmazáson keresztül. Azon felhasználók száma, akik a pénzügyi vagy banki ügyeiket is a bankok saját mobilalkalmazásaiban végzik (mobil bankolás), napról napra növekszik.

Az autópálya matrica (motorway sticker) vásárlás manapság egy népszerű funkció, amit az autóval rendelkező felhasználók többsége rendszeresen használ. Nem is csoda, hogy egyre több banki szereplő szeretne ilyen, vagy ehhez hasonló funkciókat elérhetővé tenni a saját banki mobilalkalmazásában.

Az Európában található pénzügyi szereplők, bankok egyre nagyobb hangsúlyt fektetnek arra, hogy kényelmi funkciókat építsenek a saját banki mobilalkalmazásokban. Az ilyen jellegű fejlesztések és funkciók nagyban hozzájárulnak az alkalmazások még szélesebb körű használatához és a lojalitás kialakításához.

A kényelmi funkció számos előnnyel járhat:

• Új ügyfelek szerzése
• Régi ügyfelei elégedettségének növelése
• Az alkalmazás gyakoribb használata
• Elköteleződés növekedése a bank felé
• Digitális bankolás elterjesztése
• Nincs szükség külön alkalmazás telepítésére és használatára
• Megszokott, kényelmes mobilbank környezetben intézhető a vásárlás
• Új innovatív megoldások születnek a banki mobilalkalmazásokban

Talán az egyik legnagyobb magyar sikertörténet az általunk tervezett OTP Simple alkalmazás volt. A mai napig az egyik legtöbbet letöltött magyar alkalmazás a Google Play Online áruházban. Kísérleti jelleggel az OTP egy különálló alkalmazást készített, amibe a felhasználók számára érdekes és hasznos kényelmi funkciókat telepített. Az OTP ezzel a döntéssel különválasztotta a banki mobil szolgáltatásokat a kényelmi funkcióktól. A felhasználók előszeretettel használnak olyan alkalmazásokat, amikben több kényelmi funkciót is használhatnak, ilyen funkció például a parkolás fizetése, mozijegy vásárlás stb. A felhasználók körében az egyik ilyen népszerű kényelmi funkció az autópálya matrica vásárlás. 2017-ben a Simple alkalmazás tervezése során autópálya matrica vásárlási funkció is megtervezésre került, az akkori UX trendeknek megfelelően.

OTP Simple autópálya matrica vásárlás képernyők (gépjármű hozzáadása, matrica típus kiválasztása)

Egy új projekt kapcsán lehetőségünk adódott, hogy újra tervezzünk egy ilyen szolgáltatást. A fejlesztés célja az volt, hogy egy minden gépjármű kategória számára elérhető autópálya matrica értékesítést és az ehhez kapcsolódó teljes körű gépjármű menedzsmentet valósítsuk meg. Egy ilyen funkció fejlesztése számos UX kérdést vet fel, amire a tervezés során a 3D model alkalmazásával a discover, define, design szakaszokban igyekeztünk javaslatot tenni, lehetséges megoldásokat készíteni.

A tervezett alkalmazás képes több gépjárművet kezelni, vizuálisan szemlélteti, hogy melyik gépjármű (rendszám alapján), melyik megyére rendelkezik érvényes matricával. A tervezés során nagy hangsúlyt kapott, hogy az alkalmazás kiemelkedő ügyfélélményt biztosítson a felhasználók számára, ennek érdekében ügyfél- és felhasználóbarátra terveztük meg a felületeket.

Ebben a cikkben szeretnénk bemutatni, hogy egy mobilbanki környezetben azonos funkcionalitást megvalósító alkalmazás tervezése során, hogyan gondoltuk újra az autópálya matrica vásárlás folyamatát és a hozzá tartozó képernyőit. Milyen UX/UI megoldás született, ami segíti az alkalmazás a jobb felhasználói élmény elősegítését.

Autópálya matrica vásárlás

Elképzeléstől a megvalósításig

Mint minden UX/UI projektet, ezt is a 3D keretrendszerre építettük fel, ami a discover, define és a design szavak rövidítése. A discover fázisban a kutatással, az üzleti érdekeltek, dolgozók és a felhasználók igényeit mértük fel a leendő alkalmazással kapcsolatban. A define szakaszban néhány workshop segítségével koncepciókat készítettünk a teljes mobilalkalmazás felépítésére, folyamatára vonatkozóan. A koncepciókból UX drótvázakat majd azokból UI képernyőket készítettünk, amit a felhasználókkal teszteltünk, a felhasználói visszajelzések alapján a terveinket folyamatosan iteráltuk.

A best practice kutatást és a felhasználói interjúkat követően világossá vált, hogy kevés jó autópálya matrica vásárlási alkalmazást találni a piacon. Magyarországi példaként az e-autópályamatrica.hu vagy az autópályamatrica.hu oldalakat elemeztük UX/UI szempontok alapján. Mindkét oldal hasonló struktúrában épül fel, szinte alig van különbség a két oldal felépítése és kinézete között. Nemzetközi autópálya matrica vásárlást lehetővé tevő oldalak közül megvizsgáltuk a romániai roviniete.ro és a szlovákiai eznamka.sk. oldalakat. A fellelhető alkalmazások közül néhány nagy kognitív terhelést ró a felhasználóra, így a tervezés során törekedtünk arra, hogy csökkentsük a felhasználók számára ezt a terhelést. Szükségesnek tartottuk az új mobil alkalmazásnál, hogy vizuális zajtól mentes, átlátható, egyszerű design kerüljön kialakításra. Szintén értéket képviselt a leendő alkalmazásnál az, hogy a funkciók ésszerű csoportosítása megtörténjen, így a logikailag összetartozó elemek egy csoportba kerültek. Nagyon fontos eleme volt a UX tervezésnek, hogy az egyes funkciók gyors, gondolkodást nem igénylő módon legyenek elérhetők a felhasználók számára. Ennek érdekében a tervezés során szükséges volt informatív és érthető UX copy-t használni.

Egyértelművé vált az is számunkra, hogy a piacon lévő alkalmazások nem alkalmaznak semmilyen vizuális megjelenítést arra, hogy az adott felhasználónak melyik megyére van érvényes matricája. Ezt többnyire szöveges vagy táblázatos formában jelenítik meg a jelenlegi alkalmazások. A tervben szerettünk volna nagyobb hangsúlyt adni a matricák területi érvényességének vizuális megjelenítésének, úgy, hogy azt ne vizuális zajnak értelmezze a felhasználó. A tervezés során és a felhasználói visszajelzések alapján sikerült egy innovatív megoldást találunk.

A másik kulcsfontosságú területként a funkciók gyors elérésének javítását tűztük ki. Sok esetben a felhasználónak nincs megjelenítve, hogy melyik gépjárműre vonatkoznak a megjelenített információk, illetve az azok közötti gyors váltás sem volt minden mobil alkalmazásban megoldva, biztosítva a felhasználó számára.

Továbbá az alkalmazásnak támogatnia kell az autópálya matrica vásárlás egész folyamatát, és a teljes körű gépjármű menedzsmentet.

A felhasználói élmény növelése érdekében terveztünk egy kiegészítő funkciót is az alkalmazásba. Az alkalmazást használó személynek lehetősége van hangvezérléssel (voice) támogatott chatbot segítségével elvégezni a vásárlási folyamat. Ez a funkció megkönnyíti az autópálya matrica vásárlás folyamatát vezetés közben (biztonságosan). Egy chatbottal folytatott párbeszéddel könnyen és egyszerűen megvásárolható a matrica. Így a vásárlás folyamata nem tereli el a sofőr figyelmét a vezetéstől vásárlás közben.

UX-UI Tervezés

Az első képernyőn a gépjármű menedzsment került kialakításra, ahol a felhasználóknak szükséges megadni a gépjárművek alapadatait. A megjelenő gépjárművek listájában gyorsan és egyszerűen kiválaszthatja a számára megfelelőt, illetve új járművet is megadhat. Új gépjármű megadása esetén csak a legszükségesebb adatokat kell a felhasználónak megadni.

A vizuális megjelenítés segíti a felhasználót a listában megjelenő járművek közötti választásban. Az ikonok használatával kompaktabb megjelenést tudunk biztosítani, és segítjük az oldal jobb megértését.

Az egyik legizgalmasabb kihívást az jelentette, hogy vizuálisan, miként jelenítsük meg a megyékhez tartozó érvényes autópálya matricákat, az adott járművet és a vásárlás lehetőségét egy képernyőn. Számos drótváz rajzolás után az alábbi innovatív képernyők készültek.

Az elkészített tervek alapján, az érvényes matricákat Magyarország megyéinek vaktérképén jelenítettük meg, zöld színnel. A felhasználó vizuálisan meggyőződhet róla, hogy melyik megyére van érvényes autópálya matricája. A képernyőn felül, megjelenik egy gyors és egyszerű gépjármű váltó lehetőség. Így a felhasználónak lehetősége van egy lenyíló listából másik gépjárművet választani, ahol az arra a gépjárműre vonatkozó matrica adatok jelennek meg. A képernyőn lehetőség van vásárolni a kiválasztott gépjárműre új megye vagy éves autópálya matricát is.

Amikor a terv elkészült, akkor voltak olyan megyék, ahol nem kellett autópálya matricát vásárolni ahhoz, hogy az adott autópályát használhassák. Az alkalmazásban ezek a megyék csíkozott színezést kaptak (2. képernyőkép).

A UX tervezés eredményeként egy letisztult, a felhasználók által vizuálisan jól értelmezhető oldal került kialakításra. A felhasználó első pillantásra tudja, melyik gépjárműre és melyik megyére van érvényes matricája. Könnyen elérhető számára a gépjárművek közötti váltás, valamint a gyors matrica vásárlás lehetősége.

Az autópálya matrica vásárlás képernyőn is csak a legszükségesebb adatokat kell a rendszer számára megadni. A UX tervezés egyik alapvetése az, hogy a felhasználó megfelelő tájékoztatást kapjon az adott szolgáltatásról. Ezért a képernyő alsó részén egy tájékoztató blokk került, amely pontos információkkal szolgál a felhasználó számára a matrica érvényességéről.

Okos értesítések

A tervezés során gondoltunk arra, hogy az alkalmazás okos értesítést küldjön a felhasználónak abban az esetben, ha változás történik az autópálya matrica érvényességében. Az okos értesítés szövege a lezárt mobiltelefon képernyőjén jelenik meg, ami emlékezteti a felhasználót, hogy hamarosan le fog lejárni, vagy már lejárt az autópálya matrica érvényessége.

A tervezés figyelembe vettük azt az esetet is, amikor a felhasználó elfelejtette korábban megvásárolni az autópálya matricáját, ebben az esetben is értesítést küld az alkalmazás. Az értesítés során lehetőséget biztosítunk a felhasználó számára az új autópálya matrica vásárlásra. A felhasználónak lehetősége van a matricát biztonságosan, gyorsan és egyszerűen hangalapú (Voice) utasításokkal is megvásárolni.

Hangalapú vásárlás

A tervezés során szerettünk volna valami újszerű, innovatív felhasználói élményt, funkcionalitást adni a felhasználóknak, ezért terveztünk egy rövid hangvezérelt (voice) autópálya matrica vásárlási felületet, folyamatot is.

A voice chatbot technológia segíti és lehetővé teszi a hangalapú utasításokkal való vezérlést, így ebben az esetben lehetőséget biztosít az autópálya matrica biztonságos vásárlására vezetés közben. A hangalapú vásárlás során a felhasználónak elegendő kihangosítani a mobilkészüléket és nem szükséges használni a kezeit vezetés közben ahhoz, hogy új matricát vásároljon.

A hangalapú vezérlés technológia egyre nagyobb hangsúlyt kap a különböző pénzügyi szereplők, bankok mobil alkalmazásokban bizonyos folyamatok támogatásában. A funkció működését és felépítését tekintve ugyanolyan, mint a Google Assistant vagy az Amazon Alexa. A felhasználónak lehetősége van menet közben egyszavas vagy rövid, néhány szavas utasításokkal matricát vásárolni. A felhasználói visszajelzések a voice vásárlás folyamatával kapcsolatban, nagyon pozitívak voltak.

Úgy gondolom, hogy összességében egy újszerű és innovatív felhasználói élményt adó és felhasználóbarát mobil alkalmazást sikerült készíteni, amely eleget tesz a feltételeknek, sőt még egy kicsit tovább is mentünk. A voice technológia remek lehetőséget ad az ehhez hasonló funkciók gyors és egyszerű használatára.

Érdemes lenne a pénzügyi szereplőknek, bankoknak ezzel a technológiával foglalkozni? Véleményünk szerint igen. Az ilyen rövid folyamatokra megéri az anyagi befektetés és az erőfeszítés, hiszen a felhasználók egy csoportjának megkönnyíti a mobilalkalmazás által nyújtott szolgáltatás használatát. A voice technológia használata a banki alkalmazások terén nagyban hozzájárulhat a felhasználói élmény növelésében.

Az Ergomaniánál hiszünk abban, hogy a voice technológia elterjedése segít az online szolgáltatások akadálymentes és egyszerű használatában. Amennyiben érdeklődik a voice technológia által nyújtott lehetőségekről a Voice Bank White Paper-ünkben részletes és átfogó információkat talál a témával kapcsolatban.

A tapasztalatunk szerint és a felhasználói visszajelzések alapján a pénzügyi szereplőknek, bankoknak érdemes lenne több kiegészítő szolgáltatást építeni a mobilbank alkalmazásaikba. Valamint ajánlatos lehet a voice technológia minél szélesebb alkalmazása a digitális bankolás és a banki szolgáltatások területén.