Ami a speckóból kimarad #2: Pagination

937 views

Published on

Elhangzott a Frontend Meetup Budapesten, 2012. március 28-án.

Published in: Technology
3 Comments
4 Likes
Statistics
Notes
No Downloads
Views
Total views
937
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
20
Comments
3
Likes
4
Embeds 0
No embeds

No notes for slide

Ami a speckóból kimarad #2: Pagination

  1. 1. Ami a speckóból kimarad #2 Pagination Varga Csaba
  2. 2. PAGINATIONDefiníció, alapok, típusok
  3. 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. 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 alapozó csak az interfész, amelyet navigációra használunk aklasszikus megoldás esetében.Ebből következik:A lapozó nem minden pagination megoldás kelléke.
  5. 5. Pagination típusai1.  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. 6. Pagination típusai2.  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 meg3.  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
  7. 7. LAPOZÓS PAGINATIONElemek, használat, inspirációk
  8. 8. Elemei Hol áll most Hova mehet továbbTippek:•  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. 9. Elemei Előző oldalra lépés Következő oldalra lépésTippek:•  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. 10. ElemeiElső oldalra lépés Utolsó oldalra lépésTippek:•  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. 11. Elemei Összesen hány elem van a listában Ebből hány (és melyek) láthatóak az aktuális oldalon
  12. 12. Elemei Hány elem jelenjen meg egy oldalonTipp:•  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. 13. Elemei Mi legyen a rendezés szempontjaTipp:•  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”.
  14. 14. Ideális verzióA legjobb szinte mindig a legegyszerűbb.Egy ideális összeállítás:
  15. 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. 16. Mikor használjuk?•  Ha szemantikusan van értelme. Tagolás időrendi egységek szerint facebook.com
  17. 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. 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óljön, mert a user belegondolhat: “Tényleg lapozni kéne? Vagy inkább akereső kifejezést vagy a szűrési feltételeket módosítani.”
  19. 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.
  20. 20. Tippek még•  Odalakra törés, de a szimantika mutatása is egyben. datnarrenschip.nl
  21. 21. Tippek még•  Első oldal ellapozása lehet más mint a további oldalaké. theverge.com
  22. 22. Tippek még•  Első oldal ellapozása lehet más mint a további oldalaké. kultblog.hu
  23. 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. 24. Tippek még•  Összes oldalszám saját scrollal. Inkább érdekes/kreatív mint jó. dirty.ru thestrangeattractor.net
  25. 25. CONTINUOUS SCROLLMikor, hova, hogyan
  26. 26. Mikor használjuk?•  Ha nem akarjuk megtörni a folytonosságot pinterest.com
  27. 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
  28. 28. Megoldandó problémák•  Legyen egyértelmű, amikor újratöltés történik. vimeo.com
  29. 29. Megoldandó problémák•  Deep linkelés: “oldalak” közvetlen elérése. URL paraméterrel adott “oldalhoz” vagy elemhez ugrás curioos.com
  30. 30. Megoldandó problémák•  Mennyi van még hátra? Az oldal végtelen, de ez kényelmetlenné válhat. flickriver.com
  31. 31. Megoldandó problémák•  Nem érhető el a footer. curioos.com Ikonra kattintva úszik be alulról egy floating footer.
  32. 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. 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. 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. 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. 36. Köszi a figyelmet! Varga Csaba cs.varga@mito.hu UX Fetish uxfetish.com

×