Zašto je izgled jednog gumba toliko bitan za cijeli webshop?

Širom interneta, na mnogim webshopovima, korisnici se, kako bi kliknuli ono što žele i napravili željenu akciju, još uvijek muče s hrpom informacija i imaju osjećaj kao da traže iglu u plastu sijena.

A igla nikako ne bi trebala biti u plastu sijena. 

Ako online kupac želi šivaću iglu ona mora biti na posebnom mjestu, trebali bi je dodatno osvijetliti i obojiti tako da ju je nemoguće promašiti. 

U ovom tekstu, igla je gumb Dodaj u košaricu, a plast sijena je stranica proizvoda. 

Na svakoj stranici proizvoda nalazi se galerija slika, opis proizvoda i njegove specifikacije, cross-sell proizvodi i drugi tekst, a to uglavnom nije sve. Ovo su samo neki od elemenata koji se mogu nalaziti na stranici proizvoda. 

Kako bi korisniku osigurali što jednostavnije izvršavanje željene akcije i mi interno puno testiramo. Veliki broj testova povezan je s webshop korisničkim iskustvom. Dobar dio istraživanja posvećen je upravo stranici proizvoda, a neka od njih samo jednom gumbu - Dodaj u košaricu. Upravo je intuitivno korisničko iskustvo ono što ističe jedan webshop u odnosu na konkurenciju. Korisnici naših ecommerce rješenja su zadovoljni, a naši webshopovi su zbog toga onda najnagrađivaniji.  

Konačno, pitate se što smo o gumbu Dodaj u košaricu naučili kroz naša istraživanja?

Gumb Dodaj u košaricu treba biti jedinstven

Testiranja na desktop i mobile verzijama webshopova otkrila su kako hrpa elemenata na stranici proizvoda mogu korisniku odvući pažnju od primarne akcije, a to bi trebalo biti dodavanje u košaricu. 

U najgorem scenariju gumb Dodaj u košaricu je stilski identičan gumbu Dodaj na listu želja, gumbu Usporedi proizvode ili nekom trećem gumbu, a to svakako treba izbjeći. 

Kada se u obzir uzme način na koji kupci kupuju online, sa svim istraživanjima, mnoštvom konkurencije i željom za što intuitivnijim iskustvom, jasno je kako naizgled sitni detalji, poput boje gumba, stvaraju razliku. 

Dodavanje proizvoda u košaricu je jako važan korak kupnje proizvoda pa je svako ometanje u ovoj fazi skupa pogreška. Zbunjen kupac je onaj koji ne kupuje. 

Kako smo na jednostavan način, korištenjem kontrastne boje, istaknuli the gumb na webshopu Ljekarne Pablo, možete vidjeti na primjeru ispod. 

Primarni gumb, u ovom slučaj Dodaj u košaricu mora se isticati kako bi ga korisnici što jednostavnije uočili, a to zahtijeva jedinstveni stil koji se ne koristi za druge gumbe na toj stranici. 

Česta pogreška koja se može vidjeti na webshopovima velikih tvrtki je kada vizualni identitet tvrtke nalaže da svi gumbi na webshopu moraju biti u bojama i stilu brenda. Vizualna dosljednost je super i treba je poštovati, ali ovdje ona može biti kamen spoticanja i razlog zašto će kupac željeni proizvod potražiti kod konkurencije. 

Da bi se istaknu dovoljno, gumb Dodaj u košaricu mora biti kontrastan u odnosu na ostatak stranice, a posebno u odnosu na druge gumbe u njegovoj blizini. Isto tako, treba biti okružen s dovoljno bijelog prostora (whitespace), a tekst na njemu treba biti nedvosmislen. 

Bitna je čak i nijansa boje gumba

Istraživanja su pokazala kako će korisnici sive, bljedunjave ili polutransparentne gumbe protumačiti kao znak da željenog artikla nema na skladištu. 

Ipak, postoje slučajevi kada je bljedunjava nijansa praktična, a to je onda kada je prije dodavanja u košaricu potrebno odabrati veličinu, boju ili varijaciju proizvoda. U tom slučaju ćemo na našim webshopovima korisnika vizualno voditi kroz mikrokonverzije.

Prelaskom kursorom preko bljedunjavog gumba pojavit će se obavijest Odaberi i dodaj, a tek kada korisnik odabere željenu varijaciju gumb će dobiti tekst Dodaj u košaricu i snažniju, kontrastnu boju. Opisani scenarij implementirali smo i na keindl-sport.hr webshopu.  

Osim toga, kod implementacije primarnih i drugih gumba, važno je obratiti pozornost i na suptilne znakove poput vrste kursora. Kada se kursor ne promijeni u tip ‘ruka’ (tipičan za prelazak preko aktivnih linkova), neki će korisnici pretpostaviti da se na njega ne može kliknuti. 

Dakle, prelazak kursorom preko klikabilnog gumba, u desktop verziji webshopa, trebao bi promijeniti tip kursora u ‘ruku’. 

Banana test za provjeru jedinstvenosti gumba Dodaj u košaricu

Jednostavan, brzinski način za provjeru jedinstvenosti stila je Banana test.

Što je Banana test?

Banana test je, kao što smo gore napisali, jednostavan način provjere jedinstvenosti, a sve funkcionira tako što ćete tekst na svim gumbovima zamijeniti s riječi ‘banana’.

Ako se pitate zašto baš banana i može li na isti način funkcionirati i neka druga riječ, odgovor je - može, ali banana je nekako pronašla svoj put u svijet UX testiranja i što se nas tiče, neka tu ostane. Na kraju krajeva, tko na svijetu ima išta protiv banane?

Na webshopu senzacionalno.hr smo korištenjem ove cyan plave, osiguravanjem dovoljno whitespace-a i korištenjem ikonice na primarnom gumbu, složit ćete se, zaslužili prolaz na Banana testu. 

U slučaju gdje banana test otkriva kako nije sasvim jasno koji gumb je primarni, znate što vam je činiti. Primarni gumb mora biti očit u svakom slučaju. 

Mobilna verzija webshopa: plutajući ili statični Dodaj u košaricu

Za mobilnu verziju webshopa vrijede sva gore spomenuta pravila vezana za stil i jedinstvenost Dodaj u košaricu gumba. 

Ono što je bio dodatni fokus testiranja kod verzija za manje ekrane je bila pozicija gumba.

Jedna opcija je plutajući (sticky) gumb. To je slučaj gdje se gumb nalazi na dnu ekrana i prati korisnika dok on scrolla stranicom proizvoda. Njega smo implementirali na webshop kojeg smo izradili za bigbang.si.

Sticky gumb je super jer rješava situaciju u kojoj je korisnik čitao detalje o proizvodu, skrolao je do dna stranice i sada više ne vidi gumb Dodaj u košaricu. S plutajućom verzijom gumba na malim ekranima, korisnik u svakom trenutku može napraviti željenu akciju. Jednostavnije za korisnika - bolje za profit. 

Mala napomena, ovakav uzorak dizajna se može vidjeti i na nekim desktop verzijama. 

Iako je jednom, manjem, broju korisnika ovakvo rješenje bilo od pomoći, većina se ipak bez problema snalazila i sa statičnom verzijom gumba. Ovo je naravno pod uvjetom da se on nalazi na očekivanom mjestu, a to je negdje ispod slike proizvoda. 

Stoga, iako je nekima plutajući Dodaj u košaricu gumb bio super, većini korisnika on nije bio potreban kako bi jednostavno izvršili željenu akciju. 

Ako se ipak odlučite za plutajuću verziju gumba, važno je uzeti u obzir stil gumba. Konkretno, plutajući gumb preko cijele širine zaslona korisnik će, onako intuitivno, zamijeniti s bannerom, a to je nešto što iskusnom online kupcu ne predstavlja ništa značajno. Konačno, imat će problema s pronalaženjem gumba, a to će se onda odraziti na dovršetak same kupovine. 

S ovim smo došli do kraja. Vjerujemo kako ste imali koristi od čitanja i stvarno se nadamo da korisnici vašeg webshopa više nikada neće tražiti iglu u plastu sijena. 

Gore prikazani foto i video primjeri nisu sve, ako vas zanima kako izgledaju gumbi na drugim intuitivnim i najnagrađivanijim domaćim webshopovima iz naše radionice - provjerite reference.

reference