Następna strona? – usability, luźne przemyślenia

Cały czas w Internecie trafiasz na miejsca, gdzie treści jest tak wiele, że podzielona została na podstrony. Artykuły, archiwa newsów, fora, wszędzie. Jako użytkownik wymagasz wygody w poruszaniu się pomiędzy poszczególnymi stronami. Nic tak nie zniechęca, jak niemożność przejścia na następną stronę, kiedy znajdujesz się w środku ciekawego tekstu. Nie muszę wspominać, że już więcej tam nie wrócisz.

A jak to wygląda z drugiej strony? Tworzysz właśnie jakiś serwis i okazuje się, że koniecznością staje się zapewnienie dobrego poruszania się po podstronach. Konwencji jest kilka, niektóre są lepsze, niektóre gorsze, a część z nich niekoniecznie nadaje się do czegokolwiek.

Zasada numer jeden. Upraszczaj!

Chyba już nie raz widziałeś listy linków podobne do tego wzoru (jesteśmy na 8 stronie, nie jest ona linkiem):

Poprzednia 4 5 6 7 8 9 10 11 12 Następna

Zaczynamy od środka. Zastanów się, kto mógłby używać listy poprzednich i następnych czterech stron. Jeśli użytkownik jest zainteresowany, będzie czytał stronę po stronie. Jeśli nie jest, zamknie kartę od razu. Pomijając przeskakiwanie stron w celu przeszukiwania (bo od tego są inne narzędzia), najprawdopodobniej nie pozostaje żaden racjonalny powód do posługiwania się tymi linkami.

Doszliśmy do takiego modelu:

Poprzednia 8 Następna

Prostota. Wydaje mi się, że najlepszym układem przestrzennym dla tego modelu będzie Poprzednia po lewej stronie, Następna po prawej i 8 pośrodku. Duże marginesy pomiędzy poszczególnymi polami i wielkie, łatwo trafialne linki, najlepiej obramowane i z odpowiednim klikalnym paddingiem. Aby dopełnić dzieła i dać użytkownikowi świadomość objętości tekstu, dałbym jeszcze małą adnotację pośrodku, o, taką:

[ Poprzednia ]    Strona 8 z 13.    [ Następna ]

Ten model nadaje się do prawie wszystkich archiw, w których na jednej stronie jest dużo treści i nie potrzeba skakać gdzieś do określonych punktów.

Nie zmieniaj miejsca, w którym mają pojawić się linki

Zanim przejdę do analizy dalszych modeli, chcę uświadomić Ci jedną dość oczywistą prawdę, którą mało kto wykorzystuje.

Projektując swój model ustaw stałe szerokości dla poszczególnych linków. Dzięki czemu na każdej podstronie będą znajdować się w tej samej odległosci od brzegu ekranu, przez co użytkownik nie będzie musiał za każdym razem wyszukiwać od nowa miejsca, w które powinien kliknąć by przejść do określonej strony.

Jeśli dana strona nie istnieje, to pokaż pole z tekstem i oznacz je tak, aby użytkownik wiedział, że jest nieaktywne. Według mnie to najczytelniejsze i najestetyczniejsze rozwiązanie. Alternatywnie możesz skorzystać z visible: none.

Model drugi, artykuły

Ten model jest bardzo przydatny dla przydługich artykułów, które zazwyczaj mieszczą się na trzech, czterech stronach. W tym wypadku sprawa jest jeszcze prostsza, niż w poprzednim:

[ 1 ]   2   [ 3 ] [ 4 ]

Żadnych przycisków `następna’ i `poprzednia’. Nie ma sensu ich stosować przy tak małej ilości podstron.

Model trzeci, fora

Forum bardzo akcentuje pierwszą i ostatnią stronę wątku. Dlatego to one będą podstawą w naszym modelu:

[  <<  ] [ Poprzednia ]   Strona 8 z 14   [ Następna ] [  >>  ]

Dlaczego nie posłużyłem się słownymi określeniami `pierwsza’ i `ostatnia’? W ten sposób linki pierwszej i ostatniej strony nie kolidują z linkami poprzedniej i następnej, dzięki czemu nie trzeba wprowadzać kolejnych oznaczeń.

Oczywiście linkom pierwszej i ostatniej strony należy zapewnić odpowiednie rozmiary. Być może nawet nieco większe niż te stosowane do stron poprzedniej i następnej.

Model czwarty, linki do poprzednich i kolejnych stron

Owszem, na początku mocno skrytykowałem pomysł umieszczania linków do kolejnych i poprzednich stron, gdyż nie znalazłem dla nich rozsądnego użycia. Może jednak się okazać, że coś przeoczyłem, dlatego też podzielę się moimi przemyśleniami i na ten temat.

Weźmy model, który sktrytykowałem na początku i nieco go przetwórzmy zgodnie z powyższymi zasadami:

[ << ] [ Poprzednia ]   [ 4 ] [ 5 ] [ 6 ] [ 7 ] 8 [ 9 ] [ 10] [ 11] [ 12]   [ Następna ] [ >> ]

W wypadku, gdzie stron może być naprawdę dużo, a chcemy, aby użytkownik mógł się poruszać, zapewnijmy mu nieliniową skalę:

[ << ] [ Poprzednia ]   [   ] [ 1 ] [ 3 ] [ 5 ] [ 7 ] 8 [ 9 ] [ 11] [ 13] [ 18] [ 28]   [ Następna ] [ >> ]

W ten sposób użytkownik będzie mógł nieco szybciej przeskakiwać większe ilości stron. Można także pozbyć się duplikowania linków do poprzedniej i następnej strony.

Duplikaty linków

Jeśli musisz przedstawić linki prowadzące do poprzedniej i następnej strony w dwóch egzeplarzach to pokaż, że obie nawigacje są odrębnymi grupami funkcjonalnymi, bo w innym przypadku może to wprawić użytkownika w lekką konsternację, jak i każda inna redundancja.

I to by chyba były wszystkie moje luźne przemyślenia. Mam nadzieję, że skłonią Cię do chwili refleksji. 😉