10 savjeta za projektiranje sjajne web trgovine

Poduzetnici i trgovci u cigli i minobaveznici koji se žele proširiti u kupovinu putem interneta imaju im na raspolaganju više mogućnosti nego ikad prije, ali imaju i više razmatranja i tehničkih opcija za web stranicu. Izgradnja učinkovite web trgovine i dalje ima davatelje "ključ u ruke", kao što su Wix prodavaonice, koji mogu učiniti brzo i jednostavno iskakanje vaše početne prisutnosti. Ali oni koji se ozbiljno bave razvojem svojih internetskih tvrtki, otkrit će da se njihove potrebe razvijaju brzo izvan tih usluga "ključ u ruke".

Mnogo je pitanja na koja je potrebno odgovoriti prije nego što se išta pokaže u cyberspaceu, a zatim i puno više dok sazrijeva posao. Prikupljanje podataka o kupcima sjajan je primjer i danas je glavno pitanje, posebno za sve trgovine koje žele pristupiti europskim tržištima. Pretvaranje valuta i različiti zakoni o e-trgovini i dalje su gornji problemi na tim tržištima, ali sada ćete se morati pozabaviti i Općom uredbom o zaštiti podataka (GDPR), koja zahtijeva mnogo pažljiviji postupak postupanja s podacima o klijentima.

Sigurnost transakcije je još jedno ključno pitanje, jer znači uravnotežiti potrebu za sigurnošću korisnika s koliko obruča će vam trebati da preskoče prije nego što mogu obaviti kupnju. Bez obzira na odluke koje donesete za svoje standardno web mjesto, morat ćete voditi iste rasprave o mobilnoj iteraciji. Jer, iako je mobilnost zasigurno bila jedna od prošlogodišnjih ljupkih riječi draga, dodatnih 12 mjeseci ni na koji način nije umanjilo njenu važnost.

Trenutačno razmišljanje znači da web graditelji prvo moraju dizajnirati mobilno iskustvo, a zatim prilagoditi iskustvo radne površine prema potrebi.

"Svaki element, svaki dio sadržaja, mora biti funkcionalan na mobilnim uređajima", rekao je Jimmy Rodriguez, glavni operativni direktor (COO) u 3dcartu. "Ako počinjete ispočetka, dizajnirate za mobilne uređaje. Odzivnim dizajnom možete izgraditi web stranicu koja će se pokrenuti na mobilnom uređaju i zatim je prikazati na radnoj površini."

Da bismo vam pomogli da dizajnirate trgovinu za e-trgovinu za mobilne i desktop korisnike, u nastavku smo sastavili 10 važnih savjeta. No, Rodriguez preporučuje da, prije nego što tvrtke uključe bilo koji od njih u svoje izloge, A / B testiraju te značajke na određenim stranicama proizvoda kako bi vidjeli kako se ponašaju prije nego što ih izbace na cijelu web stranicu.

1. Navigacija ljepljivom glavom

Svi smo bili tamo: pomakli smo se do dna stranice proizvoda da bismo pročitali korisničke recenzije ili pojedinosti o proizvodu i sada smo spremni napustiti stranicu kako bismo se vratili na izbornik kako bismo nastavili shopping. Nažalost, da bismo se vratili na izbornik, obično smo morali pritisnuti gumb "Stranica gore" na tipkovnici radne površine ili dodirnuti pri vrhu zaslona na našim mobilnim uređajima.

Sa ljepljivim zaglavljima, dok se krećete prema dolje, izbornik mijenja veličinu i prilagođava. Izbornik vas prati tijekom vašeg putovanja kako biste zadržali navigaciju na ekranu u slučaju da vam treba brzo preskakanje stranica. To možete vidjeti na Bose.com. Unatoč tome što ste na sredini stranice, i dalje možete pristupiti glavnoj navigaciji stranice bez vraćanja na vrh ekrana.

2. Hamburger jelovnici

Iako Hamburger jelovnici zvuče kao funkcija koja je najprikladnija za restorane brze hrane, oni brzo postaju nužna za tvrtke koje obavljaju mnogo poslova na mobilnim uređajima. Već ste ih vidjeli: Hamburger izbornici postali su standardna mobilna ikona za mobilnu navigaciju i izbornike.

Imaju tri vodoravne crte koje, kada se pritisne, nude padajući izbornik za navigaciju na web mjestu. Posebno su korisni na mobilnim uređajima na kojima je cijena nekretnina na ekranu vrhunska. Ali počinjemo ih vidjeti i na web stranicama stolnih računala pa potrošači imaju slično iskustvo na web stranicama tvrtke bez obzira na uređaj koji koriste.

"Puno ljudi vidi Hamburger menije i znaju što to znači, ali ne znaju da je to u osnovi novi standard", rekao je Rodriguez. "Mobilni posjetitelji naučili su značenje ovog simbola, a web stranice bi ga trebale prihvatiti kao standard za mobilnu navigaciju."

Izbornik Hamburger možete vidjeti u gornjem desnom kutu Target.com-a i na Targetovoj mobilnoj web stranici. Možete je vidjeti i na slici ispod.

3. Pomicanje paralela

Manje funkcionalnosti i više načina za poboljšanje estetike vaše web stranice, Parallax Scrolling koristi velike banere koji su prepuni slika visoke rezolucije kako bi dodali umjetnički osjećaj vašem web mjestu. Koristeći velike slike pune širine možete stvoriti efekt pomaka između pozadinske slike vaše web stranice i slike koja je izravno ispred vašeg potrošača.

Kao što možete vidjeti na slici dolje s RimmelLondon.com-a dok se pomičete po stranici, pozadinske slike web mjesta se mijenjaju. Međutim, promjena se događa suptilno kako se slike pozadine i prednjeg plana međusobno stapaju. Snimak zaslona u nastavku prikazuje web mjesto u trenutku kada se pozadinska slika promijeni iz ljubičaste u ružičanu.

4. Beskonačno pomicanje

Beskonačno pomicanje zvuči više kao tehnika mučenja nego što je to značajka e-trgovine. Međutim, ovaj sjajni alat omogućava korisnicima da neprestano pregledavaju nove proizvode bez potrebe da kliknu i učitaju novu stranicu. Evo kako to funkcionira: Kada se pomaknete prema dolje do dna stranice za e-trgovinu, stranica automatski učitava više stavki na dnu stranice. I dalje ih je katalogizirati kao stražnje stranice, ali posjetitelj to ne zna.

Sličnu značajku možete vidjeti na UnderArmour.com. Nažalost, Under Armour zahtijeva da kliknete gumb "Učitaj više" da biste vidjeli dodatni sadržaj. Neke web stranice opremljene su mehanizmom za automatsko otvaranje koji će vam pokazati više sadržaja bez zahtjeva za klik.

5. Lebdeći gumb "Dodaj u košaricu"

Slično kao ljepljivi navigacijski alat, plutajući gumbi "Dodaj u košaricu" omogućuju svojim potrošačima da dodaju proizvode u svoju košaricu, bez obzira gdje se nalaze na stranici proizvoda. Prije toga, korisnici bi se pomicali prema dolje prema korisničkim recenzijama, detaljima proizvoda i ostalim elementima na donjoj stranici, a da bi dodali proizvod u košaricu, morali bi se pomicati na vrh stranice. Sada vam tvrtke poput Diesel.com omogućuju da vidite cijenu, količinu, opcije boja i sliku proizvoda, kao i gumb "Dodaj u košaricu", bez obzira gdje se nalazite na stranici proizvoda.

6. Koristite Fittsov zakon

Nećemo vam dosaditi matematiku koja stoji iza Fittsovog zakona, ali u osnovi je teorija da što nam je i što bliži objekt, to je vjerojatnije da ćemo s njim komunicirati. Isti osnovni princip može se primijeniti na e-trgovinu. Ako želite da korisnike usmjeri na stranice proizvoda, kolica i promocije, te gumbe trebali biste učiniti velikim, raznobojnim i što bližim središnjoj sredini stranice.

Ako zanemarite Fitts-ov zakon i stavite sitne crno-bijele gumbe duž tračnica ili pri dnu stranica, tada možete izgubiti potencijalne kupce. Nemojte pogriješiti.

7. Prikažite recenzije i izjave kupaca

Ne želite da kupci dođu na vašu web stranicu, pregledaju vaše proizvode i zatim se upute na Amazon.com da provjere korisničke recenzije. Uostalom, Amazon.com može prodati proizvod jeftinije ili bi klijent mogao preferirati iskustvo kupovine Amazon.com u odnosu na vaše web mjesto.

Ako svojim kupcima pružite mogućnost ocjenjivanja i pregledavanja proizvoda, moći ćete odbiti one oprezne kupce kojima je potrebna sigurnost drugih potrošača prije kupnje. Većina alata za e-trgovinu čine ocjene i recenzije jednostavnim za implementaciju, pa se nemojte odmarati od provođenja ove prakse.

8. Efektivan radni stol za korisnike

Suradnja sa svojim kupcem je presudna za uspjeh u maloprodaji, a nigdje nije lakše ili učinkovitije nego na stolu za korisnike. Pravilna briga o bijednom, nezadovoljnom ili čak samo zbunjenom kupcu jedan je od najsigurnijih načina za ponoviti posao. Današnji servisni sto i aplikacije službe za pomoć čine jednostavnijim nego ikad prije. Korištenje jedne od ovih aplikacija ne samo da organizira zahtjeve kupaca, već vam omogućuje i prikupljanje podataka o kupcima i odgovorima koje ti susreti generiraju i usmjeravaju ih u vaše upravljačke odnose s klijentima (CRM), marketing i motore za poslovnu analizu. Na taj način možete pažljivo pratiti što kupci misle o vašoj trgovini i njenim proizvodima.

Tamo gdje postavljate svoja sidra za usluge kupcima i dodirne točke važno je za cjelokupno korisničko iskustvo. Bez obzira na to je li ta interakcija u obliku jednostavne stranice s kontaktima ili ide toliko daleko da otvorite prozor za chat sa svima koji ostanu na web mjestu dulje od 60 sekundi, nešto što ovisi o vrstama proizvoda koje prodajete i prosječna statistika posjeta web lokacije za vašu trgovinu.

Ali, uspjeh radnog stola za korisnike je više od softvera. Morate biti sigurni da je netko profesionalac tu da se bavi tim zahtjevima ili je to izgubljena investicija. Kupci kojima je problem kliknuti gumb "Obratite se korisničkoj službi" očekuju da će dobiti stvarnu pomoć od stvarnog čovjeka. Ovim možete upravljati putem telefona ili putem trenutnog chata, što je značajka koja se sve češće događa kod davatelja usluga pomoći. A ako ste vezani za osoblje, možete unaprijediti rad s kupcima inteligentnim chatbotovima koji "zvuče" ljudski, a istovremeno možete podnijeti niz dolaznih zahtjeva na osnovnoj razini, predajući samo složenije zahtjeve stvarnim homo sapiens.

9. Blagajna kruha

Kada kupci napuste vašu trgovinu, vole znati gdje se nalaze, koliko su daleko od završne obrade i kako se lako vratiti bez gubitka svih podataka koje su već unijeli. Breadcrumb Checkout pokazuje kupcima točno gdje se nalaze, koristeći linearni dizajn gumba za navigaciju koji potrošačima omogućuje klikom naprijed i nazad od prijave, mogućnosti plaćanja, mogućnosti dostave, narudžbu ili nastavak kupovine. Bez ovog izgleda potrošači mogu pritisnuti gumb Natrag, vidjeti da se njihovi podaci ne bilježe, frustriraju i napuštaju web mjesto.

10. Prikazi 360 stupnjeva

Jeste li ikad kupili naoko skromnu jaknu na mreži samo da shvatite da ima leđa od sjajnog kristala? Pa, kad ste vratili taj proizvod, izgubili ste svoje vrijeme i vrijeme dobavljača, a kompaniji ste koštali novac. Ne brinite, niste bili krivi. Više nego vjerojatno, prodavač je imao samo prednje slike i bočne slike jakne. Da je dobavljač ponudio slike u 360 stupnjeva, primijetili biste te rhinestones i kliknuli gumb Otkaži narudžbu.

Ne radite istu pogrešku na vlastitoj web stranici. Osim što kupcima dozvoljavate da uvećaju slike, dajte im mogućnost rotacije ili pregledavanje više uglova slike, baš kao što to radi i Kenneth Cole.com. Ovako se ne čude kad otvore kutiju za dostavu i izvade proizvod koji nisu očekivali.