Φίλτρα στο eshop μου: μυστικά για μια καλή εμπειρία χρήστη

Ως πελάτες, χρησιμοποιούμε φίλτρα για να μειώσουμε ένα μεγάλο σύνολο προϊόντων σε ένα πιο μικρό.

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

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

Το σημαντικότερο είναι ότι πρέπει να:

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

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

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

Υπάρχουν πολλά σενάρια που κάνουν το σχεδιασμό φίλτρων ιδιαίτερα δύσκολο:

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

Αποφύγετε τα μικροσκοπικά παράθυρα με scroll

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

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

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

Να παρέχεται πάντα ως εναλλακτική, η εισαγωγή κειμένου

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

Όταν οι πελάτες θέλουν να εξερευνήσουν γρήγορα πολλές επιλογές, ένα καλό scroller αντίχειρα λειτουργεί τέλεια. Όταν οι πελάτες θέλουν να είναι πιο ακριβείς στην εξερεύνηση τους, μπορούμε να τους βοηθήσουμε προσθέτοντας steppers/κουμπιά (+/-) για βήματα προς τα εμπρός και προς τα πίσω. Όταν οι πελάτες έχουν στο μυαλό τους μια ακριβή τιμή, μπορούμε να βοηθήσουμε παρέχοντας πεδία εισαγωγής κειμένου, ώστε οι χρήστες να μπορούν να πληκτρολογούν τιμές απευθείας, χωρίς να χρειάζεται να χρησιμοποιούν το scroller. Σε όλες αυτές τις περιπτώσεις οι λύσεις πρέπει να είναι προσβάσιμες και να υποστηρίζουν την αλληλεπίδραση μόνο με πληκτρολόγιο.

Ποτέ μην εφαρμόζετε αυτόματο scroll στον χρήστη με μία μόνο επιλογή

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

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

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

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

Ποτέ μην παγώνετε την αλληλεπίδραση του χρήστη μετά από μία μόνο επιλογή

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

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

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

Πάντα να εμφανίζονται τα αποτελέσματα ασύγχρονα

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

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

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

Εμφάνιση φίλτρων πάνω από τα αποτελέσματα

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

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

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

Εμφάνιση του αριθμού των αποτελεσμάτων στο κουμπί “Εφαρμογή”

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

Καθώς ο πελάτης επιλέγει φίλτρα, η λίστα προϊόντων ενημερώνεται στο παρασκήνιο ασύγχρονα. Το πιο σημαντικό είναι το κουμπί “Εφαρμογή” να αλλάζει ετικέτα ανάλογα με τις επιλογές του χρήστη.

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

Συνοψίζοντας

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

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

Για μεγάλες ομάδες φίλτρων, αποφύγετε τα μικροσκοπικά παράθυρα με δυνατότητα κύλισης και εμφανίστε από 7 έως και 10 επιλογές κάθε φορά με ένα ακορντεόν που θα εμφανίζει όλες τις επιλογές με πάτημα/κλικ.

Προσθέστε επίσης μια αυτόματη συμπλήρωση αναζήτησης και μια αλφαβητική προβολή.

Να προσθέτετε πάντα steppers (+/-) και πεδία εισαγωγής κειμένου.

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

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

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

Αποφύγετε πάντα τις αλλαγές διάταξης στην είσοδο φίλτρων και σκεφτείτε να εμφανίζετε τα φίλτρα πάνω από τα αποτελέσματα.

Στο κινητό, το κουμπί “Εφαρμογή” μπορεί να είναι σταθερό στο κάτω μέρος της οθόνης.

Ενημερώστε τον αριθμό των προϊόντων και εμφανίστε τον στο κουμπί.