Stránkujeme smysluplně...?

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:

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ů:

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:

…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.

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:

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.

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!