+ 381 64 17 39 157 office@cyclopdesign.com

Beskonačno skrolovanje, Paginacija ili “Učitaj još” dugme?

Koji je najbolji UX šablon za prikazivanje proizvoda na ecommerce sajtovima – paginacija, beskonačno skrolovanje ili “učitaj još” dugme? Testirali smo ova tri načina za učitavanje proizvoda, kako na desktop uređajima, tako i na telefonima?

Paginacija je i dalje najomiljeniji način za prikazivanje novih proizvoda na sajtu i podrazumeva se na svakoj e-commerce platformi. Svakako naše istraživanje je pokazalo da je “load more” dugme u kombinaciji sa lazy loadingom rezultira najboljim korisničkim iskustvom. Beskonačno skrolovanje može biti nezgodno, zbog mobilnog telefona naročito. Međutim, nije sve tako crno i belo, jer pojavljivanje svakog metoda zavisi od konteksta stranice.

 

Zaključci testa

Tokom našeg obimnog istraživanja funkcionalnosti ecommerce sajtova, liste proizvoda i filtera, nekoliko test parametara su protiv paginacije. Paginacija je spora i ume obeshrabriti korisnika za dalje pretraživanje liste proizvoda. Kao rezultat, kod paginacije korisnici provode mnogo više vremena na prvoj strani nego na ostalima, za razliku od “load more” dugmeta ili lazy loada.

 

 

izrada-web-sajta-pagination1

 

Beskonačno skrolovanje ponekad rezultuje beskrajnim očitavanjem, korisnik se bolje upoznaje sa stranicom, ali uz mogućnost očitavanja stotine i stotine proizvoda. Ukoliko je dobro implementirano, skrolovanje može biti dobro korisničko iskustvo. Korisnik može samo skrolovati kroz proizvode, bez mnogo zadržavanja i prekidanja. Nije potrebna interakcija, proizvodi se samo pojavljuju, kako se skroluje stranica.U ovom slučaju, beskonačno skrolovanje je dobro ukoliko nemate mnogo proizvoda, ali pošto korisnici nisu privrženi skrolovanju, proizvodi će im samo primicati bez fokusiranja na iste.

 

izrada-web-sajta-pagination2

 

 

 

Beskonačno skrolovanje otežava pristup korisnika footeru u nekim sajtovima. Ovo je jedna od najvećih mana benskonačnog skrolovanja. Rezultati se stalno učitavaju, korisnik se približava dnu liste, korisnik će videti footer na sekundu do novih rezultata. Ovo može biti problematično jer se u footeru često nalaze neki ključni linkovi, navigacija, kategorije ili kontakt podaci.

Na nekim sajtovima smo testirali “load more” dugme. Samo 8% vodećih ecommerce sajtova koristi ovo dugme. Ovo dugme je jednostavno za dizajn, neće zbuniti korisnika i kao takvo čini jednostavan interfejs. Korisnik vidi više proizvoda ukoliko sajt sadrži “load more” dugme, nego recimo ukoliko sadrži paginaciju. Zbog aktivne interakcije sa korisnikom (što nije slučaj sa beskonačnim skrolovanjem), korisnik će čitati sadržaj, upoznati se sa proizvodima i dobiti više informacija.

 

izrada-web-sajta-pagination3

 

 

izrada-web-sajta-pagination4

 

Jedna od prednosti “load more” dugmeta je ta da se lista proizvoda povećava, umesto što rezultati bivaju zamenjeni kao kod paginacije. Tako korisnici mogu upoređivati proizvode na celoj listi.

Pa, koji metod onda treba koristiti? Idelno bi bilo korišćenje više kombinacija “load more” funkcionalnosti. Testiranje je pokazalo da nijedan metod nije savršen. Napravićemo neke varijante i podeliti sa vama u nastavku teksta:

  • Za kategorije – kombinacija “load more” i lazy loadinga.
  • Za pretragu “load more”, dodatak broja prikazanih rezultata bi bio idealan.
  • Na mobilnim telefonima “load more”, ali podrazumevano, učitavajte manje proizvoda.

“Load More” za kategorije

U našem istraživanju na ecommerce sajtovima, pronađli smo optimalno rešenje za učitavanje novih proizvoda u kategorijama. “Load more” u kombinaciji sa lazy loadingom ima za cilj prikazivanje dodatnih proizvoda. Prikažite 10 – 30 proizvoda inicijalno, onda lazy loadom dodajte još 30 proizvoda, onda dodajte “load more” dugme. Ovo dugme pokazuje kada treba prekinuti korisnika i na taj način redukuje vreme i resurse na serveru.

Primetićete da je broj proizvoda za učitavanje ograničava. Testovi pokazuju da idelan broj proizvoda zavisi od konteksta sajta i industrije. Za liste sa specifičnim proizvodima (hardver, elektronika) koristite manje proizvoda. Istraživanja su pokazala da korisnici mogu učitavati više proizvoda ukoliko imaju više vizuelnih elemenata.

 

izrada-web-sajta-pagination5

 

Na ovaj način stranice se brže učitavaju jer veoma malo broj proizvoda se u početku očitavaju. Što je još važnije za male i srednje kategorije, lazy loading će obezbediti korisniku pretragu korisnika bez prekidanja. Za duže liste, korisniku će koristiti “load more” dugme, koje čini listu lakšom za nastavak pretraživanja i daje korisnicima lak pristup footeru i daje im trenutak za razmatranje filtera koji su bolji od kontinuiranog skrolovanja kroz stotinu proizvoda.

Slabosti lazy loadinga i beskonačnog skrolovanja su konstantno povećavanje kapaciteta stranice, što povećava vreme učitavanja. Ukoliko korisnik skroluje do dna, videće footer, ali će se očitavati proizvodi. Novi proizvodi će se pojaviti na listi, footer će nestati. Sa kombinacijom “load more” dugmeta, dobićete pauzu i ograničenje za lazy load. Takođe, korisnik u svakom trenutku vidi footer i ima mu pristup. Lazy load će nastaviti da očitava proizvode, samo će postojati prazan prostor na dnu stranice.

“Load more” za rezultate pretrage

Zbog otvorenosti pretrage potrebno je imati više rezultata od kategorija. U našem testiranju korisnosti, stotine rezultata pretrage nisu redak prizor, a na masovnim ecommerce sajtovima, upiti za pretragu često vraćaju hiljade rezultata.

Rezultati su takođe poređani po značaju. Dakle peti rezultat pretrate je obično važniji korisniku od desetog rezultata. To znači da bi korisnici otpočetka trebalo da istražuju rezultate pretrage, ali ih treba ohrabriti da provere više rezultata. Beskonačan skroling nikad ne bi trebalo koristiti za rezultate pretrage upravo zbog ovoga. Ukoliko ima manje rezultata pretrage, onda se može upotrebiti lazy loading.

 

izrada-web-sajta-pagination6

 

 

 

Da bi se stvari prešle na viši nivo, broj proizvida može da se dinamički prilagođava na osnovu relevantnosti rezultata pretraživanja. Većina pretraživača će rangirati svaki rezultat sa relevantnošću i vratiti proizvode po prioritetu.

 

“Load more” dugmići na mobilnim telefonima

 

izrada-web-sajta-pagination7

 

izrada-web-sajta-pagination8

 

U našem istraživanjima, koristili smo i mobilne sajtove. Došli smo do zaključka da paginacija može biti teška za kliktanje na mobilnim uređajima. U međuvremenu, beskonačno očitavanje je efektno kada je potrebno pretražiti mali broj elemenata. Međutim, kao što smo već pomenuli, teško je pristupiti footeru u kome se nalaze bitni linkovi kao što su “desktop site”, “Faq” ili “Dostava”.

 

izrada-web-sajta-pagination9

 

Najbolja solucija je da imate jedno “load more” dugme na kraju liste proizvoda. Mobilna tehnologija ima nekoliko jedinstvenih ograničenja:

  • Manji je ekran – Zato što je mobilni ekran mnogo manji, elementi liste će zauzeti veliki deo ekrana, sa dva ili tri elemenata koja će se videti u listi. Svakako 50 elemenata bi zauzelo veliki prostor na ekranu mobilnog telefona. Zato moramo da skrolujemo mnogo više na mobilnom uređaju nego na desktop računaru.
  • Ograničenja skrolinga – Na touch ekranu korisnik može skrolovati samo prevlačenjem prsta. Kontrast sa desktop računarom gde korisnik tipično ima nekoliko mogućnosti za skrolovanje, kao uz pomoć miša, tastature.
  • Sporo skrolovanje – Osim toga u našim testovima pokazana je manja kontrola na pomeranjem liste proizvoda. S jedne strane, neki korisnici skroluju isuviše sporo prevlačenjem prstiju preko ekrana. Isto tako, neki korisnici će skrolovati brže i propustiti proizvode na taj način.
  • Java Script događaji – Java Script događaji mogu biti izostavljeni na nekim ekranima na dodir, što znači da je lazy load ne može biti dobro realizovan. S toga proizvodi ne mogu biti učitani dok korisnik ne zaustavi skrolovanje.

Zbog ovih razloga preporučujemo vam učitavanje 15 – 30 proizvoda na mobilnim ekranima pre nego što postavite “load more” dugme i onda očitajte proizvode odjednom.

Back dugme

Tokom testiranja posmatramo tehničku implementaciju učitavanja nove stranice i očekivanja korisnika prilikom očitavanja stranice. Dinamičko učitavanje sadržaja kao što su pop up prozori, filteri i ostali elementi često utiču na očekivanja korisnika kako dugmići rade.

“Load more” metod zahteva pažljivo razmatranje ponašanja “back” dugmeta. Važno je kada korisnik poseti određenu stranicu proizvoda, da se vrati na isto mesto nakon toga. Izostanak back dugmeta je greška, jer sprečava korisnikov povratak sa stranice proizvoda na stranicu liste proizvoda.

 

izrada-web-sajta-pagination10

 

izrada-web-sajta-pagination11

 

izrada-web-sajta-pagination12

 

HTML API istorijat omogućava nam da zadovoljimo očekivanja korisnika. Pogotovo zato što history.pushState() funkcija pomaže u pozivanju promene URLa bez ponovnog učitavanja stranice, tako odgovara ponašanju back dugmeta shodno očekivanjima korisnika. Imajte na umu da ako nemate tehničke resurse da podrže odgovarajuće ponašanje back dugmeta, preporučujemo vam da ne eksperimentišete sa lazy loadom, već da se držite standardne paginacije.

 

“Load More” ne bi trebalo da bude prioritet

Iako je debata”Load More” vs “Beskonačno učitavanje” u odnosu na paginaciju, aktuelna godinama, metod učitavanja proizvoda ne bi trebalo da bude prva stvar koju većina ecommerce sajtova implementira.

Tokom istraživanja smo dokumentovali dosta ozbiljnih UX problema na većini ecommerce sajtova.

Sve ovo ne znači da je lazy load loš. Primetili smo da se može promeniti vidljivost i informacije o proizvodima. Ne treba biti na vrhu liste promena ubacivanje ovog dugmeta, ali bi ovo dugme svakako poboljšalo korisničko iskustvo.

 

“Load more” protiv “paginacije”

Ukratko “load more” dugme rešava probleme koje prouzrokuje paginacija. Sa druge strane kombinacija lazy loadinga i load more dugmeta se čini kao pravilan izbor.

Međutim “Load More” tasteri rade posao bolje samo kada je problem sa “back” dugmetom rešen u pretraživaču. Navešćemo tri situacije za korišćenje ovih elemenata:

  • Za kategorije koristiti kombinaciju “load more” dugmeta i lazy loadinga. Neka maksimalan broj proizvoda kada će se pojaviti dugme “load more” bude 50 – 100.
  • Za rezultate pretrage, koristite “load more” dugme, ali podesite prag prikazivanja rezultata na 25 – 75.
  • Na mobilnim uređajima, koristite “load more” ali podesite prag prikazivanja na 15 – 30.

U pravu ste. Poruke vam nisu neophodne

Kada ste dizajner, programer ili menadžer projekta, logično je da provodite dosta vremena u razgovoru sa klijentima o poslovnim ciljevima i o tome kako dizajnerski tim može pomoći u ispunjenju tih ciljeva. Kada je reč o slanju poruka, može se doći do zaključka da poruke nisu prioritet.

“Marketing tim ih ne koristi”

“Dizajn tim razume proizvod bolje od ikoga”

“Sve što dođe do nas – doćiće do brenda”

“Razumemo naše korisnike i ono što je njima bitno”

“Nije nam potrebno slanje poruka”

Svako od ovih tvrđenja je tačno. Hiljade i hiljade marketing timova uspešno plasira svoj proizvoda bez slanja formalnih poruka. Slanje poruka nije nešto što vam je potrebno, već je nešto što bi valjalo želeti. Evo i zašto:

Iznenađenje

Proces razvoja poruka je nauka i umetnost. Češće, kada klijenti prođu kroz proces slanja poruka onda tim potvrđuje ono što se već zna, a otkriva neka nova iznenađenja kao što su – kako se auditorijum oseća, o čemu brine, šta ih zbunjuje. Poruke su često korisne za otkrivanje nijansi, koji će učiniti vaš marketing, kao i kompetan rad na projektu, još efikasnijim.

 

BurnOut

Interni tim koji je posvećen pisanju, obično poznaje dobro projekat. I piše o njemu, svo vreme. Ono što može biti problem je ponavljanje poruka, pošto eventualno pisanje o nekom proizvodu nekoliko puta može izazvati zasićenje kod korisnika i dosadu. Čak i najboljim marketinškim ekspertima je teško iznova i iznova da pišu o istim proizvodima, na novi način, iz drugog ugla i da tako animiraju auditorijum i svoj sadržaj učine zanimljivim. U tim situacijama je potrebno imati dokument koji definiše prioritete u pisanju poruka, ključne tačke koje će pomoći svima da vaš auditorijum u svakom trenutku dobije najbitnije informacije.

 

Harmonija

Među kreativnim radnicima često može da se čuje fraza “Najbolje je pevati pesme iz iste pesmarice”. Postoji mnogo alata u svetu agencija – kreativni brief-ovi, wireframe-ovi, dashboard-ovi, koji omogućavaju da se tim fokusira na ono što je bitno za klijente. Ti alati predstavljaju tu pesmaricu koja hipotetičkoj muzici daje sklad, ton i ritam. Bilo da li imate više kreativnih timova, podeljenih po regionima, bilo da postoji kanal za komunikaciju (web sajt, društvene mreže), dokument o porukama osigurava da vi i vaš tim i agencije koriste isti zajednički jezik, istu dokumentaciju, tj. da metaforički pevaju iz iste pesmarice.

Poruke nisu proizvod. Poruke su više proces. Vežba u strategiji informisanja i animiranja publike i auditorijuma može uticati na vaš marketing i učiniti ga efikasnijim i efektnijim. Nadamo se da će vam ovaj tekst približiti ovu marketinčku aktivnost i naterati na razmišljanje da li vam je neophodno slanje poruka i da li to želite.

Pin It on Pinterest