Αλλες εναλλακτικές λύσεις για καλύτερες (κινητές) φόρμες

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

Ταυτόχρονα όμως, τα dropdown (ή τα επιλεγμένα) μενού είναι ένα από τα πιο συχνά χρησιμοποιούμενα μοτίβα φόρμας και "πρέπει να είναι το UI της τελευταίας λύσης", σύμφωνα με τον Luke Wroblewski και πολλούς άλλους.

Ας δούμε ορισμένους από τους περιορισμούς και τις ανησυχίες:

  • Σε ένα αναπτυσσόμενο μενού, οι διαθέσιμες επιλογές δεν είναι ορατές μέχρι να κάνετε κλικ ή να πατήσετε για να το ανοίξετε. Επίσης, το μήκος της λίστας είναι κρυμμένο με την πρώτη ματιά, δηλαδή οι χρήστες δεν μπορούν να προβλέψουν αν ένα αναπτυσσόμενο μενού περιέχει 2 ή 50 στοιχεία.
  • Η επιλογή μιας επιλογής από μια αναπτυσσόμενη λίστα (ειδικά σε κινητά) είναι μια διαδικασία πολλαπλών βημάτων: πρέπει να πατήσετε στο αναπτυσσόμενο μενού για να ανοίξετε τη λίστα επιλογών, μετά να μετακινηθείτε και να σαρώσετε τα στοιχεία για να επιλέξετε ένα και στη συνέχεια να κλείσετε την αναπτυσσόμενη λίστα.
  • Τα μενού απόκλισης μπορεί να κάνουν τους σχεδιαστές τεμπέλης: είναι πολύ εύκολο να προσθέσετε όλες τις πιθανές επιλογές σε μια αναπτυσσόμενη λίστα χωρίς καμία ιεράρχηση (κάτι που την κάνει πολύ παρόμοια με το μενού χάμπουργκερ).
  • Μακρύτερα dropdowns, όπως ένας επιλογέας χώρας, μπορεί να είναι ένας εφιάλτης για να σαρώσει, ειδικά στο κινητό, όπου η αναζήτηση πληκτρολογίου συνήθως δεν είναι διαθέσιμη.
  • Η κύλιση των επιλογών ενδέχεται να είναι οδυνηρή σε ορισμένες οθόνες κινητής τηλεφωνίας, όπου η ορατή και μετακινούμενη περιοχή της λίστας είναι μικρή:
Στο iOS, ο αριθμός των ορατών επιλογών μπορεί να είναι εκπληκτικά χαμηλός με την πρώτη ματιά

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

Εξετάστε τον αριθμό των επιλογών

Για δυαδικές αποφάσεις (on / off), το αναπτυσσόμενο μενού είναι μια πραγματικά κακή επιλογή. Αυτό που χρειάζεστε είναι ένα πλαίσιο ελέγχου ή ένας διακόπτης εναλλαγής.

Αν το αναπτυσσόμενο μενού περιέχει μόνο επιλογές Ναι / Όχι ή Ενεργοποίηση / Απενεργοποίηση, χρησιμοποιήστε έναν απλούστερο διακόπτη

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

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

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

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

Για μεγάλες και ποικίλες λίστες, προσπαθήστε να χρησιμοποιήσετε τα υπάρχοντα δεδομένα χρήστη για να δώσετε προτεραιότητα στις επιλογές και να αναφέρετε μόνο τις πρώτες πιο δημοφιλείς επιλογές στο χρήστη. Με αυτόν τον τρόπο υπάρχει η πιθανότητα ότι το 90% των χρηστών θα βρει την προτίμησή τους αμέσως και μόνο το 10% θα πρέπει να επιλέξει Άλλο και στη συνέχεια να το καθορίσει στην επόμενη ερώτηση.

Παρόλο που το

Εξετάστε την αναμενόμενη είσοδο

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

Η εισαγωγή ενός έτους γέννησης σε μια κινητή συσκευή είναι ευκολότερη με ένα αριθμητικό πληκτρολόγιο παρά με κύλιση σε μια μακρά λίστα

Γενικά, η εισαγωγή αριθμητικής τιμής σε ένα κινητό είναι συνήθως πιο αποτελεσματική με ένα αριθμητικό πληκτρολόγιο.

Παρόλο που η σειρά ταξινόμησης ενός αριθμητικού αναπτυσσόμενου παραθύρου είναι ξεκάθαρη, μπορεί να είναι ακόμα πιο εύκολο να πληκτρολογείτε παρά να μετακινηθείτε

Εάν είναι σημαντικό να επικυρώσετε την είσοδο του χρήστη, η προσέγγιση "start typing ..." μπορεί να είναι χρήσιμη όταν το πεδίο εισαγωγής χρησιμοποιείται για να φιλτράρει τις διαθέσιμες επιλογές.

Κατά την καταχώριση των καταστάσεων των ΗΠΑ, πληκτρολογώντας μόνο ένα γράμμα φιλτράρει τη λίστα καλά

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

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

Η ίδια τεχνική θα πρέπει να εφαρμοστεί για τον κατάλογο καλών παλιών χωρών: αντί να καταχωρίσετε 200+ στοιχεία, επιτρέψτε στους χρήστες να αρχίσουν να πληκτρολογούν και να φιλτράρουν τα αποτελέσματα το συντομότερο δυνατό.

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

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

Η εμφάνιση της ελάχιστης και μέγιστης τιμής της κλίμακας μπορεί να βοηθήσει στην κατανόηση του πλαισίου

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

Εξετάστε το ενδεχόμενο να σχεδιάσετε πιο έξυπνα dropdowns

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

  • Χρησιμοποιήστε μια κατάλληλη ετικέτα: η ετικέτα ή η περιγραφή του μενού θα πρέπει να είναι σαφής και διαθέσιμη ακόμη και όταν η λίστα είναι ανοιχτή. Μέσα στο επιλεγμένο μενού, χρησιμοποιήστε μια περιγραφική ετικέτα που λέει στους χρήστες τι επιλέγουν (δηλαδή "Επιλέξτε τύπο" αντί "Παρακαλώ επιλέξτε").
  • Ταξινόμηση των αντικειμένων με έναν λογικό τρόπο: με βάση τα δεδομένα των χρηστών, δοκιμάστε να τοποθετήσετε τις πιο δημοφιλείς επιλογές στην κορυφή της λίστας. Ή, ακόμη και προεπιλογή του πιο δημοφιλή από προεπιλογή.
  • Χρησιμοποιήστε έξυπνες προεπιλογές: τα τηλέφωνα και τα προγράμματα περιήγησης γνωρίζουν την τοποθεσία του χρήστη, την ημερομηνία και τους τόνους άλλων πληροφοριών. Χρησιμοποιήστε αυτά τα δεδομένα για να επιλέξετε εκ των προτέρων την πιο πιθανή επιλογή για κάθε χρήστη.
  • Μειώστε τον αριθμό των πεδίων και αφήστε τον υπολογιστή να κάνει την εργασία: εάν ένας χρήστης εισάγει έναν ταχυδρομικό κώδικα, ο υπολογιστής θα μπορούσε ήδη να γνωρίζει την πόλη και την κατάσταση - δεν χρειάζεται να ρωτήσετε. Εάν ένας χρήστης εισάγει έναν αριθμό πιστωτικής κάρτας, ο υπολογιστής θα μπορούσε ήδη να γνωρίζει ότι είναι MasterCard - δεν χρειάζεται να το ρωτήσετε.
  • Εξετάστε το ενδεχόμενο να χρησιμοποιήσετε τα API: η εγγραφή με ένα κουμπί Facebook Connect είναι ευκολότερη από τη συμπλήρωση μιας φόρμας εγγραφής. Η πληρωμή με Paypal είναι ευκολότερη από το να χρειάζεται να πληκτρολογείτε τα δεδομένα της πιστωτικής σας κάρτας.

Εάν θέλετε να μάθετε περισσότερα σχετικά με το σχεδιασμό dropdowns, δείτε το λαμπρό SXSW Keynote από τον Golden Krishna και τον Eric Campbell:

Εάν σας άρεσε η ιστορία αυτή, ελέγξτε και τις εναλλακτικές επιλογές του μενού Hamburger. Ή τις συμβουλές μου Instant UX. Η ανατροφοδότηση είναι ευπρόσδεκτη στο Twitter και είμαι ευτυχής να συνδεθείτε στο LinkedIn. Οι απόψεις και οι απόψεις είναι εντελώς δικές μου.