Kiedy podzielić listę na strony
Stronicowanie przydaje się wtedy, gdy lista produktów lub artykułów jest na tyle długa, że trudno ją wygodnie przejrzeć w jednym widoku. Podział ogranicza liczbę elementów wyświetlanych naraz i daje czytelnikowi punkt odniesienia: może przejść dalej, wrócić albo zachować adres konkretnej części listy. Nie ma jednej właściwej liczby pozycji na stronę. Dobierz ją do układu kart, ilości informacji w każdej karcie i wygody korzystania z listy na telefonie.
Zacznij od celu użytkownika. W sklepie ktoś może szukać konkretnego produktu, więc filtry i sortowanie bywają ważniejsze niż możliwość przejścia do strony 17. W archiwum poradników istotna może być chronologia oraz łatwy powrót do wcześniej oglądanej części. Stronicowanie powinno uzupełniać te sposoby poruszania się po serwisie, a nie zastępować sensownych kategorii czy wyszukiwarki wewnętrznej.
Nadaj każdej części listy działający adres
Kolejne strony listy powinny mieć odrębne, przewidywalne adresy, na przykład /poradniki/?page=2 albo /kategoria/strona/2/. Dzięki temu można udostępnić lub ponownie otworzyć konkretny widok. Ważniejsza od wyboru formatu jest konsekwencja: ten sam adres powinien prowadzić do tej samej strony listy, a linki nawigacyjne nie powinny zależeć wyłącznie od skryptu uruchamianego po kliknięciu.
Umieść w nawigacji zwykłe linki do następnej i poprzedniej strony oraz, gdy to pomocne, do wybranych numerów stron. Użytkownik nie powinien musieć przechodzić przez każdą część listy od początku, aby dotrzeć dalej. Warto też zadbać o połączenia między listami a ich elementami: karta produktu lub artykułu powinna prowadzić do osobnego adresu, a kategorie i inne istotne sekcje serwisu powinny ułatwiać odnalezienie listy.
Nie ustawiaj automatycznie adresu kanonicznego wszystkich stron paginacji na stronę pierwszą. Jeśli kolejne części pokazują różne elementy i mają być dostępne jako osobne widoki, zwykle bardziej spójne jest wskazanie przez każdą z nich własnego adresu kanonicznego. Strony o tej samej zawartości pod różnymi adresami, na przykład powstałe przez zbędne parametry, wymagają osobnej oceny.
Zadbaj o stabilną kolejność i jasne sterowanie
Lista powinna mieć zrozumiałą kolejność domyślną, na przykład od najnowszych artykułów albo według przyjętej kolejności produktów. Jeśli elementy często się zmieniają, przy przechodzeniu między stronami mogą pojawić się powtórzenia lub pominięcia. W miarę możliwości stosuj stabilne reguły sortowania, w tym rozstrzyganie remisów, gdy wiele pozycji ma tę samą datę lub wartość. Nie zawsze da się całkowicie uniknąć przesunięć w aktualizowanym katalogu, ale przewidywalna kolejność ogranicza dezorientację.
Pokaż, która strona jest aktualnie otwarta, i nadaj przyciskom lub linkom jednoznaczne nazwy. Sam rząd liczb może być trudny do zrozumienia, szczególnie przy korzystaniu z czytnika ekranu. W kodzie warto oznaczyć nawigację jako osobny obszar, a bieżącą stronę wskazać odpowiednim atrybutem dostępności. Sprawdź też rozmiar pól dotykowych i to, czy przejście na kolejną stronę działa z klawiatury.
Przy filtrach i sortowaniu ustal, co stanie się z numerem strony po zmianie ustawień. Jeśli użytkownik jest na stronie 8, a po zawężeniu wyników zostały tylko dwie strony, przeniesienie go na początek przefiltrowanej listy będzie zwykle bardziej zrozumiałe niż pusty widok. Wybrane ustawienia powinny pozostać widoczne, aby było jasne, dlaczego lista wygląda inaczej.
Nie opieraj nawigacji wyłącznie na nieskończonym przewijaniu
Automatyczne doładowywanie elementów może być wygodne, ale utrudnia powrót do określonego miejsca, jeśli stan listy nie jest zachowywany. Podobny problem pojawia się przy przycisku „Pokaż więcej”, gdy kolejne partie nie mają adresów, do których można przejść bez wcześniejszych kliknięć. Jeżeli wybierasz taki sposób prezentacji, rozważ równoległe adresy kolejnych części listy i działające linki. Interfejs może być płynny, a nawigacja nadal możliwa bez polegania wyłącznie na przewijaniu.
Przetestuj też powrót z karty produktu do listy. Utrata wybranych filtrów, sortowania i miejsca przeglądania zmusza użytkownika do zaczynania od nowa. Dobrze zaprojektowana lista pozwala kontynuować poszukiwania bez odtwarzania kilku wcześniejszych kroków.
Krótka lista kontrolna przed publikacją
Otwórz bezpośrednio adres pierwszej, drugiej i dalszej strony listy. Sprawdź, czy każda pokazuje właściwe elementy, ma działające linki do produktów lub artykułów oraz pozwala przejść dalej i wrócić. Zweryfikuj, czy adres nieistniejącej strony nie wyświetla po cichu zawartości strony pierwszej oraz czy filtry nie tworzą przypadkowo wielu identycznych widoków.
Na telefonie i przy obsłudze klawiaturą sprawdź widoczność bieżącej strony, czytelność etykiet oraz zachowanie przycisku wstecz. Na koniec przejdź typową ścieżkę: od kategorii przez dalszą stronę listy do pojedynczego elementu i z powrotem. Taki test często ujawnia problemy, których nie widać podczas oglądania samej pierwszej strony.
