fbpx

Efektivní registrace – 14 doporučení a příklady

Registrovaný zákazník vám víc vydělá.

Protože:

  1. Víte o něm více informací.
    (e-mail; po první objednávce adresu, oblíbenou dopravu a platbu; po druhé objednávce co a jak často kupuje).
  2. Lépe si spojíte přístup z více jeho zařízení nebo jednotlivé návštěvy webu.
  3. Můžete mu nabízet relevantnější produkty a služby.
  4. Lze ho lépe (a déle) AB testovat nebo zjistit, jak je citlivý na cenu.
  5. Nemusí vás tolik zajímat cookies.
  6. Jednoduše mu pošlete newslettery.
  7. A hlavně… to bude zásadní, až vstoupí před Vánoci v platnost zákon o slevách (a nutnosti uvádět nejnižší cenu za posledních 30 dní).

Je proto důležité, aby byla registrace co nejjednodušší. Což ale většina stávajících e-shopů a řešení nebere v potaz.

Alza má například v základu vidět 8 formulářových polí, v maximální variantě jich je 21.

Registrace na Alza.cz

No a teď si to přestavte na mobilu.

14 tipů jak to udělat lépe

1. Ptejte se jen na nejnutnější informace

Jednodušší formulář znamená víc vyplnění. Konkrétně o 5 % víc vyplnění na základě více než 10 AB testů.

Mně se takhle podařilo snížit cenu za poptávku hypotéky o 500 Kč redukcí a optimalizací formuláře.

Chtějte jen data, kterými identifikujete a ověříte zákazníka – přístupové údaje. Což je e-mail a heslo.

Vše ostatní si můžete zjistit později:

  • Adresu(y) a oblíbenou dopravu a platbu z 1. objednávky.
  • Preference a demografii z dotazníku.
  • Historii objednávek z e-mailu – doporučuji si ji pamatovat i u neregistrovaného zákazníka a pak mu ukázat historii objednávek i před registrací.

2. Dejte možnost se registrovat přes sociální sítě

Technicky je to na dvě kliknutí a nevyplňujete žádný formulář!

Registrace přes sociální sítě

Přihlášení přes sociální sítě nepřekvapivě preferují mladší (cca 70 % uživatelů 18–25 let):

Preference registrace přes sociální sítě na základě věku

Co se týče oblíbenosti jednotlivých sociálních sítí, tak USA a Evropa se moc neliší.

V českém prostředí doporučuji:

  1. Google,
  2. Facebook,
  3. Apple,
  4. Seznam.

Naopak mi moc nedává smysl:

  1. Microsoft (zatím je to nezvyk, ale může se to změnit),
  2. MojeID (pro pár nadšenců).

3. Odlište registraci od přihlášení… nebo ne

Donedávna jsem striktně odděloval přihlášení od registrace. Teď se kloním k tomu mít jedno místo pro oboje. Protože se u obou možností ptám na to samé.

Na základě e-mailu zjistím, zda už ho mám v databázi a pokud ano – přihlašuji stávajícího zákazníka, pokud ne – registruji nového zákazníka.

Pokud se rozhodnete to přesto rozdělit, doporučuji na anglicky psaných webech použít spíš Login a Register, než zaměnitelné Sign-up a Sign-in.

4. Ukažte heslo a požadavky na něj

V kostce, protože jsem o heslech psal samostatný článek:

  • Dejte možnost ukázat heslo.
  • Nemějte přehnané požadavky na heslo (ideálně jen délka min. 6 znaků – pokud si neukládáte platební kartu).
  • Ukažte, které požadavky jsem už splnil.
  • Upozorněte uživatele na zapnutý CAPS-LOCK.
  • Při zapomenutém heslu si pamatujte vyplněný e-mail.

Protože tohle nechcete 🙂

5. Neptejte se na nic dvakrát!

Nejčastěji se s tímto neduhem setkávám u hesla. Efektivnější je ale ukázat ikonu oka přímo ve formulářovém poli.

Protože se klidně může stát, že mám omylem anglickou klávesnici, která má prohozené y a z. A heslo sice napíšu do obou polí stejně. Ale pořád si pamatuji jiné heslo, než jsem zadal do systému.

6. Ověřujte přes sms spíš než e-mail

Ověřit si e-mail je sice fajn. Ale znamená to:

  1. Opustit web.
  2. Přepnout se do e-mailového klienta.
  3. Najít tam ten správný e-mail (který může přijít až za pár minut).
  4. Otevřít e-mail a kliknout na potvrzovací tlačítko.

Ano, poprvé je to asi nutnost, ale následně bych už validoval přes sms kód. Existuje i systém, který vám kód v sms automaticky vyplní do toho správného pole.

Stripe ověřovací sms kód

A prosím – dvě věci, které mi hodně ulehčí život:

  1. Kód dejte do textu sms jako první, abych ho viděl už v notifikaci a nenutili jste mě rozklikávat sms aplikaci.
  2. Délka kódu je ideální 4-6 čísel (6 čísel rozdělte mezerou, podobně jako telefon). Ne jako Raifka, která posílá jedenáctimístný kód.

7. Live validace správnosti

Průběžně ukažte uživatelům, že mají správně vyplněné formulářové pole. Ideální je vedle pole zelená fajfka, možná i zelené orámování vyplněného pole.

Zvýšíte si tím dokončení formuláře. Podle Luka Wroblewskiho:

  • 22% zlepšení dokončení formuláře,
  • 22% snížení chybovosti,
  • 31% zvýšení spokojenosti,
  • 42% zrychlení vyplnění formuláře,
  • 47% redukce fixací očí (sakády).

Jen dejte pozor, kdy dochází ke kontrole, občas mě otravuje chybová hláška při psaní nebo nedejbože při kliknutí do pole.

Nic ale není černobílé.

8. Po registraci uživatelé rovnou přihlaste

Tohle mě vždycky vytáčí. Udělám si komplet registraci včetně ověření. A pak se musím znova přihlásit.

Jakmile se zaregistruji, tak mě prosím rovnou přihlaste. Děkuji pěkně.

9. Captcha je (někdy nutné) zlo

Nenuťte uživatele opisovat kódy, řešit početní úlohy ani vybírat, na které fotografii je semafor :).

captcha

Jsou způsoby, které neobtěžují uživatele a zbavují se spambotů. Zeptejte se svého kodéra.

10. Pokud nemusíte, vůbec registraci nechtějte

Zamyslete se, zda registraci potřebujete. Může se stát, že máte jednorázový produkt, který uživatel potřebuje jen jednou za život (vlastní pohřeb). Legrace stranou… určitě je dobré nezačínat samotnou registrací, ale ukázat hodnotu. Například:

  • Vyzkoušení produktu před koupí (demo účet).
  • Ukázat výhody registrace (jednodušší přihlášení, pamatování si adresy, historie objednávek, cena pro registrované).

11. Autofocus na první pole a ukazujte správnou klávesnici

Kurzor rovnou umístěte do prvního políčka. Ušetříte uživatelům trochu námahy (hlavně na mobilu).

Co je ale větší ulehčení je ukázání správné klávesnice. Protože nechápu, proč mám PSČ nebo mobilní číslo vyťukávat na klasické klávesnici – zdravím Mall.cz.

špatná klávesnice při zadávání telefonu a psč u mall.cz

Tady jsou nejčastější typy klávesnice pro mobil:

  • e-mail (ukazuje klávesnici se zavináčem),
  • tel (čísla jako u telefonu),
  • number (numerická klávesnice).

Tady je kompletní přehled.

12. Podmínky nedávejte jako checkbox, stačí text u tlačítka.

Většina formulářů trpí přecheckboxováním. Ale právně stačí pouhý text, který upozorňuje, že kliknutím na tlačítko souhlasíte s xy. A to xy ideálně mějte jako odkaz, ať nejsou právní pindy delší než samotný formulář.

přecheckboxováno

A pokud chcete BENU kartu, tak tohle je ta menší část :).

13. Nemažte formulář po neplatném pokusu

Stává se to ojediněle, ale o to víc vás to naštve. Prosím při odeslání formuláře, kde je chyba nemažte celý formulář. Orámujte chybové pole, dejte pod něj vysvětlení chyby a obsah polí nechte, jak byl.

14. Přihlášení bez hesla

Lidi si hesla nepamatují. Nebo používají stejné heslo pro více služeb. Často je to datum narození, část jména atp. Proč tomu tudíž nejít naproti a heslu se úplně vyhnout.

Firma Slack například používá tzv. magic-link. Prostě vám pošle časově omezený a jednorázový odkaz pro přihlášení do aplikace.

Slack magic link

eBay Craig“s List nebo Bazoš zase posílá sms kódy.

Příklady registrace

Obecně platí, že méně formulářových polí znamená vyšší počet konverzí. Na druhou stranu více vyplněných polí znamená kvalifikovanější uživatel. A hodně závisí i na motivaci uživatele. Znamí hráči si tudíž můžou dovolit mít komplikovanější formulář.

Alza.cz

plná registrace na alza.cz

Dobře:

  • Nutnost vyplnit jen 4 údaje (pokud si všimnete červených hvězdiček bez vysvětlivek).
  • Požadavky na heslo.

Špatně:

  • Ptaní se na heslo dvakrát.
  • Nemožnost ukázat heslo.
  • Délka polí neodpovídá délce obsahu.
  • Podle IČ se nevyplní zbytek firemních údajů.
  • Chybí registrace přes sociální sítě.

CZC.cz

Dobře:

  • Právní pindy v akceptovatelné délce.

Špatně:

  • Pořadí polí. Začal bych jménem, případně e-mailem a heslem.
  • Popisy polí uvnitř polí.
  • Délka polí neodpovídá délce obsahu.
  • Separátně uživatelské jméno, většinou stačí e-mail.
  • Chybí vysvětlivky k polím – např. u telefonu bych rád viděl, k čemu ho bude CZC používat.
  • Chybí registrace přes sociální sítě.

Mall.cz

Mall.cz registrace

Dobře:

  • Rozumná délka registrace.

Špatně:

  • Registrace jen přes jednu sociální síť – Facebook.
  • Právní pindy nad i pod tlačítkem.

Astratex.cz

Dobře:

Špatně:

  • Špatný kontrast tlačítka a nepodtržený odkaz u osobních údajů.

Electroworld.cz

Electroworld registrace

Dobře:

  • Krátký formulář.

Špatně:

  • Ptaní se na heslo dvakrát.

Decathlon.cz

Dobře:

  • Přihlášení přes sociální sítě.
  • Krátký právní text na prvním kroku.

Špatně:

  • Požadavky na heslo.
  • Třetí krok je vlhký sen právníka, ale zajímal by mě odpad v tomto kroku.

Osobně si myslím, že to rozdělení do 3 kroků je spíš na škodu. Testoval jsem to u 2 klientů a u obou to bylo výrazně horší.

Notino.cz

Notino registrace

Dobře:

  • Výhody registrace.
  • Krátký formulář.
  • Indikátor síly hesla.
  • Právničina v rozumné míře.

Špatně:

  • Nemožnost registrace přes socky.
  • Požadavky na heslo schované na hover.

Footshop.cz

Dobře:

  • Výhody registrace.

Špatně:

  • Jméno a příjmení nejsou pro registraci nutné.

Kasa.cz

Kasa.cz registrace

Dobře:

  • Vizuálně krátké.

Špatně:

  • Jméno, příjmení, telefon jsou nenutné informace.
  • Dvousloupcový layout nebývá ideální.

Závěr

Registrace není sběr poptávek, takže tam nejde o kvalitu leadu. Proto bych doporučoval udělat registraci co nejjednodušší. Inspirujte se Astratexem, Notinem a nezapomeňte pár variant přihlášení otestovat.

Přeji vám hodně spokojených registrací.

 

Zdroje:
https://cxl.com/blog/14-steps-to-building-sign-up-forms-that-convert/amp/
https://www.nngroup.com/articles/checklist-registration-login/
https://uxplanet.org/how-to-craft-effective-registration-f27caf633936
https://uxplanet.org/how-to-improve-registration-sign-in-process-9decaeaeefa1
https://usabilitygeek.com/5-registration-form-usability-guidelines/
https://www.niceverynice.com/components-categories/sign-up
https://www.uxpin.com/studio/blog/best-signup-page-examples/
https://www.learnui.design/blog/tips-signup-login-ux.html
https://www.loginradius.com/blog/identity/how-ui-ux-affects-registration/
https://www.loop11.com/15-tips-to-improve-the-ux-of-registration-and-login-forms/
https://cxl.com/blog/form-validation/
https://adamsilver.io/blog/live-validation-is-problematic/

,

2 Responses to Efektivní registrace – 14 doporučení a příklady

  1. Profilový obrázek
    Vojta 23. listopad 2022 at 10:14:13 #

    Ad registrace přes sociální sítě – používá to reálně hodně lidí? Závisí na typu produktu? Eshop vs. třeba pojištění? Sám k tomu mám velkou nedůvěru, neb mi přijde, že nemám kontrolu nad osobními údaji, dokážu si snadno představit, že to tlačítko půjde podvrhnout tak, že automaticky něco nasdílí na zeď, nebo se mi dostane do gmailu (to se samozřejmě netýká Alzy, ale libovolného noname eshopu ano). A v neposlední řadě, pokud mě třeba fb zablokuje (i klidně neoprávněně), tak se pak nemohu dostat k správě objednávek na eshopu. Z těchto důvodů používám vždy registraci přímo na daném obchodě, nebo na dostatečně známých eshopech MojeID, které mám k tomuto založeno.

    • Ondřej Ilinčev
      Ondřej Ilinčev 23. listopad 2022 at 17:52:34 #

      Chápu, mám to podobně. Nicméně mám klienty, kde je to většina. Navíc u socek vždy potvrzuji, co předávám za informace.

Napsat komentář

Powered by WordPress. Designed by WooThemes