Opšti interfejsni obrasci - 6. Ostalo (Miscellaneous) – Kupovina, Povećanje učestanosti

1. Opšti interfejsni obrasci
6. Ostalo (Miscellaneous) – Kupovina, Povećanje učestanosti
Obrasci koji nisu u drugim kategorijama.
Kupovina (Shopping)
 Stranica proizvoda (Product page)
 Kupon (Coupon)
 Cenovnik (Pricing table)
 Kolica za kupovinu (Shopping Cart)
Povećanje učestanosti (Increasing frequency)
 Savet prijatelja (Tip a friend)
6.1. Kupovina (Shopping)
6.1.1. Stranica proizvoda (Product page)
Rezime problema
Korisnik treba da zna detalje o proizvodu da bi doneo odluku o kupovini ili zadovoljio potrebu za
podrškom.
Primer
uniqlo.co.uk
▲ U veb prodavnici uniqlo.co.uk, slika proizvoda deluje kao element dizajna stranice, jasno
postavljajući vizuelni prioritet elemenata na stranici.

2. https://ui-patterns.com/patterns/ProductPage/examples
Upotreba
 Koristite za prikaz informacija o proizvodu na sajtu za e-trgovinu, na veb lokaciji
proizvođača/brenda, veb lokaciji za poređenje proizvoda ili drugim veb lokacijama
usredsređenim na proizvode.
 Koristite za prikaz proizvoda o fizičkom proizvodu koji je dostupan za kupovinu.
Rešenje
Predstavite dati proizvod i grupišete povezane informacije u delove. Opciono navedite veze do drugih
relevantnih proizvoda.
Stranice proizvoda obično imaju sledeća četiri elementa dizajna:
 Naziv proizvoda (ime proizvoda)
 Glavna slika proizvoda
 Cena
 Dugme „Dodaj u korpu“, „Poruči“ ili „Kupi“.
Sledeći elementi se koriste kada imaju smisla:
 Prodajna cena (često crvenom bojom i sa originalnom precrtanom cenom)
 Slike detalja
 Varijante proizvoda (veličina, boja, itd.)
 Slike varijanti proizvoda (posebno u pogledu boje ili različitih šara)
 Dostupnost (količina na zalihama)
 Vreme isporuke
 Forma za unos količine
 Dugme „Dodaj na listu želja“/„Omiljeno“.
 Funkcija zumiranja
 Kratak opis
 Duži opis
 Specifikacije/detalji proizvoda
 Oznaka („Bestseller“, „Samo nekoliko preostalih“, „Reciklirani materijali“ itd.)
 SKU (Stock Keeping Unit) ili drugi oblik ID-a proizvoda.
 Posebne ponude (Kupite ovaj proizvod + još jedan za x $, kupite 2 za manje, itd.)
 Informacije o podršci – često sa brojem telefona ili imejl adresom za podršku
 Dugme „Prilagodi“.
 Delite na dugmadima društvenih medija (Facebook, Digg, StumbleUpon, itd.)
Obrazloženje
Osnovni cilj je pretvoriti zainteresovane posetioce u kupce koji plaćaju. Dizajnirajte svoje stranice
proizvoda sa ciljem da ubedite korisnike da kupe jedan ili više proizvoda koje prodajete.

3. Diskusija
Postoji nekoliko faktora koje možete podesiti da biste povećali prodaju. To su sledeče tehnike i
obrasci koji se mogu sresti u upotrebi:
Koristite kvalitetne fotografije proizvoda. Fotografije služe za dve funkcije: (1) da zadaju ton (veb
prodavnica zna šta radi i kvalitetno je mesto za kupovinu) i (2) kupci treba da budu u mogućnosti da
vide proizvode iz svakog ugla i steknu osećaj kvaliteta.
Koristite video. Video može pomoći da se nadoknadi nemogućnost da se „isproba proizvod“ i da
korisniku pruži utisak o tome kako proizvod radi, zvuči, izgleda u funkciji itd.
Recenzije korisnika. Dozvolite korisnicima da objavljuju recenzije proizvoda kako bi pomogli kupcima
u procesu odlučivanja. Recenzije proizvoda koje su dali korisnici mogu pružiti dragocene informacije
na kojima korisnici mogu da zasnuju svoje odluke o kupovini. Posebno su popularni među trgovcima
na malo i turističkim kompanijama. Recenzije korisnika pomažu u pružanju društvenog dokaza o
proizvodu.
Stručna mišljenja. Stručna mišljenja o proizvodu mogu pomoći da se ubedi korisnik da kupi upravo taj
proizvod. Međutim, postoji velika mogućnost da će se korisnik osećati kao da se radi o plaćenoj
reklami. Mišljenja stručnjaka koristite oprezno – to se najčešće radi sa guruima proizvoda ili kada je
mišljenje objavljeno u nezavisnoj i kredibilnoj publikaciji.
Predstavite srodne proizvode. Najpoznatija je Amazonova popularna funkcija „Korisnici koji su ovo
kupili, kupili su i...“. Druge veb prodavnice se oslanjaju na ručno izgrađivanje odnosa između
proizvoda ili se jednostavno vraćaju na listanje proizvoda iz iste kategorije.
Osnažite poverenje kupaca. Koristite indikatore poverenja kao što su značke bezbednih prolaza za
plaćanje koje svi znaju. Brendovi poput PayPal-a ili VerySign-a prenose osećaj sigurnosti i odlažu
većinu sumnji u krađu podataka i sigurnost. Ikone kreditnih kartica takođe pružaju odličan osećaj
udobnosti. Obrazac kreditne kartice bez ikona kreditne kartice je pogrešan. Drugi pokazatelji
poverenja su nazivi brendova (i njihovi logotipi) koje prodajete, garancije povrata novca, industrijski
standardi ili ocene.
Dajte prioritet važnim informacijama i izbegavajte igre skrivanja. Ne otežavajte ljudima da pronađu
ono što traže. Ne postoji prodavac koji bi odgovarao na pitanja na mreži, tako da ne otežavate
ljudima da sami pronađu odgovor.
6.1.2. Kupon (Coupon)
Rezime problema
Želite da privučete korisnike da kupuju proizvode koristeći podsticaj.
Primer

4. birchbox.com
▲ Birchbox, usluga sa mesečnom pretplatom, šalje e-poruke o napuštanju kolica zajedno sa
popustom od 20% 24 sata nakon napuštanja korpe kako bi posetiocima pružila podsetnik i podsticaj
da se vrate i završe kupovinu svoje pretplate.
https://ui-patterns.com/patterns/Coupon/examples
Upotreba
 Koristite kada želite da skrenete posebnu pažnju na određeni proizvod ili uslugu.
 Koristite kada želite da svojim klijentima date podsticaj da se obavežu na kupovinu nekog od
vaših proizvoda ili usluga.
 Koristite kada želite da oglašavate popust određenoj grupi ljudi ili da se oglašavate ciljnoj
grupi korisnika tako što ćete, na primer, objaviti kod kupona na forumu ili odštampati kod
kupona u časopisu.
Rešenje
Napravite polje posebno za unos kupona/promotivnog koda. Unos koda daje kupcu određeni iznos
popusta u zavisnosti od toga koji je kod unet. Na strani trgovaca, može se napraviti veliki broj
različitih kodova kako bi 1) izmerili odakle vaši klijenti dolaze i kako su čuli za vas i 2) omogućili
različite stope popusta za različite grupe.
Vrste kuponskih ponuda
Kuponi omogućavaju pristup raznim popustima i ponudama. Najčešći su:
Popust zasnovan na procentima: Najčešći tip kupona je onaj koji daje pristup popustima zasnovanim
na procentima.
Popust na vrednost u novcu: ponude kupona zasnovane na vrednosti proizvoda u novcu čine da se
ljudi osećaju kao da gube novac ako ne iskoriste ponudu. U nekim studijama, kupovina ponuda
zasnovanih na novcu u odnosu na ponude zasnovane na procentima može biti i do 175% veća.
Besplatna isporuka: Kuponi koji daju pristup besplatnoj isporuci se često obezbeđuju u skladu sa
minimalnom veličinom porudžbine kako bi se povećala prosečna vrednost porudžbine.

5. Besplatan poklon: Kuponi koji obezbeđuju besplatan poklon vašoj narudžbini zahtevaju od kupaca da
kupe bar još jednu stavku i često su minimalne vrednosti.
Obrazloženje
Korišćenje kodova kupona za privlačenje kupaca da kupe proizvod trgovaca zasniva se na
pretpostavci kupca da je ponuda kratkog veka, zbog čega se mora preduzeti radnja odmah ili uskoro
kako se ne bi izgubila psihološka dobit stvorena primanjem koda kupona. Pošto se gubici mentalno
vrednuju sa većom težinom nego dobici, kupac će biti averzivan prema gubitku datog poklona i
delovati na to dok je vreme.
Još jedna prednost kupona je njegova sledljivost. Marketinški stručnjaci mogu da razdvoje različite
kodove kako bi saznali koja je kampanja generisala najviše potencijalnih klijenata.
6.1.3. Cenovnik (Pricing table)
Rezime problema
Korisnik treba da dobije uvid u to koji se cenovnici nude i po čemu se razlikuju
Primer
basecamphq.com
https://ui-patterns.com/patterns/PricingTable/examples
Upotreba
 Koristite kada postoji se može izabrati više verzija proizvoda koje nudite.
 Koristite kada želite da pružite korisniku pregled o tome kako se verzije proizvoda razlikuju i
po karakteristikama i po ceni.
 Nemojte koristiti kada korisnik može da kupi više od jednog proizvoda istovremeno.
 Nemojte koristiti kada korisnik može da odluči koje proizvode želi da kupi u jednoj sesiji, i da
se vrati kasnije da izvrši stvarno plaćanje.

6. Rešenje
Tabele sa cenama se koriste kao način da se ilustruje kako se karakteristike proizvoda razlikuju kako
se cena menja.
Prikažite različite verzije proizvoda u tabeli ujednačavajući cenu i karakteristike za poređenje.
Lista najčešće postavljanih pitanja (FAQ) u vezi sa proizvodom je često navedena direktno ispod
tabele sa cenama. Ona se često bavi pitanjima o kojima potencijalni klijenti obično brinu: kako
funkcioniše besplatni plan, da li postoji garancija povrata novca, kako će mi biti naplaćeno itd.
To je veoma čest deo marketinških veb lokacija dobavljača aplikacijskih usluga (ASP). U većini
slučajeva, oni imaju samo jedan glavni proizvod u ponudi, ali nude ovaj proizvod u različitim
varijantama (planovima). Na ovakvim veb lokacijama cena se najčešće zasniva na
mesečnom/tromesečnom/godišnjem planu pretplate.
Kada kreirate tabelu sa cenama, dobro je uzeti u obzir sledeće:
 Vizuelno odvojite planove korišćenjem naizmeničnih boja pozadine. Kada se koristi s merom,
možete privući pažnju planom koji želite da korisnik kupi.
 Koristite različite veličine fonta i boje za elemente koje želite da istaknete: naslove, cene,
naslove itd.
 Imajte na umu da korisnici pomeraju duge tabele nadole. Cene na vrhu tabele možda neće
biti vidljive kada dođu do dna. Jedno rešenje je postavljanje cena i na vrhu i na dno – drugo je
da tabela cena bude kratka.
Obrazloženje
Vaš glavni cilj je da pretvorite zainteresovane posetioce u kupce koji plaćaju. Koristite tabele sa
cenama da biste ilustrovali za šta je vaš proizvod sposoban u punoj verziji i da u isto vreme
namamite korisnika na kupovinu.
Diskusija
Postoji nekoliko faktora čijim podešavanjem možete povećati prodaju:
Postavite „udice“
Udice su ono što definiše razlike između ponuđenih planova - faktori koji će pokrenuti korisnika da
kupi nadogradnju ili ga prisiliti da se vrati na stariju verziju. Udice [za planove veb lokacija] se
najčešće definišu pomoću ova 4 parametra:
 Karakteristike
Skuplji planovi nude funkcije koje nisu dostupne u jeftinijim planovima.
 Korišćeni resursi
Maksimalni nivoi u različitim kategorijama (npr. korišćeni prostor za skladištenje datoteka,
broj postova, količina projekata) mogu se definisati kako bi se korisnik podstakao na
nadogradnju kako ovi parametri rastu i kako korisnik kontinuirano koristi sistem. Za razliku
od dole navedenih parametara saobraćaja, ovo su opcije za koje korisnik može nešto da

7. uradi: Neke otpremljene datoteke mogu da se obrišu kako bi se koristilo manje prostora, a
stari postovi mogu da se obrišu da bi se napravio prostor za nove postove.
 Potrošeni resursi
Tamo gde su korišćeni resursi definisani u apsolutnim vrednostima, utrošeni resursi su
različiti jer su definisani apsolutnim vrednostima po jedinici vremena. Na primer, po broju
postova korisnika ili posetama korisnika (pogocima) mesečno. Potrošeni resursi se takođe
mogu definisati kao saobraćaj. Korisnik ne može mnogo da uradi u vezi sa saobraćajem koji je
posledica usluge koju ima jer je to definisano popularnošću usluge koju je korisnik kupio (na
primer blog, veb brojač ili forum). Saobraćaj je definisan korišćenjem posetilaca korisnika.
Definisanje planova sa ovim parametrom može biti nezgodno, jer vam je potrebna
alternativa na koju možete da se vratite, ako korisnik ne želi da nadogradi plan koji zahteva
njegov saobraćaj. Usluge sa planovima koji uključuju ovaj parametar često imaju verzije koje
podržavaju oglase kako bi nadoknadile korisnike koji ne žele da se nadograde. Korisnik je sve:
ne želimo da ga ili nju izgubimo.
 Broj usluga
Četvrti parametar je broj dozvoljenih usluga. Na primer, broj projekata, blogova ili foruma
koji se nude svakom nalogu.
Istaknite zašto korisnici treba da plate za vaš proizvod
Ako je cena glavni parametar oko koga se nadmećete, istaknite je. Učinite cenu velikom. Ako ne,
ublažite veličinu cena i stavite više pažnje na prednosti i karakteristike proizvoda.
Ako je vaš slučaj drugi, velike su šanse da će vaši korisnici potrošiti najmanju količinu novca sa kojom
mogu da se izvuku – barem za početak.
Prva besplatna
Većina usluga pretplate na ASP-ovima ima besplatne planove. Možete li da poklonite nešto što će da
zainteresuje ljude, pa se kasnije vrate i možda plate više? Ponudite ljudima način da se poigraju sa
vašim proizvodom ili ga koriste kako bi odlučili da li je potpuni proizvod vredan kupovine.
Poređajte planove po opadajućoj ceni
Ako poređate svoje planove tako daje prvi najjeftiniji, velike su šanse da će korisnici prestati da
gledaju na prednosti skupljih planova kada dostignu željeni nivo cena.
Pošto čitamo s leva na desno, korisnici neće moći da ignorišu vaš vrhunski plan ako ih postavite po
opadajućoj ceni – najskuplji sa leve strane i najjeftiniji sa desne strane. Verovatnije je da će korisnici
ignorisati planove sa višim cenama i uzeti u obzir jeftinije samo ako navedete najjeftiniji plan sa leve
strane.
Dodajte mamce
Možete li da dodate izbore za „mamce“, čineći da drugi (koje želite da ljudi izaberu) izgledaju bolje u
poređenju sa njim? Dodajte mamac da biste uklonili fokus sa svog stvarnog plana sa najvišom cenom.
Efekat Zlatokose: Odbojni smo prema ekstremima
Dakle, ne trebaju vam stvarni mamci - ipak, treba da uzmete u obzir činjenicu da smo averzni prema
ekstremima. Omogućite premijum kao i budžetsku opciju pored proizvoda sa redovnim cenama kako
bi ovaj drugi izgledao privlačnije.

8. Ako prodajete mali i veliki plan, možda biste želeli da dodate srednji plan kako biste naterali ljude koji
obično kupuju najjeftiniji da kupuju skuplji plan.
Ovaj metod je način da se iskoriste naše psihološke predrasude i način manipulacije da odaberemo
opciju koja donosi veći profit – često smeštena centralno unutar raspona cena.
Neka ljudi znaju šta im nedostaje
Izbledite ili precrtajte stvari koje nisu dostupne na nižim planovima da biste korisnicima dali osećaj da
nemaju kompletan proizvod – kako bismo igrali na kartu naše želji za kompletnošću.
Pokažite razlike pomoću krajnosti
Kvantifikujte karakteristike u ekstreme da bi razlike između planova izgledale ekstremno.
„Neograničeni korisnici“ pored „10 korisnika“ može se pojaviti kao ekstremna razlika, ali možda i nije
tako velika stvar ako je prosečan broj korisnika po nalogu oko 10-15.
6.1.4. Kolica za kupovinu (Shopping Cart))
Rezime problema
Iskustvo kupovine na mreži treba da se realizuje kroz analogiju u stvarnom svetu.
Primer
https://ui-patterns.com/patterns/ShoppingCart/examples
Upotreba
 Koristite kada korisnik može kupiti više od jednog proizvoda.

9.  Koristite kada korisnik može kupiti više od jednog primerka proizvoda.
 Koristite kada korisnik možda želi da se vrati kasnije da bi nastavio sa kupovinom.
 Koristite kada korisnik možda želi da se vrati kasnije da bi izvršio plaćanje.
 Ne koristite kada imate samo jedan proizvod za prodaju.
 Nemojte koristiti kada je vaša veb lokacija uređena na način tako da korisniku nema smisla da
kupuje više od jednog proizvoda istovremeno (na primer za dobavljače aplikacijskih usluga
(ASP) koji omogućavaju korisniku da nadogradi svoju uslugu).
Rešenje
Korpa za kupovinu je kolekcija odabranih proizvoda koje korisnik može koristiti za upravljanje svojim
iskustvom kupovine na mreži. Korisnik može da dodaje, ažurira i uklanja proizvode iz svoje korpe.
Dalje, korisnik može izabrati da promeni količinu svakog proizvoda u korpi. Međutrošak je prikazan za
svaki od artikala u korpi plus troškovi dostave, PDV, itd. U bilo kom trenutku, korisnik može da
izabere da nastavi kupovinu ili da nastavi sa plaćanjem – što znači da plati i naruči ono što se nalazi u
korpi.
Kad god je proizvod predstavljen, trebalo bi da bude vidljivo dugme „dodaj u korpu“, što omogućava
korisniku da doda odgovarajući proizvod u korpu proizvoda. Sadržaj korpe možete pogledati u bilo
kom trenutku, detaljno, klikom na link "prikaži korpu".
Kada korisnik izabere plaćanje, prikazuje mu se konačna lista artikala na porudžbini, kao i opcije
plaćanja (kreditnom karticom, bankovnim transferom ili pouzećem).
Obrazloženje
Korpa za kupovinu je dobro poznata metafora za kupovinu na mreži. Metafora daje korisniku ideju da
stavljanje artikala u korpu za kupovinu ne znači nužno da on ili ona kupuje te artikle, jer se mogu
ukloniti pre odjavljivanja iz prodavnice. Obrazac korpe za kupovinu omogućava korisniku da prvo
prikupi određeni broj artikala kako bi ih sve kasnije platio. Metafora naplate dobro ide uz kolica za
kupovinu jer liči na proces u pravom super marketu.
6.2. Povećanje učestanosti (Increasing frequency)
6.2.1. Savet prijatelja (Tip a friend)
Rezime problema
Korisnik želi da podeli nešto od interesa sa nekim sebi ravnim.
Primer

10. https://ui-patterns.com/patterns/TipAFriend/examples
Upotreba
 Koristite kada bi korisnik možda želeo da širi vesti o nečemu na vašoj veb lokaciji, ali mu je
teško da to brzo uradi.
 Koristite kada korisnik može pomisliti da je nešto na vašoj veb lokaciji zanimljivo drugim
ljudima.
 Koristite kada želite da korisnici dele sadržaj na vašoj veb lokaciji.
Rešenje
Dodajte link sa sličnim tekstom u „Savet prijatelja“, „Pošalji ovo prijatelju“, „Podeli ovo sa
prijateljem“, koji vodi do obrasca koji treba da se popuni sa podacima korisnika, kao i privatnom
porukom. Rezultat obrasca može biti poruka poslata prijatelju korisnika sa sažetom verzijom sadržaja
ili jednostavno vezom do originalnog sadržaja.
Obrazloženje
Šablon „Savet prijatelja“ je funkcija koja olakšava korisnikovu potrebu da lako širi vest o sadržaju.
Može biti korisno ako su informacije od interesa oblikovane na način koji otežava kopiranje i lepljenje
(copy/paste) u poštu, a da ostanu lako razumljive. Veb lokacija tada može pomoći u formatiranju
pošte postavljanjem informacija u lepom i čitljivom formatu.
O korisnosti ovog obrasca kada se samo dozvoli korisniku da pošalje prazan mejl sa vezom do
predmetnog sadržaja može se raspravljati. Potreba korisnika za ovakvom funkcionalnošću često nije
opravdana.