Ένα πεδίο τηλεφώνου φαίνεται απλό, αλλά δεν είναι. Ένα κουτί κειμένου με ετικέτα "Τηλέφωνο". Μόλις όμως ανοίξεις τη φόρμα σε διεθνείς χρήστες ή ζητήσεις τηλέφωνο από κινητό, αυτό το απλό πεδίο περιπλέκεται. Οι χώρες γράφουν τους αριθμούς διαφορετικά. Χρειάζονται διαφορετικά πληκτρολόγια. Όσοι καλούν από το εξωτερικό σκέφτονται με κωδικούς χώρας. Η φόρμα σου πρέπει να τα χειριστεί όλα, αλλιώς χάνεις ποιότητα δεδομένων. Ένα καλό πεδίο τηλεφώνου δουλεύει παντού και οδηγεί τους χρήστες προς τη σωστή μορφή, όχι ενάντια σε αυτήν.
Πάρε οποιαδήποτε φόρμα υψηλής μετατροπής που συλλέγει τηλέφωνα. Δες πώς χειρίζεται το πεδίο. Οι περισσότερες το αντιμετωπίζουν σαν κάθε πεδίο κειμένου και υποθέτουν ότι οι χρήστες θα γράψουν όποια μορφή νομίζουν σωστή. Μετά τα δεδομένα φτάνουν χάος. Κάποιοι αριθμοί έχουν παύλες. Κάποιοι παρενθέσεις. Κάποιοι κενά. Κάποιοι καμία μορφοποίηση. Η βάση δεδομένων σου έχει τον ίδιο αριθμό σε πέντε διαφορετικές μορφές. Όταν χρειαστεί να πάρεις κάποιον τηλέφωνο, το σύστημά σου δεν καταλαβαίνει ότι το 5551234567 και το (555) 123-4567 είναι ο ίδιος αριθμός. Τα δεδομένα έχουν τεχνικά συλλεχθεί, αλλά λειτουργικά είναι χαλασμένα.
Η λύση δεν είναι να δέχεσαι το χάος και να το κανονικοποιείς αργότερα. Η λύση είναι να οδηγείς τους χρήστες προς μία σωστή μορφή καθώς πληκτρολογούν. Αυτό γίνεται με input masking, έξυπνες προεπιλογές και έλεγχο που βοηθά αντί να μπλοκάρει.
Γιατί τα πεδία τηλεφώνου θέλουν διαφορετικό χειρισμό από τα πεδία κειμένου
Ο αριθμός τηλεφώνου είναι δεδομένο με διεθνείς κανόνες. Μια διεύθυνση email είναι ουσιαστικά καθολική. Ένα όνομα μπορεί να είναι ό,τι θέλει κάποιος. Ο αριθμός τηλεφώνου όμως έχει δομή που ορίζεται από τη Διεθνή Ένωση Τηλεπικοινωνιών. Οι χώρες χρησιμοποιούν διαφορετικά μήκη, προθέματα και πρότυπα μορφοποίησης. Ένας έγκυρος αριθμός στην Ιαπωνία δεν μοιάζει καθόλου με έγκυρο αριθμό στη Γαλλία. Το πεδίο σου πρέπει να το καταλαβαίνει, αλλιώς απορρίπτει σωστούς αριθμούς και δέχεται λάθος.
Επιπλέον, οι χρήστες σκέφτονται τους αριθμούς τηλεφώνου με τη μορφή της δικής τους χώρας. Κάποιος στο Λονδίνο σκέφτεται στη βρετανική μορφή. Κάποιος στο Βερολίνο στη γερμανική. Όταν τους αναγκάζεις στην αμερικανική μορφή, μπερδεύονται. Κάνουν λάθη. Εγκαταλείπουν τη φόρμα. Η τριβή προέρχεται από την ασυμφωνία ανάμεσα σε αυτό που περιμένει το πεδίο και σε αυτό που προσπαθεί να σου δώσει ο χρήστης.
Η απόφαση ανάμεσα σε ένα πεδίο και σε χωριστά πεδία
Κάποιες φόρμες σπάνε τον αριθμό τηλεφώνου σε χωριστά πεδία. Ο κωδικός περιοχής σε ένα κουτί. Το πρόθεμα σε άλλο. Ο αριθμός γραμμής σε άλλο. Αυτό δουλεύει υπέροχα για αμερικανικούς αριθμούς, όπου η δομή είναι προβλέψιμη. Παντού αλλού χαλά. Ένας χρήστης στη Γερμανία δεν χωράει τον αριθμό του σε τρία αμερικανικά κουτιά. Ούτε ένας στην Αυστραλία ή στη Γαλλία. Τα χωριστά πεδία βλάπτουν και την εμπειρία στο κινητό, γιατί οι χρήστες πρέπει να πατούν ανάμεσα στα πεδία αντί να πληκτρολογούν συνεχόμενα. Οι δοκιμές χρηστικότητας δείχνουν ότι πολλοί χρήστες δυσκολεύονται να πηγαίνουν ανάμεσα σε χωριστά πεδία στο κινητό.
Ένα πεδίο είναι καλύτερο. Ένα μακρύ κουτί. Ένα μέρος για να γράψεις ολόκληρο τον αριθμό. Το πεδίο καθοδηγεί τη μορφή με input masking και όχι με διαχωρισμό. Αυτό δουλεύει εξίσου για εσωτερικούς και διεθνείς αριθμούς. Οι χρήστες κινητού γράφουν μία φορά και τελειώνουν.
Πώς το input masking μετατρέπει το χάος σε τάξη
Το input masking μορφοποιεί αυτόματα τον αριθμό καθώς γράφει κάποιος. Γράφει 5 5 5 1 2 3 4 5 6 7 και το πεδίο δείχνει (555) 123-4567. Γράφει αργά ή γρήγορα, η μορφοποίηση ακολουθεί. Αυτό εξυπηρετεί δύο σκοπούς. Πρώτον, του δίνει άμεση ανατροφοδότηση ότι γράφει στη σωστή μορφή. Δεύτερον, τον εμποδίζει να γράψει λάθος μορφή εξαρχής. Δεν μπορεί να πληκτρολογήσει χαρακτήρα που χαλά τη μορφή. Το πεδίο δεν τον δέχεται.
Η μορφή που εμφανίζεται εξαρτάται από τη χώρα που έχει επιλεγεί. Αν επιλέξει Ηνωμένες Πολιτείες, η μάσκα είναι (XXX) XXX-XXXX. Αν επιλέξει Καναδά, είναι η ίδια. Αν επιλέξει Γερμανία, η μάσκα προσαρμόζεται. Ο χρήστης βλέπει μια μορφή που αναγνωρίζει. Γράφει μέσα σε αυτήν. Τα δεδομένα φτάνουν καθαρά σε εσένα.
Έρευνα δείχνει ότι το 89 τοις εκατό των χρηστών θα γράψει τον αριθμό τηλεφώνου σε όποια μορφή διαλέξει, ακόμα και όταν υπάρχουν υποδείξεις. Το input masking αφαιρεί αυτό το πρόβλημα εντελώς. Δεν υποδεικνύεις τη μορφή. Την επιβάλλεις οπτικά καθώς γράφουν.
Κωδικός χώρας και διεθνής υποστήριξη
Μόλις πας διεθνώς, χρειάζεσαι επιλογέα χώρας. Ένα dropdown που δείχνει ονόματα χωρών με εικονίδια σημαίας. Ο χρήστης διαλέγει τη χώρα του. Το πεδίο ενημερώνει τη μάσκα εισαγωγής. Ο κωδικός χώρας εμφανίζεται αυτόματα.
Δύο αποφάσεις σχεδιασμού μετράνε εδώ. Πρώτον, όρισε έξυπνη προεπιλογή. Αν οι περισσότεροι χρήστες σου είναι στις ΗΠΑ, βάλε προεπιλογή τις ΗΠΑ. Αν έχεις παγκόσμιο κοινό, βάλε προεπιλογή την πραγματική τοποθεσία του χρήστη με δεδομένα γεωεντοπισμού. Κάποιος στη Γαλλία δεν πρέπει να κυλά μέσα από 20 χώρες για να βρει τη Γαλλία. Δεύτερον, κράτα τον επιλογέα χώρας ορατό και εύκολο να αλλάξει. Ο χρήστης μπορεί να επιλέξει λάθος χώρα κατά λάθος. Πρέπει να μπορεί να αλλάξει με ένα πάτημα και όχι να ψάχνει ένα θαμμένο dropdown.
Ο κωδικός χώρας πρέπει να εμφανίζεται δίπλα στον αριθμό. Ο χρήστης βλέπει +1 (555) 123-4567 και όχι μόνο (555) 123-4567. Έτσι η μορφή δεν αφήνει αμφιβολία. Ξέρει ότι είναι αμερικανικός αριθμός από το πρόθεμα +1. Αν έκανε λάθος και διάλεξε λάθος χώρα, το βλέπει αμέσως και μπορεί να αλλάξει.
Ένα ακόμα πράγμα: όταν ο χρήστης αλλάζει χώρα, κράτα τον αριθμό που έχει ήδη γράψει. Μη σβήνεις το πεδίο. Μην κάνεις reset σε όλα. Αν έγραψε 5551234567 και μετά κατάλαβε ότι διάλεξε λάθος χώρα, άσε τον να αλλάξει τον κωδικό χώρας και κράτα τα ψηφία. Δεν πρέπει να ξαναρχίσει από την αρχή.
Πληκτρολόγια κινητού και το χαρακτηριστικό type="tel"
Στο κινητό, το πληκτρολόγιο μετράει. Δείξε το πληκτρολόγιο email για πεδίο email. Δείξε το αριθμητικό πληκτρολόγιο για αριθμό τηλεφώνου. Δεν είναι μόνο ευκολία. Μια μικρή διαφορά στη διάταξη του πληκτρολογίου αποτρέπει λάθη. Όποιος βλέπει αριθμητικό πληκτρολόγιο θυμάται ότι γράφει αριθμό και όχι κείμενο. Η διάταξη κάνει πιο δύσκολο να γράψει γράμματα κατά λάθος.
Χρησιμοποίησε type="tel" στην HTML για να εμφανίζεται αυτόματα το αριθμητικό πληκτρολόγιο. Δεν δείχνουν όλα τα κινητά το ίδιο πληκτρολόγιο. Κάποια δείχνουν 0-9 συν σύμβολα. Κάποια μόνο αριθμούς. Κάποια γράμματα μαζί με αριθμούς. Η συμπεριφορά διαφέρει ανά συσκευή. Όμως κάθε κινητό θα δείξει κάτι πιο χρήσιμο από το πλήρες πληκτρολόγιο QWERTY.
Εκτός από την επιλογή πληκτρολογίου, οι οθόνες κινητού είναι μικρές. Κάνε το πεδίο μεγάλο. Κουμπιά στο μέγεθος αντίχειρα στο κάτω μέρος. Πεδίο πλήρους πλάτους. Χωρίς οριζόντια κύλιση. Ένας αριθμός που είναι δύσκολο να πατηθεί είναι ένας αριθμός που δεν θα γραφτεί σωστά.
Ποιες στρατηγικές ελέγχου δουλεύουν πραγματικά
Ο έλεγχος εγκυρότητας ελέγχει αν ο αριθμός είναι αληθινός. Αληθινός σημαίνει ότι ακολουθεί τους κανόνες μορφής της επιλεγμένης χώρας και έχει σωστό αριθμό ψηφίων. Οι χώρες έχουν διαφορετικό αριθμό ψηφίων. Ένας αμερικανικός αριθμός έχει 10 ψηφία μετά τον κωδικό χώρας. Ένας γερμανικός έχει 6 έως 11 ψηφία ανάλογα με την περιοχή. Ο έλεγχός σου πρέπει να ξέρει αυτούς τους κανόνες.
Η καλύτερη προσέγγιση ελέγχου για αριθμούς τηλεφώνου είναι το πρότυπο E.164. Είναι η διεθνής μορφή που ορίζεται από την ITU και την καταλαβαίνει κάθε παγκόσμιο σύστημα. Η μορφή E.164 είναι ένα σύμβολο συν, ο κωδικός χώρας και μετά ο εθνικός αριθμός. Χωρίς κενά, παρενθέσεις ή παύλες. +14155550123 για αμερικανικό αριθμό. Αυτό αποθηκεύεται στη βάση δεδομένων σου. Αυτό που βλέπει και γράφει ο χρήστης είναι μορφοποιημένο για ευανάγνωστο. Αυτό που αποθηκεύεται είναι E.164, για συνέπεια και ακρίβεια.
Έλεγχε σε δύο σημεία. Πρώτον, έλεγξε στον browser καθώς γράφει ο χρήστης. Έλεγχος σε πραγματικό χρόνο. Βλέπει ένα σημάδι επιλογής όταν ο αριθμός είναι πλήρης και έγκυρος. Βλέπει μήνυμα όταν κάτι λείπει. Δεύτερον, έλεγξε στον server σου αφού τον στείλει. Ο έλεγχος client-side κάνει την εμπειρία ομαλή. Ο έλεγχος server-side προστατεύει τα δεδομένα σου, σε περίπτωση που κάποιος απενεργοποιήσει τους ελέγχους του browser ή στείλει λάθος δεδομένα μέσω API.
Το λάθος να ζητάς επιβεβαίωση τηλεφώνου
Κάποιες φόρμες ζητούν αριθμό τηλεφώνου και μετά επιβεβαίωση τηλεφώνου. Γράψε τον αριθμό σου. Γράψε τον ξανά για επιβεβαίωση. Αυτό διπλασιάζει την τριβή. Κάποιος πρέπει να γράψει σωστά έναν αριθμό 10 ψηφίων και μετά να τον ξαναγράψει σωστά. Οι περισσότεροι θα κάνουν τυπογραφικό λάθος σε μία από τις δύο προσπάθειες. Μετά κολλάνε. Οι δύο αριθμοί δεν ταιριάζουν. Πρέπει να διορθώσουν και τα δύο πεδία για να προχωρήσουν.
Καλύτερη προσέγγιση είναι να ελέγχεις τον αριθμό σε πραγματικό χρόνο καθώς γράφει. Μέχρι να φτάσει στο κουμπί αποστολής, ο αριθμός έχει ήδη ελεγχθεί. Δεν χρειάζεται να τον γράψει δύο φορές. Ο ίδιος ο έλεγχος είναι η επιβεβαίωση.
Συνηθισμένα λάθη που χαλούν την ποιότητα των δεδομένων τηλεφώνου
Να δέχεσαι οποιονδήποτε αριθμό χωρίς να ελέγχεις τη χώρα
Μια φόρμα δέχεται αριθμό 7 ψηφίων και αριθμό 15 ψηφίων, χωρίς να ξέρει από ποια χώρα προήλθε ο καθένας. Και οι δύο αποθηκεύονται ως έγκυροι. Αργότερα προσπαθείς να πάρεις κάποιον τηλέφωνο και κανένας αριθμός δεν δουλεύει. Έλεγχε πάντα με βάση την επιλεγμένη χώρα. Ένας αριθμός 7 ψηφίων μπορεί να είναι έγκυρος σε κάποιες ευρωπαϊκές χώρες. Ένας αριθμός 10 ψηφίων είναι στάνταρ στις ΗΠΑ, αλλά λάθος παντού αλλού. Το πλαίσιο της χώρας μετράει για κάθε κανόνα ελέγχου.
Να δείχνεις σφάλματα ελέγχου μόνο μετά την αποστολή
Αν περιμένεις μέχρι να πατήσει κάποιος αποστολή για να του πεις ότι ο αριθμός είναι ελλιπής ή άκυρος, έχεις δημιουργήσει τριβή. Πατά αποστολή. Βλέπει σφάλμα. Διορθώνει τον αριθμό. Στέλνει ξανά. Ο έλεγχος σε πραγματικό χρόνο το αποτρέπει. Μόλις τελειώσει να γράφει τον αριθμό, ξέρει αν είναι έγκυρος. Μέχρι την αποστολή δεν πρέπει να υπάρχουν εκπλήξεις.
Να κρύβεις τον επιλογέα χώρας σε μπερδεμένο σημείο
Ο κωδικός χώρας δεν είναι δευτερεύον θέμα. Κάν' τον εμφανή. Ένα μεγάλο dropdown στην κορυφή του πεδίου τηλεφώνου και όχι θαμμένο κάτω από άλλα τρία dropdowns. Ο χρήστης πρέπει να το βλέπει και να μπορεί να το αλλάξει εύκολα. Αν διαλέξει λάθος χώρα, πρέπει να το προσέξει αμέσως από την αλλαγή της μορφής στο πεδίο.
Να μην εξηγείς γιατί χρειάζεσαι τον αριθμό τηλεφώνου
Έρευνα δείχνει ότι το 14 τοις εκατό των χρηστών θα εγκαταλείψει το checkout, αν ένα πεδίο τηλεφώνου είναι υποχρεωτικό χωρίς εξήγηση. Οι δοκιμές όμως δείχνουν επίσης ότι οι χρήστες μένουν αν απλώς τους πεις γιατί το χρειάζεσαι. Πρόσθεσε μία πρόταση βοηθητικού κειμένου. "Θα το χρησιμοποιήσουμε για να επιβεβαιώσουμε την παραγγελία σου" ή "Έτσι θα επικοινωνήσουμε μαζί σου αν υπάρχουν ερωτήσεις." Λίγο πλαίσιο αποτρέπει την εγκατάλειψη.
Να χρησιμοποιείς μορφοποίηση που δουλεύει μόνο σε μία χώρα
Αν μορφοποιείς όλους τους αριθμούς ως (XXX) XXX-XXXX, έχεις κλειδώσει τον εαυτό σου σε αμερικανικούς αριθμούς. Αυτή η μορφή δεν σημαίνει τίποτα στη Γερμανία ή στην Ιαπωνία. Είτε χρησιμοποίησε E.164 για αποθήκευση και μάσκα που ξέρει τη χώρα για εισαγωγή, είτε κάνε τη μορφή να προσαρμόζεται με βάση την επιλεγμένη χώρα. Μην υποθέτεις ότι μία μορφή δουλεύει παντού.
Θέματα απορρήτου και το προαιρετικό πεδίο τηλεφώνου
Οι αριθμοί τηλεφώνου είναι προσωπικά δεδομένα. Σε πολλές δικαιοδοσίες, η συλλογή τους ενεργοποιεί κανονισμούς απορρήτου. Οι χρήστες προστατεύουν όλο και περισσότερο τους αριθμούς τους, γιατί οδηγούν σε ανεπιθύμητες κλήσεις. Κάποιες φόρμες συλλέγουν τηλέφωνα από συνήθεια και όχι από πραγματική ανάγκη. Αν δεν χρειάζεσαι πραγματικά τηλέφωνο, μη το ζητάς. Αν το χρειάζεσαι, εξήγησε γιατί.
Κάνε το πεδίο προαιρετικό, αν γίνεται. Τα υποχρεωτικά πεδία δημιουργούν τριβή. Τα προαιρετικά μειώνουν την εγκατάλειψη. Αν η επικοινωνία με τηλέφωνο είναι σημαντική αλλά όχι απολύτως απαραίτητη για τη ροή σου, σήμανέ το ως προαιρετικό και εξήγησε την αξία. Το "Πρόσθεσε τον αριθμό σου για να σου στέλνουμε ενημερώσεις παραγγελίας με μήνυμα" τους δίνει λόγο να το συμπληρώσουν, ακόμα κι αν δεν είναι υποχρεωτικό.
Φόρμες στο WEMASY
Στον Δημιουργό ιστοσελίδων του WEMASY μπορείς να προσθέσεις φόρμα στην ιστοσελίδα σου. Εσύ διαλέγεις ποια πεδία θα ζητάς, και ένα πεδίο τηλεφώνου ανήκει σε αυτά που μπορείς να σκεφτείς.