Ποια είναι λοιπόν η διαφορά μεταξύ σύνθετου πλαισίου, πολλαπλής επιλογής, πλαισίου λίστας και αναπτυσσόμενου μενού; Ενώ όλα αυτά τα στοιχεία διεπαφής χρήστη μπορεί να φαίνονται παρόμοια, εξυπηρετούν διαφορετικούς σκοπούς. Η επιλογή συχνά εξαρτάται από τον αριθμό των διαθέσιμων επιλογών και την ορατότητά τους. Ας δούμε πώς διαφέρουν, ποιον σκοπό εξυπηρετούν και πώς να επιλέξουμε το σωστό — αποφεύγοντας παρεξηγήσεις και λανθασμένες προσδοκίες στην πορεία.
Δεν είναι όλα τα μοτίβα λίστας τα ίδια Όλα τα στοιχεία διεπαφής χρήστη που επισημαίνονται παραπάνω έχουν ακριβώς ένα κοινό: υποστηρίζουν τις αλληλεπιδράσεις των χρηστών με λίστες. Ωστόσο, το κάνουν λίγο διαφορετικά. Ας ρίξουμε μια ματιά στο καθένα, ένα προς ένα:
Η αναπτυσσόμενη λίστα → είναι κρυφή μέχρι να ενεργοποιηθεί. Combobox → πληκτρολογήστε για φιλτράρισμα + επιλέξτε 1 επιλογή. Πολλαπλή επιλογή → πληκτρολογήστε για φιλτράρισμα + επιλέξτε πολλές επιλογές. Πλαίσιο λίστας → όλες οι επιλογές λίστας ορατές από προεπιλογή (+ κύλιση). Διπλό πλαίσιο λίστας → μετακινήστε στοιχεία μεταξύ 2 πλαισίων λίστας.
Με άλλα λόγια, το Combobox συνδυάζει ένα πεδίο εισαγωγής κειμένου με μια αναπτυσσόμενη λίστα, έτσι ώστε οι χρήστες να μπορούν να πληκτρολογούν για να φιλτράρουν και να επιλέξουν μία μόνο επιλογή. Με το Multiselect, οι χρήστες μπορούν να επιλέξουν πολλές επιλογές (συχνά εμφανίζονται ως χάπια ή τσιπ). Τα πλαίσια λίστας εμφανίζουν όλες τις επιλογές λίστας ορατές από προεπιλογή, συχνά με κύλιση. Είναι χρήσιμο όταν οι χρήστες πρέπει να δουν αμέσως όλες τις διαθέσιμες επιλογές. Το διπλό πλαίσιο λίστας (ονομάζεται επίσης λίστα μεταφοράς) είναι μια παραλλαγή ενός πλαισίου λίστας που επιτρέπει στους χρήστες να μετακινούν στοιχεία μεταξύ δύο πλαισίων λίστας (αριστερά ↔ δεξιά), συνήθως για μαζική επιλογή. Μην κρύβετε ποτέ τις επιλογές που χρησιμοποιούνται συχνά Όπως αναφέρθηκε παραπάνω, η επιλογή του σωστού στοιχείου διεπαφής χρήστη εξαρτάται από 2 παράγοντες: πόσες επιλογές λίστας είναι διαθέσιμες και εάν όλες αυτές οι επιλογές πρέπει να είναι ορατές από προεπιλογή. Όλες οι λίστες θα μπορούσαν να έχουν δομές δέντρων, ένθεση και επιλογή ομάδας.
Υπάρχει μια αρχή που ακολουθώ εδώ και χρόνια για οποιοδήποτε στοιχείο διεπαφής χρήστη: μην αποκρύπτετε ποτέ τις επιλογές που χρησιμοποιούνται συχνά. Εάν οι χρήστες βασίζονται συχνά σε μια συγκεκριμένη επιλογή, έχει πολύ μικρή αξία να την αποκρύψετε από αυτούς. Θα μπορούσαμε είτε να το κάνουμε προεπιλεγμένο είτε (αν υπάρχουν μόνο 2–3 επιλογές που χρησιμοποιούνται συχνά) να τις εμφανίσουμε ως μάρκες ή κουμπιά και μετά να εμφανίσουμε την υπόλοιπη λίστα στην αλληλεπίδραση. Σε γενικές γραμμές, είναι καλή ιδέα να προβάλλετε πάντα δημοφιλείς επιλογές — ακόμα κι αν αυτό μπορεί να γεμίσει τη διεπαφή χρήστη. Πώς να επιλέξετε ποιο; Δεν χρειάζεται κάθε λίστα μια πολύπλοκη μέθοδο επιλογής. Για λίστες με λιγότερα από 5 στοιχεία, τα απλά κουμπιά επιλογής ή τα πλαίσια ελέγχου συνήθως λειτουργούν καλύτερα. Αλλά αν οι χρήστες πρέπει να επιλέξουν από μια μεγάλη λίστα επιλογών (π.χ. 200+ στοιχεία), το combobox + multiselect είναι χρήσιμα λόγω του ταχύτερου φιλτραρίσματος (π.χ. επιλογή χώρας).
Τα πλαίσια λίστας είναι χρήσιμα όταν οι άνθρωποι πρέπει να έχουν πρόσβαση σε πολλές επιλογές ταυτόχρονα, ειδικά εάν πρέπει να επιλέξουν επίσης πολλές επιλογές από αυτήν τη λίστα. Θα μπορούσαν να είναι χρήσιμα για φίλτρα που χρησιμοποιούνται συχνά.
Το διπλό πλαίσιο λίστας συχνά παραβλέπεται και αγνοείται. Αλλά μπορεί να είναι πολύ χρήσιμο για σύνθετες εργασίες, π.χ. μαζική επιλογή ή ανάθεση ρόλων, εργασιών, ευθυνών. Είναι το μόνο στοιχείο διεπαφής χρήστη που επιτρέπει στους χρήστες να ελέγχουν την πλήρη λίστα επιλογών τους δίπλα-δίπλα με τη λίστα προέλευσης πριν από τη δέσμευση (ονομάζεται επίσης "Λίστα μεταφοράς"). Στην πραγματικότητα, το dual listbox είναι συχνά πιο γρήγορο, πιο ακριβές και πιο προσιτό από το drag-and-drop. Θέματα χρηστικότητας Μια σημαντική σημείωση που πρέπει να έχετε κατά νου είναι ότι όλοι οι τύποι λιστών πρέπει να υποστηρίζουν την πλοήγηση με πληκτρολόγιο (π.χ. πλήκτρα βέλους ↑/↓) για προσβασιμότητα. Μερικοί άνθρωποι θα βασίζονται σχεδόν πάντα στο πληκτρολόγιο για να επιλέξουν επιλογές μόλις αρχίσουν να πληκτρολογούν.
Πέρα από αυτό:
Για λίστες με 7+ επιλογές, εξετάστε το ενδεχόμενο να προσθέσετε τις λειτουργίες "Επιλογή όλων" και "Εκκαθάριση όλων" για να βελτιστοποιήσετε την αλληλεπίδραση των χρηστών. Για μακροσκελείς λίστες με σύνθετο πλαίσιο, εκθέστε όλες τις επιλογές στους χρήστες με κλικ/πάτημα, γιατί διαφορετικά μπορεί να μην εμφανιστούν ποτέ, Το πιο σημαντικό, μην εμφανίζετε μη διαδραστικά στοιχεία ως κουμπιά για να αποφύγετε τη σύγχυση — και μην εμφανίζετε διαδραστικά στοιχεία ως στατικές ετικέτες.
Τελειώνοντας: Not Everything Is A Dropdown Τα ονόματα έχουν σημασία. Μια κατακόρυφη λίστα επιλογών περιγράφεται συνήθως ως "αναπτυσσόμενη λίστα" — αλλά συχνά είναι λίγο πολύ γενική για να έχει νόημα. Το "Dropdown" υποδηλώνει ότι η λίστα είναι κρυμμένη από προεπιλογή. "Πολλαπλή επιλογή" υποδηλώνει πολλαπλή επιλογή (πλαίσιο ελέγχου) σε μια λίστα. Το "Combobox" υποδηλώνει εισαγωγή κειμένου. Και το "Listbox" είναι απλώς μια λίστα με επιλέξιμα στοιχεία, ορατά ανά πάσα στιγμή. Ο στόχος δεν είναι να είναι συνεπής με τους παραπάνω ορισμούς για χάρη αυτού. Αλλά μάλλον για να ευθυγραμμίσετε τις προθέσεις — μιλάτε την ίδια γλώσσα όταν αποφασίζετε, σχεδιάζετε, δημιουργείτε και στη συνέχεια χρησιμοποιείτε αυτά τα στοιχεία διεπαφής χρήστη. Θα πρέπει να λειτουργεί γιαόλοι — σχεδιαστές, μηχανικοί και τελικοί χρήστες — εφόσον οι στατικές ετικέτες δεν μοιάζουν με διαδραστικά κουμπιά και τα κουμπιά επιλογής δεν λειτουργούν σαν πλαίσια ελέγχου. Γνωρίστε τα «Μοτίβα σχεδίασης για διεπαφές AI» Γνωρίστε το Design Patterns For AI Interfaces, το νέο μάθημα βίντεο του Vitaly με πρακτικά παραδείγματα από προϊόντα της πραγματικής ζωής — με μια ζωντανή εκπαίδευση UX που θα πραγματοποιηθεί σύντομα. Μεταβείτε σε μια δωρεάν προεπισκόπηση. Γνωρίστε τα μοτίβα σχεδίασης για διεπαφές τεχνητής νοημοσύνης, το μάθημα βίντεο του Vitaly για τη σχεδίαση διεπαφών και το UX.
Βίντεο + Εκπαίδευση UX Μόνο βίντεοΒίντεο + Εκπαίδευση UX 450,00$ 799,00 $
Λάβετε Video + UX Training30 μαθήματα βίντεο (10 ώρες) + Live UX Training. 100 ημέρες εγγύηση επιστροφής χρημάτων. Μόνο βίντεο 275,00$ 395,00$
Λάβετε το μάθημα βίντεο 30 μαθήματα βίντεο (10 ώρες). Ενημερώνεται ετησίως. Διατίθεται επίσης ως πακέτο UX με 3 μαθήματα βίντεο.
Χρήσιμοι Πόροι
Αυτόματη συμπλήρωση: UX Guidelines, από τον Vitaly Friedman Combobox, από το eBay 👍 Combobox, της Elastic Combobox, από την Elisa Combobox, από την MongoDB 👍 Combobox, της Visa 👍 Combobox, από τον Watson (Docplanner) Combobox, από το Wikimedia Combobox, της Zendesk Multiselect (MongoDB Combobox Design Docs), από την MongoDB 👍 Αναζήτηση πολλαπλών επιλογών, από το Wikimedia Multi-select Combo Box, της Vaadin Multiselect, by Visa Μεταφορά (παράδειγμα Listbox), από την Ant Design Listbox, από τον Hopper List Box, του Vaadin Listbox, από τη Visa Επιλογέας διπλής λίστας, από την Red Hat (PatternFly) Dual Listbox, από την Salesforce (Lightning Design System) Λίστα Μεταγραφών, της Μαντίνης Dual Listbox, από την Dashlite Badges vs. Pills vs. Chips vs. Tags, του Vitaly Friedman Πλαίσια λίστας έναντι αναπτυσσόμενων λιστών, από την Anna Kaley (NN/g)
