A telefonszám mező megtévesztően egyszerű. Egy szövegdoboz "Telefon" felirattal. De abban a pillanatban, hogy megnyitod az űrlapot nemzetközi felhasználóknak, vagy mobilon kérsz telefonszámot, az egyszerű mező bonyolulttá válik. A különböző országok másképp formázzák a számokat. Különböző billentyűzeteknek kell megjelenniük. A nemzetközi hívók országkódokban gondolkodnak. Az űrlapodnak mindezt kezelnie kell, különben romlik az adatminőség. Egy erős telefonmező bárhol működik, és a helyes formátum felé irányítja a felhasználókat, nem ellene.
Vegyél bármilyen jól konvertáló űrlapot, amely telefonszámot gyűjt. Nézd meg, hogyan kezeli a mezőt. A legtöbb úgy kezeli, mint bármilyen szövegmezőt, feltételezve, hogy a felhasználók azt a formátumot írják, amit helyesnek gondolnak. Aztán az adatok káoszban érkeznek. Egyes számokban kötőjelek vannak. Másokban zárójelek. Másokban szóközök. Egyesek teljesen kihagyják a formázást. Az adatbázisod ugyanazt a telefonszámot öt különböző formátumban tartalmazza. Amikor fel kell hívnod valakit, a rendszered nem ismeri fel, hogy az 5551234567 és a (555) 123-4567 ugyanaz a szám. Az adat technikailag begyűjtve, de működésében tönkrement.
A megoldás nem az, hogy elfogadod a káoszt, és később normalizálod. A megoldás az, hogy gépelés közben egyetlen helyes formátum felé irányítod a felhasználókat. Ez beviteli maszkkal, okos alapértelmezésekkel és olyan validálással történik, amely segít, nem blokkol.
Miért kell másképp kezelni a telefonmezőket, mint a szövegmezőket
A telefonszám nemzetközi szabályokkal rendelkező adat. Az e-mail-cím lényegében egyetemes. A név bármi lehet, amit valaki szeretne. De a telefonszámnak a Nemzetközi Távközlési Unió által meghatározott szerkezete van. A különböző országok eltérő hosszúságokat, előtagokat és formázási szabványokat használnak. Egy érvényes japán telefonszám semmiben nem hasonlít egy érvényes franciaországi számra. A meződ vagy megérti ezt, vagy jó számokat utasít el, és rosszakat fogad el.
Ráadásul a felhasználók a saját országuk formátumában gondolkodnak a telefonszámokról. Egy londoni ember az egyesült királyságbeli formátumban gondolkodik. Egy berlini a németben. Ha amerikai formátumra kényszeríted őket, megzavarodnak. Hibáznak. Félbehagyják az űrlapot. A súrlódás abból ered, hogy a mező elvárása nem egyezik azzal, amit a felhasználó adni próbál.
Az egy mező és a több mező közötti döntés
Egyes űrlapok szétbontják a telefonszámot külön mezőkre. Az egyik dobozban a körzetszám. Egy másikban a központ. Egy harmadikban a vonalszám. Ez csodásan működik az amerikai telefonszámoknál, ahol a szerkezet kiszámítható. Máshol mindenhol megbukik. Egy németországi felhasználó nem tudja a számát három amerikai dobozba illeszteni. Egy ausztrál vagy francia sem. A szétbontott mezők a mobilos élményt is rontják, mert a felhasználóknak mezők között kell koppintaniuk, ahelyett, hogy folyamatosan gépelnének. A használhatósági tesztek szerint sok felhasználó nehezen navigál külön mezők között telefonon.
Egyetlen mező jobb. Egy hosszú beviteli doboz. Egy hely a teljes szám beírásához. A mező a formátumot beviteli maszkkal irányítja, nem szétbontással. Ez a belföldi és a nemzetközi számoknál is egyformán működik. A mobilos felhasználók egyszer gépelnek, és kész.
Hogyan csinál a beviteli maszk káoszból rendet
A beviteli maszk automatikusan formázza a számot, ahogy valaki gépel. Beírják, hogy 5 5 5 1 2 3 4 5 6 7, és a mező ezt mutatja: (555) 123-4567. Lassan vagy gyorsan gépelnek, a formázás követi őket. Ennek két célja van. Először valós idejű visszajelzést ad arról, hogy a helyes formátumban gépelnek. Másodszor megakadályozza, hogy eleve rossz formátumot írjanak be. Nem tudnak olyan karaktert beírni, amely megtöri a formátumot. A mező nem fogadja el.
A megjelenített formátum a kiválasztott országtól függ. Ha az Egyesült Államokat választják, a maszk (XXX) XXX-XXXX. Ha Kanadát, ugyanez. Ha Németországot, a maszk alkalmazkodik. A felhasználó olyan formátumot lát, amelyet felismer. Belegépel. Az adat tisztán érkezik hozzád.
A kutatások szerint a felhasználók 89 százaléka olyan formátumban adja meg a telefonszámot, amilyet választ, még akkor is, ha vannak tippek. A beviteli maszk ezt a problémát teljesen megszünteti. Nem tippelsz a formátumra. Vizuálisan érvényesíted, ahogy gépelnek.
Országkód és nemzetközi támogatás
Abban a pillanatban, hogy nemzetközivé válsz, szükséged van egy országválasztóra. Egy legördülő menüre, amely az országneveket zászlóikonokkal mutatja. A felhasználó kiválasztja az országát. A mező frissíti a beviteli maszkot. Az országkód automatikusan megjelenik.
Két tervezési döntés számít itt. Először állíts be okos alapértelmezést. Ha a felhasználóid többsége az Egyesült Államokban van, az Egyesült Államok legyen az alapértelmezés. Ha globális közönséged van, az alapértelmezés a felhasználó tényleges tartózkodási helye legyen, helymeghatározási adatok alapján. Egy franciaországi embernek nem kellene 20 országon végiggörgetnie, hogy megtalálja Franciaországot. Másodszor tartsd az országválasztót láthatónak és könnyen módosíthatónak. A felhasználó tévedésből rossz országot választhat. Egy koppintással át kell tudnia váltani, nem egy eltemetett legördülő menüt keresni.
Az országkódnak a szám mellett kell megjelennie. A felhasználó +1 (555) 123-4567 számot lát, nem csak (555) 123-4567 számot. Ettől egyértelmű a formátum. A +1 előtagból tudja, hogy ez egy amerikai szám. Ha hibázott, és rossz országot választott, azonnal látja, és válthat.
Még egy dolog: amikor a felhasználó országot vált, tartsd meg a már beírt számot. Ne töröld a mezőt. Ne állíts vissza mindent. Ha beírták az 5551234567 számot, majd rájöttek, hogy rossz országot választottak, hagyd, hogy megváltoztassák az országkódot, és megtartsák a számjegyeket. Nem kell elölről kezdeniük.
Mobil billentyűzetek és a type="tel" attribútum
Telefonon a billentyűzet számít. E-mail mezőhöz az e-mail billentyűzetet mutasd. Telefonszámhoz a numerikus billentyűzetet. Ez nem csak kényelem. A billentyűzetkiosztás apró különbsége megelőzi a hibákat. Aki numerikus billentyűzetet néz, arra emlékeztetik, hogy számot ír be, nem szöveget. A kiosztás megnehezíti a betűk véletlen beírását.
Használd a type="tel" attribútumot a HTML-ben, hogy automatikusan előhívja a numerikus billentyűzetet. Nem minden telefon mutatja ugyanazt a billentyűzetet. Némelyik 0-9 plusz szimbólumokat mutat. Némelyik csak számokat. Némelyik betűket is a számok mellett. A viselkedés eszközönként változik. De minden telefon valami hasznosabbat mutat a teljes QWERTY billentyűzetnél.
A billentyűzet kiválasztásán túl a mobil képernyők kicsik. Tedd nagyra a beviteli mezőt. Hüvelykujj méretű gombokat alulra. Teljes szélességű bevitelt. Nincs vízszintes görgetés. Egy nehezen koppintható szám olyan szám, amelyet nem fognak helyesen beírni.
Milyen validálási stratégiák működnek valójában
A validálás ellenőrzi, hogy a szám valódi-e. A valódi azt jelenti, hogy követi a kiválasztott ország formátumszabályait, és megfelelő számú számjegyből áll. A különböző országokban különböző a számjegyek száma. Egy amerikai szám az országkód után 10 számjegyű. Egy német szám 6-tól 11 számjegyig terjed a régiótól függően. A validálásodnak ismernie kell ezeket a szabályokat.
A telefonszámok legjobb validálási megközelítése az E.164 szabvány. Ez az ITU által meghatározott nemzetközi formátum, amelyet minden globális rendszer ért. Az E.164 formátum egy pluszjel, az országkód, majd a nemzeti szám. Szóközök, zárójelek és kötőjelek nélkül. +14155550123 egy amerikai számhoz. Ezt tárolod az adatbázisodban. Amit a felhasználó lát és gépel, az olvashatóságra van formázva. Amit tárolsz, az E.164 a következetesség és a pontosság érdekében.
Két helyen futtass validálást. Először validálj a böngészőben, ahogy a felhasználó gépel. Valós idejű validálás. Pipát látnak, ha a szám teljes és érvényes. Üzenetet látnak, ha valami hiányzik. Másodszor validálj a szervereden, miután beküldték. A kliensoldali validálás gördülékennyé teszi az élményt. A szerveroldali validálás védi az adataidat arra az esetre, ha valaki kikapcsolja a böngészőellenőrzéseket, vagy API-n keresztül küld rossz adatot.
A telefonszám-megerősítés kérésének hibája
Egyes űrlapok telefonszámot kérnek, majd telefonszám-megerősítést. Írd be a számod. Írd be újra a megerősítéshez. Ez megduplázza a súrlódást. Valakinek helyesen kell beírnia egy 10 számjegyű számot, majd újra helyesen. A legtöbben elgépelik az egyik próbálkozásnál. Aztán elakadnak. A két szám nem egyezik. Mindkét mezőt ki kell javítaniuk a továbblépéshez.
Jobb megközelítés a szám valós idejű validálása gépelés közben. Mire a beküldés gombhoz érnek, a szám már validálva van. Nem kell kétszer beírniuk. A validálás maga a megerősítés.
Gyakori hibák, amelyek rontják a telefonszám-adatok minőségét
Bármilyen telefonszám elfogadása az ország ellenőrzése nélkül
Egy űrlap elfogad egy 7 számjegyű és egy 15 számjegyű számot anélkül, hogy tudná, melyik országból jött. Mindkettőt érvényesként tárolják. Később megpróbálsz felhívni valakit, és egyik szám sem működik. Mindig a kiválasztott ország alapján validálj. Egy 7 számjegyű szám érvényes lehet egyes európai országokban. Egy 10 számjegyű szám az Egyesült Államokban szokásos, de máshol mindenhol hibás. Az ország kontextusa minden validálási szabálynál számít.
Validálási hibák mutatása csak a beküldés után
Ha megvárod, amíg valaki a beküldésre kattint, hogy megmondd neki, a telefonszám hiányos vagy érvénytelen, súrlódást okoztál. Rákattint a beküldésre. Hibát lát. Kijavítja a számot. Újra beküldi. A valós idejű validálás ezt megelőzi. Abban a pillanatban, hogy befejezik a szám beírását, tudják, érvényes-e. A beküldésre nem lehet meglepetés.
Az országválasztó elrejtése zavaros helyen
Az országkód nem utógondolat. Tedd nyilvánvalóvá. Egy nagy legördülő menü a telefonmező tetején, nem három másik legördülő menü alá temetve. A felhasználónak látnia kell, és könnyen módosíthatónak kell lennie. Ha rossz országot választ, a mező formátumának változásából azonnal észre kell vennie.
Nem magyarázod el, miért kell a telefonszám
A kutatások szerint a felhasználók 14 százaléka félbehagyja a fizetést, ha egy telefonmező magyarázat nélkül kötelező. A tesztek viszont azt is mutatják, hogy a felhasználók maradnak, ha egyszerűen megmondod, miért kell. Adj hozzá egy mondatnyi súgószöveget. "Ezt a rendelésed megerősítésére használjuk" vagy "Így érünk el, ha kérdéseink vannak." Egy kis kontextus megelőzi a lemorzsolódást.
Csak egy országban működő formázás használata
Ha minden számot (XXX) XXX-XXXX formátumban formázol, az amerikai számokhoz zártad magad. Ez a formátum semmit nem jelent Németországban vagy Japánban. Vagy használd az E.164-et a tároláshoz és egy országtudatos maszkot a bevitelhez, vagy alkalmazkodjon a formátum a kiválasztott országhoz. Ne feltételezd, hogy egy formátum mindenhol működik.
Adatvédelmi aggályok és a nem kötelező telefonmező
A telefonszámok személyes adatok. Sok joghatóságban a gyűjtésük adatvédelmi szabályozást von maga után. A felhasználók egyre óvatosabbak a telefonszámokkal, mert azok spamhívásokhoz vezetnek. Egyes űrlapok megszokásból gyűjtenek telefonszámokat, nem tényleges szükségből. Ha nincs valóban szükséged telefonszámra, ne kérd. Ha szükséged van rá, magyarázd el, miért.
Ha lehet, tedd nem kötelezővé a mezőt. A kötelező mezők súrlódást okoznak. A nem kötelező mezők csökkentik a lemorzsolódást. Ha a telefonos kapcsolat fontos, de a munkafolyamatodhoz nem feltétlenül szükséges, jelöld nem kötelezőnek, és magyarázd el az értékét. A "Add meg a telefonszámod, hogy SMS-ben küldhessünk rendelési értesítéseket" okot ad a kitöltésre, még ha nem is kötelező.
Hogyan kezeli a WEMASY a telefonszám mezőket
A WEMASY űrlapépítője beépített nemzetközi támogatással rendelkező telefonszám mezőket tartalmaz. Hozz létre telefonmezőt, és válaszd ki, helyi vagy nemzetközi legyen. Helyi esetén állítsd be az országodat. Nemzetközi esetén a felhasználók zászlóikonos országmenüt látnak. A mező automatikusan a kiválasztott országnak megfelelő beviteli maszkot mutatja. Gépelés közben a mező automatikusan formáz. A (555) 123-4567 úgy jelenik meg, hogy a zárójeleket és kötőjeleket nem kell beírniuk. A valós idejű validálás megerősíti, hogy a szám teljes és érvényes a kiválasztott országban. Mobilon a numerikus billentyűzet jelenik meg. A mező minden eszközön működik. Az űrlap-analitikában láthatod a telefonszám-adataidat, és észreveheted a mintákat abban, milyen formátumot próbálnak beírni a felhasználók. Amikor az adatok megérkeznek a CRM-edbe, minden szám E.164 formátumban van. Következetesek. Működnek a tárcsázó rendszerekkel. A követő kommunikációd a megfelelő emberhez jut el.