Detalji projekta bio&bio: Korisničko sučelje koje vole kupci, a ne samo Google (2. dio)

Vrijeme čitanja: 8 min
11. ožujak 2015.

Nakon što smo u prošlome članku pojasnili programerska rješenja osmišljena za poboljšanje postojećeg web shopa bio&bio, u ovom ćemo se članku dotaknuti onih vezanih uz vidljivi interaktivni dio.

Znate i sami, prvo iskustvo dolaska na novu web stranicu ili shop je najvažnije.
Na primjer, sjetite se onih stranica na koje kad dođete, prvo sve s njih blješti pa ne znate na što biste uopće kliknuli. Onda idete tražiti broj telefona da biste ih nazvali, no ni to ne možete naći. Nakon petominutne pretrage (ako ste uopće toliko izdržali), našli ste broj skroz na dnu stranice, na margini.

Zamislite si koliko je tek komplicirano kupovati u web shopu te stranice.
Biste li se vi "borili" s takvom stranicom kako bi kupili jedan proizvod? Sumnjamo. Otišli biste na drugi web shop ili u dućan u kvartu.

Eto, zaključak je jednostavan. Ako vi nikad ne biste kupovali u takvom web shopu, zašto bi netko drugi?
Kada kao vlasnik web shopa gledate na njegova optimalna rješenja, uvijek se sjetite sebe - kako biste vi reagirali?

O čemu je onda riječ u ovom članku?
Danas ćete čitati o funkcionalnoj strani dizajna da biste si predočili kako smo došli do dobrog korisničkog iskustva. Odnosno, kako smo u samo 30 dana pridonjeli povećanju konverzija za čak 50 posto.
(Konverzije su svi vaši ostvareni ciljevi koje kupci "odrade" na web stranici: popunjavanje prijave za newsletter, popunjavanje kontakt obrasca, kupnja proizvoda, "skidanje" e-booka i slično).

Pročitajte članak pažljivo i pokupite vrijedne Markerove prakse. ;)

Početna stranica

U kreiranju korisničkog sustava bio&bio web trgovine, vođeni smo jednim osnovnim ciljem: na naslovnoj stranici ponuditi one obrasce i pozive na akciju koji neće slati kupca na druge ili vanjske stranice. Točnije, radije će ih slati na konkretne akcije nakon kojih će doći do konverzija.
Što bi to značilo u praksi?

S naslovne stranice, kupac jednim klikom može učiniti gotovo sve:

  • dodati artikl u košaricu,
  • registrirati se,
  • postaviti pitanje,
  • pročitati članak o zdravoj prehrani,
  • pronaći recept za hranu koju će danas pripremiti obitelji,
  • pronaći adresu neke od bio&bio trgovina ili se
  • upisati na newsletter listu (...).

Nabrojene mogućnosti su samo neke. Ima toga još.
No, krenimo redom.

Mogućnost prijave s početne stranice

U bio&bio web shopu kupac se može prijaviti već s početne stranice, bez potrebe napuštanja iste, odnosno odlaska na neku drugu.
Time je u potpunosti pojednostavljen registracijski put.

I sami iz vlastitog iskustva znate koliko prezirete dugačke obrasce za registraciju. Njima se često od vas traže ne samo adresa i broj telefona, već i datum rođenja, u kojoj tvrtki radite, adresa tvrtke, zanimanje…
Dobro da vas još ne pitaju i ime vaše prve ljubavi i sadašnjeg kućnog ljubimca.
Nekada stvarno znaju pretjerati.
Naravno, sve kako bi prikupili što više podataka, a koje će kasnije koristiti za direktni marketing prema vama.

Podatke koje trebate kada želite precizno znati za koga pripremate svoju internet marketinšku kampanju s ciljem promocije brenda i poboljšanja prodaje prikupiti možete i drugim načinima.

Nemojte otjerati kupca već kod prvog susreta s vašim web shopom. Radije igrajte pametno i sve dodatne podatke koji su vam potrebni (i čime ne kršite prava privatnosti) tražite kasnije.

Dakle, pametno je registracijski obrazac ostaviti što jednostavnijim. Tu nema mjesta diplomatskom postavljanju stvari, kao što to vole raditi naši političari. Pa onda više ne znate gdje je glava, a gdje rep.
Važno je ići " u srž", kao što možete vidjeti iz bio&bio primjera.

biobio-račun

Brzi pregled košarice

Bio&bio web shop omiljen je među kupcima jer sve informacije možete dobiti u roku odmah. Na primjer, informaciju o trenutnim artiklima u košarici ili u podsjetniku kupac može dobiti već tako da mišom dođe na ikonu košarice ili podsjetnika (što je tipična lista želja).

brzi-pregled-košarice

Takav proces:

  • olakšava kupcu da provjeri stanje košarice ili
  • provjeri što sve ima u podsjetniku.

To pak za trgovca dugoročno znači da će više kupaca svoju košaru na blagajni u konačnici i naplatiti.

Stavi li kupac u košaricu više od tri artikla, na listi će se prikazati strelice za pregled ostalih onih koji nisu odmah vidljivi.

više-proizvoda-u-košarici-web-prodajaTako se kupcu jasno signalizira gdje može provjeriti sve što je dodao u košaru / podsjetnik bez potrebe "dokučivanja" gdje bi on sada trebao to provjeriti. Također, time se izbjegava stvaranja sumnje i nesigurnosti što je obično glavna prepreka kupcu prije konačne odluke hoće li kupiti željeni artikl.

Put do kupnje u bio&bio web shopu u potpunosti je skraćen te je moguće na blagajnu doći samo jednim klikom miša. To vam je kad hodate po cesti i ugledate poljski put kojim ćete znatno skratiti vrijeme dolaska na odredište. Naravno da ćete zakoračiti tim putom.

Manje klikova potrebnih do naplate u pravilu znači više naplaćenih narudžbi.
Općenito je problem kod web shopova da golem broj narudžbi ostaje nerealiziran (nenaplaćen). S manjim brojem klikova i koraka u checkout procesu svakako se pozitivno doprinosi procesu pretvaranja pune košare u naplaćenu košaru.
Uostalom, sigurno vam je jasno da se kupci ne vole zadržavati na stranici duže nego je potrebno.

Kao i svi mi, i kupci imaju svoje svakodnevne obaveze i probleme - žele što prije obaviti proces kupnje i posvetiti se drugim, važnijim stvarima.

 

Izbornik web shopa

Glavni izbornik može kupcima izazvati velike glavobolje, osobito kada web shop ima impozantan broj proizvoda, kao što to ima bio&bio.

Kod takvih velikih kataloga vrlo je važno razumljivo imenovati skupine proizvoda da ih kupci mogu vrlo lako pronaći.
Pogledajte kako su na bio&bio web shopu grupirani artikli za, na primjer, kategoriju "voće i povrće".

Kao što možete primjetiti, ovakvo grupiranje artikala u podkategorije nužno je zbog preglednosti.

Također, uzmimo u obzir da se ovdje koriste i "padajući izbornici" (o čemu ćemo nešto kasnije). Oni su u pravilu najbolje rješenje kada se treba kupcu prikazati velik broj različitih grupa proizvoda.

Sljedeće na što želimo skrenuti vašu pažnju su izdvojeni artikli na razini svake kategorije.

izdvojeni-artikli-na-razini-kategorije

Moguće je izdvojiti samo jedan artikl po kategoriji, no to je i više nego dovoljno da bio&bio svojim kupcima skrene pažnju na nove artikle ili one na akciji.

Dakako, ovo nije jedina mogućnost za skretanje pažnje na iste.

Već malo niže od izbornika je dio koji jasno prikazuje "Izdvojeno na vas".

Traka ispod glavnog izbornika

Ispod glavnog izbornika stavili smo specifičnu traku namjena.
Zapravo je riječ o prikazu listi gdje se grupiraju artikli koji su:

  • na akciji,
  • nanovo ubačeni u web shop,
  • grupirani prema određenim namjenama / prigodama.

Evo što to znači za kupca.
Bliži se Božić, Valentinovo, ljeto?
Trgovine bio&bio u nekim prigodama imaju sniženja za svoje vjerne kupce. U takvim slučajevima djelatnici bio&bio trgovina mogu kreirati jednu takvu listu i link liste "povući" u traku namjere. Tim načinom kupcima se diskretno sugerira da biste vašoj majci mogli za poklon kupiti tinkturu od gaveza ili Flašku. A možda ćete kupiti bio sastojke i vašoj ženi za Valentinovo složiti sjajnu tortu od čokolade.
Pogledajte primjer takve liste Novo u prodaji: Kernnel tinkture.     

kernnel-tintkure

                                                                                                  

Netipični "rotator"

Na početnoj stranici ponuđena su četiri teksta iz bio&bio blogova (bioBLOGija, recepti).
"Na prvu" kupac može pomisliti kako je riječ o tipičnom rotatoru (eng. slider), dakle o tome da se članci svakih nekoliko sekundi mijenjaju automatski.
No, ovdje nije tako.

rotator-biobio

U Markeru znamo da tipični rotatori ne pomažu povećanju web shop prodaje. Naime, istraživanja su pokazala da ljudi te izmjene članaka po principu na kojem rade rotatori gotovo uvijek ne primjećuju.
Sjetite se samo onih videa s YouTubea gdje se osoba nalazi u dućanu te joj se namjerno zamijeni proizvod koji joj je praktički "ispred nosa". Ili drugih sličnih videa o selektivnoj pažnji kada velika gorila pretrči kadrom, a vi je uopće niste primijetili jer ste bili fokusirani na nešto deseto.
Rijetki primjećuju promjene.

Naš drugi argument zašto se slider ne rotira automatski također proizlazi iz dosadašnje višegodišnje prakse.

  • Kako se ponašate kad nešto "guglate"?
  • Koliko često kod pretrage podataka prelazite na drugu, treću ili četvrtu stranicu?

Gotovo nikada, zar ne?

Praksa je pokazala da ljudi drugi članak na rotatoru čitaju jednako često koliko i drugu stranicu na Googleu.
Dakle, vrlo, vrlo rijetko.

Na izdvojenom primjeru bio&bio web trgovine, na slideru se prikazuju četiri teksta. Međutim, oni se ne izmijenjuju automatski kao na drugim web stranicama, već kupac da bi pročitao neki članak na njega treba kliknuti.
Naravno, programirani su tako da administrator može urediti svaki element zasebno kada god to poželi, a poredak tih članaka je i preporučljivo mijenjati tijekom vremena.
Sve u svrhu postizanja bolje konverzije.

Izdvojeni, akcijski i novi artikli

Kad je kupac u procesu kupnje, njemu se automatski određeni artikli pokazuju kao izdvojeni.
Riječ je o artiklima koji su:

  • na popustu (sticker "akcija") ili su
  • novi proizvodi (sticker "novo") - tu se prikazuju artikli koji su dodani na listu unutar tri tjedna.

izdvojeni-proizvodi

Pritisne li kupac naljepnicu "akcija", to će ga odvesti na stranicu artikla koji su na akciji.

Obratite pozornost na još jednu stvar - ikone za načine prikaza proizvoda.
Što pak to znači za kupca?

Ikone koje možete vidjeti za prikaz su sljedeće:

  • rešetka i
  • lista.

rešetke-liste-biobio

Izgledaju li vam poznato?

Sjetite se kad prebacujete fotografije s fotoaparata na vaše računalo. Praksa je da ih stavite u jednu mapu. Kad otvorite tu istu mapu, vi možete birati hoćete li fotografije pregledavati kao listu (jednu ispod druge) ili  kao rešetku, zar ne?
Isto je i s artiklima na bio&bio web shopu.

Zašto smo odabrali baš te dvije opcije?
Odgovor je naravno - praktičnost. Dok je rešetka bolja opcija za preglednost, lista je bolja opcija za pretraživanje proizvoda i "čitljivost".

Svi smo mi u neku ruku različiti, zar ne? Zašto onda kupcima ne bismo ponudili različite načine kojima mogu doći do informacija? No, oprez, od prevelikog izbora ponekad glava boli.

Integrirani blogovi

Na početnoj stranici izdvojeni su i bio&bio blogovi:

  • članci (bioBLOGija) i
  • recepti.

blogovi-biobio

Kad kupac klikne na prikazani recept, otvorit će mu se stranica, odnosno blog "Recepti".
To u praksi izgleda ovako.

blog-recepti

Kao što možete vidjeti na primjeru, ne samo da će vam se otvoriti recept na koji ste kliknuli, već tu ima još niz pogodnosti:

  • kraj recepta se nalazi info box s osnovnim podacima kao što su vrijeme potrebno za pripremu hrane, složenost recepta i popis sastojaka za recept,
  • prikazat će se ostali povezani recepti slični onome koji ste otvorili za čitanje,
  • prikazat će se i relevantne knjige, koje također možete kupiti preko bio&bio web shopa.

Ipak, više o integriranim blogovima bio&bio trgovina čitat ćete u idućem članku.

"Trgovine" umjesto "Kako do nas"

trgovine-biobio

Iduće rješenje na koje smo ponosni su izdvojene trgovine. Umjesto posebne stranice "Kako do nas", sve trgovine nalaze se popisane na jednome mjestu.
Jednim klikom na neku od trgovina otvara se prozor s podacima o toj trgovini - kontakt podacima, radnome vremenu, opisom lokacije i Google mapom.
Također je moguće vidjeti i fotografiju svake trgovine, kao na priloženom primjeru.

trgovine-biobio-popis

Koje su beneficije ovakvog predstavljanja trgovina?
Prije svega jednostavnost - kupci će "u treptaj oka" pronaći sve važne informacije o shopu koje traže. Također, takvo rješenje je pregledno, informacije su lako dostupne, ali ovo rješenje donosi još jedan bonus - stranica je bolje optimizirana za Google.

Podrška kupcima

Djelatnicima trgovina bio&bio jako je stalo do svojih kupaca. Tu svoju otvorenost prema kupcima pokazuju i na webu.
Cijeni se vjernost kupaca, postoji mogućnost prikupljanja bodova, postoji podsjetnik u koji kupac može ubaciti sve artikle koji ga zanimaju i slično.
Kao što je vidljivo iz primjera, dovoljno je samo jednom kliknuti na obrazac "Tko pita, ne skita!" ili pak nazvati besplatni telefon gdje će se javiti osoba koju mogu pitati ama baš sve što ih zanima.

podrška-klijentima

obrazac-za-podršku-kupcima

Takvi obrasci specifični su jer kupac ne treba ići na stranicu "Postavi nam pitanje" i tamo obrazac popunjavati nepotrebnim podacima.
Umjesto toga, obrazac mu je nadohvat ruke u znatno pojednostavljenoj formi.

Ima li web shop laku dostupnost "službe za podršku kupcima", to je jedan od važnijih znakova da je web shop "ozbiljan" (dakle, da nije riječ o prevari). Tako se lakše gradi i povjerenje kupac-prodavač, što je osnova da bi se kupac uopće odlučio na kupnju.

Partneri

Partneri su istaknuti ne samo na zasebnoj, već i na početnoj stranici web shopa jer bez njih ova velika i uspješna bio&bio priča ne bi mogla postojati. Ovdje se dakle ne radi samo o poslovnoj suradnji, već i o prijateljstvu s ljudima koji gaje iste strasti i interese.
Ovakvo isticanje često nije primjer na drugim web stranicama.

Klikom na jedan od tih boxeva, otvorit će se sljedeće:

  • web stranica za prijavu na neku od radionica o zdravoj prehrani (u organizaciji partnera),
  • preporuka knjige u izdanju prijatelja partnera ili
  • web stranica prijatelja partnera.

stranica-partneri-biobio

Klasični footer

Podnožje ili footer je "na prvu" dosta sličan tipičnim footerima. S njega je moguće doći na još neke bio&bio web stranice, tu možete pronaći kontakt podatke te načine plaćanja u web shopu.

footer-biobio

Ipak, istaknuli bismo tri stvari.
Prvo, u footeru se nalaze poslovne nagrade "Best Buy Award" zahvaljujući kojima kupac zna da se nalazi na web shopu koji je već izgradio povjerenje.

certifikati

Drugo, tu se nalaze ikone podržanih kartica za plaćanje kako bi kupac u startu znao može li karticom koju ima kupovati na ovom web shopu. Također, ovdje je spomenuti i benefit kratke dostave - za Zagreb istog dana, a za ostatak Hrvatske unutar tri radna dana.

sigurnosna-online-kupnja-biobio

Treće, ovdje se nalazi i newsletter. Logično je stavljen na sam "kraj" stranice jer kupac prvo treba vidjeti zanima li ga uopće sadržaj koji se nudi.

No, ono što je drugačije od ostalih takvih stranica je sljedeće - do upisa u newsletter moguće je doći na tri načina:

  • na dnu stranice (tipičan i najčešći primjer kod drugih stranica),

newsletter-prijava

  • prilikom registracije i
  • kad kupac dovrši kupovinu, točnije na stranici koja potvrđuje njegovu narudžbu.

Zašto čak tri načina?
Kupcima je potrebno u potpunosti olakšati svaki korak koji žele poduzeti.
U ovom primjeru, to bi značilo da kupac može do upisa u newsletter doći u samo jednom koraku. A zašto je to vama kao voditelju web shopa važno?

Pojednostavljeni odgovor glasi: više mogućnosti prijava na newsletter = više pretplatnika.

U potpunosti je pojednostavljen checkout

Checkout je, pojednostavljeno, mjesto gdje kupac plaća narudžbu.

Zanimljivo, baš u tom zadnjem koraku kupci najčešće odustaju od kupovine.
Mnogi su razlozi tome, no najčešći su:

  • sporost učitavanja stranice i
  • previše koraka u checkoutu prilikom kojih se traže nepotrebni (osobni) podaci kupca.

Upravo zato važno je i ovdje misliti na optimizaciju konverzija.

Vođeni dosadašnjim iskustvima, proces kupnje u bio&bio web shopu u potpunosti smo pojednostavili.
Kupac može kupovati na webu kao:

  • gost i
  • registrirani korisnik.

Ono što se ističe je sljedeće: čak i kod prve kupnje nije potrebna registracija kupca.

Zašto se ipak registrirati?
Ako se kupac registrira, samo će jednom trebati unijeti osnovne podatke potrebne za kupnju. Nakon toga, kod svake iduće kupnje automatski će preskočiti sve korake checkouta do onog trećeg (zadnjeg), čime će uštedjeti svoje vrijeme, ali i živce.
Ako ste ikad kupovali u web shopu, znate o čemu pričamo. ;)

Kao benefit možemo istaknuti i sljedeće:

  • mogućnost da kupac spremi više adresa dostave u svoj profil,
  • pristup prošlim narudžbama koje kupac lako može ponoviti,
  • vidljivi status loyalty bodova (bodovi koje prikupljaju redoviti kupci da bi kasnije ostvarili popust) i sl.

Stigli smo i do trećeg koraka gdje kupac, prije negoli klikne na "Potvrda i plaćanje", može provjeriti uvjete kupnje pomoću expandera. Riječ je o opciji "otvaranja" boxa s tekstom na istoj stranici.
Tim načinom kupac ostaje na stranici, odnosno ne šalje ga se nepotrebno izvan stranice. Dakle, nepotrebno se ne prekida proces kupnje.

uvjeti-kupnje-biobio

Plaćanje kreditnim karticama temelji se na povjerenju

Ponudili smo i zanimljivo rješenje po pitanju korištenja kreditnih kartica. Broj kartice se ne upisuje na stranici payment gatewaya, nego na samom shopu.

Naveli smo već više puta, glavna misao vodilja u "front end" rješenjima bila nam je da  kupac ne odlazi sa stranice u bilo kojem koraku procesa kupnje.
Važno je spomenuti da se kupac neće odlučiti na kupnju ukoliko mu prodavač ne dokaže da je njegova stranica sigurna. Dakle, jedna od glavnih zadaća trgovca je da svojim web shopom ostavi dojam sigurnosti kako bi ga kupci onda željeli i koristiti.

Kad već pričamo o karticama, spomenut ćemo još jednu stvar.
Kod unosa broja kartice u obrazac, implementirano je automatsko prepoznavanje kartica već nakon unosa prva tri broja.

placanje-karticama

Što to znači?
Kupac pri unosu broja kartice ne treba mućkati glavom radi li se o MasterCardu ili Visi ili nekoj trećoj kartici, što se prepoznaje u početnim brojevima računa. Sustav automatski prepoznaje o kojoj se kartici radi.

Obrazac o uspješno obavljenoj narudžbi

Kao što vidite iz priloženog primjera, "thank you page" izradili smo također s ciljem što većeg boosta potencijalnih konverzija.

obrazac-o-uspješno-zapljimljenoj-narudžbi

Nekoliko osnovnih značajki ove stranice važnih za povećanje konverzija jesu:

  • jasno iskazani benefit koji potiče kupca na akciju (10 posto popusta na sljedeću kupovinu),
  • u potpunosti pojednostavljeni obrazac registracije bez traženja nepotrebnih (osobnih) podataka,
  • mogućnost davanja feedbacka što se također nagrađuje benefitom (kupon za popust) te
  • mogućnost pretplate na newsletter.

Ono na što svakako ovdje treba skrenuti pažnju je i to da su sve pogodnosti navedene jedne ispod drugih, odnosno, radi lakšeg praćenja teksta koristi se samo jedna kolona.

Optimizacija

Među problemima koji su zadavali najviše glavobolja internet trgovinama bio&bio bila je brzina stranice.
Stranica bogata sadržajem i "teškim" fotografijama često se sporo učitava, što je ujedno jedan od najčešćih razloga zašto je ljudi napuste.

Znate li da čak 47 posto korisnika očekuje učitavanje shopa u manje od dvije sekunde?
Ako to kod vas nije slučaj, vrijeme je da se zabrinete. Možda je baš to glavna prepreka zašto ne zarađujte putem web shopa koliko biste željeli.
Problemu smo priskočili programerskim rješenjima, ali i optimizacijom na stranici na načine koje smo objasnili u ovom članku.

Čak 60,04 posto ubrzali smo učitavanje nove stranice s obzirom na staru - 45 posto postigli smo prelaskom na novi server, dok smo ostalo ubrzanje od 15 posto postignuli optimizacijom programskog koda.

Nakon provedenih promjena, stranica više nije multimedijski teška te se drastično brže učitava, što potvrđuje i alat GTmetrix.

brzina-stranice-biobio

Što se još postiglo u samo 30 dana?
Uspoređivanjem podataka u Google Analyticsu prije i nakon redizajna web stranice, došlo se do još nekoliko zanimljivih podataka:

  • prelaskom na novi server stranica se ubrzala za 45 posto,
  • zbog optimizacije i samim time bolje vidljivosti stranice za 12,6 posto povećalo se vrijeme koje potencijalni kupci provode na stranici (na stranicu su došli preko organske pretrage),
  • za 24,28 posto je porastao broj pojedinačnih artikala koji su se prodali (zahvaljujući cross-saleu),
  • s obzirom na prije redizajna, čak 33,33 posto više korisnika u shop je došlo preko društvenih mreža,
  • za 500 posto je porasla prodaja tako da je kupac kliknuo na neki od linkova na Facebooku i došao direktno kupiti u web shop,
  • nakon redizajna na stranicu je putem mobitela došlo samo sedam posto više korisnika, ali s novim responzivnim webom transakcije tih kupaca porasle su za 152,17 posto,
  • stopa konverzije na mobilnim uređajima općenito je porasla za 76,20 posto,
  • bounce rate je bolji za 12 posto - toliko kupaca više ne napusti stranicu nakon početnog dolaska na stranicu,
  • web shop trgovina bio&bio ostvarila je rast od 105 posto kod organskih pretraživanja, a u odnosu na druge web shopove iz iste branše, u istom periodu.

Naravno, ambicije tu ne prestaju.
Praćenjem, analizom i testiranjem planiramo i dalje raditi na efikasnosti web shopa i boljoj prodaji.

Želiš i ti unaprijediti svoju tvrtku?
Zatraži ponudu bez obaveze.

Zatražite ponudu za izradu web trgovine

6.243 tvrtki svaki tjedan besplatno prima naše korisne savjete na email. Pridruži im se...