Izrada web rješenja koja uključuju sustav za upravljanje sadržajem (Content Management System - CMS) multidisciplinaran je i kompleksan proces. Sam proces izrade obično je dugotrajan jer se sastoji od mnogo koraka u koje moraju biti uključeni ljudi različitih profila: od UX dizajnera i dizajnera interakcija preko glavnog urednika sadržaja (eng. content strategist) do backend developera. Sami koraci mogu imati više iteracija dok se ne postigne potrebna razina funkcionalnosti i kvalitete. Promotrimo koji su glavni izazovi i problemi s kojima se susrećemo i razmotrimo neka moguća poboljšanja.
Usput rečeno, proces izrade web rješenja moguće je značajno pojednostaviti (a samim time i pojeftiniti) tako da se nađe/kupi gotov predložak i prilagodi konkretnom projektu. To je prihvatljivo za generičke koncepte i dobro definirane niše, npr. kod internetskih stranica za oglašavanje apartmana. Međutim, svatko tko razvija specifični koncept ili želi izgraditi prepoznatljivost branda, neće se ograničiti na gotovu temu.
Kako se to nekada radilo?
Prije više od deset godina, kada smo počeli raditi na prvim web rješenjima, proces izrade, pa čak i profil uključenih ljudi, bio je drugačiji nego danas. Klijent je angažirao dizajnerski studio kojem je web bio tek nekakva novotarija koja treba zadovoljiti formu, a stranice su uglavnom izrađivali grafički dizajneri i programeri.
U procesu odabira dizajnerskog studija klijent je obično zatražio tri varijacije dizajna kao idejno rješenje s naglaskom na vizualni dojam. Nakon odabira, klijent je dostavio često nedostatan feedback na temelju kojih je studio napravio cijeli dizajn u Photoshopu. Neki su studiji već u to vrijeme imali zaposlene “rezače”, pa se taj PSD (Photoshop file) rezao u HTML/CSS nakon završetka faze dizajna. Većina je sadržaja bila dobro poznati “lorem ipsum” privremeni tekst. Nakon rezanja Photoshop datoteke u HTML i CSS predložak, izgled predloška obično nije bio 100% jednak originalnom dizajnu jer je, primjerice, renderiranje fontova u Photoshopu bilo drugačije od renderiranja u tada aktualnim internetskim preglednicima, poput Internet Explorera.
U to je vrijeme treća developerska firma, koja nije nužno bila stručna u web tehnologijama, preuzimala HTML/CSS predložak i implementirala rješenje u PHP-u, ASP-u, ASP.NET-u ili Flashu kako bi klijent mogao samostalno ažurirati sadržaj poput vijesti ili liste proizvoda. Možemo reći da su tako razvijeni sustavi bili svojevrsne preteče CMS-a. Na kraju se već gotova stranica pokazivala klijentu koji često nije bio u potpunosti zadovoljan jer nije sve bilo isto kao u originalnom dizajnu (kreiranom u Photoshopu) pa se proces često znao otegnuti. Neki su klijenti inzistirali na sitnim vizualnim promjenama pa je tako nastao i pojam pixel pushing. I prilikom unosa stvarnog sadržaja moglo se pojaviti puno novih problema, što je također znalo razvući cijeli proces. Jednom kada se stranicu dovelo do zadovoljavajuće razine, objavilo bi ju se i ostavilo u takvom obliku nekoliko godina, nakon čega se prema potrebi redizajnirala od početka.
Što su donijele tehnološke promjene?
Proces je u međuvremenu prilično evoluirao. Pojavile su se nove specijalizacije, uključeno je više različitih profesija, a i sama je metodologija napredovala. Neke su stvari postale jednostavnije, no neke su se i zakomplicirale:
- Web standardi pomogli su da se smanji razlika između pojedinih preglednika, što je ubrzalo “rezanje”, ali je pojava mobitela i tableta uvela mnogo više dimenzija ekrana zbog čega su nastali responzivni i adaptivni načini implementacije, što je “rezanje” pak usporilo. Pozitivna je činjenica da se više ne traži identičan izgled na svim preglednicima. Za različite browsere i verzije browsera primjenjuju se rješenja adekvatna mogućnostima (tzv. progressive enhancement pristup).
- Poimanje weba kao ozbiljnije platforme za brendiranje, prodaju i općenito komunikaciju s kupcima te pojava više dimenzija ekrana koji se koriste (mobile, tablet, TV) potaknuli su većinu marketinških agencija da ne gledaju na web rješenje kao na samo još jednu kompliciraniju ilustraciju; web je ipak dinamičniji i interaktivniji medij od papira, s puno većim mogućnostima prilagodbe krajnjem korisniku.
- Iz istih gore navedenih razloga te zbog tražilica koje su postale svakodnevica (čitaj: SEO) više se pažnje počelo pridavati samom sadržaju.
- Pojavili su se CMS-ovi koji su omogućili bolje i lakše upravljanje sadržajem.
Kako radimo danas?
Proces naručivanja i izrade web rješenja konstantno se prilagođava promjenama nastalim kao posljedica tehnološkog napretka. Ispred nas je još dug put do idealnog procesa; današnji su koraci kombinacija zastarjelih metodologija te inovativnih praksi i široke palete dostupnih alata:
- Naručitelj nije zadovoljan s postojećom web stranicom pa traži nekoga tko će je učiniti responzivnom ili je jednostavno vizualno osvježiti.
- Naručitelj skuplja ponude više digitalnih ili web agencija i vjerojatno će tražiti idejno (besplatno) rješenje kako bi testirao sposobnosti svake pojedine agencije. Većina će ozbiljnih kandidata odbiti takav način rada jer su u tu svrhu izradili svoj portfolio. Već je duže vrijeme poznato da je kvalitetan dizajn web stranica posljedica procesa, a ne sposobnosti dizajnera da osmisli rješenje iz vedra neba.
- Već na prvim sastancima s potencijalnim kandidatima postaje jasno da je u većini slučajeva za responzivan (re)dizajn potrebno proći cijeli proces ispočetka. Nekim se klijentima to neće svidjeti, ali je u tom slučaju iznimno važno da agencija ustraje pri svojoj metodologiji jer inače rezultat projekta neće biti zadovoljavajući.
- U inicijalnom koraku projekta — fazi upoznavanja — agencija bi trebala savjetovati klijenta da jasno definira poslovne ciljeve koje novo web rješenje mora ispuniti. Pri tome bi se trebala uspostaviti i metrika uspješnosti definiranjem ključnih pokazatelja uspješnosti (eng. key performance indicators – KPI) kako bi se mogli ocijeniti rezultati (re)dizajna.
- Faza upoznavanja obuhvaća i utvrđivanje ciljanih skupina korisnika koje se definiraju uzimajući u obzir različite geografske, demografske, socio-ekonomske i ponašajne parametre. Često se događa da klijent ima pogrešne pretpostavke o korisničkim potrebama, stoga je korisno obaviti razgovore s predstavnicima ciljnih skupina.
- Nakon što se prikupe sve informacije o projektu, klijentu i njegovim korisnicima, izvodi se planiranje informacijske arhitekture i analiza sadržaja na postojećoj web stranici – potrebno je utvrditi koliko se postojeći model sadržaja preklapa s novim modelom i koje su obveze klijenta u pripremi novog sadržaja.
- Planiranje je najbolje započeti na papiru jer je to najbrži (i najjeftiniji) način za filtriranje i razradu početnih ideja. Već se na ovom koraku mogu testirati koncepti i uočiti potencijalni problemi redovitim testiranjem koncepta s krajnjim korisnicima.
- Nakon utvrđivanja glavnog koncepta, prelazi se na wireframing alate (npr. Axure, UXPin ili Balsamiq). Koncept ovisi o vrsti projekta, a moguće je razraditi ga na dva najčešća načina: mobile-first ili desktop-first. I u ovom se koraku često radi dosta pretpostavki i rad se temelji na funkcionalnostima umjesto da se bazira na korisničkim potrebama utvrđenim inicijalnim razgovorom s korisnicima i redovitim testiranjem koncepta.
- Nakon izrade wireframea ponekad je potrebno dizajnirati nekoliko tipičnih stranica u najčešće tri veličine (mobile, tablet i desktop) da bi se dizajn odobrio. Često su dovoljne i samo dvije veličine (mobile, desktop) dok se ostale ugađaju poslije. Nakon nekoliko iteracija dizajn se odobrava, a često je popraćen i ubacivanjem naknadno utvrđenih funkcionalnosti.
- Vizualni i informacijski dizajn je gotov. Sljedeći je korak odabir CMS-a, bilo da se radi o poznatom i raširenom rješenju ili sustavu razvijenom i korištenom unutar pojedine agencije. Vizualni dizajn se potom implementira kao frontend dio CMS-a. Postoje različiti pristupi, a mi u Netgenu primjenjujemo dizajn u CSS-u na HTML kod, koji se generira iz CMS-a, što nam bitno ubrzava proces izrade. Pojedine agencije imaju drugačiji pristup: gotovi HTML/CSS predlošci implementiraju se u vanjski dio CMS-a.
- Nakon završetka implementacije rade se završna testiranja, provjere i dorade za nekoliko veličina ekrana i uređaja.
- Klijenta se obučava kako uređivati sadržaj putem CMS. Često se događa da se, nakon što klijent počne unositi stvarni sadržaj, pojave sitniji nepredviđeni slučajevi koji se rješavaju u hodu jer je nemoguće predvidjeti kakav će sve sadržaj biti unesen na web stranice.
Napominjem da su popisani koraci vrlo okvirno opisani. Konkretan proces ovisi o agenciji, specifičnom klijentu, projektu i sl.
Općenito gledano, proces izrade klijentu prilagođenih web rješenja danas je u mnogim stvarima bolji nego prije, a poboljšali su se i alati (wireframe alati, programski jezici za web, standardi, alati za development u pregledniku, CMS-ovi, web fontovi, i dr.). Proces je fokusiran na ono što je klijentu bitno s obzirom na njegove ciljeve. Pokušava se zadovoljiti i poslovne i korisničke potrebe, a ozbiljnije agencije imat će unaprijed definirane ključne KPI-eve i sl. Mnogo se pažnje posvećuje UX-u, koji je pak je vrlo često pogrešno shvaćen pojam. Mnogi smatraju da se radi o dizajniranju lijepih sučelja, dok se, međutim, UX (eng. User eXperience) tehnike koriste upravo za ono što im samo ime govori: optimizira se korisničko iskustvo, a vizualni je doživljaj samo dio cijelog iskustva, dok je mnogo važnija percepcija korisnosti i jednostavnosti.
U sljedećem dijelu, koji će biti objavljen za nekoliko dana, pogledat ćemo što bismo mogli poboljšati u današnjem procesu izrade web rješenja. Stay tuned!
Dodatak: Bacite oko na drugi dio teksta – Kako poboljšati i ubrzati proces izrade web rješenja temeljenih na CMS-u?