Ένας διακόπτης toggle φαίνεται απλός. Ένας μικρός διακόπτης που γυρίζει ανάμεσα σε ενεργό και ανενεργό. Τα πεδία toggle όμως μπερδεύουν τους χρήστες περισσότερο από σχεδόν κάθε άλλο στοιχείο φόρμας. Οι άνθρωποι διστάζουν. Δεν ξέρουν αν το γύρισμα του διακόπτη θα αλλάξει κάτι αμέσως ή θα περιμένει το κουμπί αποστολής. Δεν ξέρουν ποια πλευρά σημαίνει ναι και ποια όχι. Ένα toggle σε λάθος σημείο της φόρμας μπορεί να ρίξει τα ποσοστά ολοκλήρωσης. Το σωστό toggle στο σωστό σημείο γίνεται αόρατο.
Πάρε οποιαδήποτε φόρμα χρησιμοποιεί toggles και δες τι κάνουν στην πράξη οι άνθρωποι. Κινούνται αργά. Σταματούν πάνω τους. Γυρίζουν πίσω να δουν τι ελέγχει το toggle. Ψάχνουν κουμπιά αποστολής, γιατί δεν είναι σίγουροι αν η αλλαγή του toggle έχει ισχύ. Αυτά δεν είναι λάθη των χρηστών. Είναι προβλήματα σχεδιασμού. Τα toggles και τα switches έχουν συγκεκριμένη δουλειά στις φόρμες. Κάνουν ένα πράγμα καλά. Δεν κάνουν τα πάντα. Το να καταλαβαίνεις πότε ταιριάζουν και πότε όχι είναι η διαφορά ανάμεσα σε μια φόρμα που ρέει και σε μια φόρμα που μπερδεύει.
Το πρόβλημα με το να λες toggle το καθετί
Η λέξη toggle σημαίνει κάτι συγκεκριμένο. Το toggle είναι διακόπτης ανάμεσα σε δύο αντίθετες καταστάσεις. Είσαι είτε στην κατάσταση Α είτε στην Β. Τίποτα ενδιάμεσο. Τίποτα άλλο. Πολλές φόρμες όμως λένε toggles τις ερωτήσεις ναι/όχι, ενώ δεν είναι. Μια ερώτηση όπως "Θέλεις να λαμβάνεις διαφημιστικά email;" δεν είναι toggle. Είναι ερώτηση ναι ή όχι που ανήκει σε φόρμα. Ένα πραγματικό toggle είναι το "Ενεργοποίηση σκοτεινής λειτουργίας". Ο διακόπτης αλλάζει την εμπειρία σου αυτή τη στιγμή. Η φόρμα δεν χρειάζεται κουμπί αποστολής για να ισχύσει η αλλαγή.
Αυτή η σύγχυση δημιουργεί πραγματική τριβή. Βάλε ένα πραγματικό toggle στη μέση μιας φόρμας γεμάτης πεδία κειμένου και radio buttons. Οι χρήστες δεν θα ξέρουν αν η αλλαγή του toggle εφαρμόστηκε αμέσως ή αν πρέπει ακόμα να πατήσουν αποστολή. Μπορεί να γυρίσουν το toggle, να νομίσουν ότι δεν έγινε τίποτα, να το γυρίσουν πίσω και μετά να μπερδευτούν όταν η φόρμα δείξει την αντίθετη κατάσταση από αυτή που διάλεξαν.
Πότε ένα toggle switch έχει πράγματι νόημα σε φόρμα
Ένα toggle ανήκει σε φόρμα μόνο όταν ισχύουν και οι δύο συνθήκες. Πρώτον, η επιλογή πρέπει να είναι δυαδική. Ακριβώς δύο καταστάσεις. Ναι ή όχι. Ενεργό ή ανενεργό. Τίποτα άλλο. Δεύτερον, η επιλογή πρέπει να ισχύει αμέσως, χωρίς κουμπί αποστολής. Ο χρήστης γυρίζει το toggle και η κατάσταση αλλάζει αυτόματα.
Στις περισσότερες φόρμες, καμία από τις δύο συνθήκες δεν ισχύει. Οι περισσότερες φόρμες θέλουν κουμπί αποστολής στο τέλος. Όλες οι αλλαγές εφαρμόζονται μαζί όταν κάποιος πατήσει αποστολή. Αν βάλεις toggle σε φόρμα με κουμπί αποστολής, δημιουργείς σύγχυση, γιατί το toggle φαίνεται ότι πρέπει να δουλεύει αμέσως, ενώ ολόκληρη η φόρμα περιμένει την αποστολή.
Τα toggle switches δουλεύουν στις ρυθμίσεις. Δουλεύουν σε πίνακες λογαριασμού όπου κάθε αλλαγή ισχύει αμέσως. Δεν δουλεύουν σε τυπικές φόρμες όπου μαζεύεις πληροφορίες και ζητάς από τον κόσμο να στείλει στο τέλος. Αν η φόρμα σου έχει κουμπί αποστολής, οι ερωτήσεις ναι/όχι πρέπει να χρησιμοποιούν checkboxes ή radio buttons αντί για toggles.
Toggle ή checkbox στα πεδία φόρμας
Η οπτική διαφορά ανάμεσα σε toggle και checkbox είναι προφανής. Αυτό που μετράει όμως είναι η λειτουργική διαφορά. Το checkbox είναι στοιχείο φόρμας που περιμένει την αποστολή. Μπορείς να επιλέξεις πολλά checkboxes. Μπορείς να τα αποεπιλέξεις. Δεν γίνεται τίποτα μέχρι να στείλεις τη φόρμα. Το toggle είναι διακόπτης κατάστασης που συχνά αλλάζει πράγματα αμέσως. Η φόρμα δεν χρειάζεται αποστολή για να ισχύσει η αλλαγή.
Γι' αυτό η έρευνα ενός γνωστού ινστιτούτου χρηστικότητας δείχνει ότι οι χρήστες μπερδεύονται όταν ανακατεύεις toggles και checkboxes στην ίδια φόρμα. Τα toggles που δρουν αμέσως δίνουν εντελώς διαφορετική αίσθηση από τα checkboxes που περιμένουν. Η ανάμειξή τους στέλνει αντιφατικά σήματα για το τι συμβαίνει όταν κάποιος αλληλεπιδρά με τη φόρμα.
Αν έχεις δυαδική ερώτηση ναι/όχι σε φόρμα που χρειάζεται κουμπί αποστολής, χρησιμοποίησε checkbox ή ζεύγος radio buttons. Και τα δύο είναι οικεία. Και τα δύο έχουν νόημα μέσα σε φόρμα. Οι χρήστες καταλαβαίνουν ότι επιλέγουν κάτι που θα σταλεί και όχι ότι προκαλούν άμεση αλλαγή.
Πότε να χρησιμοποιήσεις radio buttons αντί για toggle
Ένα toggle μπορεί να δείξει μόνο μία κατάσταση κάθε φορά. Βλέπεις ενεργό ή ανενεργό. Κάποιες φορές όμως οι χρήστες χρειάζεται να δουν και τις δύο επιλογές ταυτόχρονα για να αποφασίσουν. Τότε τα radio buttons δουλεύουν καλύτερα από το toggle.
Παράδειγμα: μια φόρμα που ρωτά "Ποιο πακέτο θέλεις;" με επιλογές "Basic" ή "Premium". Θα μπορούσες να χρησιμοποιήσεις toggle για εναλλαγή ανάμεσά τους. Ο χρήστης όμως δεν μπορεί να δει τα δύο πακέτα δίπλα δίπλα. Πρέπει να γυρίσει το toggle για να δει ποια είναι η άλλη επιλογή. Ένα ζεύγος radio buttons δείχνει και τις δύο επιλογές ταυτόχρονα. Ο χρήστης βλέπει το Basic αριστερά και το Premium δεξιά. Μπορεί να συγκρίνει και να διαλέξει χωρίς να γυρίσει τίποτα.
Κάθε φορά που θέλεις οι χρήστες να συγκρίνουν δύο επιλογές ή να δουν και τις δύο, χρησιμοποίησε radio buttons. Κάθε φορά που το toggle είναι ο μόνος τρόπος εναλλαγής και οι χρήστες δεν μπορούν να συγκρίνουν, τα radio buttons είναι μάλλον καλύτερη επιλογή.
Πώς να βάλεις ετικέτα σε toggle, ώστε ο κόσμος να καταλαβαίνει τι κάνει
Το μεγαλύτερο πρόβλημα με τα toggle switches είναι η ετικέτα. Πολλοί σχεδιαστές χρησιμοποιούν μόνο "On" και "Off". Ενεργό για τι όμως; Ο χρήστης πρέπει να μαντέψει. Αυτό δημιουργεί δισταγμό.
Κάθε toggle χρειάζεται σαφή ετικέτα που περιγράφει τι ελέγχει. Όχι "On/Off". Κάτι σαν "Ενεργοποίηση σκοτεινής λειτουργίας" ή "Λήψη ειδοποιήσεων" ή "Εμφάνιση προχωρημένων επιλογών". Η ετικέτα λέει στον χρήστη τι θα γίνει αν γυρίσει τον διακόπτη.
Η ετικέτα πρέπει να φαίνεται αμέσως και να είναι κοντά στο toggle. Αν η ετικέτα είναι μακριά ή μικρή, οι χρήστες δεν θα τη συνδέσουν με τον διακόπτη. Θα τον γυρίσουν χωρίς να καταλαβαίνουν τι αλλάζουν.
Κάποια toggles δείχνουν και τις δύο ετικέτες, ενεργό και ανενεργό, πάνω στον ίδιο τον διακόπτη. "Ναι" από τη μία πλευρά και "Όχι" από την άλλη. Αυτό μπορεί να δουλέψει αν οι ετικέτες είναι μεγάλες και σαφείς. Οι δοκιμές όμως δείχνουν ότι οι άνθρωποι είναι λιγότερο εξοικειωμένοι με toggles ναι/όχι παρά με toggles on/off. Αν χρησιμοποιήσεις ετικέτες ναι/όχι, δοκίμασε πρώτα με τους χρήστες σου. Γενικά όμως το on/off είναι πιο σαφές από το ναι/όχι στα toggle switches.
Το πρόβλημα προσβασιμότητας με τα toggle switches
Τα toggles δημιουργούν πραγματικά προβλήματα στους χρήστες screen reader. Ένα οπτικό toggle έχει νόημα για κάποιον που το βλέπει. Βλέπει έναν διακόπτη να γλιστρά δεξιά και καταλαβαίνει ότι είναι πια ενεργός. Ένας χρήστης screen reader όμως δεν ακούει τίποτα. Το toggle δεν έχει προσβάσιμη ετικέτα. Ο χρήστης δεν μπορεί να καταλάβει σε ποια κατάσταση είναι το toggle. Δεν μπορεί να καταλάβει τι ελέγχει.
Για να φτιάξεις προσβάσιμο toggle χρειάζεται ένα χαρακτηριστικό ARIA που λέγεται aria-pressed. Αυτό λέει στους screen readers ότι το στοιχείο είναι κουμπί και είναι είτε πατημένο είτε όχι. Ο χρήστης screen reader ακούει "Κουμπί toggle σκοτεινής λειτουργίας, τώρα ενεργό". Χωρίς το aria-pressed, ο χρήστης δεν ακούει κάτι με νόημα.
Ακόμα και με σωστό ARIA, τα toggles δεν είναι φυσικά στοιχεία φόρμας. Το checkbox είναι στοιχείο φόρμας. Όλοι ξέρουν τι είναι ένα checkbox. Το toggle είναι προσαρμοσμένο στοιχείο που χρειάζεται έξτρα JavaScript. Γι' αυτό πολλοί προσβάσιμοι σχεδιασμοί φόρμας παραλείπουν εντελώς τα toggles και χρησιμοποιούν checkboxes. Τα checkboxes είναι ενσωματωμένα σε κάθε browser. Δουλεύουν με screen readers. Δεν χρειάζονται προσαρμοσμένη JavaScript. Απλώς δουλεύουν.
Η αντίθεση χρωμάτων και οι οπτικές ενδείξεις μετράνε στις καταστάσεις του toggle
Ένας διακόπτης toggle που βασίζεται μόνο στο χρώμα για να δείξει την κατάστασή του δεν θα δουλέψει για άτομα με χαμηλή όραση ή αχρωματοψία. Αν το toggle είναι πράσινο όταν είναι ενεργό και κόκκινο όταν είναι ανενεργό, ένας χρήστης με αχρωματοψία δεν μπορεί να καταλάβει σε ποια κατάσταση είναι.
Κάθε toggle χρειάζεται πολλαπλά οπτικά σήματα. Χρώμα και σχήμα. Χρώμα και θέση. Χρώμα και κείμενο. Το σχήμα του toggle πρέπει να αλλάζει θέση όταν γυρίζει. Ο κύκλος μέσα πρέπει να γλιστρά από αριστερά προς τα δεξιά. Το φόντο πρέπει να αλλάζει χρώμα. Μαζί, αυτά τα τρία σήματα δημιουργούν πλεονασμό, ώστε όποιος έχει οποιαδήποτε οπτική αναπηρία να καταλαβαίνει αν το toggle είναι ενεργό ή ανενεργό.
Οι ετικέτες κειμένου προσθέτουν ακόμα ένα επίπεδο. Αν το toggle έχει ετικέτα on/off ορατή πάνω στον ίδιο τον διακόπτη, η ετικέτα ενισχύει όσα δείχνουν ήδη το χρώμα και η θέση. Αυτός είναι οπτικός πλεονασμός. Δεν είναι περιττός. Είναι προσβασιμότητα.
Το μέγεθος μετράει για τους στόχους αφής
Ένα toggle που φαίνεται χαριτωμένο στα 24 pixel πλάτος γίνεται εφιάλτης στο κινητό. Ο χρήστης προσπαθεί να το πατήσει και πατά κάτι άλλο. Ή το πατά πολλές φορές, γιατί δεν είναι σίγουρος ότι καταγράφηκε το πρώτο πάτημα.
Το ελάχιστο μέγεθος στόχου αφής για κάθε διαδραστικό στοιχείο είναι 44x44 pixel. Ένα toggle πρέπει να είναι τουλάχιστον τόσο μεγάλο. Μεγαλύτερο είναι καλύτερο, ειδικά στο κινητό. Ένα toggle πλάτους 60 pixel πατιέται πολύ πιο ακριβώς από ένα toggle 30 pixel.
Αυτό δεν είναι προτίμηση σχεδιασμού. Είναι απαίτηση προσβασιμότητας. Οι χρήστες με περιορισμένη επιδεξιότητα, τρέμουλο ή απλώς χοντρά δάχτυλα σε μικρές οθόνες χρειάζονται toggles αρκετά μεγάλα για να τα πετυχαίνουν αξιόπιστα.
Μην ανακατεύεις toggles με κουμπιά αποστολής φόρμας
Αυτό είναι το μεγαλύτερο λάθος. Μια φόρμα με πεδία κειμένου, dropdowns και άλλα τυπικά πεδία έχει κουμπί αποστολής στο κάτω μέρος. Όλες οι αλλαγές εφαρμόζονται όταν ο χρήστης πατήσει αποστολή. Προστίθεται όμως ένα toggle στη φόρμα, σχεδιασμένο να ισχύει αμέσως χωρίς αποστολή. Το νοητικό μοντέλο του χρήστη σπάει. Περιμένει το toggle να περιμένει την αποστολή, όπως τα checkboxes. Το toggle όμως αλλάζει αμέσως. Νομίζει ότι έκανε λάθος. Το γυρίζει πίσω. Χάος.
Αν έχεις φόρμα με κουμπί αποστολής, μη χρησιμοποιείς toggles. Χρησιμοποίησε checkboxes για ερωτήσεις ναι/όχι. Όλες οι αλλαγές της φόρμας θα εφαρμοστούν μαζί όταν ο χρήστης πατήσει αποστολή. Η φόρμα έχει νόημα. Ο χρήστης καταλαβαίνει το μοντέλο.
Τα toggle switches ανήκουν σε πίνακες, πάνελ ρυθμίσεων και άλλα μέρη όπου κάθε αλληλεπίδραση ισχύει αμέσως. Δεν ανήκουν σε φόρμες που χρειάζονται αποστολή.
Φόρμες στο WEMASY
Στον Δημιουργό ιστοσελίδων του WEMASY μπορείς να προσθέσεις φόρμα στην ιστοσελίδα σου. Για ερωτήσεις ναι/όχι σε φόρμα με κουμπί αποστολής, διάλεξε checkbox ή radio buttons αντί για toggle. Οι χρήστες σου θα σε ευχαριστήσουν.