Mobile in-app payment Workshop
Fülöp Ákos UX Strategist
Kovács Dávid Chief Technology Officer
Tartalom UX Tech+UX 12:30 Tech+UX Tech+UX Tech UX Supercharge
Bevezetés In-App vásárlás Ebédszünet Digitális bankkártyás fizetés Mobiltárca Egyéb lehetőségek Pénzügyi appok tervezése 2
Mobil UX Bevezetés
Supercharge
3
Mi az a User Experience (UX)? • Felhasználói élmény (UX): Egy felhasználó minden élménye, tapasztalása, benyomása egy digitális termék kapcsán • Ügyfélélmény (CX): tágabb fogalom, ami a termékkel, vagy cégünkkel kapcsolatos minden touch pointra kiterjed
Supercharge
CX (Ügyfélélmény)
UX (Felhasználói élmény)
4
Rombol: ha frusztrációkat okoz és nem tükrözi a cég/termék értékeit
Supercharge
Épít: ha pozitív élményeket társít a termékhez.
5
A UX optimalizálása befektetés, konkrét megtérüléssel + Márkaérték + Vásárlók
+ Konverzió
Felhasználói élmény legfontosabb építőelemei • Hasznosság (Utility): mennyi értéket teremt a felhasználónak, milyen valós igényeket old meg • Használhatóság (Usability): mennyire könnyen éri el a felhasználó a céljait a termék használata során. Mennyire könnyű, kényelmes használni. • Tanulhatóság (Learnability): Mennyire könnyen tanulja meg a felhasználó a termék kezelését, milyen könnyen veszi használatba. • Vonzóság (Desirability): Mennyire vonzó a termék, mennyire hat pozitívan az érzelmekre, mennyire köti le a felhasználót Supercharge
7
Felhasználó központú tervezés: a felhasználó igényeinek középpontban tartása a tervezés minden lépése során.
Felhasználó központú tervezés folyamata
UX Stratégia
Üzleti probléma elemzése
Felhasználói kutatás
UX és UI Design
Prototipizálá s
Architekturális tervezés és specifikálás
Agilis fejlesztés folytonos felhasználói tesztekkel
Supercharge
10
Stratégia hosszútávú cselekvési terv egy bizonyos cél elérése érdekében.
Supercharge
11
Üzleti célok Felhasználók céljai
UX Stratégia
Sales stratégia
Termék stratégia
Marketing stratégia
Az UX stratégia végső célja nem egyszerűen a lehető legjobb felhasználói élmény nyújtása. Az UX stratégia célja a szervezetnek hosszútávon legelőnyösebb felhasználói élmény tudatos elérése.
Supercharge
14
Honnan tudjuk mit akar a felhasználó? Kutatunk.
Mit csinál? Viselkedés elemzése.
Miért csinálja, mit gondol? Kvalitatív kutatások.
KVANTITATIV ADATOK
KÉRDÉSEK
KVALITATIV ADATOK
KÉRDÉSEK
UX DESIGN
Supercharge
16
Kik vesznek részt a “UX-elésben?” •
User Researcher: Kutatásokat végez felhasználókkal, és az eredményeket elemzi, javaslatokat teszt
•
UX Stratéga: a termék UX stratégiájának, alapvető céljainak lefektetéséért felel
•
UX Designer: A felhasználói élmény tervezéséért felel, kialakítja a termék konkrét felépítését, funkcionalitását, működését. Fő eszköze a wireframelés.
•
UI Designer: A konkrét felhasználói felület vizuális megtervezését végzi, usability szabályok figyelembevételével
•
A fejlesztők, a Project Manager, a Product Owner, a Product Manager, a Marketinges, Stakeholderek…
Alap UX szabályok • • • • • • • • •
Egyszerűség Egyértelműség Emberi kommunikáció Konzisztencia Világos navigáció (logikus, felfedezhető) Kontroll érzet megteremtése Visszacsatolás, megerősítés Gyorsaság Érzelmekre hatás
Supercharge
18
In-App vásárlás
Alapfogalmak • Kliens (mobilalkalmazás) – Telefonon futó program, amit a felhasználó nyomkod – Új verzió kiadása (release) az alkalmazásbolton keresztül történik • Backend (szerver) – Saját tulajdonban lévő szerver – Dinamikus tartalom kiszolgálása, fiókok kezelése, stb. • Alkalmazásbolt – Platformonként különböző (App Store, Google Play) – Platformtulajdonos hozza a szabályokat Supercharge
20
In-App vásárlás – Alapok • Mit értünk alatta? – Alkalmazásbolton keresztül történő fizetés – Fizetési információt nem tárol az app – Pénzügyi tranzakció az appon belül nem történik – Számlázást az Apple/Google végzi • Terminológia – Apple: “In-App Purchase” (IAP) – Google: “In-app Billing” (IAB)
Supercharge
21
In-App vásárlás – Alapok • Ki használhatja? – Apple: bárki – Google: országokra limitált (lásd később) • Mennyibe kerül? – Általánosan 30% jutalék – Drága, de sok esetben kötelező • Mindig az alkalmazásboltban kerülnek beállításra – AppStore / Google Play felületen
Supercharge
22
In-App Purchase Egyszeri vásárlás
Előfizetések
Egyszer használato s
Consumable
Non-renewing
Többször használato s
Non-consumable
Auto-renewing
+ Promo codes Supercharge
23
Hova illik? Termékek Consumable
Egyszer használato s
+100 játékpénz
Non-consumable
Többször használato s
Supercharge
Előfizetések Non-renewing
egy év VoIP szolgáltatás
Auto-renewing
reklámok levétele
havi magazinelőfizetés
prémium verzió
audio streaming szolgáltatás
24
In-app Billing Egyszeri vásárlás
Előfizetések
Managed In-app Product
In-app Subscription
+ In-app Promotions Supercharge
25
Mire vonatkozik? • Explicit tilos – Appon belüli digitális tartalom engedélyezése más módszerrel mint IAP – Fizikai termékekre és szolgáltatásokra, amiket az appon kívül használunk
• Kötelező – IAP-pal vett extra kreditet, életet, stb. az appon belül kell elhasználni (nem visszaváltható)
• Lehetséges – Külső szolgáltatással fizetni, amíg nincs közvetlen link Supercharge
26
Mire vonatkozik? • Explicit tilos – Appon belüli digitális tartalom bármi más módszerrel mint IAB – Fizikai termékekre és szolgáltatásokra
• Kötelező – “Game” kategórián belül minden tranzakcióra IAB – Minden más kategóriában szintén, kivéve tiltottak
Supercharge
27
Megkerülhetem…? Kötelező
Nem kell / Tilos
virtuális pénz
fizikai termék
prémium verzió
előfizetéses szolgáltatás (feliratkozás appon kívül)
előfizetéses szolgáltatás (feliratkozás appon belül)
szolgáltatási díj (pl. taxi)
Ökölszabály: ha ember részt vesz a szolgáltatásban → nem kell/tilos Supercharge
28
Geo kötöttségek • Apple Developer Account (magánszemélynek ingyen) • Cégeknek $100 • Minden országban, ahol az AppStore elérhető
Supercharge
• Google Developer Registration (bővebb, $25) • Google Merchant Registration (kötöttebb, ingyenes) • Fejlett országok, EU, kivétel: – – – – –
Albánia Bosznia-Hercegovina Horvátország Szerbia Szlovénia 29
Implementáció • Rendszerbe épített megoldások mindkét platformon • Elvi folyamat: 1. Felhasználó meg szeretne venni egy terméket 2. Azonosítja magát az alkalmazásbolt felé Csak kliens
Kliens + backend
3. Az alkalmazás ellenőrzi a blokkot (receipt)
3. Az alkalmazás elkéri a backendtől a terméket
4. Felhasználó megkapja a terméket
4. Backend ellenőrzi a blokkot (receipt) 5. Felhasználó megkapja a terméket
Supercharge
30
Implementáció • Restore purchases (visszaállítás) – Olyan funkció, ami lehetővé teszi a korábbi vásárlások visszaállítását – Nekünk kell leprogramozni az alkalmazásban • Receipt validation (blokk ellenőrzés) – Blokk tartalmazza: ki vett, mit vett, mikor vett – Ellenőrizni kell (app-ban vagy szerveren) – Kötelesség és felelősség: mindenki hozzáférjen (csak) ahhoz amit megvásárolt Supercharge
31
vs • Egységesedett szabályozás – Appen belül használt digitális tartalmakra kötelező az in-app vásárlás
• Nagyjából azonos funkcionalitás – Jelenleg több funkció Google-nél (korábban épp ellenkezőleg)
• Azonos 30%-os jutalék
Supercharge
32
Mi lehet a célja az app tervezőinek? Merre akarják terelni a felhasználót ezzel a kezdőképernyővel?
Supercharge
33
Supercharge
35
Miért “játékpénzt” lehet venni, és nem konkrét tartalmat?
UX szabály: a felhasználónak éreznie kell a kontrollt
Supercharge
38
Fontos UX alapelvek, amiket In-App vásárlás tervezésénél figyelmbe kell venni • • • •
Egyértelműség Kontroll érzet megteremtése Érzelmekre hatás Visszacsatolás, megerősítés
Digitális bankkártyás fizetés
Alapfogalmak • Vásárló • Kereskedő – Aki a termékeket árusítja (pl. mobilapp) • (Payment) Gateway – Fizetési adatok célba juttatása • Acquirer – A bankkártyás fizetést lebonyolító pénzintézet Vásárló
Supercharge
Kereskedő
Gateway
Acquirer
Kártyaszolg
41
De miért nem közvetlenül? Vásárló
Kereskedő
Gateway
Acquirer
Kártyaszolg
• Acquirer – kizárólag pénzintézet lehet – hatalmas volumen – pl. FirstData, Chase (US), Santander, Erste, OTP • Gateway – Acquirer-rel kell szerződni – Bankkártyadatok kezelése → PCI-DSS compliance Supercharge
42
Fizetési modellek Hány és melyik szereplő rendelkezik a vásárlási adatokkal? Vásárló
Kereskedő
Gateway
Háromszereplős modell rendelés információ
kártyaadatok
Kétszereplős modell rendelés információ kártyaadatok Supercharge
43
Gateway funkciók • Bankkártya elfogadás (Acquirer-en keresztül) • Kártyaadatok mentése/tárolása (opcionális) • Több fizetőfelület aggregálása • Ismételt fizetés (recurring payment) • Biztonsági elemek (titkosítás, tokenizáció, stb) • Kereskedői / felhasználói támogatás (support) • Flexibilis kifizetési módok Kereskedő felé – Akár azonnali kifizetés is
• Változó jutalékok Supercharge
44
Gateway integráció – Fogalmak • Mi az API? – Szabályrendszer és megvalósítás, ami leírja hogy milyen módon lehet programozottan kommunikálni (funkciókat elérni) egy külső szolgáltatással
• Mi az SDK? – Olyan programcsomag, ami lehetővé teszi egy külső szolgáltatás beépítését az alkalmazásba – Általában használja a külső szolgáltatás API-ját
Supercharge
45
Gateway integráció – Fogalmak • Mi a WebView? – Olyan komponens a mobilappben, ami lehetővé teszi egy weboldal megjelenítését – Mini böngészőablak
• Mobilra optimalizált weboldal? – Weboldal, ami kis képernyőn megjelenítve is jól mutat – Nem csúszik szét, jól olvasható, stb.
Supercharge
46
Gateway integráció – WebView • Standard webes fizetési felület betöltése • Nem testreszabható, a Gateway arculatát követi • Ha nem mobilra optimalizált → rossz UX • Egyszerűen megvalósítható – Az alkalmazás tud kommunikálni a WebView-ban futó weboldallal
• Kevés biztonsági kockázat, mi nem kezelünk és tárolunk kártyaadatokat • → PCI compliance SAQ Type A Supercharge
48
Gateway integráció – API • Az alkalmazásból kommunikálunk a Gateway szerverével (API) • A felület olyan, amilyet csak szeretnénk • Nincsenek kész megoldások, pl: – API helyes használatára – Begépelt adatok validálására (hibás kártyaszám, stb).
• Kártyaadatok átfolynak rajtunk → PCI compliance – Ebben az esetben SAQ Type A-EP Supercharge
49
Gateway integráció – SDK • Kliensoldali programrész, ami a Gateway APIval kommunikál → levesz a vállunkról terhet • Kész megoldásokat ad(hat), pl: – Helyes API kommunikációra – Előre elkészített beviteli mezők (pl. átugrik) – Beépített validációk (pl. rossz kártyaszám)
• Nem 100%-ban testreszabható • Bevitt adatokat csak SDK kezeli → SAQ Type A Supercharge
50
WebView / API / SDK 100% egyedi UX
Egyszerűen beépíthető
Kényelmi funkciók
PCI compliant
WebView
✖
✔
?
✔
API
✔
✖
✖
?
SDK
✖
✔
✔
✔
Supercharge
51
Milyen fizetési megoldást integráljunk az appunkba? Külső felület Előnyök: megbízhatóság érzete, megszokott Hátrányok: nem érződik az app részének, wow érzés hiánya, nehézkes, töltést igényel
SDK, sztenderdizált felülettel Előnyök: megbízhatóság érzete, ha ismeri, nem tölt Hátrányok: nem érződik az app igazi részének, wow érzés hiánya, SDK/API saját felülettel Előnyök: az app részének érződik, wow érzet, nem tölt Hátrányok: több fejlesztés kell Supercharge
52
Külső felület, webview
Supercharge
53
SDK sztenderdizált felülettel
Braintree Supercharge
54
SDK sztenderdizált felülettel
Stripe Supercharge
55
SDK Apphoz alakított felülettel
Supercharge
56
Biztonság – Alapok • Kliens (mobilalkalmazás) – Hardver hozzáférhető a felhasználó számára – Nem biztonságos
• Backend (szerver) – Hardver nem hozzáférhető – A biztonság csak rajtunk múlik – SSL certificate: • Megbízható fél által kiállított tanúsítvány a kliensszerver vagy szerver-szerver kommunikációhoz Supercharge
57
Biztonság – Tokenizáció • Gateway – Tartozik hozzá Kereskedő-szintű felhasználónév/jelszó páros – Ez azonosítja a Kereskedőt fizetéskor
• Biztonsági szintek – Kliens → nem biztonságos → jelszót nem tárolhat – Backend → biztonságos → tárolhatja mindkettőt
• El kell szeparálni a kártyaadatok beküldését és a fizetést Supercharge
58
Biztonság – Tokenizáció Payment Gateway GW felh.név/jelszó kártyaadatok ←→ token
Kliens
Backend (3)
GW felh.név
összeg
GW felh.név/jelszó token összeg
Supercharge
59
Mobiltárca
Mi a mobiltárca? • Fizikai pénztárca kiváltása – Azonosításra alkalmas elemeket tartalmaz (pl. bankkártyák, igazolványok, jegyek, stb) – Fizikai kártyák “belehelyezhetők”
• A mobiltárca (wallet) olyan alkalmazás, amely – külső félnél azonosításra (fizetésre) használható • pl. Android Pay, Apple Pay, Samsung Pay, Barion
– közvetlenül terméket vásárlását teszi lehetővé • pl. Simple, NMR, Barion Supercharge
61
Technikai megvalósítás • Hol tárolódik a behelyezett kártya? – Tárolhatja a tárca kibocsátója (PCI compliance) – Vagy szintén működhet okos Gateway használatával
• Egygombos fizetés – A kártyaadatok tárolásával lehetővé válik nagyon egyszerű fizetési folyamat kialakítása – pl. Uber automatikus fizetés Supercharge
62
Mobiltárca funkciók • Point of Sale (Card Present, proximity payment) – Általában NFC (érintésmentes) – Van kiépített elfogadóhálózat – Mágnescsík emuláció (Samsung Pay) – Pl. Apple Pay, Android Pay
• P2P pénzküldés – Azonos szolgáltatást használók között – Pl. Barion
Supercharge
63
Mobile Wallet funkciók • Más appból történő fizetés – A WebView-s megoldás szofisztikáltabban – Általában web-alapú megvalósítás, ha nincs feltelepítve az app
• Tárcába épített szolgáltatások – Közvetlen integráció a tárca és a szolgáltatás között → egyszerű használat – Pl. mozijegyrendelés, parkolás, e-matrica Supercharge
64
Mobile Wallet felhasználói szemszögből • A mobile wallet igazán akkor valósul meg, ha a felhasználó otthon hagyhatja a pénztárcáját, benne a bankkártyájával és a telefonjával elboldogul: • Az online vásárláskor • És a fizikai vásárláskor • Mi hiányzik ehhez: kellően széles körben elfogadott megoldások • Nem minden telefon NFC képes, nem minden kereskedő fogadja el • Eredmény: felhasználó nem hagyhatja otthon a tárcáját Supercharge
65
Barion iBeacon és arcfelismerés
Supercharge
66
Egyéb lehetőségek
Egyéb lehetőségek • Emelt díjas SMS – Telefonszámlára megy – Szolgáltatói oldalon tiltható (nagyrészt tiltva is van)
• Direct Carrier Billing – Szintén a telefonszámlán jelenik meg – Szolgáltatónként külön-külön integráció – 3G/4G hálózaton van lehetőség automatikus azonosításra telefonszám alapján → UX
Supercharge
68
Egyéb lehetőségek • Bitcoin – Banki infrastruktúrától független (peer-to-peer) – Azonnal jóváíródó tranzakciók (5-10 perc) – “Bitcoin Wallet” alkalmazások használatával
Supercharge
69
Pénzügyi appok tervezése
Mitől más a mobil UX? • Ugyanazok az alapelvek de más felhasználói hozzáállás, elvárások és kötöttségek • Kis képernyő: kevés hely, nagyon fókuszáltnak kell maradni a tervezésnél, más ergonómai szabályok fontosak • Változatos felhasználói környezet, mobilitás: jobb kezelőfelület kell • Magasabb elvárások: “elkényeztetett” felhasználók, alacsony váltási költségek • Személyes eszköz: személyesebb hangvétel és élmény • Rengeteg új lehetőség az eszköz képességei miatt: giroszkóp, gyorsulásmérő, GPS, kamera • Erős platform függő UI tervezési szabályok Supercharge
71
Platform függő design szabályok
Material Design Human Interface Guidelines
Supercharge
Windows Universal Platform
72
Supercharge
Material Design
73
Milyen szabályok vonatkoznak egy pénzügyi alkalmazásra?
Ugyanazok. Supercharge
74
Mitől más a pénzügyi szolgáltatások digitális piaca? • Továbbra is a nagy hagyományos szereplők (bankok, bankkártya cégek) vannak nyeregben, nem start-upok • A felhasználók itt a nagyon óvatosak, hiszen a pénzükről van szó • Biztonság kiemelt szempont, sok megkötéssel • Hatalmas meglévő pénzügyi infrastruktúrák nehezítik az innovációt. A legtöbb IT projekt nem indul “tiszta lappal”
A pénzügyi piac az, ahol a hagyományos szereplők feladata szintet lépni felhasználói élmény tekintetében. Ez hatalmas lehetőség is. Supercharge
76
Self-care alkalmazás vs. M-commerce alkalmazás • Self-care alkalmazás: olyan funkciók ellátására szolgál, amiket hagyományosan a fizikai ügyintézés során végzett el a felhasználó – A motiváció és a cél jellemzően adott – A feladat, hogy ezek a célok könnyen, és jó élményekkel legyenek elérhetőek – Lehetőség a brand emberibbé tételére • M-commerce alkalmazás: valaminek a megvásárlására pénzt költ a felhasználó – A motivációs szint változó – A motivációs szintet folyamatosan fent kell tartani, erősíteni kell
Supercharge
78
1. Fékezzük meg az adatéhségünket. Biztos kell az a mező? Mi a kedvenc ételed?
2. Szükség van az erős jelszóra? PassWord123_@_123
3. Jelszó megerősítése helyett jelszó megjelenítése. __________________
4. Teljesen egyértelmű kérdések, mező elnevezések. Nettó hány forintot keresel havonta átlagban?
5. Segítség annak a felhasználónak, akinek kell, ott ahol kell. ? Nettó hány forintot keresel havonta
átlagban?
6. Csak placeholder sosem elég.
7. Világossá kell tenni, melyik mezőt kötelező kitölteni.
*
8. Férjen bele a szöveg a mezőbe. Ha hosszú a szöveg, nagy mező kell. Vagy dinamikus. Nos, herczeg, Genua és Lucca immár nem egyebek, mint a Bonaparte-család jószágai. Nem, előre is figyelmeztetem, ha nem azzal a hírrel jön, hogy háborúnk lesz, ha még mindig megengedi magának azt, hogy ennek az antikrisztusnak (igazán már magam is kezdem hinni, hogy csakugyan az), minden alávalóságát és rémtetteit védelmezze, - többé nem ismerem önt, és ön nekem többé nem hűséges rabom mint a hogy' mondani
9. Ha jó eséllyel tudjuk, mit fog választani, írni a felhasználó, válasszuk ki előre. Beleesel a nő vagy férfi kategóriába? Igen
Nem
10. Mindig olyan mezőt használjunk, ami a legkényelmesebb az adott feladathoz. Igen Nem
11. Ki tudjuk tölteni a mezőt a mobil képességei miatt?
Hova rendelsz: Budapest
12. Ki tudjuk tölteni korábban megadott információ alapján?
Irányítószám: 1075 Város: Budapest
13. Gépeljünk a felhasználó helyett! Város Bu Budapest
14. Kezeljünk le mindenféle formátumot, ne a felhasználó igazodjon hozzánk. 063012312312 00363012312312 +363012312312 3012312312
Köszönjük a figyelmet!
Fülöp Ákos
Kovács Dávid
UX Strategist
[email protected]
Chief Technology Officer www.supercharge.io
[email protected] o
