Upotreba vizualne mape stranica radi boljeg dizajniranja protoka korisnika

Pregled sadržaja

Bez obzira koliko je web stranica jednostavna ili složena na početku izrade moramo imati razrađen koncept kako bi potom nastavili u izradu grafičkog prijedloga. U tome nam može pomoći kreiranje vizualne mape.

Što je vizualna mapa stranica

Vizualna mapa stranica je plan pomoću kojeg izrađujemo hijerarhijski popis stranica koje će biti dostupne našim korisnicima. Vrlo je učinkovita za planiranje razvoja web stranica a svima koji su uključeni u projekt omogućuje međusobnu suradnju, što čini tijek izrade lakšim i prikladnijim. Velika je ušteda u razvoju složenih projekata jer se ne gubi vrijeme ako postoji dobar plan a svi članovi tima i sudionici imaju priliku ostaviti komentar i sami jednostavno modificirati strukturu i opis stranica.

Bilokakva izrada mape stranice započinje s jasnim razumijevanjem ciljne publike. Neke uobičajene značajke mogu biti u svim mapama stranica jer pružaju uobičajeno poznate obrasce interakcije korisnika. U takve stranice ubrajamo stranicu zakontakt, stranicu za prijavu korisnika i slično.

Mapa stranica pomaže nam vizualizirati međusobne veze između različitih stranica na način koji ima najviše smisla za posjetitelje a i za tražilice.

Alternativne verzije

Postoji još nekoliko tipova mapa stranica koje su nam korisne u svijetu web dizajna. XML mapa stranica nam je bitna kako bi tražilicama dali do znanja koje sve stranice postoje u našem projektu a da ih one mogu indeksirati. Time im olakšamo analizu svaki puta kada dotaknu našu domenu i usmjerimo ih na bitne stvari. S druge strane, postoji HTML mapa stranica koja je korisna za posjetitelje jer im se na jednom mjestu prezentira ukupan popis svih značajnih stranica, što je korisno na web stranicama koje su ogromne (npr. svjetski poznata web trgovina Amazon).

Prednosti vizualne mape

Prilikom izrade projekta potrebno je napraviti plan stranica. Vizualna karta nam ovdje od iznimne pomoći radi strukturiranja i organizacije od samog početka. Sve kasnije nadogradnje i izmjene strukture postaju jednostavnije.

Prednost za posjetitelja

Dobro kreirana mapa stranica omogućuje vrlo dobro iskustvo posjetitelja i njihovo putovanje kroz pojedine web stranice. Pomoću mape stranice možemo stvoriti tok kretanja koji će korisnika preusmjeriti na određenu stranicu unutar projekta. Primjerice, možda želimo pomoći posjetiteljima da čim prije pronađu stranice proizvoda kada stignu na početnu stranicu ili preko odredišne (landing) stranice.

Prije početka izrade potrebno je definirati:

  • trenutni cilj poslovanja
  • glavna područja poslovanja
  • ciljevi kako će se tvrtka širiti u budućnosti

Odgovaranjem na pitanja pomažemo stvoriti mapu stranica koja će biti učinkova da zadovolji sve zahtjeve korisnika, poboljša korisničko iskustvo na web stranicama i poveća prodaju čime se postižu dugoročni ciljevi.

Proces izrade mape

Potrebno je razmisliti o svim glavnim sekcijama web stranice i potom ih staviti na papir. Primjeri takvih stranica mogu biti: Proizvod, Blog, Cjenik, O nama, Prijava, Registracija… Nije važno da se puno sadržaja ubaci kao primarne stranice ako su to stranice koje nisu toliko bitne da im se ne treba pristupiti preko glavne stranice. Takve stranice nalaze se hijerarhijski unutar neke druge, npr. web trgovina zdrave hrane može imati odjeljak Recepti u kojem su dalje navedene kategorije “Deserti”, “Glavna jela”, “Salate” i sl. Takve stranice su sekundardne i navode se unutar primarnih čime dobimo nešto kao obiteljsko stablo.

Konzultacijom s drugim suradnicima na projektu mogu se pojedine stranice korigirati kako bi razumijeli koji su glavni prioriteti za strukturu, jer u protivnom možemo imati velik broj primarnih stranica i plosnatu strukturu. Robusniji alati dozvoljavaju stavljanje komentara direktno na vizualnu mapu te svi sudionici u timu imaju njihov pregled na jednom mjestu.

Dobra arhitektura web stranica pomaže nam da razumijemo izgled stranice i koje promjene trebamo ugraditi kako bi privukli više posjetitelja te omogućili bolje konverzije.

Alati za izradu vizualne mape

Na tržištu postoji veći broj alata koji nam mogu omogućiti vizualizaciju. Neki od njih mogu analizirati postojeće web stranice i rekreirati sadašnju strukturu a potom ju možemo korigirati dalje prema našim potrebama. S obzirom na to da se stanje na tržištu brzo mijenja i alati se neprestano razvijaju i nadograđuju, samo ćemo ih kratko spomenuti. Važno ih je koristiti praktično i kada je plan kreiran idemo u iduću fazu izrade. Za njihovu izradu ne trebamo imati određene vještine.

Robusnija rješenja za izradu mapa za koju je potrebno koristiti premium licencu:

Ili jednostavniji alat, posve besplatan, primjeren za manje projekte gdje se traži munjevito brz pristup:

Naravno, možemo koristiti i običan papir i olovku.

Ako imamo postojeće web stranice na WordPress platformi još jedna mogućnost je korištenje dodatka Visual Sitemap koji nam omogućuje vizualizaciju u postojeću strukturu stranica. Dodatak isključivo generira strukturu stranica unutar administrativnog dijela te ga nakon korištenja možemo obrisati.

Izrada vizualne mape stranice

Postavlja se na početku rada projekta kada se utvrđuje koji sadržaj treba biti uključen te koji predlošci trebaju biti dizajnirani. Kompleksnije strukture mogu koristiti različite boje radi lakšeg vizualnog skeniranja tijekom pregledavanja ključnih sekcija.

Primarna razina

Uvijek krećemo od početne stranice jer tada imamo jasnu hijerarhiju pred sobom. Primjerice, početna stranica je stranica na nultoj (startnoj) razini a potom se dalje grana u primarnu razinu gdje su stranice proizvoda, novosti u blogu, stranice usluga, kontakta itd.

Sekundarna razina

Druga razina mape sadrži sekundarno važne stranice, primjerice kategorija proizvoda. Važno je cjelokupnu izradu sagledati iz kuta korisničke perspektive kako bi korisniku u konačnici olakšali navigaciju i omogućili mu da troši manje vremena.

Tercijarna razina

Stranice treće razine sadrže sadržaj koji je fokusiran na jednu konkretnu zamisao. Primjerice, ako je stranica druge razina “zdrava prehrana”, tada ove tercijarne stranice mogu biti “proteini”, “ugljikohidrati” ili pak “voće i povrće” ili “dućani zdrave hrane” itd.

Za većinu web stranica dovoljno je imati 3 razine hijerarhije dok one kompleksnije mogu uključivati 4 ili 5 razina.

Nakon izrade

Nakon kreiranja takve hijerarhije možemo se početi igrati s varijacijama. Napravi se kopija i eksperimentiramo s različitim strukturama mape i drugim idejama kojima bi mogli drugačije ali bolje postaviti strukturu. Kada je struktura završena, potrebno je detaljnije opisati kako bi bili sigurno da nam nešto ne nedostaje. Primjerice, svakom elementu koji određuje stranicu u sklopu karte možemo dodati opise i natuknice za pobliže opisivanje pojedinih odjeljaka. Tako nećemo nikada izgubiti fokus za glavni cilj a objedinit ćemo informacije koje su nam potrebn ou svim fazama razvoja.

Web trgovine

Web trgovine imaju složenu i jače razgranatu strukturu. Jedna od glavnih načela dobre web trgovine ovisi upravo o dobrom i temeljito osmišljenom navigacijskom sučelju. Uobičajeni elementi su često:

  • početna stranica (naslovnica)
  • katalog proizvoda
  • stranica pojedinog proizvoda
  • stranica košarice
  • obrada narudžbe
  • primarne stranice (O nama, Kontakt…)
  • stranica računa korisnika

Dobra vizualna mapa stranice predstavlja sve ključne stranice i strukturira ih na način da je korisniku jasan, da nije natrpan.

Sažetak

Kada se pravilno izvodi, vizualna mapa stranica postavlja čvrste temelje za izradu web stranice a time direktno utječe na finalno rješenje i njezin uspjeh. Kada se radi dizajn web stranica od nule, rijetko imamo točnu predodžbu o količini stranica koje će postojati. Vizualnom prezentacijom lako možemo vidjeti ako su neki dijelovi suviše oskudni a neki dijelovi preglomazni. Te probleme možemo riješiti prilikom samog planiranja i ne dopustiti da nas iznenade u kasnijoj fazi.