Πώς να χρησιμοποιήσετε το Breadcrumbs (ο σωστός τρόπος)
Τα ψίχουλα ψωμιού ... φέρνουν σε επαφή με το παραμύθι του Χάνσελ και του Γκρέτελ, όπου ο Χάνσελ αφήνει ψίχουλα ψωμιού για να τον βοηθήσει να βρει το δρόμο του πάλι στο σπίτι του. Παρόλο που η συσχέτιση με τα ψίχουλα ψωμιού είναι ίσως ακόμα ισχυρότερη στη σφαίρα των ιστοριών του Grimm, αυτό μεταβάλλεται σταδιακά καθώς οι διασταυρώσεις στην πλοήγηση βοηθούν τους σχεδιαστές ιστοσελίδων να δημιουργήσουν μια καλύτερη εμπειρία χρήστη για τους επισκέπτες της ιστοσελίδας.
Αυτό το γραφικό στοιχείο ελέγχου εξυπηρετεί έναν πολύ χρήσιμο σκοπό ως βοήθημα πλοήγησης σε έναν ιστότοπο, υπό την προϋπόθεση ότι έχει σχεδιαστεί με έξυπνο τρόπο. Μπορεί να είναι ένας θεός για τους λιγότερο έμπειρους επισκέπτες που πρέπει να στηριχθούν σε μια διαδρομή για να τους βοηθήσουν να παρακολουθήσουν το πού βρίσκονται στην περιοχή του πελάτη σας.
Ένα ίχνος ψωμιού θα παρακολουθεί και θα εμφανίζει κάθε σελίδα που έχει προβληθεί από τους επισκέπτες, μερικές φορές με τη σειρά που αναφέρθηκαν οι σελίδες που είδατε, άλλες φορές σε διαφορετικές ρυθμίσεις.
Εδώ είναι πώς να ενσωματώσετε breadcrumbs στην πλοήγησή σας με νόημα:
Τρεις κύριοι τύποι πλοήγησης με ψωμιά
Υπάρχουν τρεις βασικοί τύποι ψωμιού που συνήθως συναντάτε σε κάθε δεδομένο ιστότοπο, με δύο πιο δημοφιλείς από τους τελευταίους.
Θέση ψωμιού
Ένα από τα δύο πιο δημοφιλή είδη που θα συναντήσετε, τα ψαροκάικα θέσης ενημερώστε τους χρήστες σας σχετικά με την ιεραρχία του ιστοτόπου. Η απλή της οργάνωση, που προσανατολίζει τους χρήστες με σαφή τρόπο μέσα στον ιστότοπο, καθιστά αυτόν τον τύπο πολύ ευρέως χρησιμοποιούμενο.
Οι δημοφιλείς μεταξύ των ιστοτόπων που έχουν πολυάριθμα επίπεδα περιεχομένου και στρώματα πλοήγησης, οι breadcrumbs θέσης επιτρέπουν στους χρήστες να επιστρέψουν αποτελεσματικά σε προηγούμενα, υψηλότερα επίπεδα περιεχομένου με ένα απλό κλικ. Επίσης, οι διαδρομές εντοπισμού θέσης είναι στατικές (δεν αλλάζουν ποτέ), καθιστώντας τους έναν αξιόπιστο τρόπο να βοηθήσουν στον επαναπροσανατολισμό των χρηστών.
1-800 Λουλούδια παρέχει το κλασικό παράδειγμα λειτουργικής ψίχουλας. Κάθε φορά που ένας αγοραστής επισκέπτεται τη σελίδα φυλλώματος "Γενέθλια των γενεθλίων μου", θα δει ότι έπρεπε πρώτα να κάνει κλικ στην κατηγορία "Γενέθλια" αφού ξεκίνησε από την αρχική σελίδα. Φυσικά, μπορεί να κάνει κλικ σε κάθε ψηλότερο επίπεδο για να φτάσει εκεί αμέσως.
Χαρακτηριστικά ψίχουλα
Τα ψίχουλα χαρακτηριστικών είναι ο δεύτερος μείζων τύπος που θα συναντήσετε. Σε αντίθεση με τα ψωμάκια θέσης, αυτά λειτουργούν σαν επιλογές φίλτρων στο ότι δεν είναι στατικά και συνεχώς αλλάζουν με βάση τις προτιμήσεις του χρήστη.
Δεν θα σας ενημερώσουν για την τοποθεσία σας στον ιστότοπο, αλλά θα εμφανίσουν μεταδεδομένα σχετικά με το περιεχόμενο της σελίδας. Επομένως, οι ιδιότητες του breadcrumbs είναι δημοφιλείς σε ιστότοπους ηλεκτρονικού εμπορίου όπου μπορείτε να προσαρμόσετε τι θέλετε να αγοράσετε, όπως σε τοποθεσίες αυτοκινήτων.
Ως αποτέλεσμα, δεν μπορείτε να χρησιμοποιήσετε απαραιτήτως αυτόν τον τύπο προσέγγισης για τη βούρλα για να βρείτε το δρόμο σας πίσω στις σελίδες που έχετε ήδη επισκεφθεί.
Για να δω τι μιλάω, ελέγξτε Cars.com's τριμμένη φρυγανιά. Όταν ψάχνετε για αυτοκίνητα με μάρκα και μοντέλο, παρατηρήστε τα ψωμάκια κοντά στην πάνω αριστερή πλευρά της οθόνης, ακριβώς κάτω από το λογότυπο της τοποθεσίας. Το έτος, το make και το μοντέλο όλων αντιπροσωπεύουν προηγούμενες αναζητήσεις στον ιστότοπο, αλλά δεν παρέχουν αξιόπιστο ίχνος για την αναθεώρηση παλιών σελίδων που έχετε ήδη δει.
Σημειώστε τη διαφορά μεταξύ αυτού του τύπου ψωμιού και των ψαριών βάρους, που σας επιτρέπουν να επανεξετάσετε ακριβώς τις σελίδες που επισκεφθήκατε πρόσφατα.
Διαδρομή ψωμιού
Οι διαδρομές διαδρομής είναι οι λιγότερο δημοφιλείς από τις τρεις, διότι, ειλικρινά, το μόνο που κάνουν είναι να αναπαράγουν αυτό που κάνει ήδη το κουμπί του browser του! Αυτό δεν βοηθά στη βελτίωση του UX καθόλου. είναι αρκετά περιττό.
Επίσης γνωστό ως μονοπάτι ιστορίας, οι διαδρομές διαδρομής δεν είναι πραγματικά χρήσιμες, αφού δεν δίνουν επιπλέον περιεχόμενο ή πληροφορίες σε επισκέπτες που προσγειώνονται σε μια σελίδα που βρίσκεται ήδη βαθιά μέσα στην ιεραρχία του ιστότοπου. Ένα παράδειγμα θα ήταν ένας επισκέπτης να προσγειωθεί σε μια σελίδα προϊόντος επειδή βρήκε ένα αποτέλεσμα αναζήτησης στο οποίο έκανε κλικ.
Λόγω αυτών των προβλημάτων UX που προκαλεί αυτό το είδος ψωμιού, είναι ολοένα και πιο σπάνιο να το βρείτε σήμερα στις τοποθεσίες.
Ποιος τύπος είναι ο πλέον κατάλληλος για ποιο ιστότοπο;
Η κατανομή των τριών βασικών τύπων ψωμιού βγαίνει από την προφανή ερώτηση, η οποία είναι η πλέον κατάλληλη για ποιο σκοπό;
Ας ξεκινήσουμε με εκείνο που πιθανώς δεν πρέπει να ασχοληθείτε με πια: διαδρομές διαδρομής. Τουλάχιστον, αυτό δεν βοηθά το UX? το σενάριο χειρότερης περίπτωσης είναι ότι οι χρήστες ενδέχεται να μπερδεύονται από τις διαδρομές διαδρομής επειδή δεν εμφανίζουν την κατάλληλη ιεραρχία διαφορετικών επιπέδων εντός του ιστότοπου.
Τώρα που έχουμε αυτό έξω από το δρόμο, ας επικεντρωθούμε μόνο στη θέση και να αποδώσουμε τα ψωμιά.
Τα ψαροκόκαλα τοποθεσίας είναι πιο κατάλληλα για μεγαλύτερες τοποθεσίες που έχουν πολύ βαθιά και επίπεδα περιεχομένου. Ένα εξαιρετικό παράδειγμα αυτού είναι το eBay, το οποίο είναι ένα τεράστιο κατάστημα εξαιτίας όλων των στοιχείων που πωλούνται ή δημοπρατούνται. Συνεπώς, οι ψωμιές θέσης είναι τέλειες για αυτό το βάθος περιεχομένου, καθώς οι επισκέπτες μπορούν να χρησιμοποιήσουν σαφώς τον επιπλέον προσανατολισμό.
Τώρα ας στρέψουμε την προσοχή μας στις ιδιότητες του breadcrumbs.
Όπως φαίνεται στο παραπάνω παράδειγμα με το Cars.com, οι ιστότοποι ηλεκτρονικού εμπορίου που προσφέρουν στους αγοραστές πολλές προσαρμόσιμες επιλογές θα επωφεληθούν σε μεγάλο βαθμό από το να έχουν αυτό το είδος βοήθειας πλοήγησης. Οι ιστότοποι με διάφορες επιλογές προσαρμογής μπορεί να είναι συντριπτικοί στους αγοραστές. Αυτός είναι ο λόγος για τον οποίο τους δίνονται αυτά τα φίλτρα είναι πιο λογικό από τα ψωμάκια θέσης, αφού οι αγοραστές θα θέλουν να παρακολουθούν τις διάφορες αλλαγές που έχουν κάνει στα αποτελέσματα αναζήτησης και τις παραγγελίες τους.
Βέλτιστες πρακτικές για τη φρυγανιά
Σε γενικές γραμμές, όταν ακολουθείτε αυτές τις συμβουλές κατά το σχεδιασμό πλοήγησης με το breadcrumb για τους ιστότοπους του πελάτη σας, δεν μπορείτε να πάτε στραβά:
- Βεβαιωθείτε ότι δεν υπάρχουν διπλά στοιχεία στο ίχνος σας από ψωμιά (διαβάστε: σελίδες που εμπίπτουν σε πολλές κατηγορίες ή επίπεδα περιεχομένου), καθώς αυτό μπορεί να προκαλέσει σύγχυση στους χρήστες.
- Χρησιμοποιήστε το μεγαλύτερο από το σύμβολο (>) για να διαχωρίσετε τους συνδέσμους στα πεταλούδα σας, καθώς αυτό είναι που οι χρήστες αναμένουν ήδη από χρόνια εξοικείωσης με το site και συμβάσεων.
- Χρησιμοποιήστε τις λέξεις-κλειδιά στις οποίες θέλετε να ταξινομήσετε πραγματικά στο SEO, όταν αποφασίζετε για τα ονόματα των διαφορετικών κατηγοριών σας μέσα στα ψωμιά σας, καθώς αυτό βοηθάει το SEO.
Breadcrumbs: μεγάλη ιδέα, αλλά δεν χρησιμοποιείται πάντα σωστά
Όπως και με πολλές έννοιες στο σχεδιασμό και το UX, μια μεγάλη ιδέα που μπορεί να είναι πολύ χρήσιμη για τους χρήστες γίνεται μια δυσκολία αν δεν εφαρμοστεί σωστά. Αυτός είναι αυτός ο σύντομος οδηγός για: να σας εξοπλίσει με τη γνώση για να σας δώσει τη δυνατότητα να σχεδιάσετε ψωμί για να βελτιστοποιήσετε το UX αντί να μην κάνετε καμία επίδραση ή ακόμα και να το πληγώσετε.
Αν και δεν είναι απόλυτη ανάγκη σε κάθε είδος ιστότοπου, οι breadcrumbs μπορούν να παρέχουν στους χρήστες ένα επιπλέον επίπεδο βοήθειας για πλοήγηση όταν αντιμετωπίζουν είτε πολλά επίπεδα περιεχομένου είτε πολλές επιλογές που θα ήθελαν να φιλτράρουν. Είτε έτσι είτε αλλιώς, η χρηστικότητα που προέρχεται από τις ψωμιές τελικά έρχεται κάτω από το πώς οι σχεδιαστές τους εφαρμόζουν στους χώρους των πελατών τους.
Βεβαιώνοντας ότι καταλαβαίνετε το σκοπό πίσω από κάθε τύπο πλοήγησης με ψαροκόκαλο, βοηθάτε τον εαυτό σας να κάνει τη σωστή επιλογή για τον τύπο του ιστότοπου που σχεδιάζετε. Και όταν επιλέγετε έξυπνα, θα έχετε ικανοποιημένους χρήστες, ευτυχείς πελάτες και καλές παραπομπές, γι 'αυτό πάρτε κάποια επιπλέον φροντίδα την επόμενη φορά που έχετε να κάνουμε με ψωμιά.