11 τρόποι Breadcrumbs Bolster UX Design
Ιστοσελίδα ψίχουλα να βελτιώσει την εμπειρία του χρήστη ενθαρρύνοντας τους χρήστες να σκάβουν βαθύτερα στην ιεραρχία του ιστότοπού σας, ενώ ταυτόχρονα ενημερώνουν τους επισκέπτες για το πού βρίσκονται σε οποιαδήποτε σελίδα. Η Google διάγραμμα breadcrumb είναι ένας πολύτιμος λόγος για να ρυθμίσετε τα ψωμιά. Ο παράγοντας σχεδιασμού είναι πάντοτε πολύ δύσκολος, έτσι βοηθά στη μελέτη παραδειγμάτων και στη συλλογή ιδεών.
Αυτά είναι μερικά από τα αγαπημένα μου στυλ ψωμιού και θα πρέπει να αποτελέσουν ένα καλό σημείο εκκίνησης για νέα σχέδια σχεδιασμού.
1. Wayfair
Ο δικτυακός τόπος του Wayfair κάνει πολύ σωστό και ολόκληρο το UX είναι φαινομενικό σε σελίδα. Ένα πράγμα που μου αρέσει είναι το στυλ ψωμιού τους, επειδή δεν είναι πολύ μεγάλο, αλλά επίσης δεν είναι πολύ μικρό και δεν ενοχλεί ούτε.
Θα βρείτε αυτά τα ψίχουλα στις σελίδες προϊόντων και σελίδες κατηγορίας έτσι σας ακολουθούν σε όλο το site. Αυτό σας επιτρέπει να πηδήσετε μια κατηγορία ή δύο από οποιαδήποτε λεπτομερή σελίδα.
Και η γραμμή ψωμιού παίρνει το δικό της μικρό τμήμα κάτω από την πλοήγηση με ένα διαφορετικό χρώμα BG. Δεν είναι ενοχλητικό αλλά όχι δύσκολο να βρεθεί. Ένα υπέροχο στυλ σχεδιασμού και ένα από τα προσωπικά μου αγαπημένα.
2. Υποστήριξη της Google
Μια άλλη προφανής αναφορά είναι η Google από τότε που είναι γνωστή απίστευτη εργασία UX . Θα βρείτε breadcrumbs στα περισσότερα προϊόντα Google με κλιμακωτές σελίδες και ένα από τα καλύτερα είναι το Υποστήριξη Google ιστοσελίδα.
Οι σελίδες υποστήριξής τους παρέχουν συμβουλές για τα πάντα, από το σχήμα έως το analytics και το εργαλείο Search Console. Κάθε σελίδα έχει ψωμί και αυτά τα ψίχουλα καταλαμβάνουν έναν παρόμοιο χώρο με τον τίτλο της σελίδας, ώστε να είναι σαφώς ορατά.
Παρατηρήστε ξανά τον τρόπο με τον οποίο οι σύνδεσμοι αυτοί συγχωνεύονται ωραία χωρίς να πηδούν από τη σελίδα. Νιώθουν πολύ φυσικά στο σχεδιασμό και αυτό πρέπει πάντα να είναι ο στόχος με τα ψωμιά σας.
3. Έγγραφα MSDN
Υπάρχει μια πραγματική μοναδική λειτουργία breadcrumb στο Έγγραφα MSDN που μου αρέσει πραγματικά. Έχει όλα τα τυπικά χαρακτηριστικά σχεδιασμού όπως τα εικονίδια με βέλη και τις κατηγορικές συνδέσεις, αλλά ο τελικός σύνδεσμος στην αλυσίδα έχει προσαρμοσμένο αναπτυσσόμενο με πρόσθετες σελίδες.
Δεν έχω δει ποτέ αυτό πριν από οποιοδήποτε σχέδιο breadcrumb αλλά είναι εξαιρετικά πολύτιμο για το χρήστη. Συνήθως θα χρειαζόταν ένα άλλο μενού πλοήγησης για να αποκτήσετε πρόσβαση σε αυτούς τους συνδέσμους, αλλά με έναν ιστότοπο όπως η Microsoft υπάρχουν τόσες πολλές σελίδες για να περάσετε.
Για να μην αναφέρουμε την τεκμηρίωση μπορεί να είναι αρκετά περίπλοκη, ώστε να μην είναι το πιο εύκολο για να δημιουργήσετε ψωμί. Αυτή η τεχνική είναι λαμπρή και αξίζει να το χρησιμοποιήσετε εάν έχετε μια πολύπλοκη ιεραρχία στον ιστότοπό σας.
4. Apple
Στον ιστότοπο της Apple έχω δει τόνους πατατάκια σε πολλές σελίδες, όπως οι σελίδες του ηλεκτρονικού καταστήματος και οι σελίδες προϊόντων. Αλλά μια μικρή λεπτομέρεια που έπεσε στο μάτι μου είναι η περιοχή συνδέσμου υποσημείωσης με ένα μικρό ψίχουλο ψωμί πάνω από τους συνδέσμους του κάτω μέρους τους.
Η Apple είναι μια τεράστια εταιρεία με πολλές σελίδες και πόρους. Αυτό το ψωμί θα αξίζει να προστεθεί και στην κορυφή της σελίδας, αλλά σίγουρα δεν βλάπτει να είναι κοντά στο κατώτατο σημείο.
Θα ενθάρρυναν τους σχεδιαστές να το δοκιμάσουν και να δουν πώς λειτουργεί. Τα ψωμάκια υποσέλιδου σίγουρα δεν είναι ο κανόνας αλλά βοηθούν με την οπτική πλοήγηση.
5. TechRadar
Η πλειοψηφία των ψωμιών που βρίσκω είναι συνήθως σε ιστότοπους της εταιρείας ή καταστήματα ηλεκτρονικού εμπορίου. Αλλά τα blogs έχουν συχνά και τα δικά τους breadcrumbs και ένα καλό παράδειγμα είναι το TechRadar σελίδα άρθρου .
Κάθε breadcrumb είναι αρκετά μικρό που διαθέτει μια σύνδεση απευθείας με την κατηγορία κεφαλής & ένα αντίγραφο του τίτλου του άρθρου. Για αυτό το είδος του blog είναι δύσκολο να δικαιολογηθεί η breadcrumbs επειδή δεν υπάρχει μεγάλη ιεραρχία.
Αλλά αυτό λειτουργεί καλά αν δεν έχετε άλλη θέση για να προσθέσετε την κατηγορία του άρθρου στη σελίδα.
6. TutsPlus
Για πολύ πιο λεπτομερή σχεδιασμό breadcrumb ελέγξτε το TutsPlus blog . Κάθε άρθρο διαθέτει ένα μικρό breadcrumb στην άκρη της σελίδας συμπεριλαμβανομένων των πρωτογενών και δευτερογενών κατηγοριών.
Μου αρέσει αυτό το σχέδιο πολύ, επειδή φυσικά αναμειγνύεται στον τίτλο της σελίδας. Έτσι, αντί να αναπαράγετε την επικεφαλίδα σε ένα ψωμί και σε μια ετικέτα κλάσης, αυτό συνδυάζει όλα σε ένα στοιχείο, έτσι ώστε
η επικεφαλίδα είναι μέρος του ψωμιού.
Σημειώστε ότι αυτό δεν χρησιμοποιεί σωστό σχήμα Google, οπότε δεν εμφανίζεται με τα πεδία αναζήτησης στην αναζήτηση. Αλλά θεωρώντας ότι επηρεάζει ελάχιστα το CTR, εκτιμώ το σχεδιασμό και τη χρηστικότητα στη σελίδα πολύ περισσότερο από τα πλεονεκτήματα του SEO (ή την έλλειψή τους).
7. Coolspotters
Τα παραδοσιακά ψίχουλα συνήθως κολλάνε με μερικά σύμβολα κειμένου, όπως η εμπρός κάθετο ή το δεξί βέλος (>). Αυτά λειτουργούν επειδή έχουν χρησιμοποιηθεί εδώ και δεκαετίες και οι χρήστες είναι εξοικειωμένοι με αυτά.
Αλλά πάντα μου αρέσει να βλέπω και άλλες τάσεις σχεδίασης του ψαριού Coolspotters . Χρησιμοποιούν προσαρμοσμένους συνδέσμους ψαρέματος που έχουν ενσωματωμένα βέλη στα στοιχεία σύνδεσης.
Μπορείτε να βρείτε πολλά open-source breadcrumb στυλ όπως αυτά για το δικό σας site. Είναι ένας πολύ καλός τρόπος για να τζαζ αυτό το πολύ παραδοσιακό στοιχείο της σελίδας.
8. MarketWatch
Η επιστροφή στα βασικά είναι ο ιστότοπος ειδήσεων στο διαδίκτυο MarketWatch . Όλοι τους εσωτερικές θέσεις διαθέτουν τα σκεύη ψωμιού με σωστά εικονίδια βέλους που δείχνουν αρκετά μικρό κείμενο.
Σε αυτή την περίπτωση νομίζω ότι το μικρό κείμενο λειτουργεί καλά. Δεν είναι ακριβώς δύσκολο να χρησιμοποιήσετε τα ψίχουλα, αλλά αισθάνονται μικρότερα και λιγότερο σημαντικά από την υπόλοιπη σελίδα.
Τα blogs και οι ειδησεογραφικές τοποθεσίες λειτουργούν καλύτερα με μικρότερες breadcrumbs επειδή η πραγματική εστίαση είναι το περιεχόμενο. Ακόμα είναι ωραίο να τα τοποθετήσετε κάπου και αυτό το σχέδιο είναι ένα καλό παράδειγμα.
9. Amazon
Όλοι αγαπούν τον Αμαζόνιο για την τεράστια απογραφή τους και την ελεύθερη ναυτιλία. Αλλά έχουν επίσης μια φανταστική τοποθεσία και δεν υπάρχει τρόπος να περάσω πάνω από το σχέδιο ψωμιού τους.
Πολλά σελίδες προϊόντων έχετε μια σειρά από ψωμιά κοντά στην κορυφαία πλοήγηση. Αυτό είναι πάντα πολύ μεγάλο, διότι οι κατηγορίες του Αμαζονίου γίνονται βαθιά. Αυτό είναι πολύτιμο για τους καταναλωτές να δουν ποιες κατηγορίες μπορεί να αξίζει να περιηγηθείτε και είναι πολύτιμο για τους σχεδιαστές / webmasters να μελετήσουν τη μαζική δομή του προϊόντος της Amazon.
Ωστόσο, αν κάνετε κύλιση προς τα κάτω σε κάθε σελίδα προϊόντος, θα βρείτε μια ενότητα "Πληροφορίες προϊόντος" ή "Λεπτομέρειες προϊόντος" με τις καταχωρίσεις των καλύτερων πωλητών.
Αυτή η λειτουργία χρησιμοποιεί συνδέσμους διασταύρωσης για να δείξει πού το προϊόν έχει πουλήσει το καλύτερο και ενθαρρύνει τους επισκέπτες να κάνουν κλικ σε αυτές τις σχετικές κατηγορίες.
Τα ψωμιά του Amazon είναι αξιοθαύμαστα χρονοβόρα, γι 'αυτό αξίζει να μελετήσουν αν έχετε έναν ιστότοπο με πολύ βαθιά ιεραρχία.
10. Etsy
Η τεράστια ηλεκτρονική σελίδα DIY / crafts ηλεκτρονικού εμπορίου Etsy προωθεί συνεχώς το σχεδιασμό τους. Ιδρύθηκε το 2005 και κοιτάζοντας την περιοχή τώρα μπορείτε να δείτε ότι έχουν κάνει μερικές μεγάλες αλλαγές τα τελευταία 10+ χρόνια.
Αν ελέγξετε οποιοδήποτε σελίδα κατηγορίας θα βρείτε μικρά ψωμιά στην επάνω αριστερή γωνία. Αυτά δεν είναι τόσο προεξέχοντα σε σύγκριση με την πλοήγηση στην πλαϊνή μπάρα που πραγματικά αισθάνεται σαν τον κύριο τρόπο αναζήτησης.
Αλλά μια ωραία προστιθέμενη επίδραση είναι η συνολική λίστα αντικειμένων μέσα στην κατηγορία. Το Etsy αναφέρει πόσα συνολικά στοιχεία διατίθενται προς πώληση σε κάθε δευτερεύον κομμάτι, καθώς σκάβετε βαθύτερα στον ιστότοπο.
Ένα πράγμα για το οποίο θα παραπονεθώ είναι η έλλειψη ψωμιού στις σελίδες προϊόντων. Αυτό φαίνεται σαν μια πραγματική επίβλεψη στο UI και ελπίζω να προσθέσουν ότι το μέλλον.
11. LinuxInsider
Αυτό το σχέδιο διασταύρωσης δεν είναι ιδιαίτερα όμορφο, αλλά έχει ένα χαρακτηριστικό που αρπάζει την προσοχή μου.
Θα δείτε ένα σύνδεσμο "Επόμενο άρθρο" κοντά στην κορυφή του καθενός Δημοσίευση του LinuxInsider . Αυτό εμφανίζεται ακριβώς δίπλα στο ψωμί, έτσι αισθάνεται σαν μέρος της πλοήγησης.
Οι χρήστες που αλληλεπιδρούν με το breadcrumbs συνήθως θέλουν να σκάψουν γύρω σε αυτές τις κατηγορίες ψίχουλα, ώστε αυτός ο επιπλέον σύνδεσμος να έχει νόημα. Όποιος ενδιαφέρεται για λογισμικό Linux μπορεί να θέλει να μεταβεί δεξιά στο επόμενο άρθρο αυτής της κατηγορίας.
