Een telefoonnummerveld lijkt eenvoudig. Een tekstvak met het label "Telefoon". Maar zodra je het formulier openstelt voor internationale gebruikers of op mobiel om telefoonnummers vraagt, wordt dat simpele veld ingewikkeld. Landen schrijven nummers verschillend op. Er moeten verschillende toetsenborden verschijnen. Internationale bellers denken in landcodes. Je formulier moet dit allemaal aankunnen, anders verlies je datakwaliteit. Een sterk telefoonveld werkt overal en leidt gebruikers naar het juiste formaat, in plaats van ertegenin.
Neem een willekeurig formulier met een hoge conversie dat telefoonnummers verzamelt. Kijk hoe het met het veld omgaat. De meeste behandelen het als elk ander tekstveld en gaan ervan uit dat gebruikers intypen wat zij het juiste formaat vinden. Dan komt de data binnen in chaos. Sommige nummers hebben streepjes. Sommige haakjes. Sommige spaties. Sommige hebben helemaal geen opmaak. In je database staat hetzelfde telefoonnummer in vijf verschillende formaten. Als je iemand wilt bellen, herkent je systeem niet dat 5551234567 en (555) 123-4567 hetzelfde nummer zijn. De data is technisch verzameld, maar werkt in de praktijk niet.
De oplossing is niet om de chaos te accepteren en later te normaliseren. De oplossing is om gebruikers tijdens het typen naar één juist formaat te leiden. Dat gebeurt met invoermaskers, slimme standaardwaarden en validatie die helpt in plaats van blokkeert.
Waarom telefoonvelden anders moeten werken dan tekstvelden
Een telefoonnummer is data met internationale regels. Een e-mailadres is vrijwel universeel. Een naam kan zijn wat iemand wil. Maar een telefoonnummer heeft een structuur die is vastgelegd door de International Telecommunication Union. Landen gebruiken verschillende lengtes, voorvoegsels en opmaakstandaarden. Een geldig telefoonnummer in Japan lijkt in niets op een geldig nummer in Frankrijk. Je veld moet dit begrijpen, anders wijst het goede nummers af en accepteert het foute.
Bovendien denken gebruikers over telefoonnummers in het formaat van hun eigen land. Iemand in Londen denkt in het Britse formaat. Iemand in Berlijn denkt in het Duitse formaat. Als je ze in het Amerikaanse formaat dwingt, raken ze in de war. Ze maken fouten. Ze breken het formulier af. De frictie komt van het verschil tussen wat het veld verwacht en wat de gebruiker probeert te geven.
Eén veld of gesplitste velden
Sommige formulieren splitsen het telefoonnummer in aparte velden. Het netnummer in één vak. De centrale in een ander. Het lijnnummer in nog een ander. Dit werkt prima voor Amerikaanse telefoonnummers, omdat de structuur voorspelbaar is. Overal anders werkt het niet. Een gebruiker in Duitsland krijgt zijn nummer niet in drie Amerikaanse vakken. Een gebruiker in Australië of Frankrijk ook niet. Gesplitste velden schaden ook de mobiele ervaring, omdat gebruikers tussen velden moeten tikken in plaats van door te typen. Gebruikerstests laten zien dat veel mensen moeite hebben met het wisselen tussen losse velden op telefoons.
Eén veld is beter. Eén lang invoervak. Eén plek om het hele nummer te typen. Het veld stuurt het formaat via een invoermasker, niet via splitsing. Dit werkt voor nationale en internationale nummers even goed. Mobiele gebruikers typen één keer en zijn klaar.
Hoe een invoermasker chaos in orde verandert
Een invoermasker formatteert het nummer automatisch terwijl iemand typt. Ze typen 5 5 5 1 2 3 4 5 6 7 en het veld toont (555) 123-4567. Of ze nu langzaam of snel typen, de opmaak volgt. Dit heeft twee doelen. Ten eerste geeft het realtime feedback dat ze in het juiste formaat typen. Ten tweede voorkomt het dat ze meteen het verkeerde formaat invoeren. Ze kunnen geen teken typen dat het formaat breekt. Het veld accepteert het niet.
Het getoonde formaat hangt af van het gekozen land. Kiezen ze de Verenigde Staten, dan is het masker (XXX) XXX-XXXX. Kiezen ze Canada, dan is het hetzelfde. Kiezen ze Duitsland, dan past het masker zich aan. De gebruiker ziet een formaat dat hij herkent. Hij typt erin. De data komt schoon bij jou binnen.
Onderzoek laat zien dat 89 procent van de gebruikers een telefoonnummer invoert in het formaat dat ze zelf kiezen, ook als er hints staan. Een invoermasker lost dit probleem helemaal op. Je hint niet naar het formaat. Je dwingt het visueel af terwijl ze typen.
Landcode en internationale ondersteuning
Zodra je internationaal gaat, heb je een landkiezer nodig. Een dropdown met landnamen en vlagiconen. De gebruiker kiest zijn land. Het veld past het invoermasker aan. De landcode verschijnt automatisch.
Twee ontwerpbeslissingen zijn hier belangrijk. Stel eerst een slimme standaardwaarde in. Zijn de meeste gebruikers in de VS, kies dan standaard de VS. Heb je een wereldwijd publiek, gebruik dan de echte locatie van de gebruiker via geolocatiedata. Iemand in Frankrijk moet niet langs 20 landen hoeven scrollen om Frankrijk te vinden. Houd de landkiezer daarnaast zichtbaar en makkelijk te wijzigen. Een gebruiker kan per ongeluk het verkeerde land kiezen. Hij moet met één tik kunnen wisselen en niet hoeven zoeken naar een weggestopte dropdown.
De landcode moet naast het nummer worden getoond. Een gebruiker ziet +1 (555) 123-4567, niet alleen (555) 123-4567. Zo is het formaat ondubbelzinnig. Ze weten aan het voorvoegsel +1 dat dit een Amerikaans nummer is. Als ze een fout maakten en het verkeerde land kozen, zien ze dat meteen en kunnen ze wisselen.
Nog iets: als de gebruiker het land wijzigt, bewaar dan het nummer dat al is getypt. Wis het veld niet. Reset niet alles. Als ze 5551234567 typten en daarna merkten dat ze het verkeerde land kozen, laat ze dan de landcode wijzigen en de cijfers houden. Ze mogen niet opnieuw hoeven beginnen.
Mobiele toetsenborden en het type="tel"-attribuut
Op een telefoon is het toetsenbord belangrijk. Toon het e-mailtoetsenbord voor een e-mailveld. Toon het numerieke toetsenbord voor een telefoonnummer. Dat is niet alleen gemak. Een klein verschil in toetsenbordindeling voorkomt fouten. Iemand die naar een numeriek toetsenbord kijkt, wordt eraan herinnerd dat hij een nummer invoert, geen tekst. De indeling maakt het moeilijker om per ongeluk letters te typen.
Gebruik type="tel" in de HTML om automatisch het numerieke toetsenbord te tonen. Niet alle telefoons tonen hetzelfde toetsenbord. Sommige tonen 0-9 plus symbolen. Sommige alleen cijfers. Sommige letters naast cijfers. Het gedrag verschilt per apparaat. Maar elke telefoon toont iets handigers dan het volledige QWERTY-toetsenbord.
Naast de keuze van het toetsenbord zijn mobiele schermen klein. Maak het invoerveld groot. Knoppen op duimformaat onderaan. Een invoerveld over de volle breedte. Geen horizontaal scrollen. Een nummer dat moeilijk aan te tikken is, wordt niet goed getypt.
Welke validatiestrategieën echt werken
Validatie controleert of het nummer echt is. Echt betekent dat het de opmaakregels van het gekozen land volgt en het juiste aantal cijfers heeft. Landen hebben verschillende aantallen cijfers. Een Amerikaans nummer heeft 10 cijfers na de landcode. Een Duits nummer heeft 6 tot 11 cijfers, afhankelijk van de regio. Je validatie moet deze regels kennen.
De beste validatieaanpak voor telefoonnummers is de E.164-standaard. Dit is het internationale formaat dat door de ITU is vastgelegd en dat elk wereldwijd systeem begrijpt. Het E.164-formaat is een plusteken, de landcode en dan het nationale nummer. Geen spaties, haakjes of streepjes. +14155550123 voor een Amerikaans nummer. Dit is wat in je database wordt opgeslagen. Wat de gebruiker ziet en typt, is opgemaakt voor leesbaarheid. Wat wordt opgeslagen is E.164, voor consistentie en nauwkeurigheid.
Valideer op twee plekken. Valideer eerst in de browser terwijl de gebruiker typt. Realtime validatie. Ze zien een vinkje als het nummer compleet en geldig is. Ze zien een melding als er iets ontbreekt. Valideer daarna op je server na het verzenden. Client-side validatie maakt de ervaring soepel. Server-side validatie beschermt je data voor het geval iemand browsercontroles uitzet of foute data via een API verstuurt.
De fout om om telefoonbevestiging te vragen
Sommige formulieren vragen om een telefoonnummer en daarna om een bevestiging. Typ je nummer. Typ het nog een keer ter bevestiging. Dit verdubbelt de frictie. Iemand moet een nummer van 10 cijfers goed typen en dan nog een keer goed typen. De meeste mensen maken bij een van de twee pogingen een typefout. Dan zitten ze vast. De twee nummers komen niet overeen. Ze moeten beide velden herstellen om verder te kunnen.
Een betere aanpak is het nummer realtime valideren terwijl ze typen. Tegen de tijd dat ze bij de verzendknop zijn, is het nummer al gevalideerd. Je hoeft ze het niet twee keer te laten typen. De validatie zelf is de bevestiging.
Veelgemaakte fouten die de kwaliteit van telefoondata breken
Elk telefoonnummer accepteren zonder het land te controleren
Een formulier accepteert een nummer van 7 cijfers en een nummer van 15 cijfers zonder te weten uit welk land ze komen. Beide worden als geldig opgeslagen. Later probeer je iemand te bellen en geen van beide nummers werkt. Valideer altijd op basis van het gekozen land. Een nummer van 7 cijfers kan in sommige Europese landen geldig zijn. Een nummer van 10 cijfers is standaard in de VS, maar elders fout. De landcontext is van belang voor elke validatieregel.
Validatiefouten pas na het verzenden tonen
Als je wacht tot iemand op verzenden klikt om te zeggen dat het telefoonnummer onvolledig of ongeldig is, creëer je frictie. Ze klikken op verzenden. Zien een fout. Herstellen het nummer. Verzenden opnieuw. Realtime validatie voorkomt dit. Zodra ze klaar zijn met het typen van het nummer, weten ze of het geldig is. Bij het verzenden mogen er geen verrassingen meer zijn.
De landkiezer verstoppen op een verwarrende plek
De landcode is geen bijzaak. Maak hem duidelijk zichtbaar. Een grote dropdown bovenaan het telefoonveld, niet verstopt onder drie andere dropdowns. De gebruiker moet hem kunnen zien en makkelijk kunnen wijzigen. Kiest iemand het verkeerde land, dan moet hij dat meteen merken aan de verandering van het formaat in het veld.
Niet uitleggen waarom je het telefoonnummer nodig hebt
Onderzoek laat zien dat 14 procent van de gebruikers de checkout afbreekt als een telefoonveld verplicht is zonder uitleg. Tests laten ook zien dat gebruikers blijven als je simpelweg zegt waarom je het nodig hebt. Voeg één zin hulptekst toe. "We gebruiken dit om je bestelling te bevestigen" of "Zo bereiken we je als er vragen zijn." Een beetje context voorkomt afhakers.
Een opmaak gebruiken die maar in één land werkt
Als je alle nummers opmaakt als (XXX) XXX-XXXX, ben je vastgezet op Amerikaanse nummers. Dat formaat zegt in Duitsland of Japan niets. Gebruik E.164 voor opslag en een landbewust masker voor invoer, of laat het formaat meebewegen met het gekozen land. Ga er niet van uit dat één formaat overal werkt.
Privacyzorgen en het optionele telefoonveld
Telefoonnummers zijn persoonsgegevens. In veel rechtsgebieden gelden bij het verzamelen ervan privacyregels. Gebruikers zijn steeds voorzichtiger met hun telefoonnummer, omdat het leidt tot spamtelefoontjes. Sommige formulieren verzamelen telefoonnummers uit gewoonte, niet uit echte behoefte. Heb je een telefoonnummer niet echt nodig, vraag er dan niet naar. Heb je het wel nodig, leg dan uit waarom.
Maak het veld waar mogelijk optioneel. Verplichte velden zorgen voor frictie. Optionele velden verminderen het aantal afhakers. Is telefonisch contact belangrijk maar niet absoluut nodig voor je werkwijze, markeer het dan als optioneel en leg de waarde uit. "Vul je telefoonnummer in zodat we je bestelupdates per sms kunnen sturen" geeft ze een reden om het in te vullen, ook al is het niet verplicht.
Hoe WEMASY telefoonnummervelden aanpakt
De formulierenbouwer van WEMASY heeft telefoonnummervelden met ingebouwde internationale ondersteuning. Maak een telefoonveld en kies of het lokaal of internationaal is. Stel bij lokaal je land in. Bij internationaal zien gebruikers een landdropdown met vlagiconen. Het veld toont automatisch het juiste invoermasker op basis van het gekozen land. Terwijl ze typen, formatteert het veld automatisch. (555) 123-4567 verschijnt zonder dat ze de haakjes en streepjes typen. Realtime validatie bevestigt dat het nummer compleet en geldig is voor het gekozen land. Op mobiel verschijnt het numerieke toetsenbord. Het veld werkt op elk apparaat. Bekijk je telefoonnummerdata in de analytics van je formulier en zie welke patronen er zijn in het formaat dat gebruikers proberen in te voeren. Als de data in je CRM binnenkomt, staan alle nummers in E.164-formaat. Ze zijn consistent. Ze werken met belsystemen. Je opvolging bereikt de juiste persoon.