Upotreba vizualne mape stranica radi boljeg dizajniranja protoka korisnika
Vizualna mapa stranica je plan pomoću kojeg definiramo hijerarhijski popis stranica koje će biti dostupne našim korisnicima.
Bez obzira koliko je web stranica jednostavna ili složena na početku izrade moramo imati razrađen koncept kako bi potom nastavili u iduću fazu izrade grafičkog prijedloga. U tome nam može pomoći kreiranje vizualne mape.
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 za kontakt, 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.
Postoji još nekoliko tipova mapa stranica koje su nam korisne u svijetu web dizajna a treba ih jasno razlikovati zbog sasvim drugačije primjene.
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).
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. A 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.
Dobro kreirana mapa stranica omogućuje vrlo dobro iskustvo posjetitelja i njihovo putovanje kroz pojedine web stranice. Pomoću mape 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 mape potrebno je definirati:
- trenutni cilj poslovanja
- glavna područja poslovanja
- ciljevi kako će se tvrtka želi širiti u budućnosti
Odgovaranjem na pitanja pomažemo stvoriti mapu 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.
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 razumjeli koji su glavni prioriteti za strukturu, jer u protivnom možemo imati velik broj primarnih stranica i plosnatu strukturu. Robusniji alati dozvoljavaju postavljanje komentara direktno na vizualnu mapu te svi sudionici u timu imaju njihov pregled na jednom mjestu.
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 je 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, ništa nas ne spriječava da koristimo samo običan papir i olovku ali robusniji alati ipak postoje s razlogom. Primjerice, Dynomapper možemo povezati s Google Analytics alatom kako bi učinkovito sortirali stranice prema broju prikaza, stopi napuštanja i drugim mjernim podacima.
Ako imamo postojeće web stranice na WordPress platformi još jedna mogućnost je korištenje dodatka Visual Sitemap koji nam omogućuje vizualizaciju postojeće strukture stranica. Dodatak isključivo generira strukturu stranica unutar administrativnog dijela te ga nakon korištenja možemo obrisati.
Izrada mape radi 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.
U konačnici, uvijek trebamo imati na umu da korisnik čim jednostavnije navigira cjelokupnim projektom i da unutrašnje stranice nisu preduboko zatrpane. Kaže se da je optimalno riješena struktura kada je svaka stranica dostupna korisniku na maksimalno 3 klika nakon slijetanja na stranicu.
Također, tražilicama je mapiranje strukture web stranice iznimno bitno i one počinju to raditi od startne pozicije (tj. od početne stranice) pa sve dublje po hijerarhiji (članci, proizvodi). Shodno tome, svaka stranica koja je dublje zakopana smatra se da je od slabije važnosti za projekt.
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.
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.
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 kreiranja takve hijerarhije možemo se početi igrati s varijacijama. Napravi se kopija mape i eksperimentiramo s različitim strukturama i drugim idejama kojima bi mogli drugačije ali optimalnije postaviti cjelokupnu strukturu.
Kada je struktura završena, potrebno je detaljnije opisati kako bi bili sigurni 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 potrebne u svim fazama razvoja.
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 i da nije natrpan.
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.
Izrada vizualne mape stoga je koristan postupak za dizajnere i developere koji žele pronaći način da poboljšaju navigaciju web stranicama, radi boljeg razumijevanja veličine projekta i opsega posla i kako se ne bi propustili važni dijelovi arhitekture web stranica.