Prijedlog novog dizajna internet stranica grada Rijeke

Prilikom redizajna stranice, a posebno one koju koristi veliki broj građana i koja služi transparentnosti – treba voditi računa o trenutnom sadržaju i problemima njegove prezentacije, kao i načinu na koji će se internet stranica koristiti u idućih nekoliko godina.

Stranica grada Rijeke ima dovoljno staža i došlo je vrijeme da se u cijelosti redizajnira. Uz redizajn, iskoristili smo priliku za reorganizaciju sadržaja ali i sam izgled stranica.

Većinu dizajna dovršili smo još u srpnju i kolovozu 2015., no s predstavljanjem nismo žurili. Kako smo imali vremena pogledati dizajn s odmakom od mjesec, dva – mogli smo odvagati jesu li sve naše odluke bile dobre, nakon čega smo prije održavanja prve službene predstavljanje Gradu, napravili još neka poboljšanja.

Javnost je dizajn mogla vidjeti na predavanju u sklopu prvog riječkog Frontend Meetupa čime smo prisutnima htjeli dati malu “ekskluzivu”. Osobno, to mi je bila prilika da podržim održavanje riječkog Frontend Meetupa kao važne osnove za buduće druženje i usavršavanje pojedinaca i firmi koji se u riječkom prstenu bave web dizajnom. Komentari su bili pozitivni. Sada je vrijeme da vam pokažemo na čemu smo radili i da čujemo vaše komentare.

Kompletne izvorne (Photoshop) datoteke već su javno dostupne na GitHubu, a na jednak ćemo način i pod istom licencom dostupnima učiniti i HTML kôd te WordPress temu.

Na što smo se fokusirali kod redizajna

Kao temelj redizajna uzeli smo dobru praksu (fokus na responzivni dizajn, accessibility, modernu informacijsku arhitekturu) ali i odgovore koje su nam građani uputili kroz anketu koju smo proveli online (a čije smo rezultate objavili u posebnom članku).

Zajednički elementi

Zajednički elementi poput zaglavlja (headera) i podnožja (footera) stranice definirani su prilikom dizajna početne stranice. Za razliku od trenutne stranice, nismo koristili vertikalnu sekundarnu navigaciju, nego smo se odlučili za istaknutiju glavnu navigaciju koja će prelaskom miša otkrivati dodatni sadržaj. Na taj način, važan sadržaj učiniti ćemo dostupnim unutar jednog do dva klika. Ideja je da ova navigacija bude stalno vidljiva na većim rezolucijama, pozicionirana pri vrhu ekrana radi lakše dostupnosti.

Sekundarna navigacija također je horizontalna, i nalazi se u gornjem dijelu stranice. Manja je u odnosu na glavnu navigaciju kako bismo naglasili razliku u važnosti. Arhiva novosti i Press su neki od linkova koje smo tamo smjestili, koji su važni, ali ne toliko da budu stalno dostupni. Zanimljiva je stavka “pregled dana” gdje želimo smjestiti pregled pojedinog dana u gradu Rijeci – od sjednica gradskog vijeća i dokumenata preko novosti i događanja – sve što vas zanima na jednom mjestu.

Pogledate li podnožje stranice, vidjet ćete da smo tamo smjestili najvažnije poveznice koje smo u vrhu stranice “sakrili”, odnosno učinili dostupnima prelaskom miša. Iako se jedna kategorija navigacija zove “brzi linkovi”, zapravo koncept navigacije je takav da sadrži najvažnije poveznice koji će vama građanima biti zanimljive. Dodatno, kontakti grada Rijeke i radna vremena Pisarnice stalno su istaknuta u podnožju stranice.

Početna stranica

Sama početna stranica koncipirana je tako da imamo nekoliko mogućnosti za prikaz sadržaja različite važnosti. Primjerice, na Dan grada Rijeke, željet ćemo tu informaciju istaknuti u slideru zajedno s linkom na više informacija.

U odnosu na trenutne stranice, jedna je od novosti je i isticanje važnih linkova. . Tu ćemo moći dodavati linkove ovisno o njihovoj aktualnosti, pa ćemo npr. prilikom upisa djece u vrtiće tu moći staviti ikonu i opis s više informacija. Očekujemo da ćemo time povećati konverziju prema ključnim stranicama (o čemu nešto više – kasnije u tekstu).

Druga novost je objava kratkih “važnih novosti” (iliti “breaking news”). Kada se u gradu događa nešto što ima relativno kratki rok trajanja (nekoliko sati), a nije očekivano ili se želi dodatno istaknuti zbog svoje važnosti (poput “puknuća magistralnog cjevovoda u ulici Fiorella la Guardije) – to će se učiniti odabirom posebne kategorije gjde će se odrediti trajanje te vijesti. Time želimo postići da stranica grada Rijeke bude početna stranica za sve koji se žele informirati o događanjima u gradu. Odjednom vam je nestalo vode? Pogledajte što kažu u gradu Rijeci. Vjerujem da tako možemo povećati kvalitetu komunikacije između lokalne samouprave i građana (a uzmite u obzir da će cijeli kôd biti javno dostupan što će moći iskoristiti i ostali gradovi, povećavajući vrijednost koju njihovi sugrađani mogu dobiti).

Same novosti (iako važne), grupirane su po danima te smo omogućili dvije vrste novosti ovisno o njihovom značaju. Za razliku od trenutne stranice, za novosti nećemo stavljati kratki opis već vjerujemo da će građani kliknuti na novosti koje ih zanimaju. Dodatno, samo neke novosti imaju fotografiju – to su one koje smatramo važnijima.

Druga kolona na početnoj stranici također omogućava prikaz novosti, ali samo onih koje uredništvo smatra važnima da budu dostupne i nakon što bi, objektivno, “potonule” u prikazu na početnoj stranici. Te se novosti mogu prikazati korištenjem dva definirana stila.

U posljednjoj koloni nalaze se mjesta za bannere. Banneri su grafički linkovi na sadržaj koji se može nalaziti bilo gdje na internet stranicama ili drugdje na internetu. Za razliku od bannera na dosadašnjoj internet stranici, na novoj smo preporučili izbjegavanje korištenja različitih grafičkih elemenata koji smanjuju preglednost stranice. Stoga ćemo omogućiti izradu bannera kroz WordPress administraciju. Svaki će imati pozadinsku fotografiju koja će biti obilježena bojama grada Rijeke, te poziv na akciju (call to action) odnosno dodatni redak teksta kao dopunu glavnoj poruci.

Dobili smo komentare da početna stranica vrvi informacijama i to je točno. Međutim, koliko god se trudili, ne možemo prikazati sve željene informacije i zadržati potpunu jednostavnost. S druge strane, uredništvu portala želimo olakšati kontrolu nad svim elementima kako bi pravovremeno mogli obavještavati građane o tome što se događa u njihovom gradu. Na koncu, u odnosu na trenutnu stranicu – značajno smo smanjili šum informacija.

Teme za građane

Teme za građane su jedan od najvažnijih segmenata novih internet stranica.Radi se o nizu strukturiranih dokumenata – sadržaja, kojim se puno jednostavnije pokrivaju različite tematike u životu grada i njegovih građana – od poduzetništva, socijale, branitelja ili kulture do sporta i rekreacije ili stanovanja.

Za razliku od znatnog dijela ostalog sadržaja, teme za građane se izrađuju od nule, a sadržaj će biti prilagođen ciljanoj publici.

Teme će biti strukturirane kroz nekoliko razina, a svaka od njih će biti detaljno razjašnjena te povezana sa sadržajem na ostalim stranicama. Ono što je važno upravo je ta “automatika”. Recimo, zanima vas pravo na socijalnu pomoć i ne znate kome se obratiti. Do sada ste morali znati koji je točno odjel zadužen za vaš problem, a sada će biti dovoljno otići na temu koja vas zanima te na njoj odabrati brojeve telefona i zadnje ažurirane informacije (novosti i sl.). Kao uzor, uzeli smo dobru praksu koja je primijenjena i prilikom izrade stranice gov.uk. Doduše, u nešto manjem obimu jer je i količina informacija bitno manja.

Transparentnost gradskog vijeća

Kada smo “pokrili” teme za građane kao najvažniji segment novih internet stranica, red je da kažemo nekoliko riječi i o gradskom vijeću.

Gradsko vijeće je meni, iz perspektive građanina, nešto što bi me trebalo zanimati jer se tamo donose odluke važne za moj život u gradu – međutim, s njima uopće nisam upoznat. Ne znam što se događa na gradskom vijeću jer je sadržaj često zbunjijući, “naguran” forme radi i jedino što mi pomaže je vijest koja pokriva neku sjednicu Gradskog vijeća.

Želimo to promijeniti. Želimo da Gradsko vijeće nije tek “jedna od” stranica, već stranica gdje ćemo moći vidjeti trenutnu strukturu Gradskog vijeća. Tko su vijećnici, njihov životopis, čime se bave… Želimo vidjeti koja su pitanja postavljali na Gradskom vijeću i kakve su odgovore dobivali, jer upravo na temelju potpunih informacija možete kreirati vlastito mišljenje.

Pitanja su grupirana po datumima te mogu biti vezana uz sjednicu Gradskog vijeća odnosno nevezana (ako je pitanje postavljeno izvan sjednice). Također, svako ćemo pitanje vezati za točno određenog gradskog vijećnika, kako bismo dobili pregled postavljenih pitanja (i odgovora).

Mjesni odbori

Stranice Mjesnih odbora također želimo dignuti na višu razinu. Osim početne stranice svih Mjesnih odbora koja će imati  kartu (na trenutnom prijedlogu je samo privremeno korištena karta koja će biti zamijenjena stvarnim informacijama), svaki će Mjesni odbor imati i posebnu početnu stranicu.

Cilj nam je da stanovnici Mjesnog odbora dobiju cjelovitu informaciju o tome što se u njihovom Mjesnom odboru događa, ima li kakvih novosti, kakvo je radno vrijeme MO i kome se mogu obratiti.

Dugoročno gledano želimo postići sljedeće: Ako vas zanimaju novosti iz rada Mjesnog odbora (npr. termin odvoza krupnog otpada) na početnoj stranici MO moći ćete pronaći sve informacije.

Nažalost, to nećemo postići samo dizajnom, već i promjenom paradigme radi shvaćanja važnosti postavljanja sadržaja na stranice mjesnih odbora.

Ostale stranice

Prilikom izrade vizualnog rješenja, dizajna novih internet stranica, razradili smo nekoliko glavnih predložaka. Četiri najvažnija smo vam već predstavili, a evo i nekoliko informacija o ostalim predlošcima.

Stranica gradonačelnika grada Rijeke neće biti jedinstvena, već će se koristiti landing page predložak s popisom podstranica (tema) te većom uvodnom fotografijom. Isti se predložak može koristiti za Gradsko vijeće ili bilo koju drugu stranicu gdje procijenimo da je takav raspored elemenata idealan.

Stranice pojedinog gradskog vijećnika su nešto drugačije, jer imamo biografiju, njihovu fotografiju, informacije o vijećniku (stranka, godište, stručna sprema i sl.). Taj je predložak kombinacija različitih elemenata koji se već ponavljaju na različitim mjestima. Ispod zaglavlja imamo prostor za naslov stranice i tzv. breadcrumbs odnosno navigaciju koja pokazuje na kojoj se stranici trenutno nalazimo, u odnosu na početnu stranicu. Također, ta je stranica podijeljena u dva dijela (za razliku od stranice, primjerice – Gradskog vijeća, koja koristi punu širinu).

Odjeli gradske uprave imaju stranicu sličnu gradskim vijećnicima, s dodatkom da za svaki Odjel gradske uprave možemo dodatno izdvojiti kontakt informacije, djelokrug rada ili radno i uredovno vrijeme. Važno je napomenuti da se upravo te izdvojene informacije referenciraju na više mjesta unutar internet stranice, čime se omogućava ažurnost – mijenjanje ključnih informacija na jednom mjestu; te smanjenje potencijalnih grešaka.

Projekti koriste još jedan predložak koji podstranice (projekte) prikazuje uz fotografiju, naslov i kratak opis. Svaki će projekt dodatno imati svoj vlastiti izgled, korištenjem nekih dijeljenih elemenata – čime ćemo projekte učiniti vizualno atraktivnima. Odlučili smo se na takav pristup upravo zato da damo važnost projektima koji su od dugoročnog značaja za grad.

Pogledajte predloške

Svi predlošci dostupni su na projektu dizajna za Rijeka.hr na GitHubu i mogu se besplatno skinuti i proučiti. Također, izvorne Photoshop datoteke su dostupne za preuzimanje, pregledavanje i mijenjanje.

Bilo koji grad ili općina u Hrvatskoj, može preuzeti ovaj projekt i modificirati ga za svoje potrebe. Pitanja i prijedloge napišite u komentarima.