Pole numeru telefonu jest zwodniczo proste. Pole tekstowe z etykietą „Telefon". Ale gdy tylko otworzysz formularz dla użytkowników z zagranicy albo poprosisz o numer telefonu na urządzeniu mobilnym, to proste pole się komplikuje. W różnych krajach numery zapisuje się inaczej. Trzeba wyświetlać różne klawiatury. Osoby dzwoniące z zagranicy myślą kodami krajów. Twój formularz musi to wszystko obsłużyć, inaczej tracisz jakość danych. Dobre pole telefonu działa wszędzie i prowadzi użytkowników do właściwego formatu, a nie przeciw niemu.
Weź dowolny dobrze konwertujący formularz, który zbiera numery telefonów. Zobacz, jak obsługuje to pole. Większość traktuje je jak każde pole tekstowe, zakładając, że użytkownicy wpiszą dowolny format, który uznają za właściwy. Potem dane trafiają do Ciebie w chaosie. Niektóre numery mają myślniki. Niektóre nawiasy. Niektóre spacje. Niektóre w ogóle nie mają formatowania. W Twojej bazie jest ten sam numer telefonu w pięciu różnych formatach. Gdy musisz do kogoś zadzwonić, system nie rozpoznaje, że 5551234567 i (555) 123-4567 to ten sam numer. Dane są technicznie zebrane, ale funkcjonalnie zepsute.
Rozwiązaniem nie jest przyjmowanie chaosu i normalizowanie go później. Rozwiązaniem jest prowadzenie użytkowników do jednego poprawnego formatu w trakcie pisania. Dzieje się to dzięki maskowaniu danych wejściowych, mądrym wartościom domyślnym i walidacji, która pomaga, a nie blokuje.
Dlaczego pola telefonu wymagają innej obsługi niż pola tekstowe
Numer telefonu to dane z międzynarodowymi regułami. Adres e-mail jest w zasadzie uniwersalny. Imię może być, jakie ktoś chce. Ale numer telefonu ma strukturę określoną przez Międzynarodowy Związek Telekomunikacyjny. Różne kraje używają różnych długości, prefiksów i standardów zapisu. Poprawny numer telefonu w Japonii wygląda zupełnie inaczej niż poprawny numer we Francji. Twoje pole musi to rozumieć, inaczej odrzuci dobre numery i przyjmie złe.
Co więcej, użytkownicy myślą o numerach telefonów w formacie swojego kraju. Osoba w Londynie myśli w formacie brytyjskim. Osoba w Berlinie myśli w formacie niemieckim. Gdy zmusisz je do formatu amerykańskiego, się gubią. Popełniają błędy. Porzucają formularz. Tarcie bierze się z niedopasowania między tym, czego oczekuje pole, a tym, co użytkownik próbuje Ci dać.
Jedno pole czy pole podzielone
Niektóre formularze dzielą numer telefonu na osobne pola. Numer kierunkowy w jednym polu. Centrala w drugim. Numer linii w trzecim. To świetnie działa dla amerykańskich numerów telefonów, gdzie struktura jest przewidywalna. Wszędzie indziej się psuje. Użytkownik w Niemczech nie zmieści swojego numeru w trzech amerykańskich polach. Użytkownik w Australii ani we Francji też nie. Podzielone pola szkodzą też wygodzie na telefonie, bo użytkownicy muszą stukać między polami zamiast pisać w ciągu. Testy użyteczności pokazują, że wielu użytkowników ma trudności z poruszaniem się między osobnymi polami na telefonach.
Lepsze jest jedno pole. Jedno długie pole wejściowe. Jedno miejsce na wpisanie całego numeru. Pole prowadzi format przez maskowanie danych, a nie przez podział. To działa jednakowo dla numerów krajowych i międzynarodowych. Użytkownicy telefonów piszą raz i gotowe.
Jak maskowanie danych zamienia chaos w porządek
Maskowanie danych wejściowych automatycznie formatuje numer w trakcie pisania. Ktoś wpisuje 5 5 5 1 2 3 4 5 6 7, a pole pokazuje (555) 123-4567. Pisze powoli lub szybko, a formatowanie podąża za nim. To służy dwóm celom. Po pierwsze, daje informację zwrotną w czasie rzeczywistym, że wpisuje we właściwym formacie. Po drugie, od razu zapobiega wpisaniu złego formatu. Nie da się wpisać znaku, który psuje format. Pole go nie przyjmie.
Pokazywany format zależy od wybranego kraju. Jeśli wybierze Stany Zjednoczone, maska to (XXX) XXX-XXXX. Jeśli wybierze Kanadę, jest taka sama. Jeśli wybierze Niemcy, maska się dostosowuje. Użytkownik widzi format, który rozpoznaje. Wpisuje w niego dane. Dane docierają do Ciebie czyste.
Badania pokazują, że 89 procent użytkowników wpisze numer telefonu w dowolnym wybranym formacie, nawet gdy są podpowiedzi. Maskowanie danych całkowicie usuwa ten problem. Nie podpowiadasz formatu. Wymuszasz go wizualnie w trakcie pisania.
Kod kraju i obsługa międzynarodowa
Gdy tylko wychodzisz na rynki zagraniczne, potrzebujesz selektora kraju. Listy rozwijanej, która pokazuje nazwy krajów z ikonami flag. Użytkownik wybiera swój kraj. Pole aktualizuje maskę. Kod kraju pojawia się automatycznie.
Liczą się tu dwie decyzje projektowe. Po pierwsze, ustaw mądrą wartość domyślną. Jeśli większość Twoich użytkowników jest w USA, ustaw domyślnie USA. Jeśli masz globalnych odbiorców, ustaw domyślnie faktyczną lokalizację użytkownika na podstawie danych geolokalizacyjnych. Ktoś we Francji nie powinien przewijać 20 krajów, by znaleźć Francję. Po drugie, niech selektor kraju będzie widoczny i łatwy do zmiany. Użytkownik może przez pomyłkę wybrać zły kraj. Powinien móc go zmienić jednym stuknięciem, a nie szukać zakopanej listy rozwijanej.
Kod kraju powinien być wyświetlany obok numeru. Użytkownik widzi +1 (555) 123-4567, a nie tylko (555) 123-4567. Dzięki temu format jest jednoznaczny. Wie, że to numer amerykański, po prefiksie +1. Jeśli popełnił błąd i wybrał zły kraj, od razu to widzi i może to zmienić.
Jeszcze jedna rzecz: gdy użytkownik zmienia kraj, zachowaj numer, który już wpisał. Nie czyść pola. Nie resetuj wszystkiego. Jeśli wpisał 5551234567, a potem zauważył, że wybrał zły kraj, pozwól mu zmienić kod kraju i zachować cyfry. Nie powinien zaczynać od nowa.
Klawiatury mobilne i atrybut type="tel"
Na telefonie ma znaczenie klawiatura. Pokaż klawiaturę e-mail dla pola e-mail. Pokaż klawiaturę numeryczną dla numeru telefonu. To nie tylko wygoda. Mała różnica w układzie klawiatury zapobiega błędom. Ktoś patrzący na klawiaturę numeryczną jest przypominany, że wpisuje liczbę, a nie tekst. Układ utrudnia przypadkowe wpisanie liter.
Użyj type="tel" w HTML, aby automatycznie wywołać klawiaturę numeryczną. Nie wszystkie telefony pokazują tę samą klawiaturę. Niektóre pokazują 0-9 plus symbole. Niektóre tylko cyfry. Niektóre litery razem z cyframi. Zachowanie różni się w zależności od urządzenia. Ale każdy telefon pokaże coś bardziej pomocnego niż pełna klawiatura QWERTY.
Poza wyborem klawiatury ekrany telefonów są małe. Zrób duże pole wejściowe. Przyciski wielkości kciuka na dole. Pole na całą szerokość. Bez przewijania w poziomie. Numer, który trudno stuknąć, to numer, który nie zostanie wpisany poprawnie.
Jakie strategie walidacji naprawdę działają
Walidacja sprawdza, czy numer jest prawdziwy. Prawdziwy oznacza, że spełnia reguły formatu dla wybranego kraju i ma właściwą liczbę cyfr. Różne kraje mają różną liczbę cyfr. Numer amerykański ma 10 cyfr po kodzie kraju. Numer niemiecki ma od 6 do 11 cyfr w zależności od regionu. Twoja walidacja musi znać te reguły.
Najlepszym podejściem do walidacji numerów telefonów jest standard E.164. To międzynarodowy format zdefiniowany przez ITU, który rozumie każdy globalny system. Format E.164 to znak plus, kod kraju, a potem numer krajowy. Bez spacji, nawiasów i myślników. +14155550123 dla numeru amerykańskiego. Tak zapisujesz dane w bazie. To, co użytkownik widzi i wpisuje, jest sformatowane dla czytelności. To, co jest zapisywane, ma format E.164 dla spójności i dokładności.
Waliduj w dwóch miejscach. Po pierwsze, waliduj w przeglądarce w trakcie pisania. Walidacja w czasie rzeczywistym. Użytkownik widzi znaczek zaznaczenia, gdy numer jest kompletny i poprawny. Widzi komunikat, gdy czegoś brakuje. Po drugie, waliduj na serwerze po wysłaniu. Walidacja po stronie klienta sprawia, że doświadczenie jest płynne. Walidacja po stronie serwera chroni Twoje dane na wypadek, gdyby ktoś wyłączył kontrole w przeglądarce lub wysłał złe dane przez API.
Błąd proszenia o potwierdzenie numeru telefonu
Niektóre formularze proszą o numer telefonu, a potem o potwierdzenie numeru. Wpisz swój numer. Wpisz go ponownie, by potwierdzić. To podwaja tarcie. Ktoś musi poprawnie wpisać 10-cyfrowy numer, a potem znów poprawnie go wpisać. Większość osób zrobi literówkę w jednej z dwóch prób. Wtedy utkną. Dwa numery się nie zgadzają. Muszą poprawić oba pola, by przejść dalej.
Lepszym podejściem jest walidacja numeru w czasie rzeczywistym w trakcie pisania. Gdy dotrą do przycisku wysyłania, numer jest już zwalidowany. Nie potrzebujesz, by wpisywali go dwa razy. Sama walidacja jest potwierdzeniem.
Częste błędy, które psują jakość danych telefonicznych
Przyjmowanie dowolnego numeru bez sprawdzania kraju
Formularz przyjmuje numer 7-cyfrowy i 15-cyfrowy, nie wiedząc, z jakiego kraju pochodzi którykolwiek z nich. Oba są zapisane jako poprawne. Później próbujesz do kogoś zadzwonić i żaden numer nie działa. Zawsze waliduj na podstawie wybranego kraju. Numer 7-cyfrowy może być poprawny w niektórych krajach europejskich. Numer 10-cyfrowy jest standardem w USA, ale wszędzie indziej jest błędny. Kontekst kraju ma znaczenie dla każdej reguły walidacji.
Pokazywanie błędów walidacji dopiero po wysłaniu
Jeśli czekasz z informacją, że numer telefonu jest niekompletny lub nieprawidłowy, aż ktoś kliknie wyślij, tworzysz tarcie. Klikają wyślij. Widzą błąd. Poprawiają numer. Wysyłają ponownie. Walidacja w czasie rzeczywistym temu zapobiega. W chwili, gdy skończą wpisywać numer, wiedzą, czy jest poprawny. W momencie wysyłania nie powinno być niespodzianek.
Ukrywanie selektora kraju w mylącym miejscu
Kod kraju to nie dodatek. Spraw, by był oczywisty. Duża lista rozwijana na górze pola telefonu, a nie zakopana pod trzema innymi listami. Użytkownik musi ją widzieć i móc łatwo zmienić. Jeśli wybierze zły kraj, powinien od razu to zauważyć po zmianie formatu w polu.
Brak wyjaśnienia, po co potrzebujesz numeru telefonu
Badania pokazują, że 14 procent użytkowników porzuci zamówienie, jeśli pole telefonu jest wymagane bez wyjaśnienia. Testy pokazują jednak także, że użytkownicy zostaną, jeśli po prostu powiesz im, dlaczego go potrzebujesz. Dodaj jedno zdanie podpowiedzi. „Użyjemy go do potwierdzenia Twojego zamówienia" lub „W ten sposób skontaktujemy się z Tobą w razie pytań." Mały kontekst zapobiega porzuceniom.
Format działający tylko w jednym kraju
Jeśli formatujesz wszystkie numery jako (XXX) XXX-XXXX, ograniczasz się do numerów amerykańskich. Ten format nic nie znaczy w Niemczech ani w Japonii. Użyj E.164 do zapisu i maski uwzględniającej kraj do wpisywania albo spraw, by format dostosowywał się do wybranego kraju. Nie zakładaj, że jeden format działa wszędzie.
Kwestie prywatności i opcjonalne pole telefonu
Numery telefonów to dane osobowe. W wielu jurysdykcjach ich zbieranie uruchamia przepisy o ochronie prywatności. Użytkownicy coraz ostrożniej podchodzą do numerów telefonów, bo prowadzą one do spamerskich połączeń. Niektóre formularze zbierają numery z przyzwyczajenia, a nie z faktycznej potrzeby. Jeśli naprawdę nie potrzebujesz numeru telefonu, nie pytaj o niego. Jeśli go potrzebujesz, wyjaśnij dlaczego.
Jeśli to możliwe, uczyń pole opcjonalnym. Pola wymagane tworzą tarcie. Pola opcjonalne zmniejszają liczbę porzuceń. Jeśli kontakt telefoniczny jest ważny, ale nie jest absolutnie wymagany w Twoim procesie, oznacz go jako opcjonalny i wyjaśnij wartość. „Dodaj numer telefonu, byśmy mogli wysyłać Ci aktualizacje zamówienia SMS-em" daje powód do wypełnienia, nawet jeśli nie jest wymagane.
Jak WEMASY obsługuje pola numeru telefonu
Kreator formularzy WEMASY zawiera pola numeru telefonu z wbudowaną obsługą międzynarodową. Utwórz pole telefonu i wybierz, czy jest lokalne, czy międzynarodowe. Dla lokalnego ustaw swój kraj. Dla międzynarodowego użytkownicy widzą listę krajów z ikonami flag. Pole automatycznie pokazuje właściwą maskę na podstawie wybranego kraju. W trakcie pisania pole formatuje się automatycznie. (555) 123-4567 pojawia się bez wpisywania nawiasów i myślników. Walidacja w czasie rzeczywistym potwierdza, że numer jest kompletny i poprawny dla wybranego kraju. Na telefonie pokazuje się klawiatura numeryczna. Pole działa na każdym urządzeniu. Zobacz dane numerów telefonów w analityce formularza i zauważ wzorce w tym, jakiego formatu próbują używać użytkownicy. Gdy dane trafiają do Twojego CRM, wszystkie numery mają format E.164. Są spójne. Działają z systemami wybierania numerów. Twoja dalsza komunikacja trafia do właściwej osoby.