Σύσταση: Εμφανίστε το ακριβές εύρος στην κορυφή, για παράδειγμα 1–20 από 350 στοιχεία, και επιτρέψτε στους χρήστες να προσαρμόσουν το μέγεθος της σελίδας σε 10, 20 ή 50 με ένα μόνο κλικ. Αυτή η προσέγγιση από άποψη UX μειώνει τη σύγχυση και συνήθως βελτιώνει την ολοκλήρωση εργασιών, ένα σημαντικό κέρδος για τους περισσότερους χρήστες.
Χρησιμοποιήστε ένα προβλέψιμο πρόθεμα όπως εύρος και σύνολο για να επικοινωνήσετε την πρόοδο. Ένα τυπικό μοτίβο είναι 1–20 από 350, που ενημερώνεται σε πραγματικό χρόνο εάν το σύνολο δεδομένων αλλάξει. Αυτή η προσέγγιση κρατά τους χρήστες άμεσα ενημερωμένους και μειώνει τις παρερμηνείες, κάτι που συμβάλλει στην εμπιστοσύνη στη διεπαφή. Μειώνει επίσης τον χρόνο αναμονής για τη φόρτωση περιεχομένου, ειδικά σε πιο αργές συνδέσεις. Οι αποφάσεις πρέπει να ελέγχονται και να προσαρμόζονται ανάλογα.
Παρέχετε άμεσους ελέγχους: πρώτη, προηγούμενη, επόμενη, τελευταία, και ένα πεδίο για μετάβαση σε μια συγκεκριμένη σελίδα. Ένας συμπαγής ρυθμιστής μπορεί να μετακινηθεί γρήγορα σε μια σελίδα-στόχο, και μια ορατή αλυσίδα αριθμών σελίδων βοηθά τους χρήστες να κατανοήσουν πού βρίσκονται από την αρχή της λίστας. Η λύση θα πρέπει να επαναφέρει την εστίαση στη λίστα μετά από μια αλλαγή σελίδας για να διατηρηθεί το πλαίσιο, και ποιο μοτίβο θα επιλέξετε θα εξαρτηθεί από την πολιτική και το κοινό σας.
Προσβασιμότητα και πολιτική: διασφαλίστε λειτουργικότητα μέσω πληκτρολογίου και ετικέτες αναγνώστη οθόνης. ανακοινώστε ενημερώσεις κατάστασης μέσω ζωντανών περιοχών. Δεδομένου ότι ορισμένοι χρήστες βασίζονται σε υποβοηθητική τεχνολογία, αυτή η πολιτική είναι πιο σημαντική από την αισθητική. Συγκεκριμένα, παρέχετε χαρακτηριστικά ARIA για ρόλους και ζωντανές περιοχές, ώστε οι χρήστες να λαμβάνουν ανατροφοδότηση χωρίς καθυστέρηση. Όταν οι χρήστες γνωρίζουν ακριβώς πού βρίσκονται, αισθάνονται πιο σίγουροι και λιγότερο αγχωμένοι. αυτό είναι ιδιαίτερα σημαντικό όταν το σύνολο δεδομένων είναι μεγάλο και από σύνδεση κινητής τηλεφωνίας.
Ληφθούν υπόψη οι επιδόσεις: φέρτε σελίδες εκ των προτέρων ή εφαρμόστε ελαφριά εικονική φόρτωση για να ελαχιστοποιήσετε τις επανασχεδιάσεις. Εάν αφαιρέσετε παρωχημένα στοιχεία από την προβολή, η χρήση μνήμης μειώνεται και η αντιληπτή ταχύτητα αυξάνεται. Συνήθως, η προ-λήψη της επόμενης σελίδας προσφέρει μια απρόσκοπτη μετάβαση. εάν τα δεδομένα είναι βαριά, αφαιρέστε μη απαραίτητο περιεχόμενο μέχρι να είναι έτοιμη η σελίδα. Ορισμένες ομάδες δεν εφάρμοσαν προσβάσιμες λύσεις παντός τύπου, αλλά η βασική ιδέα παραμένει η διατήρηση της ομαλής ροής για τους περισσότερους χρήστες.
Λίστα ελέγχου υλοποίησης: ορίστε μια σαφή πολιτική, σεβαστείτε τις προτιμήσεις των χρηστών για το μέγεθος της σελίδας και προσφέρετε μια εναλλακτική λύση όπως μια επιλογή "Φόρτωση περισσότερων" όπου χρειάζεται. Ορισμένες ομάδες δεν εφάρμοσαν προσβάσιμες λύσεις παντός τύπου, αλλά μια προσεκτική προσέγγιση συνήθως αποδίδει καλύτερη εμπειρία. Το πιθανό αποτέλεσμα είναι υψηλότερη δέσμευση και ικανοποίηση, με μετρήσιμη μείωση στις εγκαταλελειμμένες αναζητήσεις και τον χρόνο που αφιερώνεται στην αναμονή.
Μοτίβα σελιδοποίησης και πρακτικοί κανόνες για λίστες
Υπάρχει ένας απλός κανόνας: για λίστες κάτω των 100 στοιχείων, χρησιμοποιήστε 20 στοιχεία ανά σελίδα. για μεγαλύτερους καταλόγους, προσφέρετε επιλογές 40 ή 60 στοιχείων και εμφανίστε μια σαφή συνολική μέτρηση σελίδων. ένας κατάλογος 3.500 στοιχείων θα απαιτούσε περίπου 59 σελίδες με 60 στοιχεία ανά σελίδα ή 88 σελίδες με 40 στοιχεία ανά σελίδα.
Τρεις βασικές προσεγγίσεις παρέχουν προβλέψιμη πλοήγηση: ένας παραδοσιακός αριθμημένος πλοηγός με ορατό δείκτη σελίδας και έναν επιλογέα ανά σελίδα. ένα συμπαγές χειριστήριο επόμενου/προηγούμενου σε συνδυασμό με ένα αναπτυσσόμενο μενού σελίδας. και μια μέθοδος σταδιακής φόρτωσης που αποκαλύπτει περισσότερα στοιχεία κατά παραγγελία, ενώ εξακολουθεί να εμφανίζει ένα σύνολο και ένα σαφές τέλος.
Κανόνες για την αξιοπιστία: διατηρήστε τις επιλογές ανά σελίδα συνεπείς σε όλες τις ενότητες. επισημάνετε τα χειριστήρια με σαφείς αριθμούς (20, 40, 60). διασφαλίστε την εστίαση μέσω πληκτρολογίου και τις ετικέτες αναγνώστη οθόνης. στο iPhone και σε άλλες φορητές συσκευές, στοχεύστε περιοχές αφής τουλάχιστον 44 px και αποφύγετε μετατοπίσεις διάταξης όταν αλλάζουν οι σελίδες. να είστε προσεκτικοί με δυναμικό περιεχόμενο που αναδιατάσσεται.
Η ευθυγράμμιση πολιτικής έχει σημασία για κάθε λίστα UI. τα μέλη, οι οικογένειες και οι μεμονωμένοι χρήστες θα πρέπει να βιώνουν ευεξία κατά την περιήγηση. Σε αγορές με ποικίλες συσκευές (συμπεριλαμβανομένου του iPhone), παρέχετε σαφή χειριστήρια ανά σελίδα και επισημαίνετε τα στοιχεία με ονόματα, ώστε οι χρήστες να μπορούν να συγκεντρώνουν τα δικά τους δεδομένα. Εάν εμφανίζεται περιεχόμενο όπως απαγωγή, φιλτράρετέ το και καταγράψτε τις αναφορές που στάλθηκαν. Οι σκέψεις από τους χρήστες βοηθούν στην αύξηση της εμπιστοσύνης. το υπόλοιπο της διεπαφής θα πρέπει να παραμένει σταθερό. δεν μπερδεύονται οι χρήστες από ξαφνικές αλλαγές; Όχι, εάν κάνετε έλεγχο χρόνο με το χρόνο και διατηρείτε τα οικονομικά έξοδα προβλέψιμα. Οι αρμονικές δοκοί ελέγχου στην βεράντα προσφέρουν σήματα από την πραγματική ζωή.
Εμφάνιση ακριβών μετρήσεων με συνεπή μορφοποίηση X από Y
Εμφανίστε ακριβείς μετρήσεις σε μορφή X από Y σε σταθερή θέση και με συνεπή τυπογραφία σε όλες τις προβολές. Η χρήση ενός ενιαίου, προβλέψιμου μπλοκ βελτιώνει τη σαφήνεια για τους άλλους. είναι πιο σίγουροι για το πού να κοιτάξουν μετά από ένα φίλτρο ή ένα συμβάν. Μεγαλύτερα σύνολα δεδομένων ενισχύουν την ανάγκη για ακριβείς μετρήσεις. αυτή η προσέγγιση είναι πραγματικά καλύτερη για την εμπιστοσύνη και τη μάθηση. Γνωρίστε πότε να ανανεώσετε τους αριθμούς μετά την ολοκλήρωση της φόρτωσης δεδομένων, ώστε ο χρήστης να βλέπει μια σταθερή τιμή αντί για ένα τρεμόπαιγμα.
Κανόνες μορφοποίησης: Το X και το Y είναι ακέραιοι. συμπληρώστε στο ίδιο πλάτος. χρησιμοποιήστε διαχωριστικά χιλιάδων. διατηρήστε ένα μόνο κενό γύρω από τη λέξη "από" και διατηρήστε μια σταθερή ευθυγράμμιση βάσης. Αυτό ελαχιστοποιεί τις μετατοπίσεις διάταξης και καθιστά την καταμέτρηση πιο εύκολη στην σάρωση, μειώνοντας το γνωστικό φορτίο τόσο για τους ανηλίκους όσο και για τους ηλικιωμένους χρήστες. Ένα μικρό σήμα ή εικονίδιο μπορεί να συνοδεύει τον αριθμό για να σηματοδοτήσει ενημερώσεις χωρίς να αποσπά την προσοχή από την κύρια τιμή.
Προσβασιμότητα και αξιοπιστία: παρέχετε μια ετικέτα aria-live polite όπως "Τρέχουσα μέτρηση: X από Y στοιχεία" και διασφαλίστε υψηλή αντίθεση για την ευκρίνεια. Όταν τα δεδομένα φορτώνονται, δείξτε μια κατάσταση σκελετού, αλλά αποκαλύψτε τους ακριβείς αριθμούς μετά την ολοκλήρωση του συμβάντος. εάν το σύνολο δεν ήταν γνωστό, κρατήστε το πρότυπο ορατό μέχρι να διατεθεί το πραγματικό σύνολο. Αυτή η προσέγγιση είναι διαθέσιμη σε υποβοηθητική τεχνολογία και εκτιμάται από χρήστες που χρειάζονται ακριβείς ενδείξεις προόδου.
Παραδείγματα και αντίκτυπος: τα ταμπλό εισιτηρίων συχνά εμφανίζουν 23 από 500, κάτι που είναι πιο εύκολο να παρακολουθηθεί κατά τη διάρκεια συμβάντων. οι αναλύσεις γραφείου δείχνουν 1.204 από 1.204 όταν επιτυγχάνονται ορόσημα, και η σαφήνεια υποστηρίζει τη μάθηση σε κατανομές έτους γέννησης ή περιοχής χωρίς να προκαλείται ζημιά στην αναγνωσιμότητα. Μετά την εφαρμογή της προσέγγισης, οι χρήστες αναφέρουν λιγότερη σύγχυση, γνωρίζουν τη θέση τους στο σύνολο και η εμπειρία τους φαίνεται πιο συνεπής και αξιόπιστη.
Επιλέξτε μοτίβο σελιδοποίησης ανάλογα με το πλαίσιο: αριθμημένο, επόμενο/προηγούμενο, ή άπειρη κύλιση
Επιλέξτε αριθμημένη πλοήγηση για καταλόγους όπου οι χρήστες χρειάζεται να προσγειωθούν σε μια ακριβή σελίδα και να παρακολουθούν τη θέση μετά από φίλτρα. Συνιστούμε 10–40 στοιχεία ανά σελίδα και 5–7 ορατούς συνδέσμους σελίδων για την υποστήριξη της μνήμης και της γρήγορης εύρεσης. Τα σήματα που αποστέλλονται είναι σαφή: οι χρήστες μπορούν να μεταβούν, πήγαινε-έλα με σιγουριά, και το συνολικό πλήθος σελίδων είναι διαθέσιμο στον ιστότοπο. Υπάρχει μεγάλη ανάγκη να προσγειωθεί ακριβώς και να θυμάται τη θέση καθώς τα φίλτρα αλλάζουν, καθιστώντας αυτό το μοτίβο ισχυρό για φορείς δεδομένων και σταθερό περιεχόμενο που μπορεί να αναγνωριστεί δημόσια και να σαρωθεί γρήγορα. Αυτό το μοτίβο βοηθά στην εμφάνιση της θέσης και του τι ακολουθεί.
Το Επόμενο/Προηγούμενο ταιριάζει σε βηματικές εργασίες, μικρούς καταλόγους ή άρθρα όταν η προσγείωση στη μέση δεν είναι ιδιαίτερα σημαντική. Διατηρεί το chrome λιτό, υποστηρίζει την πλοήγηση μέσω πληκτρολογίου και μειώνει την πίεση μνήμης στις συσκευές. Χρησιμοποιήστε αυτό το μοτίβο όταν υπάρχει γραμμική ροή και οι χρήστες αναμένουν να ολοκληρώσουν μια ακολουθία αντί να περιηγηθούν σε ολόκληρο το σύνολο δεδομένων, κάτι που βοηθά την καμπύλη εκμάθησης και μειώνει το γνωστικό φορτίο. ψάχνετε για απλότητα που εξακολουθεί να υποστηρίζει σαφή πλοήγηση.
Η άπειρη κύλιση αυξάνει την αυξανόμενη δέσμευση για ροές, γκαλερί και επιφάνειες ανακάλυψης. Θα πρέπει να αποστέλλεται με ένα σαφές τέλος ή ένα χειριστήριο "Φόρτωση περισσότερων" για να αποφευχθεί η φόρτωση της μνήμης και οι μετατοπίσεις διάταξης. Εάν επιλέξετε αυτήν την πορεία, παρέχετε προσβάσιμα χειριστήρια, έναν ορατό δείκτη προόδου και μια απλή επιλογή για μετάβαση πίσω σε μια γνωστή σελίδα. τι ακολουθεί: εάν θέλετε να εξερευνήσετε διαφορετικά, μεταβείτε σε άλλο μοτίβο. Στο κινητό μπορεί να είναι χρήσιμο μακριά από βαριά σελιδοποίηση. στον υπολογιστή, η απόδοση παραμένει σταθερή και προσφέρεται μια εναλλακτική για μετάβαση σε άλλο μοτίβο εάν οι χρήστες θέλουν να σταματήσουν την κύλιση.
Για να αποφασίσετε, κοιτάξτε τη μάθηση από τη συμπεριφορά των χρηστών και το σχήμα των δεδομένων: εάν οι χρήστες χρειάζεται να εναλλάσσονται μεταξύ φίλτρων και να βρίσκουν μια συγκεκριμένη θέση, επιλέξτε αριθμημένο. εάν το ταξίδι είναι διαδοχικό, το Επόμενο/Προηγούμενο είναι κατάλληλο. εάν ο στόχος είναι η ατελείωτη ανακάλυψη, πηγαίνετε στην άπειρη. Εδώ μπορείτε να βρείτε δημόσια διαθέσιμους συνδέσμους και σημεία αναφοράς, με πληροφορίες που προσδιορίστηκαν από ομάδες σε όλο το οικοσύστημα. Τα μοτίβα θα πρέπει να ευθυγραμμίζονται με τους στόχους του ιστότοπου, και ο αντίκτυπος στη μνήμη πρέπει να παρακολουθείται σε κύριες συσκευές και επηρεαζόμενα περιβάλλοντα. Εάν κακόβουλες προσπάθειες στοχεύουν την κύλιση για την εξαγωγή δεδομένων ή την παραπλάνηση των χρηστών, αντιμετωπίστε άμεσα τους κινδύνους απάτης. Επομένως, επικοινωνήστε σαφώς ποια προσέγγιση είναι ενεργή και διασφαλίστε ότι παραμένει χρήσιμη και διαφανής. εάν αυξάνεται η πίεση στη μνήμη ή μειώνεται η δέσμευση, αλλάξτε ανάλογα και δοκιμάστε υπό πραγματικές συνθήκες. Ορίστε: ένα πλαίσιο αποφάσεων που σέβεται τις ανάγκες των χρηστών, τους τεχνικούς περιορισμούς και το ευρύτερο οικοσύστημα. Αποφύγετε την αιχμαλωσία προσοχής με επιθετική αυτόματη φόρτωση. διατηρήστε τα χειριστήρια ορατά, προβλέψιμα και σεβαστά στη μνήμη.
Διασφαλίστε σαφείς ετικέτες πλοήγησης και προβλέψιμη σειρά σελίδων
Επισημάνετε κάθε σελίδα με έναν συνοπτικό, προσανατολισμένο στην πράξη τίτλο και διατηρήστε μια σταθερή ακολουθία από την αρχή έως το τέλος.
Δομήστε τη ροή ως μια απλή σκάλα: Επισκόπηση, Λίστα, Λεπτομέρειες, Ενέργειες. Μέσα σε κάθε ενότητα, αντικατοπτρίστε την ίδια σειρά για κάθε κατηγορία, όπως αγορές ή γεγονότα ζωής, ώστε τα εισιτήρια και οι αναρτήσεις να εμφανίζονται στην ίδια θέση σε όλες τις σελίδες.
Περιορίστε την πλοήγηση σε τέσσερα ή πέντε βήματα. εάν ένας χρήστης αφιέρωσε περισσότερο από έξι δευτερόλεπτα επιλέγοντας μια ετικέτα, ο κίνδυνος εσφαλμένων κλικ και αποχώρησης αυξάνεται.
Μέσα σε ορισμένες αγορές, χρησιμοποιήστε ετικέτες ειδικές για τον τομέα: Εκδήλωση, Εισιτήριο, Ταξίδι, Ζωή και Λίστα. Διατηρήστε τις συνεπείς εβδομάδα με την εβδομάδα. η ίδια σειρά βοηθά τους χρήστες να χτίσουν αξία γρήγορα.
Για την πρόληψη δόλιων καταχωρήσεων, προσθέστε ένα σαφές πεδίο κατάστασης και σημαίες. οι θηρευτές τείνουν να εμφανίζονται σε μη ελεγμένες λίστες. μια ορατή διάκριση βοηθά τη διαχείριση να διατηρήσει την εμπιστοσύνη.
Βήμα 1: ελέγξτε τις τρέχουσες ετικέτες και αντιστοιχίστε κάθε σελίδα σε μια μόνο εργασία. Βήμα 2: κόψτε σε τέσσερις κορυφαίους όρους που καλύπτουν τη ροή. Βήμα 3: εφαρμόστε αυτές τις ετικέτες σε όλες τις σελίδες. Βήμα 4: εκτελέστε εβδομαδιαίους ελέγχους και προσαρμόστε.
Οι ετικέτες που δημιουργήθηκαν θα πρέπει να καλύπτουν αυτά που δημοσιεύουν οι χρήστες, όπως αναρτήσεις για εκδηλώσεις ή ταξίδια. η σαφής επισήμανση μειώνει τη σύγχυση για κάθε χρήστη και αυξάνει την ανακαλυψιμότητα του δημοσιευμένου περιεχομένου.
Οι μετρήσιμες απολαβές δείχνουν αξία και ανάπτυξη. η διοίκηση γνωρίζει από πού προέρχεται η ανάπτυξη και πού να επενδύσει. αυτή η αρχική φάση αποδίδει πιο χρήσιμες αλληλεπιδράσεις με κάθε επανάληψη.
Βελτίωση της προσβασιμότητας: υποστήριξη πληκτρολογίου, αναγνώστες οθόνης και διαχείριση εστίασης
Ξεκινήστε με έναν συγκεκριμένο κανόνα: ενεργοποιήστε την πλήρη πλοήγηση μέσω πληκτρολογίου για τα χειριστήρια σελιδοποίησης και διατηρήστε ένα ορατό δακτύλιο εστίασης στο εστιασμένο στοιχείο. Κάθε χειριστήριο αποκτά μια περιγραφική ονομασία μέσω aria-label, και η σειρά tab ρέει από την Πρώτη στην Προηγούμενη, στους αριθμημένους σελίδες, στην Επόμενη, στην Τελευταία, κάτι που καθιστά την ακολουθία ολοκληρωμένη και προβλέψιμη για τους έμπειρους χρήστες και τους νέους χρήστες. Αντιμετωπίστε κάθε χειριστήριο ως μέλος της ίδιας ομάδας, έτσι ώστε η συνέπεια της ροής να μειώνει το γνωστικό φορτίο. Διασφαλίστε ότι η εστίαση προσγειώνεται πριν από την περιοχή περιεχομένου και στη συνέχεια μεταφέρεται στην περιοχή αποτελεσμάτων, έτσι ώστε οι ταξιδιώτες που βασίζονται σε πληκτρολόγια να μην μένουν να μαντεύουν πού να διαβάσουν στη συνέχεια. Χρησιμοποιήστε απλά εικονίδια εικόνων δίπλα σε κείμενο (μήλα ως φιλική υπενθύμιση) για να ενισχύσετε το νόημα, και διατηρήστε τα αριστερά/δεξιά χειριστήρια συνεπή σε όλες τις περιοχές του οικοσυστήματος. Εάν μπορείτε να αποστείλετε αυτήν την ανανέωση εντός μιας εβδομάδας, θα καλύψετε τις επιθυμίες των χρηστών που έχουν πρόσβαση σε δεδομένα σε ιατρικές, γενεαλογικές και γενικές ενότητες του ιστότοπου, οι προτιμήσεις τους διαμορφώνουν μια καλή, προσβάσιμη εμπειρία που διαβάζεται καθαρά για αναγνώστες οθόνης και χρήστες πληκτρολογίου.
Για τους αναγνώστες οθόνης, επισημάνετε την ομάδα ως περιοχή πλοήγησης με role=”navigation” και aria-label=”Pagination”. Χρησιμοποιήστε μια λίστα, ώστε κάθε χειριστήριο να είναι ξεχωριστό και αναγνωρίσιμο. επισημάνετε κάθε σύνδεσμο σελίδας με τον αριθμό του και, για την τρέχουσα σελίδα, ορίστε aria-current=”page”. Η ανάγνωση της ετικέτας της τρέχουσας σελίδας θα πρέπει να γίνει ως μια ενιαία, συνοπτική σημείωση. όταν αλλάζει μια σελίδα, χρησιμοποιήστε aria-live=”polite” για να ανακοινώσετε την ενημέρωση χωρίς να διακόψετε τις τρέχουσες εργασίες. Διατηρήστε σύντομο και περιγραφικό το κείμενο του συνδέσμου για να βοηθήσετε την πρόσβαση σε πυκνές οθόνες και διασφαλίστε ότι το όνομα κάθε χειριστηρίου επικοινωνεί τον σκοπό του όταν διαβάζεται δυνατά από την υποβοηθητική τεχνολογία. Αυτή η προσέγγιση υποστηρίζει ένα ευρύ φάσμα περιοχών, από ιατρικές φόρμες έως πίνακες δεδομένων, και παραμένει αναγνώσιμη ακόμη και όταν οι εικόνες είναι κρυμμένες.
Για τη διαχείριση της εστίασης, μετακινήστε την εστίαση σε ένα ουσιαστικό στοιχείο μετά από μια αλλαγή σελίδας–όπως η περιοχή περίληψης ή το πρώτο στοιχείο στην ενημερωμένη λίστα–για να αποφύγετε την αποπροσανατολισμένη κατάσταση των χρηστών. Μην επιτρέπετε στην εστίαση να μετατοπιστεί σε κρυφά χειριστήρια. εάν η διεπαφή ενημερώνεται δυναμικά, τοποθετήστε την ενημέρωση μέσα σε μια ζωντανή περιοχή και επιστρέψτε την εστίαση στην κύρια περιοχή κατά την ολοκλήρωση. Διατηρήστε την ιεραρχία και την καταγωγή της σελίδας, ώστε οι αναγνώστες να γνωρίζουν πού βρίσκονται μέσα στη δομή. Συμπεριλάβετε έναν σύνδεσμο παράκαμψης που προσγειώνεται στην περιοχή σελιδοποίησης από την κορυφή, ωφελώντας όσους θέλουν να μετακινηθούν γρήγορα χωρίς να διατρέξουν ολόκληρη τη σελίδα, και διασφαλίστε ότι αυτό το μοτίβο παραμένει συνεπές κατά τις επισκέψεις τους και τις συσκευές τους.
| Στοιχείο | Σύσταση |
|---|---|
| Χειριστήρια Επόμενο/Προηγούμενο | Καταστήστε τα κουμπιά με δυνατότητα εστίασης. παρέχετε aria-labels όπως "Επόμενη σελίδα" και "Προηγούμενη σελίδα". διασφαλίστε έναν ορατό δακτύλιο εστίασης και μια συνεπή σειρά που αντικατοπτρίζει την αλληλουχία σελίδων. |
| Σύνδεσμοι σελίδων | Επισημάνετε τον καθένα με τον αριθμό σελίδας. εφαρμόστε aria-current=”page” για την ενεργή σελίδα. διατηρήστε ένα ενιαίο, σαφές όνομα για κάθε σύνδεσμο για να βοηθήσετε την έξοδο ανάγνωσης δυνατά. |
| Σύνδεσμος παράκαμψης | Τοποθετήστε τον στην κορυφή. κατά την εστίαση, μεταβείτε απευθείας στην περιοχή σελιδοποίησης για να μειώσετε τον χρόνο πλοήγησης. |
| Ζωντανή περιοχή | Χρησιμοποιήστε aria-live=”polite” για ενημερώσεις στον τρέχοντα αριθμό σελίδας. αποφύγετε τη διακοπή εργασιών χρηστών. |
| Εικονίδια και κείμενο | Συνδυάστε εικονίδια με κείμενο που ονομάζει την ενέργεια. παρέχετε ένα όνομα που είναι προσβάσιμο σε αναγνώστες οθόνης για να αποφύγετε την ασάφεια στο οικοσύστημα. |
| Πλαίσιο και ονομασία | Διατηρήστε ένα ενιαίο, αναγνωρίσιμο όνομα για την ομάδα χειριστηρίων. αυτό βοηθά την πλοήγηση αριστερά και δεξιά να παραμείνει διαισθητική σε όλες τις περιοχές και συνδέεται με την ίδια συμπεριφορά σε κάθε ενότητα. |
| Περιοχές περιεχομένου | Διασφαλίστε ότι τα χειριστήρια υπάρχουν σε κάθε περιοχή όπου εμφανίζονται αποτελέσματα. προσδιορίστε τους παράγοντες που επηρεάζουν την πρόσβαση και δοκιμάστε με πραγματικούς χρήστες για να επικυρώσετε την ενσωμάτωση των επιθυμιών και των αναγκών τους. |
Ζητήματα ασφάλειας: προστασία δεδομένων χρήστη κατά τη σελιδοποίηση και την προσωρινή αποθήκευση
Χρησιμοποιήστε σελιδοποίηση από την πλευρά του διακομιστή με εξουσιοδότηση ανά αίτημα για την αποφυγή έκθεσης πλήρων συνόλων δεδομένων στη μνήμη του προγράμματος περιήγησης.
Επομένως, εφαρμόστε μια ροή σελιδοποίησης με διακριτικά και αυστηρούς ελέγχους σε κάθε αίτημα.
- Περιορίστε τα δεδομένα ανά σελίδα. αποκαλύψτε μόνο τα πεδία που είναι απαραίτητα για την τρέχουσα προβολή. απομακρύνετε ευαίσθητα αναγνωριστικά όπως αναγνωριστικά λογαριασμών. ελαχιστοποιήστε την έκθεση πληροφοριών ανηλίκων. αφαιρέστε προσωπικά στοιχεία επικοινωνίας από αυτές τις εγγραφές.
- Εφαρμόστε απομόνωση μνήμης ανά χρήστη. αποφύγετε προσωρινές μνήμες μεταξύ χρηστών. χρησιμοποιήστε σύντομες τιμές TTL με αυτόματη αποβολή.
- Εφαρμόστε διακριτικά σελιδοποίησης που είναι βραχύβια. απαιτείται έγκυρη επικύρωση από τον διακομιστή σε κάθε αίτημα. εναλλάξτε τα διακριτικά σε κάθε λήψη. ποτέ μην καταγράφετε διακριτικά σε ιστορικά προγράμματος περιήγησης.
- Διαμορφώστε ελέγχους HTTP cache. Cache-Control: no-store, private. Pragma: no-cache. Expires: 0. αποτρέπει τις δημόσιες προσωρινές μνήμες από την αποθήκευση σελίδων με ευαίσθητα δεδομένα.
- Ασφαλή δεδομένα συνεδρίας. HttpOnly, Secure. SameSite. αποφύγετε την τοποθέτηση διακριτικών στη διεύθυνση URL. βασιστείτε σε cookies συνδεδεμένα με τη συνεδρία λογαριασμού.
- Ελαχιστοποιήστε τα δεδομένα σε προβολές όπως slideshows. σε ένα στοιχείο slideshow εμφανίστε μόνο το τρέχον στοιχείο. μην κάνετε προ-λήψη ολόκληρου του συνόλου δεδομένων. για σπίτια, τοποθεσίες, λίστες βιβλιοθηκών εμφανίστε ένα υποσύνολο ανά σελίδα.
- Επιβάλετε εξουσιοδότηση σε κάθε αίτημα. επαληθεύστε ρόλους, συνδρομές, ιδιοκτησία πριν παραδώσετε μια σελίδα. αυτό αποτρέπει τη διαρροή εγγραφών, εισιτηρίων, likes. πριν από την απόδοση μιας σελίδας, ελέγξτε τα δικαιώματα πρόσβασης. έγινε.
- Περιορίστε την αποθήκευση προγράμματος περιήγησης για ευαίσθητα πεδία. αποφύγετε το localStorage για διακριτικά. προτιμήστε μνήμη ή cookies συνεδρίας. απενεργοποιήστε την προσωρινή αποθήκευση για περιορισμένες σελίδες μέσω κεφαλίδων απόκρισης.
- Ιχνη ελέγχου και παρακολούθηση. καταγράψτε αναγνωριστικά χρηστών, χρόνους, αριθμούς σελίδων, διαδρομές πόρων. αφαιρέστε ευαίσθητα πεδία. αποθηκεύστε αρχεία καταγραφής με ασφάλεια. αυτές οι ενέργειες βοηθούν στον εντοπισμό κακόβουλων ερευνών. το προφίλ κινδύνου βελτιώνεται.
- Μείωση κινδύνου δημόσιας έκθεσης. μην δημοσιεύετε ό,τι είναι ορατό σε ανηλίκους σε δημόσιες προσωρινές μνήμες. επομένως δημοσιεύστε μόνο μη ευαίσθητα στοιχεία. επιβάλετε ηλικιακή πύλη για το σημερινό περιεχόμενο. ευθυγραμμίστε την ορατότητα με τους νόμους πολιτειών. παρέχετε επιλογές για απόκρυψη ή εμφάνιση περιεχομένου στη βιβλιοθήκη. προστατεύστε πάντα εγγραφές που ανήκουν σε λογαριασμούς. διασφαλίστε ότι τα δημόσια δημοσιευμένα στοιχεία δεν αποκαλύπτουν ποτέ διευθύνσεις, εισιτήρια ή προσωπικά δεδομένα.
- Χειριστήρια UI: ένα κουμπί σελιδοποίησης ενεργοποιεί μόνο αιτήματα ανά σελίδα. απενεργοποιήστε σε ανεπαρκή δικαιώματα. αποφύγετε την έκθεση ωφέλιμων φορτίων μέσω αποθήκευσης από την πλευρά του πελάτη.
