Navigacija web shopa: kako izbornik, filteri i tražilica vode kupca do prodaje

Kupac dolazi na web shop s namjerom, ne s planom. Zna otprilike što želi, ali ne zna kako je vaša trgovina posložena — i u prvih nekoliko sekundi odlučuje hoće li se potruditi to otkriti ili otići drugamo. Upravo zato je navigacija web shopa važna: sadrži skup elemenata koji kupcu govore gdje se nalazi, kamo može otići i kako doći do proizvoda. Kad je navigacija dobra, gotovo je nevidljiva. Kad je loša, izravno diže stopu napuštanja stranice.

Važno je odmah razgraničiti dvije stvari koje se često miješaju. Struktura trgovine odgovara na pitanje što postoji — koje kategorije, potkategorije i atributi čine vašu ponudu; o tome saznajte više u članku struktura web shopa. Navigacija odgovara na pitanje kako se kroz to kreće — kojim putovima kupac stiže do police i do proizvoda na njoj. Struktura je tlocrt zgrade; navigacija su hodnici, oznake i putokazi.

Od čega se sastoji navigacija web shopa

Navigacija web shopa nije jedan element, nego nekoliko njih koji zajedno vode kupca:

  • Glavni izbornik — okosnica, obično na vrhu stranice, koja vodi u glavne kategorije.
  • Navigacijski trag (breadcrumbs) — staza koja pokazuje gdje se kupac nalazi u hijerarhiji.
  • Filteri i sortiranje — alati kojima kupac sam sužava prikaz specifičnih proizvoda koje traži.
  • Interna tražilica — prečac za kupce koji točno znaju što traže.
  • Podnožje (footer) i pomoćne poveznice — sekundarni putovi do informacija i rjeđe traženih stranica.

Svaki od ovih elemenata navigacije rješava drugu situaciju. Netko voli pregledavati kategorije, netko odmah upiše naziv proizvoda, netko filtrira po cijeni. Dobra navigacija nije samo dobro razrađen glavni izbornik, nego skup elemenata i alata koji odgovaraju svakom tipu kupca.

Glavni izbornik: koliko stavki i kako ih grupirati

Glavni izbornik prva je stvar koju kupac vidi i koristi, pa mora biti pregledan, a ne potpun. Najčešća pogreška je nabacati sve kategorije u vodoravnu traku dok ne postane niz poveznica koje otežavaju snalaženje.

Vodite se s nekoliko načela:

  • Držite broj glavnih stavki malim. Za većinu trgovina dovoljno je nekoliko jasnih kategorija najviše razine. Ako ih je previše, nijedna se ne ističe.
  • Grupirajte onako kako kupac razmišlja. Trgovina obućom logično dijeli izbornik na „Žene”, „Muškarci”, „Djeca” jer se obuća tako i traži i kupuje — a ne po dobavljaču ili šifri artikla.
  • Nazivi neka budu napisani jezikom kupca. „Galanterija” je trgovački izraz; „Torbe i novčanici” je ono što kupac prepoznaje.
  • Za velik asortiman razmislite o mega izborniku. Mega izbornik je prošireni padajući panel koji na jednom mjestu prikazuje potkategorije, a ponekad i istaknute proizvode ili slike. Prednost mu je što dubinu ponude otkriva u jednom pogledu, bez kliktanja kroz razine. Uvjet je da bude uredan i grupiran — mega izbornik pretrpan s pedeset nasumičnih poveznica jednostavno gubi svoju svrhu.

Cilj glavnog izbornika nije prikazati sve, nego kupca u jednom potezu usmjeriti prema pravom dijelu trgovine.

Navigacijski trag (breadcrumbs): mala staza s velikom koristi

Navigacijski trag je niz poveznica koji obično stoji pri vrhu stranice proizvoda ili kategorije, primjerice: Početna › Obuća › Tenisice › Model X. Djeluje sitno, ali radi tri stvari odjednom.

Kupcu pokazuje gdje se nalazi u trgovini i daje mu mogućnost za brz povratak na prethodnu stranicu — umjesto tipke „natrag” u pregledniku, jednim se klikom vraća na cijelu kategoriju i nastavlja pregledavati. To je posebno korisno kupcima koji su na proizvod stigli izravno s Googlea i nemaju konteksta gdje su „upali”.

Uz to, breadcrumbs pomaže i tražilici da razumije hijerarhiju stranica, a Google ga može prikazati i u samim rezultatima pretrage umjesto golog URL-a. Za takav se prikaz koriste strukturirani podaci, o čemu detaljnije možete čitati u tekstu što je schema markup. Većina ozbiljnih WooCommerce tema i SEO dodataka već ima ugrađene breadcrumbse — vrijedi ih koristiti.

Filteri proizvoda: najveća korist i najveća zamka

Filteri su najmoćniji dio navigacije u trgovini s puno proizvoda. Sustav filtera koji se mogu kombinirati u SEO struci nosi engleski naziv faceted navigation (kod nas i „faceted navigacija”), a kupac ih koristi kad istovremeno bira po više svojstava — cijena, boja, veličina, marka — i slaže ih jedno na drugo dok ne dođe do kratkog popisa koji mu odgovara. Kupcu koji pregledava kategoriju s tristo artikala takvi filteri nepreglednu hrpu proizvoda sužavaju na samo nekoliko proizvode koje zaista traži, pa prodaja raste jer brže dolazi do onoga što bi kupio.

Ali isti taj mehanizam krije ozbiljnu SEO zamku. Svaka kombinacija filtera obično stvara vlastitu adresu (URL), a tih kombinacija zna biti nevjerojatno mnogo. Trgovina s nekoliko tisuća proizvoda i desetak filtera lako stvori milijune gotovo istovjetnih stranica. Ako Google slobodno prolazi kroz sve njih, troši crawl budget na beskorisne varijante umjesto na vaše prave stranice, a Googleov se indeks puni slabim, gotovo istovjetnim stranicama.

Google zato ima jasne preporuke za upravljanje filter-adresama. Ukratko, na raspolaganju su tri pristupa:

  • Blokiranje pregledavanja filter-adresa kroz robots.txt, uz zadržavanje jedne stranice kategorije koja prikazuje sve proizvode bez filtra. Google to navodi kao pristup koji najviše štedi resurse.
  • Kanonska oznaka (rel="canonical") s filtrirane stranice na glavnu kategoriju, kojom se signali rangiranja objedinjuju na glavnu adresu.
  • noindex, follow na filter-stranicama — te stranice tada ne ulaze u Googleov indeks, ali ih Google i dalje smije pregledati i preko njihovih poveznica doći do samih proizvoda.

Kako točno posložiti indeksiranje kategorija, filtera i ostatka trgovine, dio je šire tehničke priče o kojoj možete saznati više u tekstu SEO za web shop, pa se ovdje zadržavam na načelu: filteri su za kupca odlični, ali njihove adrese treba kontrolirati.

Interna tražilica: prečac za kupca koji zna što želi

Dio kupaca neće ni pogledati izbornik — odmah upišu naziv proizvoda u tražilicu. To su često najspremniji kupci, pa se tražilicu isplati shvatiti ozbiljno.

Zadana tražilica u WooCommerceu skromna je: pretražuje uglavnom naziv i opis, ne podnosi dobro tipfelere ni sinonime i često ne nudi prijedloge dok kupac tipka. Za trgovinu s malo proizvoda to je dovoljno. Za veći asortiman vrijedi razmisliti o naprednijem rješenju koje nudi trenutne prijedloge, toleranciju na pogreške u pisanju i pretragu po atributima.

Bez obzira na alat, dvije stvari uvijek pomažu: tražilica neka bude vidljiva (ne skrivena iza ikone na desktopu) i neka ne vraća praznu stranicu kad nema rezultata, nego ponudi alternativu ili popularne proizvode. Prazan rezultat bez izlaza jedan je od najsigurnijih načina da izgubite spremnog kupca.

Mobilna navigacija: drukčiji prostor, ista zadaća

Velik dio kupaca danas dolazi s mobitela, gdje vodoravni izbornik iz desktopa jednostavno ne stane. Mobilna navigacija zato se obično sažima u ikonu izbornika (poznati „hamburger”), ali sažimanje ne smije značiti skrivanje najvažnijih putova.

U praksi se pokazuje korisnim: da tražilica na mobitelu bude odmah vidljiva, a ne skrivena u izborniku; da košarica bude uvijek nadohvat palca; da izbornik i filteri budu dovoljno veliki za prst, bez sitnih poveznica koje se teško pogađaju. Mobilna navigacija nije smanjena verzija one za računalo, nego isti zadatak riješen za manji ekran i drukčiji način korištenja. O tome kako vizualno usmjeravati pažnju korisnika pišem i u tekstu vizualna hijerarhija u web dizajnu.

Koliko klikova do proizvoda? Važniji je osjećaj napretka nego broj

Često se čuje „pravilo tri klika” — da kupac do svakog proizvoda mora doći u najviše tri klika. Kao kruto pravilo ono ne stoji: istraživanja upotrebljivosti pokazala su da broj klikova sam po sebi slabo predviđa hoće li kupac odustati. Ono što ga otjera nije četvrti klik, nego klik nakon kojeg ne zna je li bliže cilju.

Zato je korisniji cilj od brojanja klikova ovaj: neka svaki klik bude svrhovit i predvidljiv. Kupac u svakom trenutku treba znati gdje je, kamo ga koja poveznica vodi i kako se vratiti. Plitka struktura i jasni putovi ovdje pomažu — ne zato što je „manje klikova” magično bolje, nego zato što kraći i jasniji put ostavlja manje mjesta za dvojbu i odustajanje.

Česte greške u navigaciji web shopa

Iz prakse, ovo su pogreške koje najčešće viđam:

  • Pretrpan glavni izbornik — sve kategorije natrpane u traku, pa se nijedna ne ističe.
  • Nazivi iz internog žargona — oznake koje kupac ne prepoznaje.
  • Skrivena ili slaba tražilica — teško uočljiva na desktopu, a na mobitelu zakopana u izborniku.
  • Filteri bez kontrole indeksiranja — milijuni filter-adresa koje troše crawl budget i pune indeks duplikatima.
  • Nedostatak navigacijskog traga — kupac koji je s Googlea stigao na stranicu proizvod možda ne zna odmah u kojoj kategoriji je taj proizvod i ne zna gdje pogledati više sličnih proizvoda.
  • Površno napravljena mobilna navigacija — sitne poveznice koje se teško pogađaju prstom, košarica koju kupac mora tražiti i izbornik u koji je natrpano previše poveznica.

Navigacija pretvara strukturu u iskustvo

Navigacija web shopa određuje hoće li kupac pronaći ono što traži i shvatiti strukturu vaše stranice. Glavni izbornik koji vodi, navigacijski trag koji orijentira, filteri koji sužavaju izbor, tražilica koja pronalazi i mobilna navigacija koja stane na ekran — kad se ti elementi spoje, kupac se kreće kroz web shop bez razmišljanja i češće završava kupnju.

Ako gradite novu trgovinu, navigaciju posložite zajedno sa strukturom, a ne naknadno; ako je već imate, pregled izbornika, filtera i mobilnog iskustva gotovo uvijek otkrije mjesta na kojima se tiho gube kupci. Kako izgleda postavljanje WooCommerce trgovine od početka, pišem u vodiču izrada web shopa.

Želite li da navigacija vaše trgovine stvarno vodi kupca do prodaje, pogledajte uslugu izrade web stranica i pošaljite upit. Rado ću pregledati vaš web shop i otkriti prilike za poboljšanje navigacije web shopa.

Dražen Stopić

Pišem o web dizajnu, izradi web stranica i SEO optimizaciji, a gotovo sve što objavljujem na ovom blogu temelji se na iskustvu iz svakodnevnog rada s klijentima.

Podijelite objavu!