3. Mi az a pagination?
• Probléma: túl sok az információ ahhoz, hogy mindent egy
oldalon jelenítsünk meg. (Technikai és kognitív limitáció.)
• Klasszikus megoldás: az információt csoportokra bontjuk,
és ezeket oldalak sorozataként jelenítjük meg. Az oldalak
közötti léptetéshez megfelelő navigációs interfészt
biztosítunk.
• Modern megoldás: az információból egyszerre csak egy
értelmezhető egységnyit jelenítünk meg, majd igény
esetén jelenítjük meg a további egységeket. (Ez lefedi a
folytonosan, oldaltörés nélkül megjelenő tartalmakat is.)
4. Pagination vs. lapozó
Mi a különbség pagination és lapozó között?
A pagination alapvetően a megoldás a problémára, míg a
lapozó csak az interfész, amelyet navigációra használunk a
klasszikus megoldás esetében.
Ebből következik:
A lapozó nem minden pagination megoldás kelléke.
5. Pagination típusai
1. Nincs pagination:
• Minden egy oldalon jelenik meg
• A legegyszerűbb megoldás gyakran a legjobb
• Főleg olyan tartalmaknál érdemes megfontolni, ahol
relevancia alapú a lista (pl. keresők)
“Ha nincsenek jó találatok már az 1. oldalon, igazából
mindegy is, milyen lapozást használsz, mert úgysem
leszel már sokáig a piacon.” Jeff Atwood
6. Pagination típusai
2. Lapozós:
• Klasszikus megoldás
• Információt oldalak sorozataként jelenítjük meg
• Oldalak közötti navigációhoz interfész jelenik meg
3. Continuous scroll:
• Újfajta megoldás (AJAX népszerűsödése óta)
• Információt egy összefüggő folyamként jelenítjük meg
• Egyszerre egy adag információ jelenik meg, majd interakcióra további
elemek töltődnek be
• Elvi probléma: ha csak technikai megoldás, akkor nem pagination
8. Elemei
Hol áll most Hova mehet tovább
Tippek:
• Külön formázása legyen az aktuális állásnak (nem kattintható),
a oldalszám linkeknek és a hover állapotnak.
• Ami kattintható, az legyen kényelmes, nagy felület.
• Progressive disclosure: nem az összes oldalszám látható
egyszerre, csak az aktuálistól bizonyos lépésnyire lévők.
(Nielsen kereső találati oldalakra pl. azt mondja, 3 oldal elég is.)
9. Elemei
Előző oldalra lépés Következő oldalra lépés
Tippek:
• Ami nem releváns, az akár meg se jelenjen, de minimum legyen
inaktív, láthatóan nem kattintható.
• “Előző” és “következő” helyett néha jobb a rendezés szempontja
szerint értelmes szövegezés. Pl. kronologikus listánál “újabbak” és
“régebbiek”.
• Ha lehet, legyen fix pozíciója az előző/következő linkeknek, hogy az
oldalszámok változásával ne kelljen a usernek mindig újra céloznia.
10. Elemei
Első oldalra lépés Utolsó oldalra lépés
Tippek:
• Utolsó oldalra csak akkor linkelj, ha tényleg van értelme. Ezt a
rendezés szempontja dönti el. Pl. relevancia alapú listáknál az
utolsó oldal irreleváns; ABC vagy kronológiai listáknál releváns.
• Ami nem releváns, az akár meg se jelenjen, de minimum
legyen inaktív, láthatóan nem kattintható.
• Utolsó oldal linkje lehet az utolsó oldalszám megjelenítése.
11. Elemei
Összesen hány elem van
a listában
Ebből hány (és melyek)
láthatóak az aktuális oldalon
12. Elemei
Hány elem jelenjen meg
egy oldalon
Tipp:
• Ha a user már nem az első oldalon áll, és ezt átállítja,
akkor oda kell érkeznie, ahova az új elemszám alapján az
aktuálisan megtekintett oldal tartalma kerül.
13. Elemei
Mi legyen a rendezés
szempontja
Tipp:
• A “növekvő” és “csökkenő” helyett inkább mutassuk
explicit az eredményt. Pl. alfabetikusan növekvő helyett
“A Z”, ár szerint növekvő helyett “drágák elöl”.
15. Mikor használjuk?
• Ha szemantikusan van értelme.
Az oldalak törését nem csak darabszám határozhatja meg, hanem
ennél sokkal értelmesebb szemantikus tagolás is.
Szöveges tartalom
fejezetekre bontása
prohardver.hu
16. Mikor használjuk?
• Ha szemantikusan van értelme.
Tagolás időrendi
egységek szerint
facebook.com
17. Mikor használjuk?
• Ha az elemek és oldalszámuk összefüggésbe hozható.
Google keresés közben
megjegyezhetem, hogy
melyik találat volt érdekes, és
az hányadik oldalon
szerepelt.
Tippek:
• Nem működik, ha nagyon sok elem van egy oldalon.
• Egy “felhasználói sessionön” kívül nem működik, ha az elemeknek
nincs fix helye (ergo nem deep linkelhetők az oldalak). Pl. fórumok.
• Hasznos lehet a már látogatott linkek eltérő jelölése.
18. Mikor használjuk?
• Ha jót tesz a felhasználói élménynek egy ütemszünet.
A lapozó megtöri a böngészés folytonosságát. De lehet, hogy épp jól
jön, mert a user belegondolhat: “Tényleg lapozni kéne? Vagy inkább a
kereső kifejezést vagy a szűrési feltételeket módosítani.”
19. Tippek még
• Ha lehet, legyen “view all” verzió.
wired.com
• Google szereti (hacsak nincs vele performancia
probléma), és előrébb helyezi a találati listában.
• Összes oldal canonicalja legyen a “view all”
• Lapozós oldalakon legyen rel=“next” és rel=“prev” link tag
De ha direkt kerülni akarjuk a “view all”-t, tegyünk rá noindex-et.
21. Tippek még
• Első oldal ellapozása lehet más mint a további oldalaké.
theverge.com
22. Tippek még
• Első oldal ellapozása lehet más mint a további oldalaké.
kultblog.hu
23. Tippek még
• Ugorhat a user konkrét oldalra. Legtöbb esetben overkill.
tumblr.agenerousdesigner.com
Beíró mezőben jelenik meg az
oldalszám, ami átírható.
24. Tippek még
• Összes oldalszám saját scrollal. Inkább érdekes/kreatív mint jó.
dirty.ru
thestrangeattractor.net
27. Megoldandó problémák
• Legyen referenciapont a “végtelen” oldalon belül, ami
alapján visszatalálhatok egy adott részhez.
Tagolás jelzése az
újratöltések között.
google.com/images
31. Megoldandó problémák
• Nem érhető el a footer.
curioos.com
Ikonra kattintva úszik be
alulról egy floating footer.
32. Megoldandó problémák
• Böngésző memória-használata.
Egyszerre csak bizonyos mennyiségű tartalom benntartása. Gördítés
iránya felé preload, visszafelé destroy.
• Keresőrobotoknak indexelhető oldallinkek.
Ha sehol nincs lapozó link, a spider nem tud min végigmenni. Legyen
alternatívaként hagyományos lapozási séma, akár csak kód szinten a
keresőknek.
33. Kapcsolódó funkciók
• Kereső: legyen jó és könnyen elérhető
A continuous scroll egy felfedezős, user flow-t jobban támogató élmény, de
nem alkalmas strukturált vagy tudatos információszerzésre. Emiatt megnő a
jelentősége a keresőnek, amivel célzottan lehet elérni ismert tartalmakat.
• Floating header
Mivel az oldal “végtelen” hosszúságúra nyúlhat, nagyon hosszúvá lehet az út
az oldal tetejéig. Emiatt különösen jó, ha a legfontosabb felső navigációs
elemek jönnek velünk.
Alternatíva lehet egy floating jump to top funkció.
• Show random vagy intelligens ajánló
Példa: egy on-demand movie site joggal gondolja, hogy az emberek csak
bóklásznak jó film után kutatva, megfelel a continuous scroll. De ha mindig
ugyanazon a listán kell keresztülbóklászni (pl. ABC-ben az elejétől), az
unalmas.
34. Tippek még
• Tötlési idő és “oldalak” közötti elválasztó kihasználása.
lookslikegooddesign.com
Töltés közben reklámot látunk, ami betöltés
után (szeparátorként) ott is marad
35. Tippek még
• Töltés szétbontása: a tartalmak helye szinte azonnal megjelenik,
majd a tartalom folyamatosan kerül a helyére.
curioos.com
36. Köszi a figyelmet!
Varga Csaba
cs.varga@mito.hu
UX Fetish
uxfetish.com