Het opsplitsen van telefoonnummers in meerdere velden belemmert de bruikbaarheid, vooral op mobiele apparaten. Gebruikers vinden het vaak omslachtig om tussen velden te wisselen. Dit probleem is nog storender op mobiele toestellen, aangezien gebruikers daar geen tab toets hebben om naar een volgende veld te tabben.

Door één invoerveld te gebruiken, hoeft de gebruiker niet naar een ander veld te springen om het telefoonnummer volledig in te geven.

Laat gebruikers telefoonnummers op verschillende manieren invoeren en normaliseer de invoer achter de schermen. Het normaliseren van de invoer kan gebeuren door een automatische opmaak te gebruiken in het invoerveld, meestal in real-time.

De automatische opmaak (input mask) kan automatisch spaties toevoegen om de cijfers overzichtelijk te groeperen, bijvoorbeeld: +32 123 45 67 89. Dit maakt dat het nummer makkelijker te lezen wordt, en helpt zo gebruikers om visueel te controleren of het nummer correct wordt ingevoerd.

Daarbovenop dienen de gebruikers zich geen zorgen te maken over de manier waarop ze het nummer invoeren, of het nu met bepaalde speciale tekens is of niet, dankzij de input mask kan je het herleiden naar het gewenste formaat. Ook kan een input mask ervoor zorgen dat alleen cijfers en eventueel een paar speciale tekens (zoals +, /, ., en ()) kunnen worden ingevoerd, zodat de gebruiker geen “verkeerde” input kan ingeven zoals letters, die niet van toepassing zijn voor telefoonnummers.

Uiteindelijk kan je ook nog een voorbeeld meegeven van het gewenste formaat als toelichtig (form annotation), zodat de gebruiker weet hoe het nummer uiteindelijk geformatteerd zal worden en niet voor verwarring of verrassingen te staan komt. Dit kan bijvoorbeeld zijn: “Bijvoorbeeld: +32 123 45 67 89”.

Voeg een landcode-selector toe en pas het invoerformaat aan op basis van het gekozen land. Het selecteren van de landcode kan bijvoorbeeld door middel van een dropdown met de respectievelijke landcodes en -namen.

Idealiter is er reeds een landcode geselecteerd gebaseerd op geolocatie van de gebruiker, of in context van de overheid kan men dit reeds preselecteren op +32 voor België, ervan uitgaand dat het grootste deel van de gebruikers in Vlaanderen woonachtig zijn.

Het toevoegen en voorselecteren van de landcode voorkomt verwarring over het gewenste formaat en bespaart de gebruiker tijd, omdat ze alleen het eigenlijke nummer hoeven in te voeren. Bovendien zorgt de landcode ervoor dat de automatische opmaak van het nummer ervan afgeleid kan worden.

Het selecteren van de landcode wordt mogelijk gemaakt door gebruik van een select als add-on links bij de input group.

Voor mobiele gebruikers is het handig om een numeriek toetsenbord te laten verschijnen wanneer ze op het telefoonnummer-veld klikken. Dit maakt het makkelijker en sneller om het nummer in te voeren zonder onnodige tekens. Gebruik hiervoor <input type=”tel”>

De variant ‘telefoonnummer’ van de component Input pattern laat ook enkel cijfers toe. Bovendien formatteert ‘ie de input op een bepaalde visuele manier met spaties.

Vraag alleen om het telefoonnummer als het functioneel noodzakelijk is. Uit onderzoek blijkt dat veel gebruikers afhaken van een bepaalde flow vanaf dat ze hun telefoonnummer moeten opgeven, en het niet duidelijk is voor hen waarom een telefoonnummer nodig is. Leg duidelijk uit waarom het telefoonnummer van hen gevraagd wordt. Dit zal het vertrouwen van de eindgebruiker vergroten.