Καλές πρακτικές και παραδείγματα πλοήγησης Breadcrumb

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

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

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

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

Τύποι Breadcrumb

Μονοπάτι

Οι διαδρομές με βάση τη διαδρομή υποδηλώνουν τα βήματα ή τη διαδρομή που έχει κάνει ένας χρήστης για να φτάσει στην τρέχουσα σελίδα ενός ιστότοπου. Επιπλέον, οι χρήστες θα βλέπουν συνδέσμους σε σελίδες που επισκέφτηκαν στο παρελθόν για να φτάσουν στην τρέχουσα σελίδα. Από τους τρεις τύπους πλοήγησης με το ψαροκόκαλο, η πλοήγηση με τη διαδρομή Path-based breadcrumb είναι λιγότερο δημοφιλής σε απευθείας σύνδεση. Λόγος που είναι, η πλοήγηση με βάση τη διαδρομή με το δρομολόγιο παρέχει παρόμοια λειτουργικότητα με το “Προς τα εμπρός” και “Πίσω” κουμπιά σε ένα πρόγραμμα περιήγησης. Για τους περισσότερους ιστότοπους, η πλοήγηση με βάση τη θέση και τη διαδρομή πλοήγησης βάσει χαρακτηριστικών προσφέρει καλύτερη λειτουργικότητα.

Τοποθεσία

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

Clearleft Ltd

Χαρακτηριστικό

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

Cars.com

Γιατί να χρησιμοποιήσετε το Breadcrumbs?

• Μεγάλη χρηστικότητα

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

• Εύκολο να Backtrack

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

• Εξάλειψη πρόσθετων κλικ

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

• Εμφανίζει την ιεραρχία των χρηστών

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

• Οπτικά ευχάριστα

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

• Παρέχει πρόσθετη βοήθεια

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

• Χαμηλότεροι ρυθμοί αναπήδησης

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

• Δημιουργεί ενδιαφέρον

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

Breadcrumb Best Practices

• Χρησιμοποιήστε τα πινέλα Breadcrumbs στην κορυφή μιας σελίδας

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

• Χρησιμοποιήστε Breadcrumbs Συνεχώς

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

• Τα ψωμάκια θα πρέπει να υποβαθμίζονται με χαρά

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

• Στυλιζώστε τα ψωμάκια κατάλληλα

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

• Κατηγοριοποιήστε σαφώς τις σελίδες

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

• Ξεχωρίστε ξεκάθαρα κάθε επίπεδο

  Βεβαιωθείτε ότι οι χρήστες είναι σε θέση να διακρίνουν τη διαφορά μεταξύ κάθε επιπέδου breadcrumb. Ο πιο συνηθισμένος διαχωριστής μεταξύ των επιπέδων είναι ο χαρακτήρας "μεγαλύτερο από" (>). Άλλοι καλόι διαχωριστές περιλαμβάνουν ορθές τιμές διπλής γωνίας (»), πτερύγια (/) και βέλη (→). Εάν χρησιμοποιείτε έναν χαρακτήρα απλού κειμένου, χρησιμοποιήστε μόνο ένα. (»Είναι πιο ελκυστικό και αποτελεσματικό από >>)

• Ενεργοποίηση της τρέχουσας σελίδας

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

• Μην κάνετε την τρέχουσα σελίδα σύνδεσμο

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

• Μην χρησιμοποιείτε το Breadcrumbs ως επικεφαλίδα σελίδας

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

• Οι κύλινδροι ψαρέματος δεν αντικαθιστούν την κύρια πλοήγηση

  Οι breadcrumbs χρησιμοποιούνται μόνο ως υποστήριξη για την κύρια πλοήγηση, χωρίς να αντικαθιστούν ποτέ την κύρια πλοήγηση. Θα πρέπει πάντα να παρέχετε στους χρήστες μια κύρια πλοήγηση από την οποία μπορούν να πλοηγηθούν σε έναν ιστότοπο προτού χρησιμοποιήσουν την πλοήγηση με το breadcrumb.

Μεγάλα παραδείγματα ψωμιού

Vitra Direct

Ποδήλατα πορείας

Illy

SiteInspire

Μία και Μάγκι

Intridea

Σχεδιασμός από ανθρώπους

Roxy

Blik

SitePoint

Στόχος

Walmart

1-800-Λουλούδια

Καλύτερη αγορά

Amazon.com

Αχυρώσεις και ευγενείς

Τέλος των εδαφών

μήλο

Google

Κυνηγητό

AbsolutePunk.net

Littman Bros. Φωτισμός

Guardian.co.uk

ΠΕΡΙΟΧΗ 17

Wufoo

Κοκκινοσκουφίτσα της Μέσης Τενεσί

Το συλλογικό όργανο της Γλασκώβης

Πρωτότοκος

Bell Καναδάς

Grooveshark

Devlounge

Σχετικά με τον συντάκτη - Shay Howe είναι ένας επαγγελματίας σχεδιαστής ιστού και χρήστη που ζει σήμερα στο Σικάγο, ΙΛ. Γράφει για το σχεδιασμό ιστοσελίδων στο δικό του blog πάνω σε letscounthedays και θα ήθελε να ακούσει από εσάς στο Twitter. Παρακαλώ αισθανθείτε ελεύθερος να του πείτε γεια!