ILINČEV 
Registrovaný zákazník vám víc vydělá.
Protože:
- 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). - Lépe si spojíte přístup z více jeho zařízení nebo jednotlivé návštěvy webu.
- Můžete mu nabízet relevantnější produkty a služby.
- Lze ho lépe (a déle) AB testovat nebo zjistit, jak je citlivý na cenu.
- Nemusí vás tolik zajímat cookies.
- Jednoduše mu pošlete newslettery.
- 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.
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ář!
Přihlášení přes sociální sítě nepřekvapivě preferují mladší (cca 70 % uživatelů 18–25 let):
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:
- Google,
- Facebook,
- Apple,
- Seznam.
Naopak mi moc nedává smysl:
- Microsoft (zatím je to nezvyk, ale může se to změnit),
- 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:
- Opustit web.
- Přepnout se do e-mailového klienta.
- Najít tam ten správný e-mail (který může přijít až za pár minut).
- 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.
A prosím – dvě věci, které mi hodně ulehčí život:
- Kód dejte do textu sms jako první, abych ho viděl už v notifikaci a nenutili jste mě rozklikávat sms aplikaci.
- 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 :).
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.
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ář.
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.
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
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
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:
- Social proof.
- Jen jedno formulářové pole!
Špatně:
- Špatný kontrast tlačítka a nepodtržený odkaz u osobních údajů.
Electroworld.cz
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
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
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/
Smysluplná debata