Main menu

Nawigacja – paginacja

Długie treści na stronach od zawsze były problemem. Z jednej strony chcielibyśmy umieścić na stronie serwisu całą jego zawartość, z drugiej strony scrollowanie treści przez kilka ekranów nie zawsze jest dobrym rozwiązaniem. Wyjątek stanowią blogi, gdzie użytkownicy są przyzwyczajeni do posługiwania się pionowym suwakiem przeglądarki. Jednak nie blogi będą stanowić dzisiejszy temat. Chciałbym napisać troszeczkę o dobrych przykładach radzenia sobie z długimi treściami w obrębie serwisu.

Długi content (treść) występuje najczęściej w przypadku list wyszukiwania, gdzie na stronie należy zaprezentować listę znalezionych wyników. W większości przypadków nie mówimy tutaj o wynikach na długość dwóch lub trzech ekranów, ale o treści mogącej zająć nawet kilkunastokrotną długość widocznej przestrzeni okna przeglądarki.

Innym przykładem miejsca, gdzie prezentowana jest długa treść, są wszelkiego rodzaju strony z nowościami, produktami (aplikacje e-commerce) czy przeglądem pewnych zbiorów (pliki do pobrania, listy pluginów itp.).

Rozwiązaniem stosowanym w praktyce (i chyba jednym z lepszych) jest wykorzystanie silników dzielących (porcjujących) nam dane na kilka-, kilkanaście stron oraz wyświetlających nam je pojedynczo – tzw. paginacja. Do kolejnych stron (porcji informacji) przechodzimy najczęściej za pomocą paska nawigacyjnego, zawierającego odnośniki (linki) do kolejnych stron.

Rozwiązań jest wiele. Jedne są lepsze inne gorsze – jak to w praktyce bywa. Poniżej zaprezentuję Wam te najciekawsze z punktu widzenia sposobu ich implementacji i organizacji.

Google

Google jest pierwszym przykładem jaki chciałbym przytoczyć. Większość z nas zna zapewne statndardowy pasek nawigacujny na stronach z wynikami wyszukiwania w wyszukiwarce Google.

g1.jpg

Równoległa lista linków, kolejno ponumerowanych. Numer strony aktualnie przeglądanej jest wyróżniony innym kolorem i nieklikalny. Wszystko byłoby poprawnie, gdyby nie niski kontrast między kolorami elementów klikalnych i nieklikalnych. Linki posiadają podkreślenie, co symbolizuje możliwość ich kliknięcia i jest to dobre rozwiązanie. Do kolejnych stron możemy przejść poprzez kliknięcie jednego z linków numerycznych lub przez wyróżniony napis „Następna”.

g2.jpg

Zapewne zauważyliście, że nie ma możliwości tutaj szybkich skoków po 10, 20 itd. stron, co jest ewidentną wadą tego mechanizmu. Dodarkowo obszar klikalny każdej ze stron jest bardzo mały (podobnie jak i odległość między nimi), co dodatkowo utrudnia nawigację. Widać to szczególnie w przypadku liczby stron większej od 20. Należy tutaj jeszcze wspomnieć o braku możliwości przejścia do pierwszej i ostatniej strony, co może być mało przyjemne na długi listach wyników.

g3.jpg

Ostatnia strona (podobnie jak pierwsza) posiada tylko jeden wyróżniony link (Poprzednia).

Dodatkowym minusem rozwiązania prezentowanego przez Google jest niewykorzystanie etykiet testowych linków (title). Nie omieszkam wytknąć tuaj rozpraszającego graficznego napisu „Goooooooogle”, który tak naprawdę do rozwiązania nie wnosi nic oprócz kolejnej dawki chaosu i zacierania przejrzystości interfejsu.

Mozilla

Mozilla zaproponowała na stronie dodatków do swojej przeglądarki Firefox dosyć ciekawe rozwiązanie, które w porównaniu z Google, jest o wiele lepsze (choć i ono nie ustrzegło się błędów).

m1.jpg

m2.jpg

m3.jpg

Jak widać na powyższych rysunkach, Mozilla zadbała o zdrowie i wzrok użytkownika i oprócz kontrastowej nawigacji, zadbała o dużą przestrzeń między kolejnymi linkami oraz duże klikalne pole, które notabene podświetlają się po najechaniu kursorem, co dodatkowo wpływa pozytywnie na percepcję i postrzeganie tego, co wykonujemy. Na minus jednak wciąż należy zaliczyć brak możliwości szybkich skoków (po kilkanaście wyników na przód i w tył) oraz brak wykorzystania tekstowych opisów linków, podobnie jak to miało miejsce w przypadku Google.

Inne rozwiązania

Ciekawym rozwiązaniem jest przykład zaproponowany na stronie pewnego blogu.

d.jpg

Do złudzenia przypomina ono rozwiązanie Mozilli, jednak różni się kilkoma drobnymi szczegółami i zachowaniami w zależności od ilości wyników. Po szerszy opis działania i komentarz do wszystkich przypadków zapraszam na stronę z artykułem. Brakuje mi w tym rozwiązaniu podobnych rzeczy jakie nie zostały wykorzystanie przez Mozillę, jednak jest ono bliskie ideału i z drobnymi poprawkami z powodzeniem można by je stosować w praktyce.

Moim zdaniem dobry silnik do paginacji powinien spełniać poniższe zalecenia:

  • przejrzystość i stosowana odległość między elementami
  • elementy aktywne jak i nieaktywne powinny być wyraźnie zaznaczone
  • obszar klikalności elementów powinien być w miarę duży
  • użytkownik powinien mieć możliwość przejścia w każdym momencie do pierwszej i ostatniej strony wyników
  • użytkownik powinien mieć możliwość szybkich skoków (0 5, 10 czy 20 elementów) w obu kierunkach na długich listach wyników
  • elementy zbędne w nawigacji powinny być niewyświetlane
  • linki powinny posiadać opisy title mające na celu ułatwienie nawigacji dla osób posługujących się screendreaderami
  • linki powinny posiadać podkreślenie, co pozytywnie wpływa na ich postrzeganie przez percepcję użytkownika
  • rozpiętość i dostępna jednorazowo lista linków do stron powinna być dopasowana do liczby wyników – optymalną liczbą jest 3-5 wyników w przód i w tył

Nie udało mi się jednak znaleźć takiej implementacji. Może Wy ją znacie?

Dodano 16 czerwca 2008:
Jednak udało się znaleźć (dzięki blogowi Marcina Szuby) wspaniały przykład jak nie należy projektować paginacji.

z-dontdothat.png

Przykład znajduje się tutaj.

Dodano 24 czerwca 2008:

O powyższej tematyce traktuje także poniższy artykuł, chociaż nie ze wszystkimi stwierdzeniami się zgadzam:

Dodano 23 sierpnia 2008:
Kolejny artykuł (bardziej jako ciekawostka i mini tutorial) traktujący o tematyce stronicowania:

keyword:
nawigacja interfejs paginacja pager stronicowanie projektowanie rozwiązania

Ponad 8 lat w branży digital... to dużo, czy mało? Usability, user-experience, interaction design, accessibility... nie lubię nazw, które są tworzone jedynie dla celów marketingowych. To, co jest na prawdę istotne (dla mnie) to czynniki, które popychają ludzi od osiągania swoich celów i realizowania swoich potrzeb. Co sprawia, że ten mechanizm działa jak dobrej jakości szwajcarski zegarek? W jaki sposób mogę dać ludziom to, czego potrzebują i w jaki sposób mogę uczynić ich życie łatwiejszym? Jaka jest siła motywacji, w jaki sposób połączyć potrzeby konsumentów i cele biznesowe. To są pytania, które mnie interesują i na które szukam odpowiedzi!

Website: http://www.usability-onair.com

Google Profile

Two thoughts on “Nawigacja – paginacja

Odpowiedz na „Marcin SzubaAnuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

FacebookRSS