SlideShare una empresa de Scribd logo
1 de 36
Descargar para leer sin conexión
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


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



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

                                             tumblr.agenerousdesigner.com




              Beíró mezőben jelenik meg az
              oldalszám, ami átírható.
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.



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




                                    google.com/images
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.
                                                       URL paraméterrel
                                                       adott “oldalhoz”
                                                       vagy elemhez
                                                       ugrás




                                         curioos.com
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

Más contenido relacionado

Destacado

Feszítsd túl a húrt (IH 2013)
Feszítsd túl a húrt (IH 2013)Feszítsd túl a húrt (IH 2013)
Feszítsd túl a húrt (IH 2013)Csaba Varga
 
Kártyarendezés a gyakorlatban - esettanulmányok
Kártyarendezés a gyakorlatban - esettanulmányokKártyarendezés a gyakorlatban - esettanulmányok
Kártyarendezés a gyakorlatban - esettanulmányokCsaba Varga
 
Civilek az interneten
Civilek az internetenCivilek az interneten
Civilek az internetenCsaba Varga
 
Mobile UX: What to look for in 2014
Mobile UX: What to look for in 2014Mobile UX: What to look for in 2014
Mobile UX: What to look for in 2014Thomas Fogarasy
 
Boosting Brands with UX Design
Boosting Brands with UX DesignBoosting Brands with UX Design
Boosting Brands with UX DesignThomas Fogarasy
 
Mi az a UX (és hogy kell megdizájnolni)?
Mi az a UX (és hogy kell megdizájnolni)?Mi az a UX (és hogy kell megdizájnolni)?
Mi az a UX (és hogy kell megdizájnolni)?Zoltan Kollin
 
Web Development on Web Project Report
Web Development on Web Project ReportWeb Development on Web Project Report
Web Development on Web Project ReportMilind Gokhale
 

Destacado (7)

Feszítsd túl a húrt (IH 2013)
Feszítsd túl a húrt (IH 2013)Feszítsd túl a húrt (IH 2013)
Feszítsd túl a húrt (IH 2013)
 
Kártyarendezés a gyakorlatban - esettanulmányok
Kártyarendezés a gyakorlatban - esettanulmányokKártyarendezés a gyakorlatban - esettanulmányok
Kártyarendezés a gyakorlatban - esettanulmányok
 
Civilek az interneten
Civilek az internetenCivilek az interneten
Civilek az interneten
 
Mobile UX: What to look for in 2014
Mobile UX: What to look for in 2014Mobile UX: What to look for in 2014
Mobile UX: What to look for in 2014
 
Boosting Brands with UX Design
Boosting Brands with UX DesignBoosting Brands with UX Design
Boosting Brands with UX Design
 
Mi az a UX (és hogy kell megdizájnolni)?
Mi az a UX (és hogy kell megdizájnolni)?Mi az a UX (és hogy kell megdizájnolni)?
Mi az a UX (és hogy kell megdizájnolni)?
 
Web Development on Web Project Report
Web Development on Web Project ReportWeb Development on Web Project Report
Web Development on Web Project Report
 

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

  • 1. Ami a speckóból kimarad #2 Pagination Varga Csaba
  • 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”.
  • 14. Ideális verzió A legjobb szinte mindig a legegyszerűbb. Egy ideális összeállítás:
  • 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.
  • 20. Tippek még •  Odalakra törés, de a szimantika mutatása is egyben. datnarrenschip.nl
  • 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
  • 26. Mikor használjuk? •  Ha nem akarjuk megtörni a folytonosságot pinterest.com
  • 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. Megoldandó problémák •  Legyen egyértelmű, amikor újratöltés történik. vimeo.com
  • 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. Megoldandó problémák •  Mennyi van még hátra? Az oldal végtelen, de ez kényelmetlenné válhat. flickriver.com
  • 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