7 problemów związanych ze stronicowaniem od strony użyteczności – paginacja

Każdy z nas przewinął kiedyś stronę internetową do końca i zobaczył rząd cyfr czy też jakieś dziwne strzałeczki. Ten rządek cyfr  to właśnie paginacja strony czyli po „polskiemu” stronicowanie. Paginacja (stronicowanie) jest wzorem interfejsu użytkownika, rozdzielającego treść na poszczególne strony. To ważne, aby z niej korzystać – dzięki temu nasze strony nie staną się za długie i przytłaczające. Sposób, w jaki obecnie projektuje się stronicowanie bywa czasami dość uciążliwy dla użytkowników.

Nadmierne skracanie strony – czyli „short content”

Strona internetowa nie jest jak książka. Rozmiar książki ogranicza ilość treści, którą można zmieścić na stronie. Strona internetowa ma nieograniczoną wysokość i może pomieścić lub załadować tak wiele treści, jak dużo będzie w stanie udźwignąć. Jedynym ograniczeniem w kwestii ilości treści jest fakt, że jej za duża ilość może spowodować wolniejsze ładowanie się strony. Jeśli wydłużysz swoje podstrony i zadbasz o prędkość ich ładowania, użytkownicy dostaną na poszczególnych podstronach więcej treści i nie będą musieli tak często klikać w przyciski paginacji – jednocześnie odciążysz serwer bo nie cały content będzie ładowany od razu.

Pamiętaj, że użytkownicy wolą przewijanie od klikania. Dzisiejsze rolki myszy, touchpady i ekrany dotykowe sprawiają, że przewijanie jest szybsze i wygodniejsze niż klikanie. Aby przejść do kolejnej strony poprzez paginację, użytkownik musi znaleźć odpowiednie hiperłącze (url), kliknąć w nie myszą i zaczekać na załadowanie się nowej strony. Jeśli się zastanowić, to całkiem sporo pracy. Wyobraź sobie, że użytkownik musi powtarzać tę czynność w kółko ogromną ilość razy z powodu krótkich podstron. W przypadku przewijania strony, wszystko, co musi zrobić użytkownik, sprowadza się do przejechania palcem po rolce myszy, touchpadzie czy ekranie dotykowym. Nie ma czasu oczekiwania, a nowa treść trafia do użytkownika przy minimalnym wysiłku. Przestań więc nadmiernie skracać swoje podstrony i pozwól użytkownikom przewinąć więcej treści zamiast zmuszać ich do klikania. Chociaż nalezy zauważyć, że krótka treść i klikanie powodują generowani ekolejnych odsłon banera – przy pierdyliardach użytkowników na display’ach można wtedy nieźle zarobić 😉

Prostym sposobem na ocenienie, czy Twoje podstrony są za krótkie jest przyjrzenie się swojemu paskowi przewijania. Krótka strona będzie miała długi pasek przewijania. W przypadku długiej strony, pasek będzie krótki. Twój pasek przewijania nie powinien być ani za długi, ani za krotki – najlepiej celować w coś po środku. Dzięki takiej równowadze dostarczysz użytkownikom więcej treści bez spowolnienia szybkości ładowania strony.

Należy też zwrócić uwagę, że w stopce prezentujemy wiele cennych dla użytkownika informacji. Załóżmy, że pełne dane adresowe znajdują się w stopce – skoro strona będzie łądowała content na żądanie to użytkownik nigdy do tej stopki nie dojedzie (na wirtualnej wkurza mnie ten fakt, że nonstop coś jest doładowywane).. true and sad 🙁

Zaoferuj użytkownikom filtrowanie zawartości – paginacja przy filtrowaniu

Niektóre paginacje zawierają tak wiele pozycji, że wśród numerów stron zdarzają sie numery trzycyfrowe. Żaden użytkownik nie będzie tracił czasu na kolejne przeglądanie stron od 1 do 100 – dlatego nie powinieneś nigdy prezentować swojej treści jako olbrzymiego, nie kończącego się archiwum. Zamiast tego, zaoferuj swoim użytkownikom różnego rodzaju filtry zawartości, które uporządkują i wyświetlą elementy archiwum według określonych kategorii lub atrybutów. Dzięki temu, użytkownicy zobaczą tylko treść, która ich interesuje i nie poczują się przytłoczeni.

Powiększ przyciski

Wiele stron nie docenia tego, jak duże znaczenie ma wielkość przycisków paginacji. Przycisk jest dla użytkownika jedyną drogą na następną stronę. Aby użytkownicy chcieli przechodzić na kolejne strony, powiększ go i spraw, żeby był dobrze widoczny. Odnośniki „Dalej” i „Wstecz” przekształć w większe lub zastosuj przyciski. Jeżeli cel kliknięcia będzie większy, użytkownicy będą mogli łatwiej do dostrzec, oraz szybciej i łatwiej użyć.

Nie używaj odnośników pierwszej i ostatniej strony

Niektóre paginacje posiadają odnośniki umożliwiające użytkownikom przeskakiwanie między pierwszą i ostatnią stroną. To rozwiązanie niepotrzebne i zwykle dezorientujące użytkowników. Czasami linki do pierwszej i ostatniej strony są wyświetlane jako podwójna strzałka, w którą użytkownicy często klikają przez pomyłkę, myśląc, że to strzałka pojedyncza, która zabierze ich na następną stronę. Oznaczenie odnośników jako „Pierwsza strona” i „Ostatnia strona” powoduje zamieszanie przy klikaniu także ze względu na sąsiedztwo z linkami „Dalej” i „Wstecz”.

Link do pierwszej i ostatniej strony nie jest potrzebny, ponieważ większość użytkowników preferuje przeglądanie treści chronologicznie. Nie ma powodu, żeby zaczynali od ostatniej strony, chyba, że próbują znaleźć treści z przeszłości, które wcześniej już oglądali. Na taką ewentualność powinieneś mieć w swoim panelu nawigacji pole wyszukiwania.

Umożliwienie użytkownikom powrotu na pierwszą stronę ma jednak praktyczne uzasadnienie. Pierwsza strona zawiera często najistotniejsze i najbardziej aktualne treści. Po przejrzeniu większej ilości stron, użytkownik może chcieć wrócić na pierwszą stronę bez konieczności klikania w koło w odnośnik „Wstecz”. Powinieneś wyświetlać link do pierwszej strony jako numer jeden z wielokropkiem – „1…”. W ten sposób nie będzie kolidował z przyciskami „Dalej” i „Wstecz”.

Kiedy wyświetlać numery stron 

Twoje stronicowanie nie zawsze musi się składać z rzędu numerów stron. Jeżeli zawiera dużo stron o wysokich numerach dwucyfrowych lub jeszcze wyższych, wiadomość o całkowitej ilości stron jest użytkownikom zbędna, ponieważ i tak nie będą w stanie przez nie wszystkie przejść. Jeżeli jednak Twoja paginacja zawiera tylko parę niskich liczb dwucyfrowych lub nie posiada ich w ogóle, pokazywanie numerów stron może zachęcać użytkowników do przejrzenia ich do końca. Powinieneś pokazywać numery stron wówczas gdy ich liczba jest niewielka,  ale ograniczyć sie do przycisków „Dalej” i „Wstecz” gdy numery stron są ogromne.

Jest jeden wyjątek od tej zasady. W przypadku stron eCommerce, lepszym wyjściem jest pokazywanie numerów stron w swojej paginacji, dzięki czemu użytkownicy będą w stanie wrócić do konkretnej strony, aby zerknąć na produkt, nad którego kupnem się zastanawiają. Numerowanie stron pozwala też użytkownikom na dokładniejsze poszukiwanie produktów, ponieważ wskazuje strony, które już obejrzeli, a także etap procesu, na jakim obecnie się znajdują. Dodatkowo, kiedy użytkownik potrzebuje dodać taką stronę do paska zakładek, strona zostaje zachowana z nagłówkiem w postaci numeru strony i kategorii produktu, dzięki czemu użytkownik może rozpocząć ponownie w miejscu, w którym ostatnio zakończył, nie zapominając, czego szukał.

Kiedy stosować nieograniczone przewijanie

Istnieje tylko kilka przypadków, w których nieograniczone przewijanie jest efektywne. Kiedy Twoja treść otwiera się w nowej karcie lub oknie modalnym, nieograniczone przewijanie jest użyteczną techniką. Jeżeli jednak Twoja treść otwiera się na tej samej stronie, nieograniczone przewijanie może okazać się frustrujące dla użytkowników. Użytkownik, klikając „Wstecz”, gubi swoje miejsce i postęp w strumieniu treści i będzie zmuszony przewinąć stronę ponownie od samej góry. Otwieranie treści w nowej karcie lub oknie pozwala użytkownikom zachować swoje miejsce i postęp i kontynuować przewijanie bez restartowania czy odświeżania strony. Przykładem nieograniczonego przewijania z otwieraniem treści w oknach modalnych jest Pinterest. Przykładem nieograniczonego przewijania z otwieraniem treści w nowych kartach jest Inbound.

Kolejnym problemem z nieograniczonym przewijaniem jest fakt, że użytkownicy, docierając do określonego punktu strumienia streści, nie mogą zaznaczyć, gdzie są, ani tam potem wrócić. Jeżeli opuszczą stronę, stracą wszelkie postępy i będą zmuszeni bez końca przewijać stronę, zanim dotrą do tego samego miejsca. Z tego powodu nieograniczone przewijanie jest niekorzystne dla stron eCommerce. Kiedy użytkownicy robią zakupy online, chcą mieć możliwość powrotu do miejsca, które opuścili i móc kontynuować zakupy. Chcą również moc zapisać strony produktów, które porównują. Nieograniczone przewijanie jest efektywne tylko wówczas, gdy jest używane we właściwym kontekście.

Stronicowanie z wykorzystaniem strzałek klawiatury

Niewiele stron wykorzystuje jeszcze zalety paginacji z wykorzystaniem strzałek klawiatury. Ta wyjątkowa technika daje użytkownikom swobodę zmiany stron bez konieczności klikania w odnośniki paginacji. Proste naciśnięcie prawej strzałki zabiera ich na następną stronę, podczas gdy lewa strzałka przenosi ich z powrotem na stronę poprzednią. Użytkownicy nie dowiedzą się jednak, że taka funkcja jest dostępna, jeżeli nie poinformujesz ich o tym na swojej stronie. Przykład takiej techniki w użyciu stanowi Dribbble.

Podsumowanie

Bolączki stronicowania dotkliwie dają się we znaki przy projektowaniue stron. W przypadku większości użytkowników ciężka w użyciu paginacja spowoduje zaprzestanie przeglądania przez nich strony. Jeżeli głębsze podstrony Twojej strony są rzadko odwiedzane, może to świadczyć o problemie z paginacją. Sieć jest pełna przykładów złej paginacji. Wnieś swój udział w zaprzestanie krzewienia złej paginacji, dopilnowując, by wymienione błędy nie miały miejsca na Twojej stronie internetowej.

To co napotkałem Ja sam (kilka przykładów):

• stronicowanie uruchomione na stronie głównej – rozwiązanie bez sensu (poza blogami). Spotykane często w sklepach internetowych
• bardzo „krótkie” i „ubogie” stronicowanie przez co utrudnione jest dotarcie do konretnej podstrony serwisu (o kolorystyce już nie wspomnę)

• fora zazwyczaj mają dobrze zaprojektowane stronicowanie

• zawsze przeraża mnie stronicowanie na Kwejku – aż korci pójśc do pierwszej strony 😉 – ale mamy duży (ogromny) przycisk „następna strona” aby nie trzeba było się domyślać gdzie jestem bo wiem, że i tak serwis sam sobie poradzi a Ja nie muszę „paczeć” na cyferki 🙂

Macie jakieś ciekawe przypadki ???

Orginał: http://uxmovement.com/navigation/avoid-the-pains-of-pagination/ – obrazki zaczerpnięte właśnie z tego artykułu. Inne obrazki żywcem wzięte z dostępnych serwisów.