O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

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

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 36 Anúncio

Mais Conteúdo rRelacionado

Anúncio

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

  1. 1. Ami a speckóból kimarad #2 Pagination Varga Csaba
  2. 2. PAGINATION Definí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 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. 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. 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
  7. 7. LAPOZÓS PAGINATION Elemek, használat, inspirációk
  8. 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. 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. 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. 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 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. 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”.
  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ó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. 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 SCROLL Mikor, 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

×