Dropdown, radio buttons και checkboxes: πώς διαλέγεις το σωστό πεδίο

Μάθε πότε να χρησιμοποιείς dropdown, radio buttons και checkboxes σε φόρμες και πώς κάθε πεδίο επηρεάζει τις ολοκληρώσεις και την εμπειρία χρήσης.

Πρόχειρο

Πάρε οποιαδήποτε φόρμα ζητά από τους επισκέπτες να διαλέξουν από μια λίστα επιλογών και θα προσέξεις κάτι. Η φόρμα δεν αποτυγχάνει επειδή κάνει πολλές ερωτήσεις. Αποτυγχάνει επειδή κάποιος διάλεξε λάθος τύπο πεδίου για την ερώτηση. Ένα dropdown εκεί που τα radio buttons θα ήταν πιο γρήγορα. Checkboxes εκεί που έχει νόημα μία μόνο απάντηση. Radio buttons εκεί που ένα dropdown θα γλίτωνε μισή οθόνη.

Αυτά δεν είναι μικρολεπτομέρειες. Η έρευνα δείχνει ότι η επιλογή τύπου πεδίου είναι από τους βασικούς λόγους που οι επισκέπτες εγκαταλείπουν φόρμες. Μία λάθος επιλογή ανάμεσα σε dropdown, radio button ή checkbox μπορεί να αυξήσει το ποσοστό εγκατάλειψης κατά 15% ή και περισσότερο. Ο επισκέπτης δεν μπερδεύεται επειδή δεν μπορεί να αποφασίσει. Μπερδεύεται επειδή ο τύπος πεδίου που διάλεξες στέλνει λάθος μήνυμα για το τι περιμένει η φόρμα.

Αυτό το άρθρο καλύπτει τους πρακτικούς κανόνες για να διαλέγεις ανάμεσα σε dropdowns, radio buttons και checkboxes. Θα μάθεις ποιος τύπος πεδίου δουλεύει καλύτερα σε κάθε περίπτωση, τι επικοινωνεί ο καθένας στον επισκέπτη και πώς να αποφύγεις τα λάθη που τον κάνουν να εγκαταλείπει τη φόρμα. Αν κατακτήσεις αυτές τις αποφάσεις, θα καταλάβεις γιατί κάποιες επιχειρήσεις βλέπουν πολύ υψηλότερα ποσοστά ολοκλήρωσης στην ίδια φόρμα, αλλάζοντας απλώς έναν τύπο πεδίου.

Γιατί ο τύπος πεδίου που διαλέγεις επηρεάζει την ολοκλήρωση της φόρμας περισσότερο απ' όσο νομίζουν οι περισσότεροι

Ένα dropdown, ένα radio button και ένα checkbox συλλέγουν όλα μια επιλογή από λίστα. Εκ πρώτης όψεως φαίνονται εναλλάξιμα. Οι διαφορές είναι διακριτικές. Ο αντίκτυπος δεν είναι.

Όταν ο επισκέπτης βλέπει ένα dropdown, ξέρει ότι πρέπει να πατήσει για να δει τις επιλογές. Οι επιλογές είναι κρυμμένες μέχρι το κλικ. Αυτό είναι ένα έξτρα βήμα. Όταν βλέπει radio buttons, οι επιλογές φαίνονται αμέσως. Τις σαρώνει όλες μαζί και διαλέγει χωρίς να πατήσει πρώτα. Όταν βλέπει checkbox, καταλαβαίνει ότι μπορεί να διαλέξει πολλά πράγματα και όχι μόνο ένα.

Αυτές οι διαφορές αλλάζουν τον τρόπο που οι επισκέπτες αλληλεπιδρούν με τη φόρμα. Αλλάζουν τη νοητική προσπάθεια. Αλλάζουν πόσο γρήγορα αποφασίζει κάποιος. Αλλάζουν το αν η φόρμα φαίνεται απλή ή συντριπτική. Όταν το κάνεις σωστά, λιγότεροι εγκαταλείπουν τη φόρμα. Όταν το κάνεις λάθος, οι επισκέπτες φεύγουν γιατί η φόρμα δεν φαίνεται διαισθητική, ακόμα κι αν τεχνικά δουλεύει.

Το χειρότερο λάθος είναι να χρησιμοποιείς λάθος τύπο πεδίου για την περίσταση. Ένα dropdown για δύο επιλογές φαίνεται υπερβολή. Radio buttons για 15 επιλογές φαίνονται γεμάτα και συντριπτικά. Checkboxes όταν κάποιος πρέπει να διαλέξει μία μόνο επιλογή δημιουργούν σύγχυση για το τι μπορεί να επιλέξει. Κάθε λάθος επιλογή σου κοστίζει μετατροπές.

Τα dropdowns δουλεύουν καλύτερα για μεγάλες λίστες όπου η προεπιλογή δεν έχει σημασία

Το dropdown είναι ένα πεδίο που κρύβει τις επιλογές μέχρι να πατήσει κάποιος για να το ανοίξει. Η επιλογή κρύβεται πίσω από ένα κλικ. Γι' αυτό τα dropdowns ταιριάζουν απόλυτα σε μία συγκεκριμένη περίπτωση: έχεις πολλές επιλογές και ο χώρος στην οθόνη μετράει.

Χρησιμοποίησε dropdown όταν έχεις πάνω από επτά επιλογές. Σε αυτό το σημείο, αν δείξεις όλες τις επιλογές ως radio buttons ή checkboxes, η φόρμα γεμίζει. Ένα dropdown συμπτύσσει όλες αυτές τις επιλογές σε ένα πεδίο που πιάνει σχεδόν καθόλου κάθετο χώρο. Γι' αυτό τα dropdowns είναι στάνταρ στις φόρμες για κινητά. Η οθόνη του κινητού είναι στενή. Τα dropdowns γλιτώνουν χώρο.

Τα dropdowns δουλεύουν καλά και όταν η επιλογή είναι προφανής και ο επισκέπτης έχει καθαρή απάντηση στο μυαλό του. Σκέψου την επιλογή χώρας ή πολιτείας. Οι περισσότεροι ξέρουν αμέσως ποια θέλουν. Μπορούν να γράψουν το πρώτο γράμμα για να πάνε στην επιλογή ή να πατήσουν και να κυλήσουν για να τη βρουν. Η αλληλεπίδραση είναι γρήγορη, γιατί η ερώτηση είναι εύκολη.

Εδώ όμως αποτυγχάνουν τα dropdowns. Αποτυγχάνουν όταν οι επισκέπτες πρέπει να συγκρίνουν επιλογές πριν αποφασίσουν. Αποτυγχάνουν όταν η λίστα είναι ταξινομημένη με τρόπο που οι επισκέπτες δεν περιμένουν. Αποτυγχάνουν όταν δεν υπάρχει προεπιλεγμένη τιμή και ο επισκέπτης πρέπει να πατήσει μόνο για να δει τι επιλογές υπάρχουν.

Ένα παράδειγμα: μια φόρμα ζητά από τους επισκέπτες να διαλέξουν προτίμηση φαγητού με dropdown. Οι επιλογές είναι ανακατεμένες (θαλασσινά, χορτοφαγικό, κοτόπουλο, μοσχάρι, vegan, χωρίς γλουτένη). Ο επισκέπτης δεν ξέρει τι επιλογές υπάρχουν αν δεν πατήσει. Όταν πατήσει και δει τη λίστα, πρέπει να τις διαβάσει όλες για να αποφασίσει. Δεν μπορεί να τις δει όλες μαζί για να τις συγκρίνει. Αυτό παίρνει περισσότερο χρόνο απ' ό,τι αν οι επιλογές φαίνονταν ως radio buttons. Έρευνα ενός γνωστού ινστιτούτου χρηστικότητας δείχνει ότι τα dropdowns επιβραδύνουν τη λήψη αποφάσεων όταν οι χρήστες πρέπει να αξιολογήσουν πολλές επιλογές.

Χρησιμοποίησε dropdowns όταν οι επισκέπτες ξέρουν τι ψάχνουν και οι επιλογές είναι πολλές. Απόφυγέ τα όταν οι επισκέπτες πρέπει να συγκρίνουν επιλογές ή όταν υπάρχουν λιγότερες από επτά.

Τα radio buttons ταιριάζουν όταν έχεις από δύο έως πέντε επιλογές

Το radio button δείχνει ένα κυκλικό κουτάκι δίπλα σε κάθε επιλογή. Όταν κάποιος πατήσει ένα, τα υπόλοιπα αποεπιλέγονται αυτόματα. Μόνο μία επιλογή μπορεί να είναι επιλεγμένη κάθε φορά. Γι' αυτό λέγονται "radio" buttons, όπως τα παλιά ραδιόφωνα αυτοκινήτου, όπου το πάτημα νέου κουμπιού σταθμού απελευθέρωνε το προηγούμενο.

Τα radio buttons δουλεύουν υπέροχα όταν οι επισκέπτες έχουν ένα καθαρό, μικρό σύνολο επιλογών. Αν η φόρμα σου ζητά να διαλέξουν πακέτο συνδρομής και προσφέρεις τρία επίπεδα, τα radio buttons είναι η τέλεια επιλογή. Ο επισκέπτης βλέπει και τα τρία μαζί. Συγκρίνει τιμές, χαρακτηριστικά και οφέλη στο μυαλό του αμέσως. Πατά ένα. Τέλος. Χωρίς κρυμμένες επιλογές. Χωρίς σύγχυση.

Τα radio buttons δουλεύουν καλά και όταν μία επιλογή είναι σαφώς η προεπιλογή ή η πιο δημοφιλής. Φαντάσου μια φόρμα που ρωτά πώς έμαθαν οι επισκέπτες για την επιχείρησή σου. Προσφέρεις πέντε επιλογές και οι περισσότεροι διαλέγουν "Αναζήτηση στο Google". Αν τα radio buttons φαίνονται, όποιος έψαξε στο Google βλέπει αμέσως την απάντησή του και την πατά. Δεν χρειάζεται να ανοίξει dropdown αναρωτώμενος αν η απάντησή του υπάρχει στη λίστα.

Η έρευνα χρηστικότητας είναι σαφής. Όταν οι επιλογές φαίνονται, οι άνθρωποι αποφασίζουν πιο γρήγορα. Όταν μπορούν να δουν όλες τις επιλογές χωρίς έξτρα κλικ, τα ποσοστά ολοκλήρωσης ανεβαίνουν. Γι' αυτό τα radio buttons τα πάνε καλύτερα από τα dropdowns σε μικρές λίστες.

Τα radio buttons αρχίζουν να φαίνονται γεμάτα στις πέντε ή έξι επιλογές. Πρόσθεσε πάνω από επτά και η φόρμα φαίνεται συντριπτική. Κάθε radio button πιάνει κάθετο χώρο. Μια φόρμα με οκτώ radio buttons για το "Ποιο είναι το κύριο ενδιαφέρον σου;" φαίνεται πολύ πιο μακριά απ' όσο χρειάζεται. Σε αυτό το σημείο, το dropdown έχει περισσότερο νόημα.

Χρησιμοποίησε radio buttons όταν έχεις δύο έως πέντε επιλογές και οι επισκέπτες ωφελούνται από τη σύγκρισή τους. Απόφυγέ τα για πάνω από επτά επιλογές.

Τα checkboxes είναι για επιλογές όπου πολλές απαντήσεις είναι σωστές

Το checkbox μοιάζει με ένα μικρό τετράγωνο. Όταν το πατήσεις, δείχνει ένα σημάδι επιλογής. Σε αντίθεση με τα radio buttons, πολλά checkboxes της ίδιας ομάδας μπορούν να είναι επιλεγμένα ταυτόχρονα. Αυτή είναι η βασική διαφορά. Τα checkboxes δεν είναι εναλλακτικές το ένα του άλλου. Είναι ανεξάρτητες επιλογές.

Τα checkboxes δουλεύουν όταν η ερώτηση επιτρέπει περισσότερες από μία απαντήσεις. Μια φόρμα που ρωτά "Ποια από αυτά τα χαρακτηριστικά σε ενδιαφέρουν;" χρησιμοποιεί checkboxes, γιατί ο επισκέπτης μπορεί να διαλέξει αναλύσεις προϊόντος, σχόλια πελατών και ενσωμάτωση αυτοματισμού, όλα μαζί. Κάθε checkbox είναι μια ανεξάρτητη επιλογή και όχι εναλλακτική των άλλων.

Τα checkboxes δουλεύουν και για δηλώσεις συμφωνίας. Το "Συμφωνώ με τους όρους και τις προϋποθέσεις" είναι checkbox, γιατί είναι δήλωση ναι ή όχι. Ο επισκέπτης είτε συμφωνεί είτε όχι. Αντίστοιχα, το "Στείλτε μου ενημερώσεις με email" είναι ένα μόνο checkbox, γιατί αντιπροσωπεύει μία μόνο επιλογή.

Η σύγχυση γίνεται όταν χρησιμοποιούν checkboxes εκεί που έπρεπε radio buttons, ή το αντίστροφο. Μια φόρμα που ρωτά "Ποιο πακέτο θέλεις;" δεν πρέπει να έχει checkboxes. Κανείς δεν μπορεί να θέλει και τα τρία πακέτα. Οι επιλογές αποκλείουν η μία την άλλη. Εδώ σωστά είναι τα radio buttons.

Τα checkboxes έχουν το ίδιο πρόβλημα συσσώρευσης με τα radio buttons. Πάνω από επτά ή οκτώ checkboxes σε μία ομάδα κάνουν τη φόρμα να φαίνεται συντριπτική. Οπτικά, πολλά checkboxes μοιάζουν με πολλή δουλειά, ακόμα κι αν ο επισκέπτης χρειάζεται να διαλέξει μόνο ένα ή δύο.

Χρησιμοποίησε checkboxes μόνο όταν οι επισκέπτες μπορούν δικαιολογημένα να επιλέξουν πολλές επιλογές ταυτόχρονα. Απόφυγέ τα σε ερωτήσεις μίας επιλογής και χώρισε μεγάλους αριθμούς checkboxes σε μικρότερες, συγγενείς κατηγορίες.

Πώς αποφασίζεις όταν δεν είσαι σίγουρος ποιο πεδίο να χρησιμοποιήσεις

Η απόφαση είναι συχνά σαφής. Κάποιες φορές όμως μια ερώτηση πέφτει σε γκρίζα ζώνη. Έχεις πέντε επιλογές και δεν είσαι σίγουρος αν ταιριάζουν radio buttons ή dropdown. Να το δέντρο αποφάσεων που δουλεύει.

Βήμα 1. Μπορεί ο επισκέπτης να διαλέξει πάνω από μία απάντηση; Αν ναι, χρησιμοποίησε checkboxes. Αν όχι, πήγαινε στο βήμα δύο.

Βήμα 2. Πόσες επιλογές υπάρχουν; Λιγότερες από έξι, πήγαινε στο βήμα τρία. Πάνω από επτά, χρησιμοποίησε dropdown.

Βήμα 3. Χρειάζεται ο επισκέπτης να συγκρίνει τις επιλογές για να αποφασίσει; Αν ναι, χρησιμοποίησε radio buttons, ώστε να φαίνονται όλες μαζί. Αν όχι και η απάντηση είναι προφανής, δουλεύουν και τα radio buttons και το dropdown, αλλά τα radio buttons θα είναι λίγο πιο γρήγορα.

Αυτό το απλό δέντρο αποφάσεων λύνει το 90% των ερωτήσεων για τον τύπο πεδίου που προκύπτουν όταν σχεδιάζεις φόρμες. Για τις περιπτώσεις που ακόμα δεν είσαι σίγουρος, δοκίμασε και τις δύο επιλογές με πραγματικούς επισκέπτες. Τρέξε τη φόρμα με radio buttons για μια εβδομάδα και μέτρα το ποσοστό ολοκλήρωσης. Άλλαξε σε dropdown, τρέξε την άλλη μια εβδομάδα και σύγκρινε. Τα πραγματικά δεδομένα των επισκεπτών σου νικούν κάθε κανόνα σχεδιασμού, γιατί οι επισκέπτες σου είναι αυτοί που συμπληρώνουν τις φόρμες.

Συνηθισμένα λάθη που ρίχνουν τις ολοκληρώσεις χωρίς να καταλαβαίνει κανείς γιατί

Το πρώτο λάθος είναι να χρησιμοποιείς dropdown για δύο ή τρεις επιλογές. Συμβαίνει πιο συχνά απ' όσο νομίζεις. Μια φόρμα ρωτά "Πώς μας βρήκες;" και οι επιλογές είναι "Μηχανή αναζήτησης", "Social media" και "Σύσταση". Το dropdown κρύβει αυτές τις επιλογές. Ο επισκέπτης πρέπει να πατήσει το dropdown για να τις δει. Δεν ξέρει τι επιλογές υπάρχουν αν δεν πατήσει. Αυτό προσθέτει τριβή χωρίς λόγο. Εδώ τα radio buttons είναι πιο γρήγορα και πιο διαισθητικά.

Το δεύτερο λάθος είναι να δείχνεις οκτώ ή εννέα radio buttons, ενώ ένα dropdown θα έπιανε το ένα δέκατο του χώρου. Μια φόρμα ζητά από τους επισκέπτες να διαλέξουν χώρα από λίστα 195 χωρών. Τα radio buttons θα κυλούσαν ατελείωτα. Ένα dropdown με αυτόματη συμπλήρωση και αναζήτηση το λύνει αμέσως. Κάποιοι σχεδιαστές μένουν στα radio buttons, γιατί τα βρίσκουν πιο διαισθητικά, χωρίς να καταλαβαίνουν ότι η διαίσθηση χάνεται όταν πρέπει να κυλήσεις μέσα από 50 επιλογές.

Το τρίτο λάθος είναι να χρησιμοποιείς checkboxes σε ερώτηση μίας επιλογής. Μια φόρμα ρωτά "Ποιο είναι το επίπεδο συνδρομής σου;" και δείχνει τρία checkboxes, ένα για κάθε πακέτο. Οι επισκέπτες μπερδεύονται. Μπορούν να διαλέξουν και τα τρία; Το checkbox στέλνει λάθος μήνυμα. Τα radio buttons είναι πιο σαφή, γιατί δείχνουν οπτικά ότι μπορεί να επιλεγεί μόνο ένα.

Το τέταρτο λάθος είναι να μη δίνεις σαφείς οδηγίες για το τι σημαίνει ένα πεδίο. Μια ομάδα checkboxes εμφανίζεται με την ετικέτα "Ενδιαφέροντα" και καμία εξήγηση. Ο επισκέπτης δεν ξέρει αν πρέπει να διαλέξει μόνο ένα ή όσα ισχύουν. Όταν υπάρχει ασάφεια, τα ποσοστά ολοκλήρωσης πέφτουν. Οι σαφείς ετικέτες το διορθώνουν. Το "Διάλεξε όσα ισχύουν" ή το "Διάλεξε ένα" λέει στον επισκέπτη ακριβώς τι περιμένει το πεδίο.

Το πέμπτο λάθος είναι η λάθος χρήση προεπιλεγμένων τιμών. Ένα dropdown που ξεκινά με προεπιλογή "Διάλεξε μια επιλογή" φαίνεται χαλασμένο. Ένα dropdown που ξεκινά με προεπιλογή "Ηνωμένες Πολιτείες" φαίνεται βοηθητικό, αν από εκεί είναι οι περισσότεροι επισκέπτες. Τα radio buttons που ξεκινούν χωρίς επιλεγμένη τιμή αναγκάζουν τον επισκέπτη να πατήσει ένα. Τα radio buttons που ξεκινούν με την πιο συνηθισμένη απάντηση προεπιλεγμένη γλιτώνουν ένα κλικ. Αυτές οι μικρές προεπιλογές αθροίζονται σε όλη τη φόρμα.

Θέματα κινητού που αλλάζουν την απόφαση για τον τύπο πεδίου

Τα κινητά είναι μικρότερα. Αυτό αλλάζει την απόφαση για τον τύπο πεδίου με ουσιαστικούς τρόπους.

Στον υπολογιστή, τρία radio buttons για μια απλή επιλογή φαίνονται φυσικά και γρήγορα. Στο κινητό, αυτά τα τρία radio buttons στοιβάζονται κάθετα και πιάνουν περισσότερο χώρο από ένα dropdown. Η απόφαση μπορεί να αντιστραφεί.

Οι επισκέπτες κινητού αλληλεπιδρούν επίσης διαφορετικά. Χρησιμοποιούν τους αντίχειρες για να πατούν, όχι ακριβή κλικ ποντικιού. Ένα checkbox 44 επί 44 pixel είναι το ελάχιστο άνετο μέγεθος. Ό,τι είναι μικρότερο γίνεται δύσκολο να το πατήσεις με ακρίβεια. Τα radio buttons και τα checkboxes χρειάζονται αρκετό χώρο γύρω τους, ώστε το πάτημα του ενός να μη πατήσει κατά λάθος γειτονική επιλογή.

Τα dropdowns στο κινητό συνήθως τα χειρίζεται το εγγενές μενού επιλογής της συσκευής. Όταν ο επισκέπτης πατά ένα dropdown σε iPhone, βλέπει έναν επιλογέα βελτιστοποιημένο για κινητό. Αυτό είναι συχνά πιο γρήγορο και πιο άνετο από το να κυλάς σε μακριά λίστα μέσα στη σελίδα.

Στις φόρμες κινητού, τα dropdowns γίνονται πιο ελκυστικά όσο ο χώρος της οθόνης γίνεται πολύτιμος. Τα radio buttons είναι ακόμα καλά για δύο έως τέσσερις επιλογές, γιατί πατιούνται γρήγορα. Έξι επιλογές όμως ως radio buttons θυμίζουν κύλιση. Οι ίδιες έξι επιλογές σε dropdown φαίνονται πιο καθαρές και πιο γρήγορες στο κινητό.

Δοκίμασε τις φόρμες σου στο κινητό. Η απόφαση που φάνηκε σωστή στον υπολογιστή μπορεί να φανεί διαφορετική όταν κάποιος συμπληρώνει τη φόρμα σε οθόνη τεσσάρων ιντσών.

Απαιτήσεις προσβασιμότητας που πρέπει να πληροί κάθε τύπος πεδίου

Τα dropdowns, τα radio buttons και τα checkboxes πρέπει όλα να πληρούν πρότυπα προσβασιμότητας, ώστε όσοι χρησιμοποιούν screen readers ή πλοήγηση με πληκτρολόγιο να συμπληρώνουν επιτυχώς τη φόρμα σου.

Κάθε ομάδα radio buttons ή checkboxes χρειάζεται ετικέτα fieldset που εξηγεί σε τι χρησιμεύει η ομάδα. Όταν ένας χρήστης screen reader πατά tab μέσα στην ομάδα, ακούει την ετικέτα και καταλαβαίνει από τι διαλέγει. Χωρίς αυτή, ακούει μόνο "Radio button ένα, Radio button δύο" χωρίς κανένα πλαίσιο.

Κάθε μεμονωμένη επιλογή χρειάζεται ορατή, πατήσιμη ετικέτα και όχι μόνο ένα μικρό radio button ή checkbox. Όταν ο επισκέπτης πρέπει να πατήσει ακριβώς το τετραγωνάκι του checkbox για να το επιλέξει, όσοι έχουν λιγότερο ακριβή κινητικό έλεγχο δυσκολεύονται. Όταν μπορούν να πατήσουν την ετικέτα δίπλα στο checkbox, η επιλογή γίνεται πιο εύκολη για όλους. Αυτό δεν είναι χαρακτηριστικό προσβασιμότητας μόνο για άτομα με αναπηρία. Κάνει τις φόρμες πιο εύκολες για όλους.

Και τα dropdowns χρειάζονται σαφή ετικέτα. Η ετικέτα πρέπει να βρίσκεται πάνω ή αριστερά από το πεδίο του dropdown. Η επιλεγμένη επιλογή πρέπει να φαίνεται πάντα στο κλειστό dropdown. Όταν ένα dropdown κλείνει μετά την επιλογή και δείχνει την τιμή που διαλέχτηκε, ο επισκέπτης ξέρει ότι η επιλογή του καταχωρίστηκε.

Οι χρήστες πληκτρολογίου πρέπει να πλοηγούνται στις φόρμες με tab και βέλη. Τα radio buttons πρέπει να επιτρέπουν πλοήγηση ανάμεσα στις επιλογές με τα βέλη. Τα checkboxes πρέπει να επιλέγονται με το πλήκτρο διαστήματος. Τα dropdowns πρέπει να ανοίγουν και να κλείνουν με εντολές πληκτρολογίου. Αν η φόρμα σου απαιτεί κλικ ποντικιού για κάτι από αυτά, οι χρήστες πληκτρολογίου μένουν αποκλεισμένοι.

Το χρώμα μόνο του δεν μπορεί να δείχνει την επιλεγμένη κατάσταση. Ένα dropdown με επισημασμένη επιλογή χρησιμοποιεί χρώμα για να δείξει τι είναι επιλεγμένο. Αυτό βοηθά. Όμως και όσοι δεν βλέπουν χρώματα πρέπει να μπορούν να καταλάβουν τι είναι επιλεγμένο, με σημάδι επιλογής, εικονίδιο ή οπτική ένδειξη που δεν βασίζεται μόνο στο χρώμα.

Πώς οι τύποι πεδίων επηρεάζουν την εικόνα της επιχείρησής σου

Ο τύπος πεδίου που διαλέγεις λέει στον επισκέπτη κάτι για το πόσο καλά τον καταλαβαίνεις.

Ένα dropdown για δύο ή τρεις επιλογές δείχνει ότι όποιος σχεδίασε τη φόρμα δεν σκέφτηκε πολύ την εμπειρία χρήσης. Προσθέτει ένα περιττό κλικ. Ο επισκέπτης το προσέχει. Το νιώθει ως τριβή.

Ένα radio button εκεί που ένα dropdown θα γλίτωνε το μισό μήκος της φόρμας δείχνει το ίδιο. Η φόρμα φαίνεται κακοσχεδιασμένη.

Μια φόρμα όμως που φαίνεται ότι σκέφτηκε την εμπειρία χρήσης, που κάνει τις γρήγορες επιλογές προφανείς και τις πολλαπλές επιλογές σαφείς, δείχνει κάτι διαφορετικό. Δείχνει ότι η επιχείρηση νοιάζεται για τον χρόνο του επισκέπτη. Δείχνει ότι κάποιος σκέφτηκε προσεκτικά τη φόρμα. Αυτό δεν είναι μόνο καλύτερη χρηστικότητα. Είναι καλύτερη εικόνα επιχείρησης.

Οι μικρές αποφάσεις αθροίζονται. Ο επισκέπτης συμπληρώνει τη φόρμα σου και κάθε πεδίο φαίνεται διαισθητικό. Τελειώνει πιο γρήγορα απ' όσο περίμενε. Νιώθει καλά με την αλληλεπίδραση. Αυτό το συναίσθημα περνά στον τρόπο που βλέπει την επιχείρησή σου.

Συχνές ερωτήσεις

Μπορώ να χρησιμοποιήσω dropdown αν έχω μόνο δύο επιλογές;
Τεχνικά ναι. Δεν πρέπει όμως. Οι δύο επιλογές είναι η τέλεια περίπτωση για radio buttons, γιατί και οι δύο φαίνονται μαζί και ο επισκέπτης αποφασίζει αμέσως. Το dropdown κρύβει μία επιλογή πίσω από ένα κλικ. Προσθέτεις τριβή χωρίς όφελος. Αν οι δύο επιλογές είναι "Ναι" και "Όχι", σκέψου ακόμα και έναν διακόπτη (toggle). Η πιο σαφής διεπαφή είναι αυτή που δείχνει τις επιλογές από την αρχή.
Τι κάνω αν έχω πολύ μεγάλη λίστα σε dropdown, αλλά χωρίς αναζήτηση;
Συνδύασε το dropdown με αυτόματη συμπλήρωση ή αναζήτηση. Αυτό δεν είναι προαιρετικό σε μεγάλες λίστες. Όταν ο επισκέπτης ανοίγει ένα dropdown με 100 επιλογές και πρέπει να κυλήσει σε όλες, θα φύγει. Ένα dropdown με δυνατότητα πληκτρολόγησης για φιλτράρισμα της λίστας κάνει τις 100 επιλογές άμεση απάντηση. Το πεδίο αναζήτησης τον αφήνει να γράψει "Ηνωμ" και να δει αμέσως μόνο τις χώρες που ξεκινούν από Ηνωμ. Αυτός είναι ο μόνος τρόπος να γίνει χρήσιμο ένα μεγάλο dropdown.
Πώς καταλαβαίνω ποιος τύπος πεδίου στη φόρμα μου προκαλεί εγκατάλειψη;
Δοκίμασέ το. Άλλαξε ένα πεδίο από dropdown σε radio buttons στη φόρμα σου. Τρέξε το για μια εβδομάδα. Σύγκρινε τα ποσοστά ολοκλήρωσης. Μετά γύρνα το πίσω. Μετά δοκίμασε checkboxes, αν είναι ερώτηση πολλαπλής επιλογής. Άσε τα πραγματικά δεδομένα των επισκεπτών σου να καθοδηγήσουν την απόφαση. Μη μαντεύεις. Η φόρμα που δοκιμάζεται και βελτιστοποιείται με βάση πραγματικά ποσοστά ολοκλήρωσης θα τα πάει πάντα καλύτερα από τη φόρμα που σχεδιάστηκε μόνο με βάση καλές πρακτικές.
Υπάρχει περίπτωση να δουλεύουν πολλά checkboxes για ερώτηση μίας επιλογής;
Μόνο μία. Αν η φόρμα σου λέει ρητά "Διάλεξε μόνο ένα" ακριβώς πάνω από την ομάδα checkboxes, οι χρήστες καταλαβαίνουν ότι, παρότι η διεπαφή υποδηλώνει πολλαπλές επιλογές, πρέπει να διαλέξουν μόνο μία. Αυτό όμως δημιουργεί σύγχυση. Τα radio buttons είναι πιο σαφή. Αν βρεθείς να χρειάζεται να προσθέσεις αυτή την οδηγία, είναι σημάδι ότι πρέπει να αλλάξεις σε radio buttons. Ο καλός σχεδιασμός φόρμας δεν χρειάζεται οδηγίες. Η διεπαφή εξηγεί τον εαυτό της.
Πρέπει να δείχνω προεπιλεγμένη τιμή σε radio button ή dropdown;
Εξαρτάται από το τι έχει νόημα για την ερώτησή σου. Αν μία επιλογή είναι σημαντικά πιο συνηθισμένη, η προεπιλογή της γλιτώνει ένα κλικ στους επισκέπτες και δείχνει ότι τους καταλαβαίνεις. Αν οι επιλογές είναι περίπου ισοδύναμες, το να μη δείξεις επιλογή και να αναγκάσεις τον επισκέπτη να διαλέξει δείχνει ότι κάθε επιλογή είναι εξίσου έγκυρη. Για υποχρεωτικά πεδία όπου καμία επιλογή δεν είναι σημαντικά πιο συνηθισμένη, απόφυγε την προεπιλογή. Άφησε τον επισκέπτη να κάνει ενεργή επιλογή. Για προαιρετικά πεδία, είναι πιο σαφές να μην υπάρχει προεπιλογή.
Μπορώ να προσθέσω φόρμα με πεδία επιλογής στην ιστοσελίδα μου με το WEMASY;
Ναι, μπορείς να προσθέσεις φόρμα στον Δημιουργό ιστοσελίδων του WEMASY. Δες τι περιλαμβάνει κάθε πακέτο στη σελίδα τιμών.

Βάλ’ το αμέσως σε εφαρμογή
στη δική σου ιστοσελίδα.

Ξεκίνα δωρεάν με το WEMASY και φτιάξε τη σελίδα σου σε λίγα λεπτά.