Seznamte se s novou mobilní bránou

27. 05. 2020

Aktuality

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čů.

Co je mobilní brána?
Mobilní platební brána je vlastní platební rozhraní, vytvořené speciálně pro mobilní zařízení. Nejedná se tedy o pouhou responzivitu desktopové verze, ale o speciální design. Platby probíhají po technické stránce stejně, jako u verze desktopové.

Ž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.

Jak koronavirus změnil nákupní chování Čechů na internetu?
Prošli jsme e-shopy, které používají naši platební bránu a zjistili jsme zajímavá data o vývoji nákupních preferencí z doby, kdy začínala karanténa a další vládní opatření.

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.

Jak provádět uživatelské testování snadno, rychle a za minimální náklady?
Přečtěte si rady ostříleného UX designera Honzy Junka.

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.

Obrázek staré mobilní brány

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.

Do nové platební brány jsme přidali instrukce k bankovnímu převodu

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í.

O čem jsme ještě psali

Karin Hambalíková

Karin je obsahová duše, která se podílí na psaní příběhů v GoPay.