Βελτίωση της χρηστικότητας πολλαπλής επιλογής από μια μακρά λίστα

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

Οι υπάρχουσες λύσεις UI

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

Μετακίνηση και αναζήτηση σε μια μακρά λίστα

Εναλλακτικά, οι λίστες με κουτιά επιλογής είναι κρυμμένα σε μια πτώση. Ή δύο λίστες και μετακινείτε την επιλογή σας από το αριστερό προς τα δεξιά. Οπως αυτά.

Υβριδική διπλή λίστα με διάλυμα φίλτρου από doejo

Το σύστημά μας είχε ήδη ένα στοιχείο από το Select2, το οποίο ήταν παρόμοιο με το πρώτο παράδειγμα. Οι προγραμματιστές μας ξεκίνησαν να το χρησιμοποιούν σε πολλαπλές περιοχές, καθώς και τη διαδικασία δημιουργίας λίστας, η οποία γίνεται με πολλαπλά βήματα, ακριβώς στο πρώτο βήμα ζητάμε από τους παρόχους μας να επιλέξουν 4-6 σχετικές ετικέτες στις λίστες τους από μια πολύ μεγάλη λίστα.

Το πρόβλημα με δυνατότητα επιλογής πολλαπλών επιλογών

Η λίστα που εμφανίζουμε στους παρόχους μας είναι πολύ μεγάλη. Περιέχει περίπου 300 αντικείμενα και τα περισσότερα από αυτά δεν είναι εξοικειωμένα. Από τις εγγραφές στην οθόνη, είδα ότι (1) οι χρήστες έφυγαν μόνο μερικές φορές και έπειτα εγκατέλειψαν τη μετακίνηση σε ολόκληρη τη λίστα και στη συνέχεια (2) άρχισαν να ψάχνουν για αυτό που είχαν κατά νου.

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

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

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

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

Πρώτη ιδέα για βελτίωση

Σκεφτόμουν σοβαρά τη λύση "Hybrid Dual List with Filter", καθώς οι επιλογές είναι εκτεθειμένες (πιο ευανάγνωστες) και η επιλογή είναι σαφής στη λίστα στα δεξιά. Αλλά πώς είναι φιλικό προς το κινητό; Έχουμε αναπτύξει με μια πρώτη κινητή προσέγγιση ακόμη και στους παρόχους μας, και αυτή η λύση δεν ταιριάζει.

Τι άλλο? Ας εκθέσουμε όλες τις επιλογές στους παρόχους με τη μορφή ενός cloud tag, όπως το Foursquare κάνει με "taste".

Επιλέξτε τις προτιμήσεις σας με Foursquare

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

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

Αυτό ήταν μόνο μια αλλαγή UI, δεν άρεσε δεδομένα ή ταξινόμηση στο backend. Όπως βλέπετε στο παράδειγμα, οι "Κατηγορίες" δεν ταξινομούνται αλφαβητικά, κάτι που με αφορούσε λίγο. Θα είναι αρκετά καλό;

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

Με σκοπό τους έδωσα τον κατάλογο καθώς ο πάροχος προσπάθησε να τα βρει, όχι όπως είναι στη λίστα.

Στην παλαιά έκδοση 3 συνάδελφοι των 5 εγκαταλείψαν το έργο, 2 από αυτούς τελείωσαν σε πάνω από ένα λεπτό. Στη νέα έκδοση, όλοι κατάφεραν να ολοκληρώσουν την εργασία μέσα σε ένα λεπτό, με συνδυασμό αναζήτησης και σάρωσης Ctrl + F. Αυτό ήταν ένα καλό αποτέλεσμα για μένα.

Μαθήματα από αυτή τη δοκιμασία

Παρουσιάσαμε τους μισούς παροχείς μας στο χαρακτηριστικό που βασίζεται σε cloud tag για περίπου ένα μήνα (λόγω της χαμηλής επισκεψιμότητας), αλλά δυστυχώς δεν υπήρξαν πραγματικές βελτιώσεις στην επιλογή πιο σχετικών ετικετών ούτε στην ταχύτητα εύρεσης αυτών των ετικετών.

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

Επανάληψη: το επόμενο βήμα είναι λίγο μεγαλύτερο

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

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

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

Πρώτα έχτισα τις στήλες με οθόνη: flex; που διέταξε τα αντικείμενα από αριστερά προς τα δεξιά αντί από πάνω προς τα κάτω. Η μαγική λύση ήταν η μέτρηση της στήλης: 2. Η επίλυση αυτή ήταν μια νίκη από μόνος του! (Κάντε κλικ για την απεικόνιση του JSFiddle.)

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

Αναλύοντας το αποτέλεσμα

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

Η αντίληψή μου ήταν θετική από τις συνεδρίες που παρακολούθησα, οι άνθρωποι έκαναν κύλιση σε ολόκληρη τη λίστα, αλλά μόνο το 1,93% από αυτούς μπήκαν σε αυτή τη σελίδα. Ήθελα να έχω κάποια σκληρά στοιχεία για τον αριθμό των ετικετών που πήρα (ήθελα να δω ξεκάθαρη βελτίωση) και για το χρόνο που χρειάστηκε για να ολοκληρώσω τα βήματα (ήθελα να δω μείωση στο χρόνο). Δυστυχώς, το εργαλείο πειράματος που χρησιμοποιούμε αναπτύσσεται για τη μέτρηση των αλλαγών στη διοχέτευση μετατροπής πελατών και καθόλου βελτιστοποιημένο για τη μέτρηση των αλλαγών στη χρηστικότητα της φόρμας στην περιοχή διαχείρισης.

Έτσι έπρεπε να συγκεντρώσω και να αναλύσω τα δεδομένα με μη αυτόματο τρόπο.

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

Για την ομάδα ελέγχου (V0) ερωτήθηκαν τα δευτερόλεπτα που ελήφθησαν για κάθε καταχώριση για να προχωρήσετε από το Βήμα 1 στο Βήμα 2 (βήμα 1 περιείχε τα κουτιά πολλαπλών επιλογών χάπια) και την ποσότητα των ετικετών που ελήφθησαν.

Η ομάδα θεραπείας (V1) είχε την ετικέτα που πήρε σε ένα νέο βήμα, στο Βήμα 2, γι 'αυτό έπρεπε να ερωτήσω πόσες δευτερόλεπτα τους πήραν για να φτάσουν από το Βήμα 1 στο Βήμα 3, καθώς και την ποσότητα των ετικετών που πήραμε.

Τους έβαλα σε ένα Φύλλο Google για να ξεκινήσω την ανάλυση και γρήγορα έκανα ένα AVERAGE για τους αριθμούς που πήρα. Και το αποτέλεσμα ήταν εκπληκτικό:

Ένα δείγμα του συνόλου δεδομένων με το οποίο συνεργάστηκα

10000 δευτερόλεπτα επιπλέον κατά μέσο όρο ??? Σχεδόν 3 ώρες περισσότερο στην ομάδα θεραπείας; Αυτό δεν μπορεί να είναι σωστό. Δεν είμαι επιχειρηματικός αναλυτής, αλλά κάτι επανήλθε από τις μελέτες μου σχετικά με τις στατιστικές και την απομάκρυνση των αποκλίσεων από τα σύνολα δεδομένων, επομένως δεν βλέπετε τον αντίκτυπο - σε αυτή την περίπτωση - των παρόχων που εγκατέλειψαν τη διαδικασία για μια ολόκληρη ημέρα και στη συνέχεια επέστρεψαν .

Επομένως, ποιος είναι ο καλύτερος τρόπος για να αφαιρέσετε τα υπερβολικά χαμηλά επίπεδα που μπορεί να αντιμετωπίσει εύκολα τα Φύλλα Google; Μετά από κάποια έρευνα αποφάσισα να χρησιμοποιήσω τη λειτουργία TRIMMEAN, η οποία υπολογίζει τον μέσο ενός συνόλου δεδομένων, εξαιρουμένου κάποιου ποσοστού δεδομένων από τα υψηλά και τα χαμηλά άκρα του συνόλου δεδομένων. Στον υπολογισμό αποκλείσα το άνω και κάτω 20% για να αποκτήσω μια πιο πραγματική εικόνα της χρήσης.

Και το αποτέλεσμα ήταν εκπληκτικό!

Η ολοκλήρωση των 2 βημάτων που συνδυάστηκαν στην ομάδα θεραπείας ήταν 33% γρηγορότερη, στη συνέχεια, το ένα βήμα στην ομάδα ελέγχου και 4 νέες ετικέτες που επιλέχθηκαν στη νέα έκδοση της λίστας. Τι μεγάλη βελτίωση!

Το συμπέρασμα

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

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

Με λιγότερο γνωστικό φορτίο η εργασία απαιτεί λιγότερο χρόνο για να ολοκληρωθεί και αφήνει στον χρήστη περισσότερη ενέργεια για να περάσει όλη τη διαδικασία.