Ami a speckóból kimarad #2 Pagination

Varga Csaba

PAGINATION Definíció, alapok, típusok

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

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.

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

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

LAPOZÓS PAGINATION Elemek, használat, inspirációk

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

Elemei

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.

Előző oldalra lépés Következő oldalra lépés

Elemei

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.

Első oldalra lépés Utolsó oldalra lépés

Elemei

Összesen hány elem van a listában

Ebből hány (és melyek) láthatóak az aktuális oldalon

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.

Elemei

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

Mi legyen a rendezés szempontja

Ideális verzió A legjobb szinte mindig a legegyszerűbb.

Egy ideális összeállítás:

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

Mikor használjuk? •  Ha szemantikusan van értelme.

Tagolás időrendi egységek szerint

facebook.com

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.

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

Tippek még •  Ha lehet, legyen “view all” verzió.

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

wired.com

Tippek még •  Odalakra törés, de a szimantika mutatása is egyben.

datnarrenschip.nl

Tippek még •  Első oldal ellapozása lehet más mint a további oldalaké.

theverge.com

Tippek még •  Első oldal ellapozása lehet más mint a további oldalaké.

kultblog.hu

Tippek még •  Ugorhat a user konkrét oldalra. Legtöbb esetben overkill.

Beíró mezőben jelenik meg az oldalszám, ami átírható.

tumblr.agenerousdesigner.com

Tippek még •  Összes oldalszám saját scrollal. Inkább érdekes/kreatív mint jó.

dirty.ru

thestrangeattractor.net

CONTINUOUS SCROLL Mikor, hova, hogyan

Mikor használjuk? •  Ha nem akarjuk megtörni a folytonosságot

pinterest.com

Megoldandó problémák •  Legyen referenciapont a “végtelen” oldalon belül, ami

alapján visszatalálhatok egy adott részhez.

google.com/images

Tagolás jelzése az újratöltések között.

Megoldandó problémák •  Legyen egyértelmű, amikor újratöltés történik.

vimeo.com

Megoldandó problémák •  Deep linkelés: “oldalak” közvetlen elérése.

curioos.com

URL paraméterrel adott “oldalhoz” vagy elemhez ugrás

Megoldandó problémák •  Mennyi van még hátra? Az oldal végtelen, de ez kényelmetlenné válhat.

flickriver.com

Megoldandó problémák •  Nem érhető el a footer.

curioos.com

Ikonra kattintva úszik be alulról egy floating footer.

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.

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.

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

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

Köszi a figyelmet!

Varga Csaba cs.varga@mito.hu

UX Fetish uxfetish.com