Seznamte se s novou mobilní bránou
V posledním roce jsme pracovali na tom, abychom uživatelům brány co nejvíce usnadnili placení na mobilních zařízeních.
Teď konečně nastala chvíle, kdy novou mobilní bránu vypouštíme do světa.
V čem je jiná než její předchůdkyně, jak probíhal vývoj a čím jsme se řídili při jejím vzniku?
Než se pustíte do čtení, prohlédněte si, jak nová mobilní brána vypadá, abyste věděli, o kom je řeč.
Proč jsme se rozhodli mobilní bránu redesignovat
Už nějakou dobu na datech z platební brány vidíme, že počet mobilních plateb pořád stoupá.
Zatímco v roce 2017 proběhlo z mobilu 28 % všech plateb, v roce 2019 to bylo už 44 %.
V letošním roce je to dokonce 47 %. Předpokládáme, že do konce roku, nejpozději během roku příštího, počet mobilních plateb zcela dožene platby prováděné ze stolních počítačů.
Že se nejedná jen o dočasný trend typický pro GoPay platební bránu, ukazují i čísla celého e-commerce trhu.
Začali jsme tedy přemýšlet, jak jít tomuto trendu naproti a jak vylepšit placení z mobilu tak, aby bylo jednoduché, příjemné a aby zákazníky motivovalo platbu dokončit.
Jaké metody a zdroje jsme při designu nové mobilní brány použili?
Best practices
Prošli jsme rady a zkušenosti UX a UI expertů na design formulářů a konverzní optimalizaci online plateb.
Vycházeli jsme především z analýz Nielsen Norman Group a z článků dostupných na platformě Medium.
Zahraniční konkurence
Tak trochu jsme zabrousili do zahraničí, abychom se podívali, jak to dělají ti nejlepší v oboru. Vzorem nám byly světoznámé platební brány a fintechy.
Veřejné výzkumy
Zajímalo nás, co říkají publikované výzkumy o nákupním chování Čechů online z posledních 5 let.
Pozitivní je, že průzkumy o české e-commerce jsou na internetu publikované každou chvíli, nemusíte si tedy platit předražené analýzy nebo je shánět po všech čertech.
Google Analytics
Ponořili jsme se do hlubin Google Analytics, abychom si prohlédli průchod procesem placení, zejména u plateb prováděných z mobilních zařízení.
Práce s vlastními daty je samozřejmě alfa a omega každého, kdo provozuje nějakou webovou stránku a podniká online.
Kdykoliv budete analyzovat chování vašich zákazníků nebo navrhovat produktové novinky pro váš e-shop, nezapomeňte se podívat do géáček.
Uživatelské testování
V roce 2017 jsme provedli rozsáhlé uživatelské testování brány. Výsledky, včetně zpětné vazby, jsme vzali do úvahy.
Co jsme se rozhodli změnit?
Výše uvedené metody nám ukázaly oblasti, na které se při redesignu nové mobilní brány bylo třeba zaměřit.
O co konkrétně šlo?
UI prvky
User interface, tedy uživatelské rozhraní, zahrnuje veškeré viditelné prvky, se kterými uživatel na dané webové stránce nebo aplikaci interaguje. Patří sem velikost a typ písma, tvary, barvy a velikost geometrických prvků (tlačítka, řádky, apod.).
Pro nás bylo stěžejní navrhnout lepší rozložení tlačítek a dalších prvků. Při průchodem platební bránou je důležitá velikost písma (protože uživatel musí opisovat spoustu údajů z platební karty) a také tlačítka, kterými uživatel platbu potvrdí.
Chtěli jsme, aby formulář brány byl co nejvíce intuitivní a zároveň aby bylo snadné se placením na mobilu jednoduše proklikat.
Použitelnost pro zákazníky nad 45 let
Z testování nám vyšlo, že skupina zákazníků nad 45 let má až o 20 % větší míru odchodů z brány uprostřed platebního procesu.
Může za tím být celá řada důvodů – nečitelné písmo, nesrozumitelné textace, chybějící znalost online placení…
Optimalizace pro malé displeje
Zjistili jsme, že čím menší displej, tím větší riziko, že zákazník z platebního procesu odejde. Tohle ale může mimochodem platit i pro e-shop, který není optimalizovaný pro mobily.
Předchozí verze brány měla několik zásadních nedostatků, které uživatele malých mobilních telefonů odrazovala – malá čísla, málo viditelné tlačítko k funkci placení, chybějící počet kroků k dokončení platby, spousta údajů k vyťukání v jednom kroku…
Tohle všechno není příjemné na normální velikosti displeje, natož na displeji menším. Z dat jsme zjistili, že až 7 % návštěv probíhá ze zařízení s malými rozměry. Téměř třetina těchto návštěv končila odchodem z platebního procesu.
Protože na mobilu jsou uživatelé obecně méně trpěliví, rozhodli jsme se zadávání údajů z karty rozdělit do více kroků.
Optimalizace pro bankovní platby
Platby bankovním převodem je kapitola sama pro sebe. Být přesměrován z brány do mobilního bankovnictví snad nikdy nebude úplně stoprocentně jednoduché a příjemné.
Z analýz jsme zjistili, že zákazníci, kteří si k zaplacení zvolili bankovní převod, měli problém s tím, že neobdrželi žádné instrukce, co a jak bude následovat. V kombinaci s chybějícími logy bank se zákazníci v nabídce bank těžko orientovali.
Rozhodli jsme se platbu bankovním převodem zjednodušit. Přidali jsme instrukce, jak zaplatit nákup a srozumitelnější popisky potvrzovacích tlačítek.
Na co se v nové mobilní bráně můžete těšit?
Kromě vylepšeného designu, srozumitelnějších textací a dalších vylepšení jsme do nové mobilní brány přinesli pár vychytávek.
Jednodušší uložení karty
Uložení karty je prima funkce, která zákazníkům umožňuje, aby si uložili do brány údaje své karty. Díky tomu nemusí při dalším placení údaje znovu opisovat, brána jim je po přihlášení zobrazí. Uložení karty používá 24 % zákazníků, kteří přes bránu pravidelně platí.
Stávající desktopová brána nabízí uložení karty před provedením platby.
Při placení na mobilu je ale extrémně důležité, aby zákazníky během platby nic nerozptylovalo. Proto nová mobilní brána nabízí uložení karty až po provedení platby.
Přihlášení k uložené kartě při následující platbě probíhá standardním SMS ověřením.
Větší přehled o uložených kartách
Často jste nám psali, že jste zvyklí platit více kartami a že se v nich na platební bráně nevyznáte.
Na nové mobilní bráně si karty můžete pojmenovat (např. Firemní karta, Provozní karta, Na online nákupy, apod.) a přidělit jim i barvu.
Kdy novou verzi mobilní brány uvidíte na vašich přijímačích?
I když jsme o nové mobilní bráně mluvili už loni, vlivem dalších neodkladných projektů jsme ji stihli dokončit až letos.
Poslední 2 měsíce novou mobilku intenzivně testujeme a ladíme k (téměř) dokonalosti.
Počítáme, že 1.6. ji spustíme plošně u všech obchodníků GoPay.
Do budoucna plánujeme novou mobilní bránu vylepšit. V nejbližší době chceme:
- zobrazovat na bráně logo e-shopu, jako to dnes umí desktopová verze
- umožnit uživatelům nastavit pořadí uložených karet
- přidat platební metodu Apple Pay
Už teď si ale novou mobilní bránu můžete na svém mobilním zařízení projít a proklikat na naší testovací bráně.
Dejte nám vědět, jak se vám líbí.
28.05. 2020 at 11:31
Pre nás ako užívateľov by bola ešte výborná pomôcka to že nemusíme zadať securid kód na potvrdenie platby. Stane sa totiž niekedy že pri prekliknutí medzi aplikáciou pre správy a mobilnou bránou to spadne.
Vaša mobilná brána by si securid kód mala vedieť sama načítať po doručení SMS.
To by ste potom boli najlepší frajeri a machri.
01.06. 2020 at 09:23
Dobrý den, Juraji,
možná bychom byli ti největší machři, ale porušili bychom asi sto padesát tisíc bezpečnostních nařízení. 3D Secure kód musí zadávat sám uživatel, jinak by toto ověření nedávalo smysl.
Pokud se vám stane, že při přepisování kódu brána spadne, napište nám na podpora@gopay.cz a kolegové to prověří.
Hezký den.
Karin | GoPay
14.10. 2020 at 17:15
Dobrý den, celá brána na mobilu je dokonalá, až na její poslední krok, který je naopak naprostá šílenost. Dlouhé roky jsme používali konkurenční platební bránu, minulý měsíc jsme přešli na tu na Vaši, která je ve všem o třídu lepší, přehlednější a svižnější než ta druhá. V čem je tedy ten NAPROSTO ZÁVAŽNÝ PROBLÉM? V posledním kroku po úspěšném zaplacení (viz https://site.gopaycdn.com/blog/wp-content/uploads/2020/05/screny-gopay-12-1.png ) se místo ZCELA BĚŽNÉHO přesměrování zpět na eshop, NAPROSTO NEVHODNĚ zobrazí hláška o zapamatování karty. Pokud zákazník na této stránce SÁM neklikne na tlačítko „Zpět na eshop“ (které je navíc na menších displejích k zobrazení až po scrolování!!!), tak se nedostane na poslední tzv. děkovací stránku eshopu, kde je nasazen skript Google Analytics a tím pádem se transakce do GA nepřenese. My jsme po přechodu na vaši bránu tímto přišli o cca 22% veškerých objednávek, které se kvůli tomu do GA prostě nezaznamenaly, což dělá několik milionů měsíčně a naprosto výrazným způsobem znehodnocuje vyhodnocování investic do reklamy a dalších analýz. Řešení je jednoduché: po úspěšném zaplacení automaticky ihned přesměrovat zpět na eshop a zároveň zákazníka o přesměrování informovat!!! Desktop je v tomhle ohledu řešený lépe, ale také to není ono. Po úspěšném zaplacení se zde zobrazí zelené pole „Zaplaceno“. Od tohoto momentu však trvá 3 vteřiny, než se začne stránka přesměrovávat na eshop. Jednoduše zde chybí jakákoliv zmínka (na rozdíl od ostatních platebních bran), ať zákazník vyčká na přesměrování zpět na eshop. Pokud je totiž zákazník zbrklý či netrpělivý (a není jich málo) a po dobu tří sekund vidí jen pole „zaplaceno“ může se rozhodnout okno zavřít a tím opět již nikdy nedojde k zobrazení děkovací stránky na eshopu a transakce se opět nepřenese do GA. Řešení zde znamená zkrátit dobu, kdy se „nic neděje“ a hlavně informovat zákazníka, že má sice zaplaceno, ale ať vyčká pro úspěšné dokončení objednávky. Je to naprosto zásadní věc a doufám, že bude rychle opravena, abychom nemuseli přecházet ke konkurenci.
15.10. 2020 at 10:15
Dobrý den, Tome,
děkujeme vám za zpětnou vazbu na novou mobilní bránu. Jsme rádi, že jste minulý měsíc přešli k nám a jste spokojení.
Teď k vašim poznámkám a postřehům:
1. Výzva k uložení karty v posledním kroku po zaplacení je zcela záměrná. Chceme, aby si platící uživatel kartu uložil a při příští platbě nemusel opisovat číslo karty a zadávat další údaje. Celý proces platby se tak výrazně zjednoduší a smrskne jen na několik tapnutí, což je naším záměrem – udělat platby co nejsnazší.
2. Přesměrování na stránku e-shopu proběhne automaticky cca do 30 vteřin, pokud uživatel zůstane na poslední stránce platby a je neaktivní. Co se týče desktopu, je pravda, že zde chybí nějaká hláška o vyčkání na přesměrování.
Nad vašimi postřehy se zamyslíme a mrkneme se, co bychom mohli případně vylepšit, aby poslední krok platby probíhal co možná nejsrozumitelněji.
Hezký den.
Karin | GoPay
19.04. 2021 at 12:53
[…] Novinkou GoPay je mobilní brána, která přináší přehlednost a rychlost i na mobilní zařízení. Důvod pro mobilní bránu byl jasný. Prudký růst mobilních nákupů – od roku 2017, kdy proběhlo z mobilu 28 % plateb, po rok 2021, kdy je zatím 47 % plateb z telefonu.Více o mobilní bráně GoPay zde. […]
04.05. 2021 at 07:16
[…] počítače, ustupuje. Tomuto trendu jsme se rozhodli jít naproti, a proto loni nasadili úplně novou mobilní bránu, navrženou speciálně pro mobilní […]