Ο επισκέπτης σου σαρώνει τη φόρμα σε δύο δευτερόλεπτα, πριν γράψει έναν χαρακτήρα. Διαβάζει τα μεγέθη των πεδίων, τα κενά, τη διάταξη. Ένα πεδίο ταχυδρομικού κώδικα τόσο πλατύ όσο ολόκληρη η φόρμα φωνάζει σύγχυση. Ένα textarea μίας γραμμής για λεπτομερή σχόλια στέλνει το μήνυμα ότι δεν περιμένεις πολλά.
Το πλάτος του πεδίου λέει στον χρήστη πόσο κείμενο περιμένεις να γράψει. Ένα μικροσκοπικό κουτί σημαίνει "δώσε μου το όνομά σου". Ένα ψηλό textarea σημαίνει "πες μου την ιστορία σου". Αν το κάνεις λάθος, ζητάς σύγχυση, κόπο στην πληκτρολόγηση και εγκατάλειψη της φόρμας.
Η φόρμα σου έχει δύο τύπους πεδίων κειμένου: το πεδίο μίας γραμμής και το textarea πολλών γραμμών. Μοιάζουν διαφορετικά, συμπεριφέρονται διαφορετικά και λύνουν διαφορετικά προβλήματα. Η επιλογή του σωστού δεν είναι περίπλοκη, αλλά μετράει για το πώς αντιλαμβάνονται οι χρήστες τη φόρμα σου και αν τη συμπληρώνουν.
Τι είναι ένα πεδίο κειμένου
Το πεδίο κειμένου είναι ένα κουτί μίας γραμμής όπου οι χρήστες γράφουν σύντομο κείμενο. Δεν αλλάζει γραμμή όταν φτάσεις στην άκρη. Δεν υποστηρίζει πολλές παραγράφους. Αν πατήσεις Enter, η φόρμα στέλνεται (ή πηγαίνει στο επόμενο πεδίο). Σχεδιάστηκε για περιορισμένα, σύντομα δεδομένα.
Το πεδίο κειμένου επιβάλλει ένα νοητικό συμβόλαιο με τον χρήστη. Ζητάς κάτι γρήγορο. Ένα όνομα. Ένα email. Έναν ταχυδρομικό κώδικα. Μια ημερομηνία. Μία μόνο πληροφορία.
Τι είναι ένα textarea
Το textarea είναι κουτί κειμένου πολλών γραμμών που μεγαλώνει καθώς γράφουν οι χρήστες. Αν πατήσεις Enter, παίρνεις νέα γραμμή κειμένου. Κυλά κάθετα όταν το περιεχόμενο ξεπερνά την ορατή περιοχή. Λέει στον χρήστη ότι περιμένεις περισσότερα από λίγες λέξεις. Οι παράγραφοι είναι ευπρόσδεκτες εδώ. Οι λεπτομερείς σκέψεις αναμένονται.
Το textarea αφαιρεί τον περιορισμό. Ο χρήστης ξέρει ότι μπορεί να γράψει όσα χρειάζεται, χωρίς να στριμώξει την απάντησή του σε μία γραμμή.
Πότε να χρησιμοποιείς πεδίο κειμένου μίας γραμμής
Χρησιμοποίησε πεδίο κειμένου όταν η αναμενόμενη απάντηση χωράει σε μία γραμμή και ο χρήστης μπορεί να απαντήσει με λίγες λέξεις ή λιγότερες.
Στοιχεία επικοινωνίας
Όνομα, email, αριθμός τηλεφώνου. Αυτά τα πεδία είναι πάντα πεδία μίας γραμμής. Ο χρήστης περιμένει να γράψει ένα όνομα και να προχωρήσει, όχι να ανοίξει επεξεργαστή κειμένου για τον αριθμό τηλεφώνου του.
Σύντομα αναγνωριστικά
Όνομα χρήστη, αριθμός λογαριασμού, ταχυδρομικός κώδικας, κωδικός πρόσβασης. Αυτά έχουν καθορισμένο μήκος ή αναμένεται να είναι σύντομα. Ένα πεδίο μίας γραμμής έχει νόημα.
Πεδία τοποθεσίας και logistics
Πόλη, πολιτεία, χώρα, οδός (πρώτη γραμμή). Αυτά είναι συνήθως καταχωρίσεις μίας γραμμής. Μπορείς να σπάσεις τη διεύθυνση σε πολλά πεδία μίας γραμμής αντί για ένα μεγάλο textarea.
Αναζήτηση και φιλτράρισμα
Κουτιά αναζήτησης. Φίλτρα προϊόντων. Εύρη ημερομηνιών. Αυτά περιμένουν γρήγορη εισαγωγή και όχι παράγραφο. Τα πεδία μίας γραμμής φαίνονται σωστά.
Ημερομηνίες και αριθμοί
Κάθε πεδίο όπου ο χρήστης γράφει συγκεκριμένη ημερομηνία, ώρα, ποσότητα ή τιμή. Πεδίο μίας γραμμής. Κάποιες φορές θέλεις εξειδικευμένο τύπο πεδίου για ημερομηνίες (όπως επιλογέα ημερομηνίας), αλλά το μοντέλο αλληλεπίδρασης παραμένει μίας γραμμής.
Πότε να χρησιμοποιείς textarea
Χρησιμοποίησε textarea όταν περιμένεις ο χρήστης να γράψει περισσότερες από μία προτάσεις ή όταν η απάντηση είναι από τη φύση της μακρύτερη από μία γραμμή.
Σχόλια και ανατροφοδότηση
Αν ρωτάς "Τι σχόλια έχεις;", ο χρήστης σκέφτεται σε παραγράφους και όχι σε μονές λέξεις. Το textarea δείχνει ότι υπάρχει χώρος για ολόκληρη τη σκέψη του. Δεν θα νιώσει στριμωγμένος.
Φόρμες μηνύματος και αιτήματος
Όταν ένας επισκέπτης συμπληρώνει φόρμα επικοινωνίας με πεδίο μηνύματος, χρειάζεται χώρο για να εξηγήσει την περίπτωσή του. Η ποσότητα κειμένου ποικίλλει πολύ. Ένα textarea χωράει και μια γρήγορη ερώτηση δύο προτάσεων και ένα λεπτομερές αίτημα δύο παραγράφων.
Πεδία περιγραφής και λεπτομερειών
Περιγραφές προϊόντων, περιγράμματα έργων, απαιτήσεις υπηρεσιών. Κάθε πεδίο που ζητά από τον χρήστη πλαίσιο ή λεπτομέρεια. Το textarea προσκαλεί αυτή τη λεπτομέρεια.
Σημειώσεις και ειδικές οδηγίες
Ένα πεδίο που λέει "Πρόσθεσε ειδικά αιτήματα" ή "Σημειώσεις για την παράδοση" χρειάζεται συχνά textarea, γιατί δεν μπορείς να προβλέψεις αν ο χρήστης έχει δύο λέξεις ή δύο παραγράφους να προσθέσει.
Η αρχή του μεγέθους: το πλάτος του πεδίου υποδεικνύει το αναμενόμενο μήκος
Το μέγεθος του πεδίου σου στέλνει μήνυμα πριν ο χρήστης γράψει έναν χαρακτήρα. Ένα πεδίο ταχυδρομικού κώδικα που απλώνεται σε όλο το πλάτος της φόρμας δημιουργεί σύγχυση. Ο χρήστης βλέπει όλον αυτόν τον χώρο και σκέφτεται "μήπως δεν κατάλαβα τι ζητάς;"
Χρησιμοποίησε αυτόν τον κανόνα: το οπτικό μέγεθος του πεδίου πρέπει να ταιριάζει με το αναμενόμενο μήκος της απάντησης.
Σύντομα πεδία κειμένου
Για ταχυδρομικό κώδικα, κάνε το πεδίο στενό. Ίσως 80 έως 120 pixel πλάτος στον υπολογιστή. Αυτό το οπτικό σήμα λέει στον χρήστη "γράψε πέντε ψηφία, όχι παράγραφο".
Για πεδίο ονόματος, χρησιμοποίησε μεσαίο πλάτος. Ίσως 200 έως 300 pixel. Αρκετά μακρύ για το "Alexander Thompson", αλλά όχι τόσο πλατύ που να προσκαλεί βιογραφικό.
Textareas
Τα textareas επεκτείνονται και οριζόντια και κάθετα. Ένα textarea ύψους τεσσάρων γραμμών δείχνει μεγαλύτερη απάντηση από ένα ύψους δύο γραμμών. Κάνε το textarea σου να ταιριάζει με την αναμενόμενη προσπάθεια.
Αν περιμένεις λίγες προτάσεις, ξεκίνα με τρεις έως πέντε ορατές γραμμές. Αν ζητάς λεπτομερή σχόλια, ξεκίνα με έξι έως οκτώ γραμμές. Οι χρήστες μπορούν να αλλάξουν το μέγεθος του πεδίου αν χρειάζονται περισσότερο χώρο, αλλά το αρχικό μέγεθος διαμορφώνει την προσδοκία τους.
Κανόνες σχεδιασμού για πεδία κειμένου
Συνδύαζε πάντα με ετικέτα
Μη χρησιμοποιείς ποτέ placeholder ως υποκατάστατο ορατής ετικέτας. Το placeholder εξαφανίζεται όταν ο χρήστης αρχίσει να γράφει, χαλώντας την προσβασιμότητα και αφήνοντάς τον να μαντεύει τι ήθελε το πεδίο. Χρησιμοποίησε σαφή ετικέτα πάνω ή δίπλα από το πεδίο και χρησιμοποίησε το placeholder μόνο ως ήπια υπόδειξη.
Κακό παράδειγμα: ένα πεδίο χωρίς ετικέτα, μόνο γκρι placeholder που λέει "Γράψε το όνομά σου".
Καλό παράδειγμα: μια ετικέτα "Όνομα" πάνω από το πεδίο, με προαιρετικό placeholder όπως "John Doe".
Σήμανε καθαρά τα υποχρεωτικά πεδία
Σήμανε τα υποχρεωτικά πεδία με αστερίσκο (*) ή τη λέξη "(υποχρεωτικό)" σε παρενθέσεις. Μην αφήνεις τους χρήστες να μαντεύουν αν ένα πεδίο είναι προαιρετικό.
Έλεγξε νωρίς, διόρθωσε με χάρη
Αν ένας χρήστης γράψει άκυρη διεύθυνση email ή λάθος μορφοποιημένο τηλέφωνο, μη σβήσεις αυτό που έγραψε. Δείξε μήνυμα σφάλματος που εξηγεί συγκεκριμένα το πρόβλημα και κράτα το μερικό κείμενό του, ώστε να το διορθώσει αντί να το ξαναγράψει από την αρχή.
Υποστήριξε τον αναμενόμενο τύπο εισαγωγής
Για email, χρησιμοποίησε type="email", ώστε οι χρήστες κινητού να παίρνουν πληκτρολόγιο βελτιστοποιημένο για email. Για τηλέφωνο, χρησιμοποίησε type="tel". Για αριθμούς, χρησιμοποίησε type="number". Αυτοί οι ειδικοί τύποι πεδίων βελτιώνουν την εμπειρία στο κινητό χωρίς να προσθέτουν δουλειά από τη δική σου πλευρά.
Κανόνες σχεδιασμού για textareas
Άσε το textarea να μεγαλώνει με το περιεχόμενο
Αν ένας χρήστης γράφει μακρύ μήνυμα και το textarea μένει σταθερού μεγέθους, πρέπει να κυλά μέσα στο πεδίο όσο γράφει. Αυτό χαλά την εμπειρία γραφής. Χρησιμοποίησε CSS ή JavaScript, ώστε το textarea να επεκτείνεται αυτόματα καθώς ο χρήστης προσθέτει γραμμές. Γράφει φυσικά, το πεδίο μεγαλώνει, χωρίς κύλιση μέσα στο ίδιο το πεδίο.
Δείξε καθαρά το αρχικό μέγεθος
Ένα textarea πρέπει να έχει αρκετό ορατό ύψος για να δείχνει ότι περιμένεις περισσότερα από μία γραμμή. Δείξε τουλάχιστον τρεις έως πέντε γραμμές κενού χώρου, ώστε οι χρήστες να καταλαβαίνουν ότι δεν είναι πεδίο μίας γραμμής.
Όρισε λογικό όριο χαρακτήρων, αν χρειάζεται
Κάποια textareas έχουν όρια. Μια φόρμα εξυπηρέτησης πελατών μπορεί να βάζει όριο 5.000 χαρακτήρων στα σχόλια. Αν έχεις όριο, δείξε τους χαρακτήρες που απομένουν καθώς γράφει ο χρήστης. Άσε τον να βλέπει πόσος χώρος του μένει, χωρίς να το ανακαλύψει όταν χτυπήσει στον τοίχο.
Χρησιμοποίησε γραμματοσειρά monospace για κώδικα ή τεχνική εισαγωγή
Αν το textarea είναι για αποσπάσματα κώδικα ή τεχνικά δεδομένα, χρησιμοποίησε γραμματοσειρά monospace, ώστε τα κενά και η στοίχιση να φαίνονται οπτικά. Για κανονικό κείμενο όπως μηνύματα ή σχόλια, χρησιμοποίησε την προεπιλεγμένη γραμματοσειρά sans-serif που ταιριάζει με την εικόνα της επιχείρησής σου.
Συνηθισμένα λάθη με πεδία κειμένου
Όλα τα πεδία κειμένου με το ίδιο πλάτος
Αν κάθε πεδίο της φόρμας σου έχει το ίδιο πλάτος, χάνεις το οπτικό σήμα για το αναμενόμενο μήκος. Ένα πεδίο ταχυδρομικού κώδικα δεν πρέπει να είναι τόσο πλατύ όσο ένα πεδίο ονόματος. Άσε το μέγεθος να επικοινωνεί την προσδοκία.
Placeholder αντί για ετικέτες
Αυτό αναφέρθηκε παραπάνω, αλλά είναι κρίσιμο. Το placeholder βοηθά ως υπόδειξη, όχι ως ετικέτα. Ένας χρήστης με screen reader δεν θα δει το placeholder. Ένας χρήστης που έχει συμπληρώσει κάποια πεδία και γύρισε πίσω θα ξεχάσει τι ήθελε το πεδίο.
Να μη δείχνεις τα σφάλματα στο πλαίσιό τους
Αν ο χρήστης γράψει άκυρο email και το μήνυμα σφάλματος εμφανίζεται στην κορυφή της φόρμας, ενώ το πεδίο email είναι στο τέλος, πρέπει να κυλήσει για να βρει το πρόβλημα. Κράτα τα μηνύματα σφάλματος κοντά στο πεδίο που τα προκάλεσε, με χρώμα (κόκκινο ή πορτοκαλί) και εικονίδιο που δείχνει ότι "κάτι δεν πάει καλά".
Να μην επιτρέπεται αναίρεση στο καθάρισμα
Αν ο χρήστης καθαρίσει κατά λάθος ένα πεδίο ή η φόρμα έχει κουμπί "Καθαρισμός" που σβήνει τα πάντα, φρόντισε να μπορεί να αναιρέσει αυτή την ενέργεια. Ένα μόνο πάτημα κουμπιού δεν πρέπει να καταστρέφει πέντε λεπτά δουλειάς στη συμπλήρωση.
Συνηθισμένα λάθη με textareas
Textareas σταθερού μεγέθους που δεν επεκτείνονται
Ένα textarea που μένει στο ίδιο μέγεθος ενώ το περιεχόμενο ξεχειλίζει και θέλει κύλιση αναγκάζει τον χρήστη να γράφει σε μικροσκοπικό παράθυρο. Η εμπειρία του φαίνεται χαλασμένη. Κάνε το textarea να επεκτείνεται με το περιεχόμενο.
Καμία σαφής ένδειξη ορίου χαρακτήρων
Αν το textarea σου έχει μέγιστο μήκος, ο χρήστης πρέπει να το ξέρει πριν το φτάσει. Δείξε μετρητή χαρακτήρων που ενημερώνεται καθώς γράφει. Το "απομένουν 500 χαρακτήρες" ή το "2 από 5000 χαρακτήρες" του λέει αμέσως πόσος χώρος του μένει.
Να ξεκινά πολύ μικρό
Ένα textarea ύψους μόνο μίας γραμμής δεν επικοινωνεί "θέλω τα λεπτομερή σχόλιά σου". Μοιάζει ακόμα με πεδίο μίας γραμμής. Ξεκίνα με τουλάχιστον τρεις έως τέσσερις ορατές γραμμές, ώστε ο χρήστης να καταλάβει ότι μπορεί να γράψει περισσότερα.
Παραδείγματα: πεδίο κειμένου ή textarea στο πλαίσιό τους
Μια φόρμα επικοινωνίας
Πεδίο ονόματος: πεδίο μίας γραμμής. Αρκετά πλατύ για μακρύ όνομα, αλλά αρκετά στενό για να δείχνει "μόνο το όνομά σου".
Πεδίο email: πεδίο μίας γραμμής με type="email".
Πεδίο τηλεφώνου: πεδίο μίας γραμμής με type="tel".
Πεδίο μηνύματος: textarea, αρκετά ψηλό για μερικές παραγράφους.
Μια φόρμα κριτικής προϊόντος
Το όνομά σου: πεδίο μίας γραμμής.
Το email σου: πεδίο μίας γραμμής με type="email".
Βαθμολογία (1 έως 5 αστέρια): εξειδικευμένος τύπος πεδίου, αλλά όχι textarea.
Η κριτική σου: textarea.
Θα το πρότεινα σε άλλους: checkbox, όχι πεδίο κειμένου.
Μια φόρμα πληρωμής
Όνομα, επώνυμο, email, τηλέφωνο: όλα πεδία μίας γραμμής.
Διεύθυνση αποστολής (οδός, πόλη, πολιτεία, ταχυδρομικός κώδικας): συνήθως πολλά πεδία μίας γραμμής και όχι ένα textarea για ολόκληρη τη διεύθυνση.
Ειδικές οδηγίες παράδοσης: textarea. Ο χρήστης μπορεί να έχει μία πρόταση ή τρεις, ανάλογα με τις ανάγκες του.
Φόρμες στο WEMASY
Στον Δημιουργό ιστοσελίδων του WEMASY μπορείς να προσθέσεις φόρμα στην ιστοσελίδα σου.
Σε μια φόρμα επικοινωνίας, θα έβαζες ένα πεδίο κειμένου για το όνομα και το email του επισκέπτη και ένα textarea για το μήνυμά του.
Δες τι περιλαμβάνει κάθε πακέτο στη σελίδα τιμών.