Što je UX sitemap i kako izraditi svoj

1. Što je UX sitemap

UX sitemap je vizualni alat koji pomaže organizirati i skicirati strukturu web stranice ili aplikacije, s fokusom na korisničko iskustvo. Prikazuje hijerarhiju i odnos između različitih stranica te pomaže identificirati sadržaj koji nedostaje, odrediti prioritete ključnih elemenata i osmisliti digitalni proizvod koji je lako koristiti.

Definicija UX sitemapa

Kada govorimo o web dizajnu, UX sitemap pruža pregled izgleda web stranice, prikazujući kako su različite stranice međusobno povezane.

U web dizajnu i web razvoju, UX sitemap služi i kao alat za suradnju, gdje ga dizajneri, developeri, kreatori sadržaja i klijenti koriste kako bi uskladili izgled web stranice s poslovnim ciljevima i potrebama korisnika.

UX sitemap se može promatrati kao mapa ili kostur web stranice, čija je svrha uspostaviti ispravnu strukturu. Obično se implementira u ranim fazama web dizajna, budući da ga kasnije dizajner koristi za izradu wireframea za web stranicu, ali i kao referencu za razvoj.

Razlika između UX sitemapa i XML sitemapa

Prilikom istraživanja sitemapova, vjerojatno ćete naići na informacije o drugoj vrsti sitemapa - XML sitemapu. Kako biste izbjegli zabunu, važno je razlikovati ova dva pojma. Dok je XML sitemap datoteka koja popisuje ključne stranice web stranice, pomažući tražilicama da bolje razumiju web stranicu, UX sitemap dio je procesa dizajna s fokusom na organizaciju sadržaja i stvaranje logičnog toka koji poboljšava korisničko iskustvo.

2. Osnovni koncepti UX sitemapa

Za izradu učinkovitog UX sitemapa, važno je imati osnovno razumijevanje određenih koncepata. Iako nije nužno biti stručnjak za informacijsku arhitekturu (IA), temeljno poznavanje nekih načela poboljšat će kvalitetu i upotrebljivost UX sitemapa.

Načela informacijske arhitekture (IA)

Informacijska arhitektura uključuje organiziranje i strukturiranje sadržaja web stranice na način koji je korisnicima lako razumljiv i za kretanje. Važna je za UX sitemapove jer pomaže u planiranju strukture web stranice. Ključna IA načela za dobar UX sitemap su:

• Organizacija sadržaja: Grupiranje i označavanje sadržaja na smislen način, kako bi se korisnici lako snašli.
• Navigacija: Razumijevanje globalne naspram lokalne navigacije i stvaranje strukture koja korisnike glatko vodi kroz stranicu.
• Odnosi sadržaja: Prikazivanje kako su različiti dijelovi sadržaja povezani, olakšavajući korisnicima pronalaženje srodnih informacija.
• Dizajn usmjeren na korisnika: Dizajniranje uzimajući u obzir korisnike i način na koji će koristiti stranicu.
• Pristupačnost: Osiguravanje da je sadržaj lako pronaći i dostupan svim korisnicima, uključujući osobe s invaliditetom.

Za više detalja o informacijskoj arhitekturi pogledajte sljedeći članak: Information Architecture (IA). Ovaj članak pruža osnovnu podlogu o informacijskoj arhitekturi, korisnu prilikom izrade UX sitemapa.

Osnovni koncepti UX dizajna

Osnovni koncepti UX dizajna usmjereni su na razumijevanje potreba korisnika i stvaranje sučelja jednostavnih za korištenje. Primjena ovih koncepata osigurava da se zadovolje i potrebe korisnika i poslovni ciljevi. Ključni koncepti uključuju:

• Potrebe i ciljevi korisnika: Razumijevanje tko su korisnici i što im je potrebno od web stranice. Ovo pomaže u određivanju prioriteta sadržaja i strukturiranju sitemapa.
• Inventar sadržaja: Poznavanje postojećeg sadržaja i onoga što treba dodati. Ovo osigurava da su sve potrebne informacije uključene i organizirane u sitemapu.
• Poslovni ciljevi: Usklađivanje sitemapa s poslovnim ciljevima web stranice. Ovo osigurava da su ključne stranice lako dostupne i podržavaju ukupne ciljeve web stranice.

Ove informacije pružaju dobru osnovu za izradu UX sitemapa koji ne samo da logično organizira sadržaj, već i poboljšava korisničko iskustvo te podržava ciljeve web stranice.

3. Ključni alati za izradu sitemapova

Izrada sitemapa može započeti alatima jednostavnim poput olovke i papira. Ručno crtanje sitemapa omogućuje brzo brainstormanje i pomaže u vizualizaciji ukupne strukture web stranice ili aplikacije prije prelaska na digitalne alate.

Neki digitalni alati koje sam smatrao korisnima su Octopus.do i ChatGPT. Octopus je alat koji korisnicima omogućuje izradu sitemapa od nule pomoću jednostavnog sučelja za povlačenje i ispuštanje, olakšavajući organiziranje i preslagivanje stranica. Osim toga, Octopus nudi zanimljive značajke poput generiranja putem AI-ja i dijeljenja putem URL-a, omogućujući korisnicima da sitemap podijele s klijentima izravno putem Octopusa.

ChatGPT je također koristan alat kada je riječ o izradi sitemapa, budući da može pomoći u strukturiranju informacija i generiranju početnih ideja.

Kompletan sitemap moguće je izraditi putem Octopus.do. Ipak, radi prezentacije, sitemap radije premještam u Figmu, jer volim sve elemente povezane s dizajnom držati u jednoj datoteci.

4. Kako izraditi UX sitemap

Iako alati poput Octopus.do i ChatGPT-a mogu značajno unaprijediti proces izrade sitemapa, uspjeh sitemapa ovisi o razumijevanju ciljeva projekta, potreba korisnika i o tome kako učinkovito strukturirati sadržaj. Ove alate koristim kao podršku svom radnom procesu, no uvijek zadržavam fokus na stvaranju sitemapa usmjerenog na korisnika i orijentiranog na ciljeve.

Za izradu informiranog sitemapa korisno je slijediti sljedeće korake:

1. Pozivanje na dizajn brief
2. Posebna pažnja na ciljeve projekta
3. Prikupljanje svog postojećeg sadržaja
4. Pregled sličnih web stranica za inspiraciju
5. Organiziranje sadržaja i izrada sitemapa
6. Pregled sitemapa s klijentom

Pozivanje na dizajn brief

Kako bi se uspješno prikupile informacije o klijentu, poput podataka o tvrtki, ključnih riječi brenda, tona glasa, ciljane publike i ciljeva projekta, važno je provesti početni intervju i zajedno s klijentom popuniti dizajn brief.

Uz popunjeni dizajn brief moguće je referirati se na njega tijekom cijelog procesa izrade sitemapa i biti siguran da se donose informirane odluke.

Posebna pažnja na ciljeve projekta

Definiranje ciljeva projekta zapravo se događa tijekom faze dizajn briefa. Ipak, prilikom izrade sitemapa važno je imati te ciljeve na umu i ne izgubiti fokus. Ciljevi projekta mogu biti jednostavni poput privlačenja više potencijalnih klijenata ili prodaje više proizvoda, no važno je zapamtiti da svaka tvrtka nema iste ciljeve projekta. Neke tvrtke žele povećati angažman korisnika stvaranjem dugoročnih korisnika putem kvalitetnog sadržaja, dok druge žele prikazati svoje proizvode na specifičan način i olakšati korisnicima kontaktiranje.

Prikupite sav postojeći sadržaj

Nije važno radi li se o redizajnu stare web stranice ili izradi potpuno nove - važno je prikupiti što više informacija o proizvodu i klijentu. Ove informacije dolaze iz dizajn briefa, ali i iz sve dostupne dokumentacije, fotografija itd. koje klijent može pružiti. Sve je vrijedno, a dizajner mora osigurati da klijent pruži sve informacije koje ima.

Ako klijent ima staru web stranicu, korisno ju je pogledati. Ako imaju brošuru ili neke fotografije, vrijedi pregledati i njih. Svaki djelić informacije može pružiti bolji osjećaj kako predstaviti njihov sadržaj i razumjeti prednosti i nedostatke njihovog poslovanja. Na primjer, ako klijent nema kvalitetne fotografije ili ih uopće nema, možda je bolje izbjeći osmišljavanje sitemapa koji naglašava slike, poput uključivanja stranice s galerijom.

Pregledajte slične web stranice za inspiraciju

Poduzeća u sličnoj grani ili niši često imaju sličan sadržaj, zbog čega je važno analizirati slične projekte, aplikacije ili web stranice. Prilikom popunjavanja dizajn briefa moguće je da će klijent spomenuti neke web stranice koje bi se mogle koristiti za inspiraciju, no potrebno je provesti i vlastito istraživanje. Na primjer, istraživanjem srodnih aplikacija i web stranica možemo dobiti osjećaj o tome kako funkcionira industrija, što konkurencija radi dobro, a gdje možda zaostaje. Osim što stječemo razumijevanje niše istražujući web stranicu konkurenta, moguće je uočiti dobre ili loše UX prakse, što nam može pomoći pri oblikovanju vlastitog pristupa prilikom izrade sitemapa. Istražit ću Awwwards, WebDesign Inspiration i slične web stranice kako bih vidio kako nagrađivane stranice pristupaju strukturiranju svog sadržaja.

Izrada sitemapa

Nakon prikupljanja svog postojećeg sadržaja i istraživanja sličnih web stranica za inspiraciju, sljedeći je korak u izradi UX sitemapa strateška organizacija sadržaja. To znači uzimanje prikupljenih sirovih informacija i njihovo raspoređivanje na način koji je usklađen s ciljevima projekta i zadovoljava potrebe korisnika. Neke ključne stvari koje treba uzeti u obzir su:

• Skiciranje osnovne strukture - Izrada sitemapa trebala bi započeti skiciranjem glavnih dijelova web stranice, poput početne stranice, stranice o nama, stranice usluga ili proizvoda i kontakt stranice. Odatle je moguće ove dijelove razbiti na podkategorije ili podstranice. Važno je osigurati da je hijerarhija jasna i intuitivna, vodeći korisnike kroz stranicu na način koji ima smisla i podržava ciljeve web stranice.
• Usklađivanje s ciljevima projekta - Struktura sadržaja uvijek bi trebala odražavati primarne ciljeve web stranice. Bilo da je cilj generiranje potencijalnih klijenata, prodaja proizvoda ili edukacija korisnika - sadržaj bi trebao biti organiziran s tim na umu. Na primjer, ako je primarni cilj poticanje prodaje, stranice proizvoda trebale bi biti lako dostupne s početne stranice i istaknute u navigaciji. Ako je cilj educirati korisnike, resursi poput članaka ili studija slučaja trebali bi biti glavni fokus.
• Odražavanje potreba korisnika - Sitemap bi trebao biti usklađen s potrebama korisnika organiziranjem sadržaja na temelju načina na koji korisnici pretražuju i kreću se stranicom. Uvidi iz istraživanja korisnika mogu pomoći u određivanju prioriteta dijelova, poput, na primjer, postavljanja "Podrške" na SaaS web stranici gdje je korisnici mogu lako pronaći. Ovo osigurava da struktura stranice odgovara ponašanju korisnika i pojednostavljuje navigaciju.
• Grupiranje i označavanje - Učinkovita organizacija sadržaja uključuje grupiranje srodnih stavki i njihovo jasno označavanje. Ovo čini navigaciju jednostavnom i pomaže korisnicima razumjeti gdje se nalaze na stranici. Na primjer, svi resursi korisničke podrške mogli bi biti grupirani pod dijelom "Podrška", s podkategorijama za često postavljana pitanja, kontakt informacije i vodiče za rješavanje problema. Svaki dio i poddio trebali bi biti označeni na način koji je korisniku odmah jasan, izbjegavajući zbunjujuće ili preterano složene izraze.
• Uravnoteženje sadržaja - Ovo znači osigurati ravnomjernu raspodjelu sadržaja po cijeloj stranici. Dobro je za korisničko iskustvo i SEO izbjegavati da jedan dio bude preopterećen informacijama dok su drugi oskudni sadržajem.
• Više iteracija - Nakon početnog nacrta, dobro je sitemap nekoliko puta iterirati i preispitati neke odluke. Kad se čini da je sitemap gotov, spreman je za pregled s klijentom.

Pregled s klijentom

Nakon izrade sitemapa, važno ga je pregledati s klijentom. Ključno je da klijent potvrdi da je zadovoljan sitemapom i vašim objašnjenjem zašto ste sadržaj organizirali na određeni način. Na primjer: Ako klijent inzistira na zasebnoj stranici za galeriju, ali sam ja odlučio korisnicima pružiti galeriju na svakoj stranici s fotografijama specifičnim za tu stranicu (na primjer, drugačija galerija za stranicu "O nama" i drugačija galerija za stranicu "Proizvodi"), to bi trebalo komunicirati klijentu uz objašnjenje prednosti. (U ovom kontekstu, prednost je pružiti korisnicima vizualnu povratnu informaciju vezanu uz svaku specifičnu stranicu, umjesto da se sve slike stave na jedno mjesto bez odgovarajućeg konteksta). Naravno, u ovoj sesiji pregleda ključno je pažljivo saslušati povratne informacije klijenta. Cilj nije samo "braniti" dizajnerske odluke, već sudjelovati u produktivnoj raspravi u kojoj se ideje propituju i zajednički usavršavaju. Dobro je imati na umu da klijent izvrsno poznaje svoje poslovanje, baš kao što dizajner poznaje dizajn.

5. Primjer izrade sitemapa za Spatium Real Estate

Kako bismo ilustrirali kako ovaj proces funkcionira u praksi, prođimo kroz primjer projekta koji sam napravio za Spatium, tvrtku specijaliziranu za nekretnine. Za više informacija o projektu pogledajte stranicu s opisom Spatium projekta.

Prije nego što sam uopće započeo proces, koristio sam komad papira i skicirao stranice koje su gotovo uvijek prisutne na web stranici, poput početne stranice, usluga/proizvoda, o nama, kontakta itd. Kasnije, kako istražujem, sortiram sadržaj i prikupljam dodatne uvide, mogu izmijeniti skicu ili je čak potpuno ukloniti ako ne odgovara potrebama klijenta.

Kao što je već spomenuto - prvi korak svakog procesa dizajna je izrada dizajn briefa. Isto sam učinio i kad sam počeo s projektom Spatium. Ovo mi je omogućilo da se referiram na sve važne informacije iz dizajn briefa. Za bolji uvid u to kako je izgledao Spatium dizajn brief, uključio sam ga u privitak. Sve osjetljive informacije su uklonjene ili izmijenjene kako bi se zaštitila privatnost klijenta.

Uz pomoć dizajn briefa, već mogu utvrditi kako strukturirati web stranicu kako bih istaknuo najvažnije informacije. Prilikom razvoja sitemapa, često ću se vraćati na dizajn brief kako bih provjerio koje su informacije i dokumentaciju klijent pružio te kako bih se uvjerio da je sitemap u skladu s potrebama klijenta i potrebama njihovih korisnika.

Unutar dizajn briefa nalazi se dio s ciljevima projekta. Posebnu pažnju posvećujem ciljevima projekta, jer su oni najvažniji aspekt web stranice. U dizajn briefu, primarni ciljevi za projekt web stranice Spatium Real Estate uključuju:

• Olakšati posjetiteljima pronalaženje i istraživanje odgovarajuće vrste nekretnine za njihove potrebe, bilo da žele kupiti, unajmiti ili investirati u turističke nekretnine.
• Istaknuti karijerne mogućnosti kako bi se privukli vrhunski talenti dok Spatium nastavlja rasti i širiti svoj tim.
• Osvježiti izgled i dojam web stranice kako bi se stvorila moderna, privlačna online prisutnost koja poboljšava vidljivost brenda i privlači više posjetitelja.

Ponovnim pregledom ciljeva projekta iz dizajn briefa mogu zaključiti:

• Dodati zasebne stranice za kupnju, najam i investiranje u turističke nekretnine. Iako su sve usluge povezane s nekretninama, želim da te usluge budu na zasebnim stranicama (i budu zasebne stavke u izborniku). Konkretno, jer ću kasnije otkriti da svaka od ovih kategorija ima dodatne podkategorije, pa će ovakvo sortiranje pomoći i pružiti korisnicima ugodniji UX.
• Spatiumu je važno istaknuti karijerne mogućnosti. Neprestano se šire i žele biti pristupačni budućim zaposlenicima. Stoga je jasno da im je potrebna i zasebna stranica za karijere. Na primjer: da zapošljavanje nije toliko važno, možda bi kontakt stranica bila dovoljna, ili manji dio s pozivom na akciju unutar kontakt stranice za potencijalne zaposlenike.

Kroz cijeli proces izrade sitemapa spontano ću bilježiti napomene dok prikupljam uvide i sortiram sadržaj.

Ovdje ću ponovno pregledati sav sadržaj i informacije koje je korisnik pružio. Također sam uključio nekoliko ključnih točaka u dio Dodatne napomene dizajn briefa, pa ću i to provjeriti:

• Dostavljene su smjernice brenda i dizajn sustav, osiguravajući dosljednost vizualnih elemenata i funkcionalnosti web stranice.
• Postoji 5 različitih poslovnica
• Za informacije vezane uz sadržaj pogledajte staru web stranicu

Osim ovoga, dio o ciljanoj publici iz dizajn briefa također pruža vrijedne informacije:

• Ciljana publika za Spatium Real Estate uključuje i hrvatske stanovnike i strance zainteresirane za kupnju nekretnina u Hrvatskoj. Ova publika obuhvaća one koji traže turističke nekretnine, prvenstveno namijenjene strancima, kao i stambene nekretnine namijenjene hrvatskim stanovnicima.

Pregledat ću slične web stranice za inspiraciju i vidjeti kako su pristupile nekim dizajnerskim odlukama - konkretno onima vezanim uz sitemap. U dizajn briefu, unutar dodatnih napomena, klijent je tijekom intervjua spomenuo da su njihovi konkurenti Dogma Nekretnine, Manor Nekretnine i Lider Nekretnine. Istražit ću njih, ali i pogledati neke web stranice nekretnina koje klijent nije naveo kao konkurente.

Nakon što je istraživanje dovršeno, zapisat ću dodatne napomene na papir, u Figmu ili bilo koji drugi alat koji koristim tijekom ovog procesa. Zatim ću strateški rasporediti sadržaj na temelju ciljeva projekta i potreba korisnika.
Moj pristup izradi sitemapa općenito je prilično metodičan, a to vrijedi i za projekt Spatium. Uključit ću stranice za koje znam da su obično potrebne za web stranicu, uključujući početnu stranicu, kontakt stranicu, impresum, pravila privatnosti i stranicu o nama. Dodatno, uključit ću stranice koje specifično odgovaraju zahtjevima klijenta, poput onih za kupnju i najam. Budući da su karijere važne Spatiumu, logično je istaknuti njihov tim na stranici o nama.

Tijekom intervjua klijent je izrazio interes za stranicu vijesti, pa ću uključiti arhivu vijesti s pojedinačnim člancima vijesti. Stranica za karijere također će biti dodana, jer je ključan aspekt za klijenta. Uključit ću sve preostale stranice proizašle iz prikupljenih informacija. Ako je potrebno, ponovno ću procijeniti neke odluke, pregledati pružene informacije i osigurati da je moj sitemap usklađen s detaljima navedenim u dizajn briefu.

Nakon dovršetka sitemapa, potrebno je imati barem još jedan pregled s klijentom. Na primjer: Tijekom pregleda, klijent je inzistirao da izradim zasebne stranice za O nama i Naš tim, budući da su njihov tim i ljudi vrlo važni za njihov rad. Napravio sam prilagodbe tijekom našeg intervjua i dogovorili smo se da je to struktura koju želimo za web stranicu, jer ispunjava ciljeve koje smo postavili prilikom pisanja dizajn briefa, usmjerena je na korisnika i jednostavna za korištenje.

Zaključak

Izrada učinkovitog UX sitemapa temeljni je korak u procesu web dizajna, koji postavlja temelje za web stranicu prilagođenu korisniku i usmjerenu na ciljeve. Razumijevanjem što je UX sitemap i ključnih koncepata povezanih s njim, moguće je osigurati da naš dizajn bude i strateški i usmjeren na korisnika. Korištenje pravih alata može značajno ubrzati proces izrade sitemapa, no pravi uspjeh leži u sposobnosti dizajnera da uskladi sitemap s poslovnim ciljevima klijenta i potrebama njihovih korisnika. Pažljivim planiranjem, organizacijom sadržaja i stalnom suradnjom s klijentom, moguće je izraditi sitemap koji ne samo da poboljšava korisničko iskustvo, već i podržava ukupne ciljeve web stranice.