Pole pro telefonní číslo je zdánlivě jednoduché. Textové pole s popiskem "Telefon". Jakmile ale formulář otevřete mezinárodním uživatelům nebo se na telefonní čísla ptáte na mobilu, z jednoduchého pole se stane komplikace. Různé země formátují čísla různě. Musí se zobrazit různé klávesnice. Zahraniční volající uvažují v předvolbách zemí. Váš formulář to musí všechno zvládnout, jinak ztratíte kvalitu dat. Dobré pole pro telefon funguje kdekoli a vede uživatele ke správnému formátu, ne proti němu.
Vezměte jakýkoli formulář s vysokou konverzí, který sbírá telefonní čísla. Podívejte se, jak s polem zachází. Většina s ním zachází jako s jakýmkoli textovým polem a předpokládá, že uživatelé napíšou formát, který považují za správný. Pak data dorazí v chaosu. Některá čísla mají pomlčky. Některá závorky. Některá mezery. Některá nemají žádné formátování. Vaše databáze obsahuje totéž telefonní číslo v pěti různých formátech. Když potřebujete někomu zavolat, váš systém nepozná, že 5551234567 a (555) 123-4567 je totéž číslo. Data jsou technicky nasbíraná, ale prakticky nefunkční.
Řešením není přijmout chaos a později ho sjednotit. Řešením je vést uživatele ke správnému formátu už při psaní. To zajišťuje maskování vstupu, chytré výchozí hodnoty a validace, která pomáhá, a neblokuje.
Proč pole pro telefon vyžadují jiné zacházení než textová pole
Telefonní číslo jsou data s mezinárodními pravidly. E-mailová adresa je v zásadě univerzální. Jméno může být, jaké si kdo přeje. Telefonní číslo ale má strukturu definovanou Mezinárodní telekomunikační unií. Různé země používají různé délky, předvolby a standardy formátování. Platné telefonní číslo v Japonsku nevypadá vůbec jako platné číslo ve Francii. Vaše pole to musí chápat, jinak odmítá dobrá čísla a přijímá špatná.
Navíc uživatelé o telefonních číslech přemýšlejí ve formátu své vlastní země. Člověk v Londýně uvažuje v britském formátu. Člověk v Berlíně v německém formátu. Když je nutíte do amerického formátu, jsou zmatení. Dělají chyby. Formulář opouštějí. Tření vzniká z nesouladu mezi tím, co pole očekává, a tím, co se vám uživatel snaží dát.
Rozhodnutí mezi jedním polem a rozdělenými poli
Některé formuláře rozdělují telefonní číslo do samostatných polí. Předvolba v jednom okénku. Ústředna v dalším. Číslo linky v dalším. U amerických telefonních čísel to funguje skvěle, protože struktura je předvídatelná. Všude jinde to selhává. Uživatel v Německu nedokáže své číslo vměstnat do tří amerických okének. Stejně tak uživatel v Austrálii nebo ve Francii. Rozdělená pole také zhoršují zážitek na mobilu, protože uživatelé musí ťukat mezi poli místo plynulého psaní. Testování použitelnosti ukazuje, že mnoho uživatelů se na telefonech v přechodu mezi samostatnými poli ztrácí.
Lepší je jedno pole. Jedno dlouhé vstupní okno. Jedno místo, kam napsat celé číslo. Pole vede formát maskováním vstupu, ne dělením. To funguje stejně pro tuzemská i mezinárodní čísla. Mobilní uživatelé píšou jednou a je hotovo.
Jak maskování vstupu mění chaos v pořádek
Maskování vstupu číslo automaticky formátuje, jak někdo píše. Napíše 5 5 5 1 2 3 4 5 6 7 a pole ukáže (555) 123-4567. Píše pomalu nebo rychle, formátování ho následuje. To slouží dvěma účelům. Zaprvé dává uživateli zpětnou vazbu v reálném čase, že píše ve správném formátu. Zadruhé mu brání zadat špatný formát hned na začátku. Nemůže napsat znak, který formát porušuje. Pole ho nepřijme.
Zobrazený formát závisí na vybrané zemi. Pokud zvolí Spojené státy, maska je (XXX) XXX-XXXX. Pokud zvolí Kanadu, je stejná. Pokud zvolí Německo, maska se přizpůsobí. Uživatel vidí formát, který zná. Píše do něj. Data k vám dorazí čistá.
Výzkum ukazuje, že 89 procent uživatelů zadá telefonní číslo v takovém formátu, jaký si zvolí, i když jsou přítomny nápovědy. Maskování vstupu tento problém úplně odstraňuje. Formát nenaznačujete. Vynucujete ho vizuálně, jak uživatel píše.
Předvolba země a mezinárodní podpora
Jakmile se vydáte do světa, potřebujete výběr země. Rozbalovací seznam s názvy zemí a ikonami vlajek. Uživatel zvolí svou zemi. Pole aktualizuje masku vstupu. Předvolba země se objeví automaticky.
Záleží tu na dvou rozhodnutích o návrhu. Zaprvé nastavte chytrou výchozí hodnotu. Pokud je většina vašich uživatelů v USA, nastavte jako výchozí USA. Pokud máte globální publikum, nastavte jako výchozí skutečnou polohu uživatele pomocí údajů o geolokaci. Někdo ve Francii by neměl procházet 20 zemí, aby našel Francii. Zadruhé nechte výběr země viditelný a snadno změnitelný. Uživatel může omylem zvolit špatnou zemi. Měl by ji moci změnit jedním ťuknutím, ne hledat zapadlý rozbalovací seznam.
Předvolba země se má zobrazovat vedle čísla. Uživatel vidí +1 (555) 123-4567, ne jen (555) 123-4567. Tím je formát jednoznačný. Podle předvolby +1 ví, že jde o americké číslo. Pokud udělal chybu a zvolil špatnou zemi, hned to vidí a může ji změnit.
Ještě jedna věc: když uživatel změní zemi, ponechte číslo, které už napsal. Pole nemažte. Nic neresetujte. Pokud napsal 5551234567 a pak si uvědomil, že zvolil špatnou zemi, nechte ho změnit předvolbu a číslice zachovat. Nemusí začínat od začátku.
Mobilní klávesnice a atribut type="tel"
Na telefonu záleží na klávesnici. Pro pole s e-mailem zobrazte klávesnici pro e-mail. Pro telefonní číslo zobrazte číselnou klávesnici. Není to jen pohodlí. Malý rozdíl v rozložení klávesnice zabraňuje chybám. Kdo se dívá na číselnou klávesnici, má připomenuto, že zadává číslo, ne text. Rozložení ztěžuje náhodné psaní písmen.
Použijte v HTML type="tel", aby se číselná klávesnice zobrazila automaticky. Ne všechny telefony zobrazí stejnou klávesnici. Některé ukážou 0-9 plus symboly. Některé jen čísla. Některé písmena spolu s čísly. Chování se liší podle zařízení. Každý telefon ale zobrazí něco užitečnějšího než plnou klávesnici QWERTY.
Kromě výběru klávesnice jsou obrazovky mobilů malé. Udělejte vstupní pole velké. Tlačítka velikosti palce dole. Vstup v plné šířce. Žádné vodorovné posouvání. Číslo, na které se těžko ťuká, je číslo, které se nenapíše správně.
Jaké strategie validace skutečně fungují
Validace kontroluje, zda je číslo skutečné. Skutečné znamená, že odpovídá pravidlům formátu pro vybranou zemi a má správný počet číslic. Různé země mají různý počet číslic. Číslo v USA má po předvolbě země 10 číslic. Německé číslo má 6 až 11 číslic podle regionu. Vaše validace musí tato pravidla znát.
Nejlepším přístupem k validaci telefonních čísel je standard E.164. Je to mezinárodní formát definovaný organizací ITU, kterému rozumí každý globální systém. Formát E.164 je znaménko plus, předvolba země a pak národní číslo. Bez mezer, závorek a pomlček. +14155550123 pro číslo v USA. To se ukládá do vaší databáze. To, co uživatel vidí a píše, je naformátováno pro čitelnost. Ukládá se E.164 kvůli jednotnosti a přesnosti.
Validaci spouštějte na dvou místech. Zaprvé validujte v prohlížeči, jak uživatel píše. Validace v reálném čase. Když je číslo úplné a platné, uvidí zatržítko. Když něco chybí, uvidí zprávu. Zadruhé validujte na serveru po odeslání. Validace na straně klienta dělá zážitek plynulým. Validace na straně serveru chrání vaše data pro případ, že někdo vypne kontroly v prohlížeči nebo pošle špatná data přes API.
Chyba: žádost o potvrzení telefonu
Některé formuláře se zeptají na telefonní číslo a pak ještě na potvrzení telefonu. Napište své číslo. Napište ho znovu pro potvrzení. To zdvojnásobuje tření. Někdo musí správně napsat desetimístné číslo a pak ho znovu správně napsat. Většina lidí se při jednom ze dvou pokusů překlepne. Pak uvíznou. Obě čísla se neshodují. Aby mohli pokračovat, musí opravit obě pole.
Lepší přístup je validovat číslo v reálném čase, jak se píše. Než se uživatel dostane k tlačítku pro odeslání, číslo je už zvalidované. Nepotřebujete, aby ho psal dvakrát. Samotná validace je potvrzením.
Časté chyby, které ničí kvalitu telefonních dat
Přijímání jakéhokoli telefonního čísla bez kontroly země
Formulář přijme sedmimístné i patnáctimístné číslo, aniž by věděl, z jaké země které pochází. Obě se uloží jako platná. Později se pokusíte někomu zavolat a ani jedno číslo nefunguje. Vždy validujte podle vybrané země. Sedmimístné číslo může být platné pro některé evropské země. Desetimístné číslo je standardem v USA, ale všude jinde je špatně. Kontext země je důležitý pro každé pravidlo validace.
Zobrazování chyb validace až po odeslání
Pokud počkáte, až někdo klikne na odeslání, a teprve pak mu sdělíte, že telefonní číslo je neúplné nebo neplatné, vytvořili jste tření. Klikne na odeslání. Uvidí chybu. Opraví číslo. Odešle znovu. Validace v reálném čase tomu předchází. Ve chvíli, kdy číslo dopíše, ví, zda je platné. V okamžiku odeslání už nemají být žádná překvapení.
Skrytí výběru země na matoucím místě
Předvolba země není dodatečná myšlenka. Udělejte ji zřejmou. Velký rozbalovací seznam nahoře u pole pro telefon, ne zapadlý pod třemi jinými rozbalovacími seznamy. Uživatel ji musí vidět a snadno ji změnit. Pokud zvolí špatnou zemi, má si toho hned všimnout podle změny formátu v poli.
Nevysvětlení, proč telefonní číslo potřebujete
Výzkum ukazuje, že 14 procent uživatelů opustí pokladnu, pokud je pole pro telefon povinné bez vysvětlení. Testy ale také ukazují, že uživatelé zůstanou, když jim jednoduše řeknete, proč ho potřebujete. Přidejte jednu větu nápovědy. "Použijeme ho k potvrzení vaší objednávky" nebo "Tak se vám ozveme, pokud budeme mít dotazy." Malý kontext předchází opuštění.
Formátování, které funguje jen v jedné zemi
Pokud všechna čísla formátujete jako (XXX) XXX-XXXX, uzamkli jste se na čísla v USA. Tento formát nic neříká v Německu ani v Japonsku. Buď použijte E.164 pro ukládání a masku s ohledem na zemi pro zadávání, nebo nechte formát přizpůsobit vybrané zemi. Nepředpokládejte, že jeden formát funguje všude.
Obavy o soukromí a nepovinné pole pro telefon
Telefonní čísla jsou osobní údaje. V mnoha jurisdikcích jejich sběr spouští předpisy o ochraně soukromí. Uživatelé si telefonní čísla stále víc chrání, protože vedou ke spamovým hovorům. Některé formuláře sbírají telefonní čísla ze zvyku, ne ze skutečné potřeby. Pokud telefonní číslo skutečně nepotřebujete, neptejte se na ně. Pokud ho potřebujete, vysvětlete proč.
Udělejte pole nepovinné, pokud je to možné. Povinná pole vytvářejí tření. Nepovinná pole snižují míru opuštění. Pokud je telefonický kontakt důležitý, ale pro váš postup není nezbytně nutný, označte ho jako nepovinný a vysvětlete jeho hodnotu. "Přidejte své telefonní číslo, abychom vám mohli posílat novinky o objednávce textovou zprávou" dává důvod pole vyplnit, i když není povinné.
Jak WEMASY zachází s poli pro telefonní čísla
Tvůrce formulářů ve WEMASY zahrnuje pole pro telefonní čísla s vestavěnou mezinárodní podporou. Vytvořte pole pro telefon a zvolte, zda je místní, nebo mezinárodní. U místního nastavíte svou zemi. U mezinárodního uživatelé vidí rozbalovací seznam zemí s ikonami vlajek. Pole automaticky zobrazí správnou masku vstupu podle vybrané země. Jak uživatel píše, pole se automaticky formátuje. (555) 123-4567 se objeví, aniž by uživatel psal závorky a pomlčky. Validace v reálném čase potvrdí, že číslo je úplné a platné pro vybranou zemi. Na mobilu se zobrazí číselná klávesnice. Pole funguje na každém zařízení.