Stránkujeme smysluplně…?

kniha, stranky, informace

Stránkování je technika rozdělující webové stránky s příliš mnoha záznamy do více kratších stránek. Což asi není třeba vysvětlovat, protože se stránkováním se setkáte skoro na každém webu. O to je smutnější, jak často webdesignéři v této disciplíně selhávají.

Stránkování je zajímavé hned ze tří pohledů:

  1. z programátorského
  2. z hlediska SEO
  3. a použitelnosti / user experience

Tento článek se bude věnovat jen třetímu pohledu a ukážeme si, čemu se vyvarovat při návrhu dobře použitelného stránkovače (anglicky paginator). Než začneme, sjednotíme si terminologii. Stránkovačem myslím navigační komponentu webové stránky vypadající zhruba takto:


Obrázek č. 1: stránkovač obecný.

Můžeme ho rozdělit na části obsahující:

  • číselné odkazy vedoucí na konkrétní stránky
  • odkazy pro relativní posun o stránku vpřed a vzad (zpravidla bývají nejdůležitější)
  • odkazy pro absolutní posun na začátek a konec

Stránkovač samozřejmě může být i složitější, nebo naopak jednodušší a nemusí obsahovat všechny části. Co když ale neobsahuje žádnou část?

Chybějící stránkovač

Nejhorší stránkovač je chybějící stránkovač. To dá rozum, viďte. Proč to tedy zmiňuji? Protože absentuje na obrovské spoustě webů. Příkladem může být řada blogů, například ten či onen, každý běží na jiné platformě. Na titulní neboli první stránce najdete nejnovější články, ale marně byste pod nimi hledali odkaz na stránku druhou. Nic takového tam totiž není.


Chybějící stránkovač. Jak se dostanu na další článek? Dost těžko. (blog Dobrého webu)

Jakmile nedáte čtenáři možnost se snadno dostat k následujícím článkům, dopustili jste se neomluvitelné chyby v navigaci. Třeba právě další články mohly rozhodnout, že si jej dá do RSS čtečky. Nikdy proto na stránkovač nezapomínejte. A pokud to vaše platforma neumí, poohlédněte se po jiné.

Vizuální podoba

Grafická podoba stránkovače hraje naprosto zásadní roli. Stránkovač, který vidíte na obrázku č. 1, (si) musím po vizuální stránce pochválit. Působí intuitivně, aktuální stránka je zřetelně zvýrazněná a neaktivní odkazy jsou zašedlé. Pokud by to bylo ku prospěchu věci, mohly by se i odstranit.

Především však dopřává jednotlivým odkazům dostatečně velkou aktivní plochu. Není třeba se myší trefovat do drobných číslic, stačí kurzorem najet na mnohem větší ohraničující obdélník. Tohle ocení každý uživatel. (Viz Fittsův zákon)

Kromě aktivní plochy hraje svou roli také rozmístění jednotlivých částí stránkovače. Nejlépe patrné a dosažitelné jsou krajní části. Pokud by mezi nejpoužívanější odkazy měly patřit ty pro relativní posun (předchozí, další), tak jejich umístění uvnitř odkazů pro posun absolutní (první, poslední) zhorší jejich dostupnost. Byť jsou doplněny piktogramem, zbytečně nutí uživatele přemýšlet. Můžeme situaci vyřešit třeba tak, že odkaz na první a poslední stránku naznačíme pomocí číselných odkazů:


Obrázek č. 2: jiný způsob odkazu na první a poslední stránku.

To už je lepší a výsledek je stále intuitivní.

Ale pozor, třeba v případě administrace databázových tabulek je odkaz na poslední stránku jedním z nejdůležitějších. Pokud prohlížím tabulku objednávek, zpravidla hned kliknu na „Poslední“, protože nejstarší záznamy na první stránce mě nezajímají. Takže je záhodno tam takové tlačítko ponechat. Vždy je třeba přemýšlet, co je vhodné pro konkrétní nasazení.

Co nejjednodušší…

Zkuste se zamyslet a odpovědět na otázku: hodil by se stránkovač z obrázku č. 1 nebo 2 na blog? A proč?

Pro blog jsou oba nevhodné. Čtenáři totiž využívají jen odkazy pro relativní posun. Vše ostatní překáží. Číselné odkazy je nezajímají, nikdo nepotřebuje jít přímo na stránku č. 12. A ještě zbytečnější je odkaz na stránku poslední. Kdy by na něj klikal? Leda by čtenáře zajímalo, kdy se na blogu objevil první článek, ale kvůli tak okrajové potřebě přece nemůžeme zkomplikovat stránkovače na celém blogu.

 Odstrašující příklad odporující všem v článku uvedeným doporučením (blog Misantrop.info)
(Na zmíněném webu je už stránkování jiné; jako by snad provozovatel stránek mezitím četl tento článek. – Pozn. red.)

Ideální stránkovač pro blog by měl obsahovat pouze odkazy na předchozí a následující stránku:


Ukázkový příklad, navíc méně důležitý odkaz je menší (blog phpFashion.com, patřící shodou okolností autorovi článku)

Kupodivu i na těchto dvou odkazech lze dost pokazit. Častou vadou jsou nevhodné popisky:


Matoucí popisky, co jsou to předchozí články, ty starší? (blog společnosti Optimics)

Odkaz „další články“ vede na články napsané dříve (tj. předchozí), zatímco „předchozí články“ míří na spoty chronologicky následující po aktuálních. Felix Holzmann by z toho vytěžil scénku, vy se snažte dávat odkazům srozumitelné názvy.

Další vadou, kterou trpí řada webů, jež pohání WordPress, je obrácené směřování odkazů. Protože čteme odshora dolů a zleva doprava, musí odkaz na další (starší) obsah vždy směřovat doprava a nikoliv vlevo:


Zrcadlově umístěné odkazy (blog Pixynergia)

…ale ne jednodušší

Dopřejme si ještě jeden odstrašující a přitom docela typický případ stránkovače. Byl použit na webu, kde uživatelé nejčastěji potřebují klikat na odkaz pro posun na další stránku. Občas mohou kliknout i na číslo stránky ve snaze posunout se o více stránek.


Klaboseni.cz před redesignem.

Zdálo by se, že z pohledu uživatelské nevrlosti bylo učiněno maximum: klíčový odkaz na další stránku je reprezentován pouhým znakem >, do kterého je třeba se přesně trefit a který je obklopen řadou zbytečných až nesmyslných odkazů na poslední či předposlední stránky. Jaké bylo překvapení, když webdesigner při redesignu dokázal zajít ještě dál, tím, že onen nejdůležitější odkaz odstranil:


Klaboseni.cz po redesignu.

Poznámka: jako negativní příklady jsem uvedl několik známých českých webů, což však neznamená, že ostatní weby jsou na tom lépe. Kdepak, situace je tragická a správě řešené stránkování aby člověk pohledal.

Jednou jsi dole, jednou nahoře

Na blozích patří stránkovač dolů pod články, neboť čtenář čte obsah odshora dolů a po dosažení spodního okraje chce přejít na články starší. Jiná situace nastává, pokud stránkujeme například tabulku a kde se očekává aktivní využívání stránkovače.


Stránkování umístěné nad tabulkou.

V takovém případě umístěte stránkovač i nad tabulku. Pokud by byl umístěn jen dole, musel by uživatel pokaždé zarolovat pod tabulku, což by v případě dohledávání nějakého záznamu bylo frustrující.

Je-li zobrazovaných dat na každé stránce tak málo, že by se posuvník neměl objevit, stačí zůstat u jednoho stránkovače a doporučuji ponechat ten vrchní. Výška tabulky se totiž může měnit a spodní stránkovač by uživateli pod kurzorem poskakoval. Obzvláště patrné by to bylo při načítání měnícího se obsahu přes AJAX.

Buďte kritičtí

O stránkovačích by se dalo ještě napsat mnohé, ale cílem článku je přimět vás, čtenáře, k většímu přemýšlení nad touto klíčovou komponentou. Hledejte řešení, které je nejvhodnější přímo pro danou situaci. Zvažte, zda se čtenáři chtějí dostat hlavně na starší články, jako je tomu na blogu či magazínech, nebo zda se chtějí snadno dostávat na významná místa, jako je první či poslední stránka. Navigace může vést i na konkrétní měsíce či roky. Nebo uživatelé „scanují“ web ob více stránek (zde to nebylo, podívám se, co je na stránce páté, ne, tak to bylo dřív…)?

Zamyslete se, jak by měl stránkovač vypadat pro dva nejčastější případy užití, ale také si zkuste odpovědět na otázku, jak odnavigujete k cíli člověka s nestandardním požadavkem.

Můžete být kreativní v grafickém pojetí stránkovače – inspirací vám mohou být galerie. Ale nikdy ne na úkor použitelnosti a intuitivnosti. Ono vlastně stačí být kritickým uživatelem vlastní aplikace. Bohužel se zdá, že tímto citem disponuje jen malé procento vývojářů. Pokuste se ho u sebe probudit!

David Grudl školí, je autorem PHP knihoven Nette Framework, databázové vrstvy dibi a formátovače HTML kódu Texy!.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 97

Přehled komentářů

honzamac Konečně
petr svestka Re: Konečně
JoshB videacesky.cz
pixy Zrcadlově?
Čavo Re: Zrcadlově?
Esonyx Re: Zrcadlově?
Martin Malý Re: Zrcadlově?
heptau Re: Zrcadlově?
Petr Staníček Re: Zrcadlově?
David Grudl Re: Zrcadlově?
Roj Re: Zrcadlově?
josefrichter Re: Zrcadlově?
Mem_ Re: Zrcadlově?
josefrichter Re: Zrcadlově?
Mem_ Re: Zrcadlově?
Miroslav Kucera Re: Zrcadlově?
josefrichter Re: Zrcadlově?
em Re: Zrcadlově? Představa
Miroslav Kucera Re: Zrcadlově?
zyryxy Re: Zrcadlově?
David Grudl Re: Zrcadlově?
zyryxy Re: Zrcadlově?
David Grudl Re: Zrcadlově?
zyryxy Re: Zrcadlově?
Martin Malý Re: Zrcadlově?
Aichi Re: Zrcadlově?
kesspess Re: Zrcadlově?
v6ak Původ
neřheknu Re: Původ
em Re: Zrcadlově?
Lokutus Re: Zrcadlově?
em Re: Zrcadlově?
vlczak Re: Zrcadlově?
ronysk Re: Zrcadlově?
Miroslav Kucera Re: Zrcadlově?
František Kučera Re: Zrcadlově?
jan.hridel Re: Zrcadlově?
doublej Re: Zrcadlově?
oMicrone Re: Zrcadlově?
Pavel Růžička Re: Zrcadlově?
Arcao Re: Zrcadlově?
jehovista nechybi tam jeden bod, proc je strankovani dulezite?
Roman Mátyus Re: nechybi tam jeden bod, proc je strankovani dulezite?
Martin Malý Re: nechybi tam jeden bod, proc je strankovani dulezite?
Mem_ Re: nechybi tam jeden bod, proc je strankovani dulezite?
Mem_ Pěkné, ale neúplné
David Grudl Re: Pěkné, ale neúplné
Mem_ Re: Pěkné, ale neúplné
Karel Re: Pěkné, ale neúplné
František Kučera Re: Pěkné, ale neúplné
Jirka P Re: Pěkné, ale neúplné
Mem_ ad Klaboseni.cz
ronysk moj clanok ku strankovaniu
František Kučera Re: moj clanok ku strankovaniu
Mem_ ad starší/novější články
Vojtech Vondra Nejznamejsi 'strankovani'
Mem_ Re: Nejznamejsi 'strankovani'
imploder datumy místo čísel
František Kučera Re: datumy místo čísel
LukasUXD Náhled do 21.století
František Kučera Re: Náhled do 21.století
paranoiq inteligentní stránkování v milionech záznamů
Michal Wiglasz Re: inteligentní stránkování v milionech záznamů
paranoiq Re: inteligentní stránkování v milionech záznamů
Michal Re: inteligentní stránkování v milionech záznamů
paranoiq Re: inteligentní stránkování v milionech záznamů
REMET Re: inteligentní stránkování v milionech záznamů
JS strankovani nesnasim
knedle s nástupem tabletů a čteček
petasan Jak je to vlastně s tím SEO? Na co si dát pozor?
Michal Wiglasz Re: Jak je to vlastně s tím SEO? Na co si dát pozor?
josefrichter Re: Jak je to vlastně s tím SEO? Na co si dát pozor?
Jan Hommer Re: Jak je to vlastně s tím SEO? Na co si dát pozor?
kozakr Moje stránkování
REMET Re: Moje stránkování
Sten Stránkování ve fórech
HejTi Stránkování není jen číselné
David Grudl Re: Stránkování není jen číselné
HejTi Re: Stránkování není jen číselné
Radek Vpravo starší
David Grudl Starší jen vpravo? To rozhodně ne!
josefrichter Re: Starší jen vpravo? To rozhodně ne!
Radek Hulán Re: Starší jen vpravo? To rozhodně ne!
František Kučera Re: Starší jen vpravo? To rozhodně ne!
Miroslav Kucera Dale = doprava
MilanK A co to vynechat úplně
Radek Re: A co to vynechat úplně
josefrichter Re: A co to vynechat úplně
Good Samaritan Pevná pozice odkazů "předchozí" a "další" na obrazovce
^look Víc článků o UI a použitelnosti obecně
Finta Podľa zoradenia zaznamov
Šaman stránkování seriálů
mtmr vimperator
Aleš VisualPaginator
Hellish Všichni máte pravdu :)
Ondrej Stránkování nebrat... just my opinion
Martin Malý Re: Stránkování nebrat... just my opinion
Zdroj: https://www.zdrojak.cz/?p=3407