Αναπτυσσόμενα μενού με δυνατότητα αναζήτησης: Κάνοντας τις μεγάλες λίστες φιλικές προς το χρήστη

Ένα αναπτυσσόμενο μενού με 200 χώρες. Μια λίστα με 50 πολιτείες. Εκατοντάδες επιλογές προϊόντων. Η κύλιση σε μεγάλες αναπτυσσόμενες λίστες είναι απογοητευτική και προκαλεί εγκατάλειψη φόρμας.

Αναπτυσσόμενα μενού με δυνατότητα αναζήτησης Λύστε αυτό το πρόβλημα επιτρέποντας στους χρήστες να πληκτρολογούν για να φιλτράρουν άμεσα τις επιλογές. Αντί να κάνουν κύλιση, πληκτρολογούν «μπορώ» και βλέπουν τον Καναδά στην κορυφή.

Σε αυτόν τον οδηγό, θα μάθετε πότε να χρησιμοποιείτε αναπτυσσόμενα μενού με δυνατότητα αναζήτησης και πώς να τα ρυθμίσετε στις φόρμες σας στο WordPress.

Το πρόβλημα με τα μεγάλα αναπτυσσόμενα μενού

Τα τυπικά αναπτυσσόμενα μενού καθίστανται άχρηστα καθώς αυξάνονται οι επιλογές:

Προβλήματα Εμπειρίας Χρήστη

• Ατελείωτη κύλιση – Η εύρεση των «Ηνωμένες Πολιτείες» σε μια αλφαβητική λίστα χωρών σημαίνει κύλιση σε περισσότερες από 180 χώρες
• Κινητός εφιάλτης – Μικροσκοπικές περιοχές κύλισης σε οθόνες αφής
• Χρονοβόρος – Οι χρήστες αφιερώνουν 10+ δευτερόλεπτα για να βρουν μία επιλογή
• Επιρρεπής σε λάθη – Εύκολη επιλογή λάθος αντικειμένου κατά λάθος
• Απογοητευτικό – Επαναλαμβάνεται για πολλά αναπτυσσόμενα πεδία

Όταν τα αναπτυσσόμενα μενού γίνονται προβληματικά

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

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

1. Ο χρήστης κάνει κλικ στο αναπτυσσόμενο πεδίο
2. Εμφανίζεται ένα πλαίσιο αναζήτησης (ή το ίδιο το πεδίο γίνεται αναζητήσιμο)
3. Ο χρήστης πληκτρολογεί μερικούς χαρακτήρες
4. Οι επιλογές φιλτράρονται σε πραγματικό χρόνο ώστε να ταιριάζουν με την εισαγωγή
5. Ο χρήστης επιλέγει από τη φιλτραρισμένη λίστα επιλογών

Παράδειγμα: Επιλογή χώρας

Χωρίς αναζήτηση: Περιηγηθείτε σε περισσότερες από 200 χώρες για να βρείτε τη λέξη «Γερμανία»

Με αναζήτηση: Πληκτρολογήστε «ger» → δείτε Γερμανία, Αλγερία, Νιγηρία → κάντε κλικ στη Γερμανία

Εξοικονόμηση χρόνου: 10+ δευτερόλεπτα → 2 δευτερόλεπτα

Συνήθεις περιπτώσεις χρήσης για αναπτυσσόμενα μενού με δυνατότητα αναζήτησης

Επιλογή Χώρας

Το κλασικό παράδειγμα. Με 195+ χώρες, η αναζήτηση είναι απαραίτητη:

• Πληκτρολογήστε “uni” → Ηνωμένες Πολιτείες, Ηνωμένο Βασίλειο, Ηνωμένα Αραβικά Εμιράτα
• Πληκτρολογήστε "aus" → Αυστραλία, Αυστρία
• Πληκτρολογήστε «νέο» → Νέα Ζηλανδία, Νέα Καληδονία

Επιλογή Πολιτείας/Επαρχίας

50 πολιτείες των ΗΠΑ, 13 καναδικές επαρχίες ή περιοχές παγκοσμίως:

• Πληκτρολογήστε “cal” → Καλιφόρνια
• Πληκτρολογήστε «νέο» → Νέα Υόρκη, Νιου Τζέρσεϊ, Νιου Χάμσαϊρ, Νέο Μεξικό

Κατηγορίες Προϊόντων

Ιστότοποι ηλεκτρονικού εμπορίου με εκατοντάδες τύπους προϊόντων:

• Τύπος «laptop» → Φορητοί υπολογιστές, αξεσουάρ φορητών υπολογιστών, τσάντες φορητών υπολογιστών
• Πληκτρολογήστε «τηλέφωνο» → Τηλέφωνα, Θήκες Τηλεφώνων, Φορτιστές Τηλεφώνων

Θέσεις εργασίας/Κλάδοι

Φόρμες σταδιοδρομίας με εκτενείς λίστες θέσεων εργασίας:

• Πληκτρολογήστε «μηχανικός» → Μηχανικός Λογισμικού, Πολιτικός Μηχανικός, Μηχανολόγος Μηχανικός
• Πληκτρολογήστε «αγορά» → Διευθυντής Μάρκετινγκ, Αναλυτής Αγοράς, Ειδικός Αγοράς

Γλώσσες

Προτίμηση γλώσσας με 100+ επιλογές:

• Πληκτρολογήστε “span” → Ισπανικά
• Πληκτρολογήστε “chin” → Κινέζικα (Απλοποιημένα), Κινέζικα (Παραδοσιακά)

Πανεπιστήμια/Σχολεία

Λίστες εκπαιδευτικών ιδρυμάτων:

• Πληκτρολογήστε «χάρβαρντ» → Πανεπιστήμιο Χάρβαρντ
• Τύπος «MIT» → Ινστιτούτο Τεχνολογίας της Μασαχουσέτης

Ζώνες ώρας

400+ επιλογές ζώνης ώρας:

• Πληκτρολογήστε «ειρηνικός» → Ειρηνικός/Ώκλαντ, Ειρηνικός/Χονολουλού, ΗΠΑ/Ειρηνικός
• Πληκτρολογήστε «νέα Υόρκη» → Αμερική/Νέα_Υόρκη

Ρύθμιση αναπτυσσόμενων μενού με δυνατότητα αναζήτησης

Δείτε πώς μπορείτε να δημιουργήσετε αναπτυσσόμενα μενού με δυνατότητα αναζήτησης με Αυτόματη δημιουργία φορμών:

Βήμα 1: Εγκατάσταση του Αυτόματου Δημιουργού Φόρμας

1. Πηγαίνετε στο Πρόσθετα → Προσθήκη νέου
2. Ψάχνω για "A.F.B." (η σύντομη ονομασία του Auto Form Builder)
3. Βρείτε "AFB – Αυτόματη Δημιουργία Φόρμας – Δημιουργός Φόρμας με Σύρσιμο & Απόθεση"
4. Πατήστε εγκατάσταση τώρα, Τότε Θέτω εις ενέργειαν

Βήμα 2: Προσθήκη πεδίου αναπτυσσόμενου μενού

1. Δημιουργήστε ή επεξεργαστείτε τη φόρμα σας
2. Σύρετε το Αναπτυσσόμενο πεδίο στη φόρμα σας
3. Κάντε κλικ για να ανοίξετε τις ρυθμίσεις

Βήμα 3: Προσθέστε τις επιλογές σας

Εισαγάγετε τη λίστα επιλογών σας. Για μεγάλες λίστες, μπορείτε να:

• Πληκτρολογήστε χειροκίνητα – Εισαγάγετε κάθε επιλογή μία προς μία
• Μαζική προσθήκη – Επικόλληση λίστας επιλογών (μία ανά γραμμή)

Βήμα 4: Ενεργοποίηση αναζήτησης

Στις αναπτυσσόμενες ρυθμίσεις, αναζητήστε το Ερευνήσιμος or Ενεργοποίηση αναζήτησης επιλογή. Ενεργοποιήστε την.

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

Βήμα 5: Ρύθμιση παραμέτρων συμπεριφοράς αναζήτησης

Ανάλογα με το εργαλείο δημιουργίας φορμών που χρησιμοποιείτε, ενδέχεται να έχετε επιλογές όπως:

• Ελάχιστοι χαρακτήρες – Έναρξη φιλτραρίσματος μετά την πληκτρολόγηση χαρακτήρων X
• Θέση αναζήτησης – Ταίριασμα από την αρχή της επιλογής ή οπουδήποτε
• Κείμενο κράτησης θέσης – «Πληκτρολογήστε για αναζήτηση…» ή «Αναζήτηση χωρών…»

Βέλτιστες πρακτικές για το αναπτυσσόμενο πεδίο

1. Να ενεργοποιείτε πάντα την αναζήτηση για 20+ επιλογές

Εάν το αναπτυσσόμενο μενού σας έχει περισσότερες από 20 επιλογές, ενεργοποιήστε την αναζήτηση. Είναι τόσο απλό. Οι χρήστες θα σας ευγνωμονούν.

2. Χρησιμοποιήστε καθαρό κείμενο κράτησης θέσης

Πείτε στους χρήστες ότι μπορούν να αναζητήσουν:

• «Επιλέξτε μια χώρα (πληκτρολογήστε για αναζήτηση)»
• «Επιλέξτε την πολιτεία σας…»
• «Αναζήτηση ή επιλογή…»

3. Επιλογές Παραγγελίας Λογικά

Ακόμα και με την αναζήτηση, η σειρά των επιλογών έχει σημασία:

• Αλφαβητικός – Ιδανικό για ονόματα (χώρες, πολιτείες)
• Πρώτα τα πιο συνηθισμένα – Τοποθετήστε δημοφιλείς επιλογές στην κορυφή (ΗΠΑ, Ηνωμένο Βασίλειο, Καναδάς)
• Ομαδοποιημένο – Κατηγορίες με διαχωριστικά

4. Συμπεριλάβετε κοινές παραλλαγές

Οι χρήστες ενδέχεται να αναζητήσουν:

• «ΗΠΑ» ή «Ηνωμένες Πολιτείες» ή «ΗΠΑ» ή «Αμερική»
• «Ηνωμένο Βασίλειο» ή «Βρετανία» ή «Αγγλία»

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

5. Δοκιμή σε κινητό

Τα αναπτυσσόμενα μενού με δυνατότητα αναζήτησης θα πρέπει να λειτουργούν ομαλά σε συσκευές αφής:

• Η εισαγωγή δεδομένων αναζήτησης είναι εύκολα πατημένη
• Εμφανίζεται το πληκτρολόγιο για πληκτρολόγηση
• Οι επιλογές είναι αρκετά μεγάλες για να πατήσετε με ακρίβεια

Πότε ΔΕΝ πρέπει να χρησιμοποιείτε αναπτυσσόμενα μενού με δυνατότητα αναζήτησης

Τα αναπτυσσόμενα μενού με δυνατότητα αναζήτησης δεν είναι πάντα η απάντηση:

Σύντομες Λίστες (Λίγες από 10 Επιλογές)

Για 5-10 επιλογές, ένα τυπικό αναπτυσσόμενο μενού είναι πιο γρήγορο. Δεν χρειάζεται να πληκτρολογείτε όταν μπορείτε να δείτε τα πάντα ταυτόχρονα.

Όταν οι χρήστες δεν γνωρίζουν τον ακριβή όρο

Η αναζήτηση απαιτεί από τους χρήστες να γνωρίζουν τι να πληκτρολογήσουν. Εάν περιηγούνται/εξερευνούν επιλογές, μια κατηγοριοποιημένη λίστα ή κουμπιά επιλογής μπορεί να λειτουργήσουν καλύτερα.

Ναι/Όχι ή Δυαδικές Επιλογές

Χρησιμοποιήστε κουμπιά επιλογής. Δύο επιλογές δεν χρειάζονται καθόλου αναπτυσσόμενο μενού.

Αριθμητικά εύρη

Για ηλικιακές ομάδες ή επιλογή ποσότητας, λάβετε υπόψη:

• Πεδίο εισαγωγής αριθμού
• Slider
• Σύντομο αναπτυσσόμενο μενού (1-10)

Εναλλακτικές λύσεις για τα αναπτυσσόμενα μενού με δυνατότητα αναζήτησης

Ανάλογα με τα δεδομένα σας, λάβετε υπόψη τις ακόλουθες εναλλακτικές λύσεις:

Πεδίο κειμένου αυτόματης συμπλήρωσης

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

Αναπτυσσόμενα μενού με διαδοχικές αλλαγές

Χωρίστε μια μεγάλη λίστα σε δύο μικρότερες:

• Πρώτο αναπτυσσόμενο μενού: Επιλογή ηπείρου
• Δεύτερο αναπτυσσόμενο μενού: Επιλογή χώρας (φιλτραρισμένη ανά ήπειρο)

Κουμπιά επιλογής με την ένδειξη «Άλλο»

Εμφάνιση των 5-7 κορυφαίων επιλογών ως κουμπιά επιλογής με μια επιλογή "Άλλο" που αποκαλύπτει ένα πεδίο κειμένου.

Ομαδοποιημένες/Κατηγοριοποιημένες Επιλογές

Χρησιμοποιήστε το optgroups για να οργανώσετε τις επιλογές ανά κατηγορία:

• Βόρεια Αμερική
  • Canada
  • Μεξικό
  • United States
• Ευρώπη
  • Γαλλία
  • Germany
  • Ηνωμένο Βασίλειο

Προκατασκευασμένες λίστες επιλογών

Μην επανεφεύρετε τον τροχό. Ακολουθούν συνηθισμένες λίστες που θα χρειαστείτε:

Χώρες

195 κράτη μέλη του ΟΗΕ συν εδάφη. Σκεφτείτε να βάλετε τις κοινές χώρες (ΗΠΑ, Ηνωμένο Βασίλειο, Καναδάς, Αυστραλία) στην κορυφή και στη συνέχεια αλφαβητικά.

ΗΠΑ

50 πολιτείες συν την Ουάσινγκτον και εδάφη. Η αλφαβητική σειρά λειτουργεί καλά.

Καναδικές επαρχίες

13 επαρχίες και εδάφη. Αρκετά μικρό ώστε η αναζήτηση να είναι προαιρετική.

Ζώνες ώρας

Χρησιμοποιήστε τυπικά αναγνωριστικά ζώνης ώρας (Αμερική/Νέα_Υόρκη, Ευρώπη/Λονδίνο). Ομαδοποιήστε ανά περιοχή.

Γλώσσες

Κωδικοί γλώσσας ISO με εμφανιζόμενα ονόματα. Δώστε προτεραιότητα στις κοινές γλώσσες.

Βιομηχανία

Τυπικές λίστες ταξινόμησης κλάδου (NAICS, SIC) ή προσαρμοσμένες λίστες για το κοινό σας.

Θέματα απόδοσης

Πολύ Μεγάλες Λίστες (1000+ Επιλογές)

Για εξαιρετικά μεγάλες λίστες:

• Φόρτωση επιλογών κατ' απαίτηση – Ανάκτηση από τον διακομιστή καθώς πληκτρολογεί ο χρήστης
• Ορισμός ελάχιστου αριθμού χαρακτήρων – Απαιτούνται 2-3 χαρακτήρες πριν από την αναζήτηση
• Περιορισμός αποτελεσμάτων που εμφανίζονται – Εμφάνιση των 20 κορυφαίων αγώνων, όχι και των 500

Επίδραση στη φόρτωση σελίδας

Οι μεγάλες λίστες επιλογών αυξάνουν το μέγεθος της σελίδας. Για λίστες με πάνω από 500 επιλογές, λάβετε υπόψη τα εξής:

• Φόρτωση επιλογών μέσω AJAX
• Εισαγωγή σε αναπτυσσόμενα μενού με διαδοχικές λήψεις
• Χρήση αναζήτησης από την πλευρά του διακομιστή

Προσβασιμότητα

Βεβαιωθείτε ότι τα αναπτυσσόμενα μενού με δυνατότητα αναζήτησης είναι προσβάσιμα:

Πλοήγηση πληκτρολογίου

• Tab για εστίαση στο πεδίο
• Πληκτρολογήστε για αναζήτηση
• Πλήκτρα βέλους για πλοήγηση στις επιλογές
• Εισαγάγετε για να επιλέξετε
• Απόδραση για κλείσιμο

Αναγνώστες οθόνης

• Κατάλληλες ετικέτες ARIA
• Ανακοίνωση αριθμού αποτελεσμάτων
• Ανακοίνωση επιλεγμένης επιλογής

Οπτικοί δείκτες

• Καταστάσεις καθαρής εστίασης
• Επισημασμένη τρέχουσα επιλογή
• Ένδειξη φόρτωσης κατά την αναζήτηση

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

Πόσες επιλογές υπάρχουν πριν χρειαστώ αναζήτηση;

Ενεργοποιήστε την αναζήτηση για οποιοδήποτε αναπτυσσόμενο μενού με 20+ επιλογές. Για 50+ επιλογές, η αναζήτηση είναι απαραίτητη. Μερικοί χρήστες εκτιμούν την αναζήτηση ακόμη και για 10-15 επιλογές.

Πρέπει η αναζήτηση να ταιριάζει από την αρχή ή οπουδήποτε;

Η αντιστοίχιση «Οπουδήποτε» είναι πιο εύκολη. Η αναζήτηση με «Υόρκη» βρίσκει «Νέα Υόρκη». Η αντιστοίχιση μόνο στην αρχή είναι πιο γρήγορη για γνωστούς όρους.

Μπορούν οι χρήστες να κάνουν κύλιση σε όλες τις επιλογές;

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

Τι γίνεται αν οι χρήστες γράψουν λάθος στην αναζήτησή τους;

Η βασική αναζήτηση δεν χειρίζεται τυπογραφικά λάθη. Για σημαντικά πεδία (όπως χώρα), βεβαιωθείτε ότι καλύπτονται τα συνηθισμένα ορθογραφικά λάθη ή χρησιμοποιήστε ασαφή αντιστοίχιση, εάν είναι διαθέσιμη.

Λειτουργούν τα αναπτυσσόμενα μενού με δυνατότητα αναζήτησης σε κινητά;

Ναι, και συχνά είναι καλύτερα σε κινητά από τα τυπικά αναπτυσσόμενα μενού, επειδή η πληκτρολόγηση είναι πιο γρήγορη από την κύλιση σε μια μεγάλη λίστα με μια μικρή περιοχή κύλισης.

Περίληψη

Κάντε τις μακροσκελείς αναπτυσσόμενες λίστες φιλικές προς το χρήστη:

1. Προσδιορίστε μεγάλες λίστες – Οποιοδήποτε αναπτυσσόμενο μενού με 20+ επιλογές
2. Ενεργοποίηση αναζήτησης – Επιτρέψτε στους χρήστες να πληκτρολογούν για φιλτράρισμα
3. Χρησιμοποιήστε σαφή placeholders – «Πληκτρολογήστε για αναζήτηση…»
4. Λογική παραγγελία – Πρώτα τα δημοφιλή στοιχεία και μετά αλφαβητικά.
5. Δοκιμή σε κινητό – Εξασφαλίστε ομαλή εμπειρία αφής
6. Εξετάστε εναλλακτικές λύσεις – Διαδοχικά αναπτυσσόμενα μενού, ομαδοποιημένες επιλογές

Συμπέρασμα

Οι μεγάλες αναπτυσσόμενες λίστες μειώνουν τα ποσοστά συμπλήρωσης φορμών. Αναπτυσσόμενα μενού με δυνατότητα αναζήτησης μεταμορφώστε την εμπειρία—οι χρήστες βρίσκουν την επιλογή τους σε δευτερόλεπτα αντί να κάνουν ατελείωτη κύλιση.

Είτε πρόκειται για χώρες, πολιτείες, προϊόντα ή οποιαδήποτε λίστα με 20+ επιλογές, η προσθήκη λειτουργικότητας αναζήτησης κάνει τις φόρμες σας πιο γρήγορες και πιο φιλικές προς το χρήστη.

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

Είστε έτοιμοι να βελτιώσετε τις φόρμες σας; Λήψη Αυτόματου Δημιουργού Φόρμας για Λήψη και κάντε τις αναπτυσσόμενες λίστες σας φιλικές προς το χρήστη σήμερα.