Αν μια φόρμα ζητά ημερομηνία και οι επισκέπτες σου τα παρατούν αντί να τη συμπληρώσουν, έχεις πρόβλημα με το πεδίο ημερομηνίας. Ακούγεται απλό. Διάλεξε μια ημερομηνία. Γράψε μια ώρα. Οι μικρές όμως επιλογές σχεδιασμού για το πώς ζητάς αυτά τα στοιχεία ευθύνονται για εκπληκτικά μεγάλο μέρος της εγκατάλειψης φόρμας.
Τα πεδία ημερομηνίας και ώρας φαίνονται απλά από τη σκοπιά του σχεδιαστή. Η πρόκληση είναι ότι οι επισκέπτες αλληλεπιδρούν μαζί τους διαφορετικά, ανάλογα με το ποια ημερομηνία ψάχνουν, ποια συσκευή χρησιμοποιούν και αν χρειάζεται να κυλήσουν μέσα από μήνες ή να γράψουν αριθμούς. Αν σχεδιάσεις σωστά το πεδίο, ο κόσμος περνά τη φόρμα σου χωρίς τριβή. Αν το κάνεις λάθος, τα παρατάει πριν καν προσπαθήσει.
Γιατί τα πεδία ημερομηνίας και ώρας μετράνε για το ποσοστό ολοκλήρωσης της φόρμας σου
Τα πεδία ημερομηνίας είναι σημεία απόφασης. Ένας επισκέπτης που συμπληρώνει φόρμα κράτησης πρέπει να διαλέξει ημερομηνία ραντεβού. Κάποιος που εγγράφεται σε εκδήλωση πρέπει να γράψει το έτος γέννησής του. Ένας πελάτης που ρυθμίζει επαναλαμβανόμενη παραγγελία πρέπει να διαλέξει ημερομηνία έναρξης. Σε κάθε περίπτωση, το κόστος αλληλεπίδρασης αυτού του ενός πεδίου μπορεί να καθορίσει αν θα τελειώσουν ή θα φύγουν.
Πάρε την κράτηση ραντεβού. Η έρευνα δείχνει ότι οι date pickers δουλεύουν καλά όταν οι επισκέπτες διαλέγουν ημερομηνίες στο κοντινό μέλλον. Ο ίδιος date picker γίνεται εκνευριστικός όταν ο επισκέπτης γράφει την ημερομηνία γέννησής του και πρέπει να γυρίσει 40 χρόνια πίσω. Το μοντέλο αλληλεπίδρασης που φαίνεται εύκολο για τον επόμενο μήνα φαίνεται χαλασμένο για το 1985.
Τα πεδία ώρας δημιουργούν παρόμοιο πρόβλημα. Ένας επισκέπτης που προσπαθεί να ορίσει ραντεβού στις 2:30 μ.μ. δεν πρέπει να χρειάζεται να πατά μέσα από λίστες dropdown ξεχωριστά για ώρες, λεπτά και π.μ./μ.μ. Ο τρόπος που δομείς αυτά τα πεδία επηρεάζει άμεσα αν κάποιος θα κλείσει το ραντεβού ή θα κλείσει τον browser.
Πεδία κειμένου ή date pickers: διάλεξε τη σωστή αλληλεπίδραση
Η επιλογή ανάμεσα σε πεδίο κειμένου και επιλογέα ημερομηνίας με ημερολόγιο δεν είναι καθολική. Εξαρτάται από το είδος της ημερομηνίας που ζητάς.
Χρησιμοποίησε πεδία κειμένου για ημερομηνίες μακριά στο παρελθόν ή στο μέλλον
Όταν κάποιος γράφει την ημερομηνία γέννησής του, ψάχνει ημερομηνία που μπορεί να είναι 30, 40 ή 50 χρόνια πίσω. Ένας date picker με ημερολόγιο τον αναγκάζει να πατήσει μέσα από δεκάδες μήνες για να φτάσει. Τρία χωριστά πεδία κειμένου με ετικέτες Ημέρα, Μήνας και Έτος δουλεύουν καλύτερα. Ο επισκέπτης γράφει γρήγορα σε κάθε πεδίο και περνά αυτόματα από το ένα κουτί στο επόμενο. Οκτώ έως δέκα πατήματα πλήκτρων και τελείωσε. Ένας date picker για την ίδια ενέργεια θέλει πολλά περισσότερα πατήματα ή κλικ.
Αν χρησιμοποιήσεις ένα πεδίο κειμένου αντί για τρία, δείξε καθαρά την αναμενόμενη μορφή με ετικέτα όπως "MM/DD/YYYY" ή "DD/MM/YYYY", ανάλογα με την περιοχή σου. Μη χρησιμοποιείς placeholder που εξαφανίζεται όταν ο χρήστης πατήσει μέσα. Η ετικέτα μένει ορατή και του λέει τι θέλεις.
Χρησιμοποίησε date pickers για ημερομηνίες στο κοντινό μέλλον
Ένας date picker με ημερολόγιο έχει νόημα όταν κάποιος κλείνει ραντεβού για την επόμενη εβδομάδα ή διαλέγει ημερομηνία ταξιδιού για τον επόμενο μήνα. Ο επιλογέας δείχνει τον τρέχοντα μήνα από προεπιλογή και ο χρήστης πατά την ημερομηνία που θέλει. Η οπτική μεταφορά του ημερολογίου ταιριάζει με το πώς σκέφτονται ήδη οι άνθρωποι τον προγραμματισμό.
Ο βασικός κανόνας: βάλε το ημερολόγιο στον τρέχοντα μήνα για μελλοντικές ημερομηνίες. Μην αναγκάζεις τον κόσμο να πατά μέσα από μήνες για να βρει τον σωστό. Και αν κάποιες ημερομηνίες δεν είναι διαθέσιμες, δείξε ποιες είναι μη διαθέσιμες κατευθείαν στον επιλογέα. Οι γκριζαρισμένες ή απενεργοποιημένες ημερομηνίες γλιτώνουν τον εκνευρισμό του να διαλέξεις μια ημερομηνία και να δεις μετά την αποστολή σφάλμα "μη διαθέσιμο".
Καλές πρακτικές για date pickers: πώς δουλεύουν για τους επισκέπτες σου
Ένας date picker είναι χρήσιμος μόνο όσο μπορούν οι επισκέπτες να αλληλεπιδράσουν μαζί του. Κανόνες που μετράνε:
Υποστήριξε χειροκίνητη εισαγωγή κειμένου δίπλα στον επιλογέα
Δεν θέλουν όλοι να χρησιμοποιούν τη διεπαφή ημερολογίου. Κάποιοι επισκέπτες προτιμούν να γράφουν την ημερομηνία κατευθείαν. Επέτρεπε πάντα εισαγωγή από το πληκτρολόγιο. Αν κάποιος γράψει "3/15/2026", δέξου το χωρίς να τον αναγκάσεις να περάσει από τον επιλογέα. Μη ζητάς ειδικούς χαρακτήρες. Δέξου εξίσου το "3-15-2026" ή το "3 15 2026". Η ευέλικτη μορφοποίηση αφαιρεί την τριβή.
Χρησιμοποίησε τύπους πεδίων HTML5 στο κινητό
Οι κινητές συσκευές έχουν εγγενείς επιλογείς ημερομηνίας και ώρας ενσωματωμένους στο λειτουργικό σύστημα. Χρησιμοποίησε type="date" ή type="time" στο πεδίο της φόρμας HTML. Στο iPhone, αυτό ενεργοποιεί τον τροχό ημερομηνίας του iOS. Στο Android, δείχνει τον επιλογέα ημερομηνίας της πλατφόρμας. Οι επισκέπτες περιμένουν αυτή την αλληλεπίδραση στο κινητό τους και ο εγγενής επιλογέας είναι βελτιστοποιημένος για κινητό.
Περιόρισε το εύρος ημερομηνιών για να αποφύγεις την ατέλειωτη κύλιση
Αν ζητάς μελλοντική ημερομηνία, περιόρισε τον επιλογέα να δείχνει μήνες των επόμενων 2-3 ετών και όχι των επόμενων 50 ετών. Αν ζητάς ιστορική ημερομηνία, όρισε λογικό σημείο εκκίνησης. Για την "ημερομηνία γέννησης", βάλε προεπιλογή 30 ή 50 χρόνια πίσω και όχι 100.
Δείξε πλαίσιο για μη διαθέσιμες ημερομηνίες
Αν κάποιες ημερομηνίες δεν μπορούν να επιλεγούν (επειδή οι ώρες είναι ήδη κλεισμένες ή ο καιρός εμποδίζει την υπηρεσία), σήμανέ τες διαφορετικά στον επιλογέα. Γκρίζαρέ τες, απενεργοποίησέ τες ή δείξε οπτική ένδειξη. Έτσι αποφεύγεται το αδιέξοδο όπου κάποιος διαλέγει ημερομηνία και βλέπει μετά μήνυμα σφάλματος ότι δεν είναι διαθέσιμη.
Σχεδιασμός πεδίου ώρας: βοήθησε τους επισκέπτες να διαλέξουν τη σωστή στιγμή
Τα πεδία ώρας έχουν τις δικές τους προκλήσεις. Ένας επισκέπτης που διαλέγει ώρα ραντεβού δεν πρέπει να χρειάζεται να διαλέξει ώρες, λεπτά και π.μ./μ.μ. σε ξεχωριστά dropdowns. Συνδύασέ τα έξυπνα.
Πρόσφερε ώρα με βήματα 30 λεπτών
Τα περισσότερα συστήματα προγραμματισμού δεν χρειάζονται ανάλυση μέχρι το λεπτό. Τα βήματα 30 λεπτών καλύπτουν ραντεβού, συμβουλευτικές και κρατήσεις. Πρόσφερε ώρες όπως 9:00 π.μ., 9:30 π.μ., 10:00 π.μ. και ούτω καθεξής. Αυτό μειώνει τον αριθμό επιλογών χωρίς να χάνεις λειτουργικότητα.
Δείξε την ώρα σε μορφή που ήδη χρησιμοποιούν οι επισκέπτες
Για αμερικανικό κοινό, χρησιμοποίησε μορφή 12 ωρών με π.μ./μ.μ. Για διεθνή πλαίσια ή προγραμματισμό βάρδιας, η μορφή 24 ωρών μπορεί να έχει νόημα. Να είσαι συνεπής σε όλη τη φόρμα. Μην αλλάζεις ποτέ μορφή στη μέση μιας φόρμας.
Όρισε προεπιλεγμένη ώρα ή δείξε την τρέχουσα ώρα
Ένα πεδίο ώρας δεν πρέπει να είναι ποτέ εντελώς κενό. Είτε επίλεξε μια συνηθισμένη ώρα ραντεβού (όπως 10:00 π.μ.) είτε δείξε την τρέχουσα ώρα. Αυτό δίνει στους επισκέπτες ένα σημείο εκκίνησης και τους δείχνει ποια μορφή περιμένεις.
Θέματα κινητού για πεδία ημερομηνίας και ώρας
Οι φόρμες κινητού έχουν διαφορετικούς περιορισμούς από τον υπολογιστή. Ο χώρος είναι περιορισμένος. Οι στόχοι αφής πρέπει να είναι μεγαλύτεροι. Τα πληκτρολόγια καλύπτουν τη μισή οθόνη.
Χρησιμοποίησε εγγενείς επιλογείς κινητού όταν γίνεται
Τα πεδία ημερομηνίας και ώρας της HTML5 ενεργοποιούν τον επιλογέα του λειτουργικού συστήματος στο κινητό. Αυτό είναι πιο γρήγορο και πιο οικείο για τους χρήστες από έναν προσαρμοσμένο επιλογέα που φτιάχνεις μόνος σου. Ο τροχός ημερομηνίας του iOS και ο επιλογέας ημερομηνίας του Android είναι ήδη βελτιστοποιημένοι για αλληλεπίδραση στο κινητό.
Κάνε τους στόχους αφής αρκετά μεγάλους για πάτημα
Αν φτιάξεις προσαρμοσμένο επιλογέα, φρόντισε τα κουμπιά και οι ημερομηνίες να είναι τουλάχιστον 44 pixel επί 44 pixel. Μικρά τετράγωνα ημερολογίου που δουλεύουν μια χαρά στον υπολογιστή γίνονται αδύνατο να πατηθούν στο κινητό.
Απόφυγε την αυτόματη αποστολή
Μην στέλνεις αυτόματα τη φόρμα και μην πηγαίνεις στο επόμενο πεδίο μόλις επιλεγεί μια ημερομηνία. Άσε τους επισκέπτες να επιβεβαιώσουν την επιλογή τους και να προχωρήσουν μόνοι τους. Η αυτόματη αποστολή μπορεί να παγιδεύσει τους χρήστες σε λάθος ημερομηνία ή ώρα και να τους εκνευρίσει.
Μηνύματα σφάλματος και έλεγχος: οδήγησε τους χρήστες στη σωστή ημερομηνία
Ακόμα και με καλό σχεδιασμό, οι επισκέπτες κάποιες φορές διαλέγουν άκυρες ημερομηνίες. Γράφουν ημερομηνία επιστροφής πριν την ημερομηνία αναχώρησης. Διαλέγουν ημερομηνία που είναι ήδη κλεισμένη. Γράφουν "13/45" κατά λάθος. Ο χειρισμός σφαλμάτων καθορίζει αν θα διορθώσουν το πρόβλημα ή θα εγκαταλείψουν τη φόρμα.
Έλεγχος σε πραγματικό χρόνο
Μην περιμένεις να σταλεί η φόρμα για να πεις στους επισκέπτες ότι η ημερομηνία τους είναι λάθος. Έλεγχε καθώς γράφουν ή επιλέγουν. Αν κάποιος διαλέξει ημερομηνία επιστροφής πριν την αναχώρηση, πες του αμέσως. Αν μια ημερομηνία δεν είναι διαθέσιμη, ενημέρωσέ τον αμέσως, ώστε να διαλέξει άλλη.
Γράψε μηνύματα σφάλματος που εξηγούν τι πήγε στραβά
Ένα κακό σφάλμα λέει "Μη έγκυρη ημερομηνία". Ένα χρήσιμο σφάλμα λέει "Γράψε ημερομηνία στη μορφή MM/DD/YYYY" ή "Αυτή η ημερομηνία δεν είναι διαθέσιμη. Διάλεξε άλλη."
Ονόμασε το συγκεκριμένο πρόβλημα και πρότεινε τη λύση. Το μήνυμα σφάλματος δεν είναι τιμωρία. Είναι χρήσιμη καθοδήγηση.
Απόφυγε λογικά αδύνατες επιλογές
Αν ζητάς ημερομηνία αναχώρησης και ημερομηνία επιστροφής, απενεργοποίησε τις ημερομηνίες επιστροφής που πέφτουν πριν την επιλεγμένη αναχώρηση. Αν ζητάς ραντεβού, απενεργοποίησε τις ημερομηνίες που είναι ήδη πλήρως κλεισμένες. Κάνε τις αδύνατες επιλογές μη διαθέσιμες, αντί να ζητάς από τους επισκέπτες να διαλέξουν και να τους απορρίπτεις μετά.
Πρακτικά μοτίβα: τι δουλεύει σε διαφορετικές περιπτώσεις χρήσης
Ο καλύτερος σχεδιασμός πεδίου ημερομηνίας εξαρτάται από τον συγκεκριμένο τύπο φόρμας. Να τα συνηθισμένα μοτίβα.
Φόρμες κράτησης και ραντεβού
Χρησιμοποίησε date picker με ημερολόγιο. Βάλε προεπιλογή τον τρέχοντα μήνα ή τον επόμενο διαθέσιμο μήνα. Δείξε τις μη διαθέσιμες ημερομηνίες. Δέξου χειροκίνητη εισαγωγή ημερομηνίας ως εναλλακτική.
Πεδία ημερομηνίας γέννησης
Χρησιμοποίησε τρία πεδία κειμένου (Ημέρα, Μήνας, Έτος) ή ένα πεδίο κειμένου με ευέλικτη μορφοποίηση. Απόφυγε τους date pickers, γιατί η ημερομηνία είναι τόσο μακριά στο παρελθόν που ο επιλογέας γίνεται δύσχρηστος.
Ημερομηνία έναρξης για επαναλαμβανόμενες παραγγελίες ή συνδρομές
Χρησιμοποίησε απλό date picker με προεπιλογή την επόμενη διαθέσιμη ημερομηνία. Οι περισσότεροι επισκέπτες δέχονται την προεπιλογή ή διαλέγουν ημερομηνία μέσα στον επόμενο μήνα.
Επιλογή ώρας εκδήλωσης
Αν η εκδήλωσή σου έχει σταθερή ημερομηνία αλλά οι επισκέπτες διαλέγουν χρονική θέση, χρησιμοποίησε απλό επιλογέα ώρας με βήματα 30 λεπτών ή μίας ώρας. Δείξε ποιες θέσεις είναι διαθέσιμες και ποιες γεμάτες.