Ψίχουλα ψωμιού και διαδρομή του χρήστη

1) Ρόλος και αξία

• δείχνουν πού είμαι στην ιεραρχία?
• παρέχουν ταχεία πορεία επιστροφής στο ανωτέρω επίπεδο·
• μείωση της «οπίσθιας αναπήδησης» (επαναλαμβανόμενα κλικ «πίσω»)·
• αύξηση της ανιχνευσιμότητας γειτονικών στρωμάτων και βελτίωση της SEO για σελίδες περιεχομένου.

Αρχές: απλότητα> λεπτομέρεια, ιεραρχία> ιστορία των κλικ, επίμονη δομή> δυναμικός θόρυβος.

2) Πότε να χρησιμοποιήσετε

Βαθείς κατάλογοι και περιεχόμενο (κατηγορία παρόχου παιχνίδι/αντικείμενο).
B2B χορηγεί και αναφέρει με 2- 3 + επίπεδα φωλιών.
Παραγαδιάρικα/αποβάθρες με τμήματα και πίνακα περιεχομένων (ψίχουλα + TOC).
Δεν χρειάζεται σε οθόνες υψηλού επιπέδου (lobby/deshboard), όπου δεν υπάρχει βάθος.

3) Τύποι ψίχουλων

1. Ιεραρχική (διαρθρωτική) - αντικατοπτρίζει την εκτίμηση επιπτώσεων και όχι τη διαδρομή του χρήστη:

«Home › Providers › Play 'n GO › Book of Deading»

2. Κατά μήκος της διαδρομής (με βάση το ιστορικό) - εμφάνιση της πραγματικής διαδρομής (σπάνια ενδείκνυται στο διαδίκτυο. πιο κοντά στην «πλάτη»).
3. Υβριδικό - ιεραρχία + τελευταίο βήμα με αποθηκευμένα φίλτρα/πλαίσιο.

Σύσταση: εξ ορισμού - ιεραρχικά για την αποφυγή «θορύβου» από τυχαίες μεταβάσεις.

4) Σύνθεση και μορφότυπος

Οριοθέτηση: '›' ή '/' (σύμφωνα με το σχεδιασμό και τον τόπο).
Σημείο εκκίνησης: «Σπίτι «/λογότυπο είναι clickable.
Κατακερματισμός: σε βάθος> 4 επιπέδων, απόκρυψη των μεσαίων δεσμών σε... «» με γνωστοποίηση.
Το τελευταίο στοιχείο: η τρέχουσα σελίδα, μη κλικ και οπτικά τονισμένη.
Μήκος τίτλου: clopped with ellipsis but full 'title '/tooltip at hover/focus.

5) Δημιουργία ψίχουλων (λογική)

Χτίστε σύμφωνα με την κανονική ιεραρχία URL/IA, όχι από τον διαιτητή 'y.
Για τις οντότητες (παιχνίδι/αντικείμενο), να ληφθεί η κύρια κατηγορία (ή κατηγορία «ψωμί») και όχι τυχαίες ετικέτες.
Για δυναμικές σελίδες (φίλτρα, διαλογή) - ψίχουλα δείχνουν την πορεία προς το βασικό τμήμα, και το πλαίσιο εμφανίζεται ξεχωριστά (τσιπ φίλτρου).
Με την πολυπλοκότητα, προσθέστε το πλαίσιο μάρκας/χειριστή στην αρχή ή στον επιλογέα δίπλα-δίπλα, αλλά μην υπερφορτώνετε τα ψίχουλα.

6) Φίλτρα, διαλογή, σελιδοποίηση

Τα φίλτρα δεν πρέπει να «επιμηκύνουν» τα ψίχουλα. Εμφανίζονται παρακάτω σε μάρκες («› Live Providers» + chips: Geo = CA, Device = Mobile).
Η σελιδοποίηση δεν περιλαμβάνεται στα ψίχουλα. η τρέχουσα σελίδα εμφανίζεται στον έλεγχο της λίστας.
Επαναφορά φίλτρων κάνοντας κλικ στο επίπεδο γονέα: επιστροφή στην κατηγορία «καθαρό».

7) Κινητό UX

Τοποθετήστε τα ψίχουλα κάτω από τον Η1 σε μία γραμμή. σε περίπτωση έλλειψης χώρου - οριζόντια κύλιση ή κατακερματισμός των μεσαίων συνδέσμων.
Στόχοι tap ≥ 44px, αξιοσημείωτη εστίαση για πλοήγηση πληκτρολογίου (για PWA).
Μην αντιγράφετε το σύστημα «Πίσω» - ψίχουλα για τη δομή, κουμπί - για την ιστορία.

8) Διαθεσιμότητα (A11y)

Χρησιμοποιήστε τη σημασιολογία 'nav [aria-label = «breadcrumb»]' και 'ol> li'.
Προσδιορίστε' aria-current =» page»' στο τελευταίο στοιχείο.
Η αντίθεση των αναφορών αντιστοιχεί στην WCAG AA. εστίαση - ορατή.
Το εικονίδιο/διαχωριστής δεν είναι το μόνο σήμα (υπάρχουν ετικέτες κειμένου).
Η σειρά στην DOM αντιστοιχεί στην οπτική σειρά.

9) SEO και δεδομένα

Για τις σελίδες περιεχομένου, χρησιμοποιήστε τα δομημένα δεδομένα BreadcrumbList (JSON-LD).
Τα κανονικά URL και τα σταθερά ψίχουλα βοηθούν στην αναζήτηση της ιεραρχίας.
Μην αναφέρετε «κενούς» ενδιάμεσους κόμβους χωρίς περιεχόμενο (αποφύγετε λεπτές σελίδες).

10) Μοτίβα απεικόνισης

Κλασική σειρά: «Home Section Page».
Κατακερματισμένη: «Home ›... › Category › Card».
Με το εμπορικό πλαίσιο (B2B): «Brand A › Reports › Revenue › NGR».
Με άγκυρες στις δεξαμενές: 'Τεκμηρίωση › KYC › # Έλεγχοι επιπέδων' (άγκυρα - σε TOC, ψίχουλα - πριν το τμήμα).

11) Συμπεριφορά και μικροεπιδράσεις

Το Hover/εστίαση αναδεικνύει την περιοχή σύνδεσης και κλικ (ολόκληρο το «ψίχουλο», όχι μόνο το κείμενο).
Το τελευταίο «ψίχουλο» μπορεί να έχει ένα επιπλέον μενού με γειτονικές οντότητες (για παράδειγμα, άλλα παιχνίδια αυτού του παρόχου) - τακτοποιημένα, χωρίς υπερφόρτωση.
Πηγαίνοντας «up» διατηρεί τη θέση/σελίδα της λίστας εκτός αν σπάσει τον κανόνα (π.χ. να '? σελίδα = 2 ').

12) Μετρήσεις και τηλεμετρία

• 'breadcrumb _ click (επίπεδο, ετικέτα, url)'
• 'breadcrumb _ expand _ more' (για κατακερματισμένα)
• 'back _ to _ parent _ contained _ content' (εάν διατηρείται η θέση/σελίδα)

• Ποσοστό χρήσης: το ποσοστό των χρηστών που έκαναν κλικ σε ψίχουλα σε ≥2 βάθος.
• Back-αναπήδηση ↓: μείωση της ποσότητας του «back» αμέσως μετά την καταγραφή στο βαθύ σημείο.
• Χρόνος προς γονέα: χρόνος επιστροφής σε υψηλότερο επίπεδο.
• SEO CTR: Αλλαγή του CTR σελίδων με σήμα ψίχουλου.

13) Παραδείγματα για iGaming

B2C (καζίνο): «Home › Providers › Pragmatic Play › Gates of Olympus». Στη σελίδα του παρόχου - τσιπ φίλτρου (Live/Slots/Megaways); ψίχουλα - μόνο κατασκευή.
Τουρνουά: «Home › Tournaments › Φθινόπωρο Κύπελλο › Κανόνες».
B2B (πάροχος): «Panel › Content › Releases › Book of Ra (ID 12345)» - το τελευταίο στοιχείο δεν είναι clickable. δίπλα στο κουμπί Open in Statement.

14) Αντιπατερίδια

Ψίχουλα που επαναλαμβάνουν H1 λέξη προς λέξη χωρίς όφελος.
Ιστορικές διαδρομές αντί της δομής (χαοτική «συμβολοσειρά»).
Συμπερίληψη των φίλτρων και της σελίδας στα ψίχουλα («Παιχνίδια › slots › σελίδα = 5»).
Το τελευταίο ψίχουλο είναι μια αναφορά στον εαυτό του.
Υπερβολικό βάθος, μικρό μέγεθος, χαμηλή αντίθεση - «αόρατα ψίχουλα».
Ασυνεπή ονόματα συνδέσμων με μενού/URL.

15) Κατάλογος ελέγχου εφαρμογής

1. Χάρτης IA: καθορισμός κανονικών μονοπατιών για τις οντότητες.
2. Γεννήτρια: λειτουργία που κατασκευάζει ψίχουλα από IA/URL (δεν εξαρτάται από τον διαιτητή).
3. Κατακερματισμός: κανόνες σε βάθος> 4, popover με πλήρη διαδρομή.
4. : 'nav [aria-label]', 'ol/li', 'aria-current', JSON-LD.
5. Στυλ: Αντίθεση AA, † σε κινητά, διαχωριστικά, διαστάσεις.
6. Πλαίσιο: φίλτρα/διαλογή - τσιπ κατωτέρω, όχι σε ψίχουλα.
7. Τηλεμετρία: κάντε κλικ στα γεγονότα/επεκτείνετε, Time-to-Parent, back-bounce.
8. Τεκμηρίωση: παραδείγματα, αντι-υποθέσεις, οδηγός ονοματοδοσίας συνδέσμου.

16) Η τελική γραμμή

1. με βάση την κανονική ιεραρχία,

2. ευανάγνωστη και προσβάσιμη,

3. ανθεκτικό σε φίλτρα/καταστάσεις σελίδας,

4. με μετρήσιμο όφελος (τηλεμετρία/SEO).

Έτσι βοηθούν στην πλοήγηση και συντομεύουν την πορεία του χρήστη προς το στόχο.