SVEUILITE U RIJECI

EKONOMSKI FAKULTET

Franko Antievi
DIZAJN, IMPLEMENTACIJA I TESTIRANJE
KORISNIKOG SUELJA WEB STRANICA
I WEB APLIKACIJA
DIPLOMSKI RAD II

Rijeka, 2010.

SVEUILITE U RIJECI
EKONOMSKI FAKULTET

DIZAJN, IMPLEMENTACIJA I TESTIRANJE

KORISNIKOG SUELJA WEB STRANICA
I WEB APLIKACIJA

DIPLOMSKI RAD II

Predmet: Informatika tehnologija

Mentor: prof. dr. sc. Slavomir Vukmirovi
Student: Franko Antievi
Studijski smjer: Menedment
JMBAG: 19871

Rijeka, rujan 2010.

SADRAJ
1 . UVOD.............................................................................................................1
1.1 . Problem i predmet istraivanja.............................................................1
1.2 . Svrha i ciljevi istraivanja....................................................................1
1.3 . Hipoteza................................................................................................2
1.4 . Znanstvene metode...............................................................................2
1.5 . Struktura rada.......................................................................................2
2 . RELEVANTNE ZNAAJKE INTERNET I WEB TEHNOLOGIJE...4
2.1 . Definicija Interneta...............................................................................4
2.2 . Povijesni osvrt i sadanje stanje Interneta............................................5
2.3 . Web najvanija usluga Interneta.......................................................8
2.4 . Utjecaj Web-a na dananjeg ovjeka.................................................13
3 . OSNOVNA OBILJEJA WEB KORISNIKOG SUELJA...............15
3.1 . Openito o korisnikom suelju ........................................................15
3.2 . Web stranice ......................................................................................16
3.2.1 . Osnovne karakteristike web stranica.............................................16
3.2.2 . Specifinosti korisnikog suelja kod web stranica......................20
3.3 . Web aplikacije....................................................................................23
3.3.1 . Relevantne znaajke web aplikacija..............................................23
3.3.2 . Korisniko suelje za potrebe interaktivnosti...............................26
4 . PRISTUP RAZVOJU WEB SUELJA U TVRTKI DOMO PRO...28
4.1 . Djelatnost i dosadanje iskustvo........................................................28
4.2 . CMS sustavi i njihovo korisniko suelje..........................................30
4.3 . Smjernice za daljnji razvoj................................................................33
5 . PROCES RAZVOJA WEB SUELJA ...................................................34
5.1 . Proces i princip dizajniranja web korisnikog suelja......................34
5.2 . Tehnologije za implementaciju..........................................................39
5.2.1 . HTML ...........................................................................................39
5.2.2 . CSS ...............................................................................................41
5.2.3 . JavaScript......................................................................................43
5.2.4 . AJAX.............................................................................................45

5.2.5 . Grafiki elementi...........................................................................46

5.2.6 . Alati za izradu korisnikog suelja................................................47
5.2.7 . Dobra praksa..................................................................................48
5.3 . Testiranje korisnikog suelja .........................................................49
6 . UTJECAJ WEB KORISNIKOG SUELJA NA USPJENOST
POSLOVANJA PODUZEA .....................................................................54
6.1 . Kriteriji mjerenja uspjenosti.............................................................54
6.2 . Utjecaj upotrebljivosti web suelja na ROI........................................56
6.3 . Primjeri iz prakse................................................................................57
7 . ZAKLJUAK.............................................................................................58
LITERATURA.............................................................................................61
POPIS SLIKA..............................................................................................64
POPIS TABLICA.........................................................................................65
POPIS GRAFIKONA...................................................................................65

1. UVOD
1.1. PROBLEM I PREDMET ISTRAIVANJA
Internet tehnologija, s posebnim naglaskom na Web, posljednjih je dvadesetak godina
napravila najveu revoluciju u ljudskoj povijesti. Promijenjen je nain komunikacije meu
ljudima kao i nain poslovanja tvrtki, od itanja dnevnih novosti, preko online kupovine
dobara i usluga pa sve do obavljanja bankarskih transakcija.
Ako bi se analiziralo internet tehnologiju, mogli bismo je okvirno podijeliti u nekoliko
sastavnih cjelina:

tehnoloka osnova (mrena oprema, serveri, preklopnici, itd.)

skup servisa i standarda (http, ftp, e-mail, voip, itd.)

korisnike aplikacije (web preglednici, e-mail klijenti, itd.)

Predmet ovog rada obrauje jedan specifini, sastavni dio zadnje stavke gornjeg nabrajanja,
a to je korisniko suelje. Upravo korisniko suelje predstavlja dodirnu toku korisnika 1 i
web globalne mree. Ono to korisnik vidi na ekranu i kako komunicira preko mia i
tastature je ono to je njemu najbitnije. O tome to se nalazi u pozadini korisnikog suelja,
veina korisnika zna malo ili gotovo nita. Budui da postoji globalni trend koritenja web
tehnologije u sve veoj mjeri u odnosu na "klasine" desktop aplikacije, ovaj rad e se
bazirati samo na web aplikacijama i web stranicama.

1.2. SVRHA I CILJEVI ISTRAIVANJA

Utvrivanje svrhe i cilja u uskoj je vezi s prethodno definiranim problemom istraivanja.
Cilj ovog diplomskog rada je ukazati na ulogu i teinu korisnikog suelja u koritenju
Interneta. Isto tako, detaljno e se analizirati proces izrade kvalitetnog korisnikog suelja
kroz proces planiranja, implementacije i testiranja. Kao to je i u naslovu rada navedeno,
napraviti e se i distinkcija izmeu neega to je vrlo esto predmet nerazumijevanja, a to su
web stranice i web aplikacije.

1 Rije "korisnik" se u ovom radu odnosi na bilo koju osobu koja se koristi uslugama web stranica ili web
aplikacija

1.3. HIPOTEZA
Iz prethodno navedenih problema i predmeta te svrhe i cilja istraivanja, izvedena je
osnovna hipoteza diplomskog rada koja polazi od pretpostavke da korisniko suelje
predstavlja najvaniji element svakog web rjeenja, jer upravo korisniko suelje
predstavlja tu dodirnu toku izmeu korisnika i sustava koji stoji iza svega toga.

1.4. ZNANSTVENE METODE

U ovom radu koritene su sljedee znanstvene metode:

metoda indukcije,

metoda dedukcije,

metoda analize i sinteze,

metode dokazivanja,

metoda klasifikacije,

metoda deskripcije,

metoda komparacije,

metoda intervjuiranja,

metoda promatranja.

Takoer su koriteni podaci iz raspoloive literature, strunih lanaka i relevantnih internet

stranica. Kombinacijom navedenih metoda dolo se do rezultata iznesenih u obradi teme.

1.5. STRUKTURA RADA

Diplomski rad se sastoji od 7 meusobno povezanih dijelova. U prvom dijelu, UVOD,
definirani su problem i predmet istraivanja, svrha i cilj koji se eli postii ovim radom te
hipoteza koja se eli dokazati. Navedene su znanstvene metode koje su pri tome koritene te
je ukratko prikazana struktura diplomskog rada.
U drugom dijelu s naslovom RELEVANTNE ZNAAJKE INTERNET I WEB
TEHNOLOGIJE, ukratko je napravljen uvod u tehnoloku osnovu, koja je preduvjet za
razvoj web stranica i web aplikacija. Napravljen je i kratki osvrt na povijest, tempo razvoja i
trenutno stanje tih tehnologija kao i ono to moemo oekivati u budunosti.
2

Trea cjelina OSNOVNA OBILJEJA WEB KORISNIKOG SUELJA detaljnije

obrauje aplikacijski sloj web tehnologije. Radi se distinkcija izmeu web stranica i web
aplikacija sa predstavljenim tipinim primjerima jedne i druge kategorije. Tu se navode
osnovni elementi web korisnikog suelja te specifinosti ukoliko se ono aplicira na web
stranice ili na web aplikacije.
U etvrtom dijelu naslova PRISTUP RAZVOJU WEB SUELJA U TVRTKI DOMO
PRO se navode iskustva izrade suelja u web studiju Domo Pro. Ta tvrtka ima
viegodinju praksu intenzivnog rada na takvim poslovima te je napravila stotinjak
projekata upravo na ovom podruju.
Peti dio, naslova PROCES RAZVOJA WEB SUELJA, ujedno je i najopseniji dio ovog
diplomskog rada. itatelja se upoznaje sa procesom koji se prakticira kod svakog
profesionalnog projekta realizacije korisnikog suelja neke web stranice ili web aplikacije.
Svaka se faza zasebno obrauje, navode se metodologije realizacije, prezentiraju se alati
koji se koriste kod izrade te se ukratko analizira tehnologija koja slui za implementaciju.
esta

cjelina,

UTJECAJ

WEB

KORISNIKOG

SUELJA

NA

USPJENOST

POSLOVANJA PODUZEA, e ukratko elaborirati poslovnu ulogu korisnikog suelja

web aplikacija i web stranica te njihovu ulogu na uspjenost poslovanja poduzea.
Prezentirat e se kvantitativni pokazatelji pomou kojih je mogue mjeriti postignute
rezultate i na temelju toga donositi kvalitetne poslovne odluke.
Diplomski rad zavrava estom cjelinom ZAKLJUKOM u kojem su iznesene spoznaje
do kojih se dolo tijekom ovog istraivanja.

2 . RELEVANTNE ZNAAJKE INTERNET I WEB

TEHNOLOGIJE
2.1. DEFINICIJA INTERNETA
Iako tema ovog rada nije detaljnije elaborirati Internet, bez te tehnoloke podloge ne bi bilo
mogue koritenje web stranica i web aplikacija te je stoga napravljen kratki osvrt na taj
fenomen koji je promijenio drutveni i poslovni ivot zadnja dva desetljea.
Internet je javno dostupna globalna mrea koja zajedno povezuje raunala i raunalne mree
koritenjem istoimenog protokola (IP internet protokol). To je "mrea svih mrea" koja se
sastoji od milijuna kunih, akademskih, poslovnih i vladinih mrea koje meusobno
razmjenjuju informacije i usluge kao to su elektronika pota, chat i prijenos datoteka te
povezane stranice i dokumente World Wide Weba (Wikipedia.org, 2010).
Slina definicija bi bila kako je Internet najvea raunala mrea na svijetu u koju su
korisnici iz cijeloga svijeta spojeni pomou telefonske linije, modema i raunala, a koji na
svojim raunalima imaju odreeni software s potrebnim protokolima za spajanje na Internet
te koriste razne internet servise (Franji, 1999:1)
Bill Gates, naglaava termin "povezivost" koju Internet donosi. Povezivost u digitalnom
dobu ima ire znaenje od dovoenja dviju osoba u izravnu vezu. Internet stvara posve novi
sveobuhvatni prostor za dijeljenje podataka, suradnju i trgovinu. Radi se o novom
komunikacijskom sredstvu koje iskoritava dostupnost i spontanost tehnologije poput
televizijske i telefonske te ih povezuje dubinom i irinom svojstvenom papirnatim
komunikacijama (Gates, 1999: xiii).
Ne uputajui se u tehnike detalje, vano je spomenuti na koji nain korisnici danas dolaze
u dodir sa Internetom. Najvie koritene "toke neposrednog dodira" korisnika i Interneta
su; osobno raunalo, mobilni ureaji, VOIP telefoni, GPS ureajii televizija (npr. MaxTV
usluga). Moglo bi se rei da dananji korisnik, svijesno ili nesvijesno, sve vie i vie koristi
infrastrukturu zvanu Internet.

2.2. POVIJESNI OSVRT I SADANJE STANJE INTERNETA

Poetni motiv razmiljanja o unapreenju meusobne komunikacije meu raunalima datira
iz Amerikih vojnih ureda. Povijesne okolnosti vezane za Hladni rat i potreba za
umreavanjem i stabilnosti amerike vojno-obavjetajne mree uvjetovala je osnivanju
agencije ARPA (Advanced Research Project Agency). Njen zadatak je bio osmisliti mreu
koja treba zadovoljiti dva osnovna kriterija:

Telekomunikacijska mrea ne smije ovisiti o centralnom serveru ve sustav treba biti

vie disperzivan i meusobno neovisan,

Mrena komunikacija mora biti mogua ak i u sluaju da je pojedini segment mree

oteen i onemoguena je njegova djelomina ili potpuna funkcionalnost.

ARPA je po tom nalogu 1969. godine izgradila mreu zvanu ARPANet (Petri, 2002.) .
Tu novonastalu mreu ve u samim poecima poinju koristiti i akademske zajednice u
Americi. Prvi akademski vor je postavljen u sveuilitu UCLA ( University of California
Los Angeles), koji se povezao sa sveuilitem Barkley u istom gradu. U toj evoluciji bitno
je spomenuti i 1971. godinu kada se toj mrei prikljuuje i prvi neovisni vor, a to je
ALOHANet sveuilita sa Hawaii-a. Zbog prikljuivanja sve vee koliine novih mrea, iz
sigurnosnih razloga Amerika vojska se povlai u svoju zasebnu mreu zvanu MILNET.
ARPANet se 70-ih i 80-ih ubrzano iri te joj se prikljuuje sve vei broj, do tada, izoliranih
mrea. Svi su htjeli u ARPANet; sveuilita, vladine agencije, korporacije, razne ostale
organizacije, ali i pojedinci. 1973. godine ARPANet izlazi iz okvira SAD-a te poinje
povezivati i University College u Londonu i Royal Rada Establishment u Norvekoj.
Sve do poetka 90-ih godina prolog stoljea globalna mrea se intenzivno irila, ali i
tehniki razvijala. Krajem osamdesetih se, tada ve zastarjeli ARPANet-ov sustav
protokola, zamijenio NSFNet-ovim. On je predstavljao backbone (kraljenica mree
struktura mree na koju su spojeni svi ostali dijelovi mree) link koji je dobio kapacitet od
1.5 magabit po sekundi te su se standardizirali TCP/IP internet protokoli koji su
predstavljali skup standarda (pravila) po kojima raunala meusobno komuniciraju.
Iako je tehnika osnova ve postojala 20 godina, sve do poetka 90-ih ta globalna mrea
nije dobila svoje "javno lice". To se promijenilo dolaskom World Wide Web projekta.
5

Najvea revolucija na podruju Interneta, dogodila se 06. kolovoza 1991. kada je

predstavljen World Wide Web, skraeno WWW ili WEB projekt. Web je osmislio britanski
znanstvenik Tim Berners-Lee u institutu CERN (Organisation Europenne pour la
Recherche Nuclaire) u vicarskoj.
Web je sistem koji se sastoji od skupa hipertekst dokumenata koji su meusobno povezani i
kojima se moe pristupiti preko Interneta (Wikipedia.org, 2010). Takvi dokumenti mogu
sadravati tekst, slike, video i ostale multimedijalne elemente te su meusobno povezani
hiperlinkovima to omoguava brzo i lako pretraivanja velikog broja informacija. Web je
razvijen kako bi predstavljao more ljudskog znanja, ljudske kulture i kako bi omoguavao
udaljenu suradnju za razmjenu ideja i raznih oblika zajednikih projekata ljudi (WardripFruin i Montfort, 2003).
Kako bi se hipertekstualne dokumente moglo pregledavati potreban je neki od web
preglednika. Prvi znaajniji preglednik bio je NCSA Mosaic koji je predstavljen
1993.godine. Znaajan je po tome to je to bio prvi pretraiva s grafikim sueljem (do
njega su preglednici koristili samo isti tekst) to je uvelike doprinijelo popularizaciji WEB
servisa. Nakon njega uslijedio je cijeli niz pretraivaa raznih tvrtki i organizacija od kojih
su najpoznatiji: Internet Explorer, Mozilla Firefox, Opera, Safari i Google Chrome.
Sve usluge koje danas koristimo, rezultat su nekih od servisa koje Internet omoguuje.
Najpoznatiji servisi Interneta su:

WWW servis (World Wide Web),

E-mail servis koristi se za elektroniku potu te je drugi po popularnosti uz web,

FTP (File Transfer Protocol) servis prenoenje datoteka izmeu udaljenih raunala,

VOIP (Voice Over IP) - telefonija koja koriti klasinu internet infrastrukturu,

Telekonferencije/Videokonferencije.

Kombinacijom navedenih glavnih servisa razvili su se i sljedei dodatni servisi:

Dostavne liste,

UseNet - diskusijske skupine,

IRC - Internet relay chat.

Internetom se danas koristi oko dvije milijarde svjetskog stanovnitva. Krivulja rasta broja
korisnika kroz zadnjih 20 godina ima stalnu tendenciju pozitivnog uspona te e tako biti i
ubudue. Sljedea tablica argumentirano upuuje na takav zakljuak:
Tablica 1: Korisnici Interneta u svijetu

REGIJE

BROJ
BROJ
STANOVNIKA KORISNIKA
(2010. g.)
INTERNETA
(2000. g.)

BROJ
KORISNIKA
INTERNETA
(2010. g.)

PENETRACIJA
RAST
(% POPULACIJE) (2000-2010)

Afrika

1,013,779,050

4,514,400

110,931,700

10.9 %

2,357.3 %

Azija

3,834,792,852

114,304,000

825,094,396

21.5 %

621.8 %

Europa

813,319,511

105,096,093

475,069,448

58.4 %

352.0 %

Bliski Istok

212,336,924

3,284,800

63,240,946

29.8 %

1,825.3 %

Sj. Amerika

344,124,450

108,096,800

266,224,500

77.4 %

146.3 %

Lat. Amerika

592,556,972

18,068,919

204,689,836

34.5 %

1,032.8 %

34,700,201

7,620,480

21,263,990

61.3 %

179.0 %

6,845,609,960

360,985,492

1,966,514,816

28.7 %

444.8 %

Australia/Oceania
UKUPNO

(Izvor: Internetworldstats.com, 2010 )

Sukladno svijetskim tendencijama, broj korisnika Interneta u Hrvatskoj je u konstantnom

rastu. Hrvati najvie koriste Internet za komunikaciju e- potom, itanje novina i magazina
te pronalaenje informacija o proizvodima i uslugama. U porastu je i upotreba Interneta za
informacije o putovanjima, traenje posla, informacija o zdravlju, edukacija, download
igara, filmova i muzike, a u zadnje vrijeme najvie raste broj korisnika socijalnih mrea
(Facebook, Twitter, ). Po dobnoj skupini, najvie ima mladih i to do 24 godine.
Za nain pristupa najvie ima onih koji koriste irokopojasni pristup (ADSL linija).
Grafikon 1: Svrha koritenja Interneta u Hrvatskoj u 2009. godini

(Izvor: Izradio autor prema podacima Gfk [URL: www.gfk.hr], preuzeto 13.08.2010.)

2.3. WEB NAJVANIJA USLUGA INTERNETA

Puno ljudi u svakodnevnom govoru koristi termin Internet i Web kao sinonime, ali oni to
svakako nisu. Internet i Web su dva sasvim razliita, ali usko povezana termina.
Dok je Internet mrea nad mreama i predstavlja infrastrukturu koja je temelj za
funkcioniranje razliitih servisa, Web

je nain kako koristiti informacije preko te

infrastrukture (Webopedija.com, 2010). To je u biti model za razmjenu informacija koji se

temelji na Internetu. Uz Web, postoje i drugi servisi koji isto tako omoguuju razmjenu
informacija, ali koristei druga pravila (protokole) i neke druge aplikacije specijalizirane za
tu vrstu usluge.
Informacije koje Web servisira prikazuju se u obliku HTML dokumenata. HTML je kratica
za HyperTekst Markup Language, to znai prezentacijski jezik za kreiranje web stranica
(Wikipedija.com, 2010). Kako bi se dokument pogodan za Web servis mogao oblikovati,
napravljen je HTML standard. Taj format omoguuje da se na istu stranicu integriraju razni
elementi koji olakavaju prezentaciju eljenog sadraja. Danas HTML standard omoguava
integraciju teksta, tablica, fotografija, zvuka i video materijala. No to nije uvijek bilo tako.
Danas koristimo standard XHTML 1.0. Od poetka devedesetih do danas HTM standard je
doivljavao promjene i sve veu funkcionalnost.

1992. HTML 1.0. - osnovna funkcionalnost sa tekstom i hiperlinkovima.

1994. HTML 2.0. - ograniena nadogradnja na prethodnu verziju sa dodavanjem

mogunosti prezentiranja fotografija i formatiranja online interaktivnih obrazaca.

1994. HTML 3.0 - dodana mogunost tablica. Tvrtke koje proizvode web
pretraivae poinju dodavati svoje vlastite mogunosti i poinje se naruavati
standard to oteava rad web developerima i meusobnu kompatibilnost.

1996. HTML 3.2 W3C konzorcij preuzima ulogu HTML regulatora i standardizira
HTML specifikaciju koju bi trebali potivati svi online pretraivai.

1997. HTML 4.0 standardizirana verzija specifikacije uz brojna funkcionalna

poboljanja u smjeru internacionalizacije i kaskadnih stilova.

2000. XHTML 1.0 ne predstavlja velike novosti u smjeru funkcionalnosti, ve

inzistira na striktnom potivanju jednoznanih standarda po uzoru na logiku XML
specifikacije.

Osim HTML standarda i njegove evolucije, bitno je ukratko elaborirati kako web servis
funkcionira. Laikim pristupom reeno, korisnik upie adresu u web pretraiva (npr.
8

www.efri.hr) i pritisne tipku enter. Nakon sekunde ili dvije, otvori mu se poetna stranica
Ekonomskog fakulteta u Rijeci. Drugi najei pristup je pomou trailica. Korisnik u
Google trailicu upie termin Ekonomski fakultet u Rijeci i na prvom mjestu mu se
prikae link pomou kojeg dolazi na istu destinaciju. Tehniki gledano, to se ovdje deava
u pozadini? Na kojem modelu se temelji takva usluga? Rije je o klijent posluitelj
modelu. Klijent-posluitelj model je distribuirana aplikacijska struktura koja odvaja zadae
ili optereenja izmeu davatelja usluge, zvanog posluitelj ili server i primatelja usluge,
zvanog klijent. esto klijenti i serveri komuniciraju preko raunalne mree na razliitim
ureajima, ali klijent i server se mogu nalaziti u istom sistemu. Server slui kao domain
koji obavlja jednu ili vie posluiteljskih programa koji dijele svoje resurse sa klijentima.
S druge strane, klijent ne dijeli nikakve resurse ve samo zahtijeva od posluitelja sadraj ili
odreeni servis (Reese, 1997).
Slika 1: Klijent-posluitelj model

(Izvor: izradio autor)

Kako bi gore spomenuti model mogao nesmetano raditi potreban je neki sistem adresiranja
klijenata i posluitelja kako bi posluitelj znao kojem klijentu treba to isporuiti. Kad ne bi
bilo tog sistema, klijent bi mogao poslati jedan zahtjev prema posluitelju, a moda bi
mogao dobiti neto to uope nije traio. Sistem adresiranja raunala, servisa ili bilo kojeg
resursa zove se DNS sistem (Domain Name System). esto koritena analogija za lake
shvaanje DNS sistema je princip rada telefonskog imenika. Kada se telefonom treba dobiti
osobu A, pogleda se u telefonski imenik prezime te osobe te se na taj nain dobije njen broj
telefona, nakon ega se osobu moe telefonski nazvati. Na istom principu funkcionira i DNS
sustav. Ako se eli web stranice Ekonomskog fakulteta u Rijeci, DNS sustav potrai IP
9

adresu na temelju web adrese i uputi se zahtjev tono tom posluitelju. Zajedno sa
zahtjevom za poetnom stranicom fakulteta, alje se i IP adresa klijenta kako bi posluitelj
znao kome tono vratiti odgovor. DNS sustav slui kako bi omoguio korisnicima da ne
pamte fizike IP adrese pojedinog posluitelja kojem trebaju poslati zahtjev ve je dovoljno
znati itljiv naziv domene (npr. www.efri.hr).
Svako raunalo koje je spojeno na Internet dobiva svoju jedinstvenu adresu IP adresu.
To je niz od etiri troznamenkasta broja odvojena tokom. Primjer jedne IP adrese je
174.121.14.165. DNS sustav povezuje tu IP adresu sa domenom www.index.hr te tako
korisnici ne trebaju pamtiti ove sloene kombinacije brojeva kad ele proitati dnevne
novosti tog portala. Bitno je istaknuti da posluitelji moraju imati statine odnosno stalne IP
adrese. Klijenti, s druge strane, obino imaju promjenjive IP adrese. Na primjer, T-com u
Hrvatskoj svakih 24 sata mijenja IP adresu svakog korisnika koji se spaja preko njihove
MaxADSL usluge.
Pojedini elementi globalnog informacijskog prostora, npr. pojedini web posluitelji,
pojedina raunala ili pojedine osobe prepoznatljivi su na Internetu po svojem nazivu (npr.
www.carnet.hr) ili elektronikoj adresi (npr. ivan.horvat@carnet.hr). Kljuni dio svakog
takvog naziva ili adrese uvijek ini Internet domena, npr. carnet.hr (CARNet, 2001). Svaka
unikatna domena sastoji se od jednog ili vie dijelova koji su meusobno odvojeni tokom.
Uzeti e se za primjer domena knjinica.efri.hr.
1. Krajnji desni dio oznake hr koji se naziva top-level-domena i predstavlja nacionalnu
vrnu domenu. Svaka zemlja ima svoju vrnu nacionalnu domenu. Osim toga postoje
i meunarodne komercijalne domene od kojih je najpoznatija com domena.
2. Tipina domena je u biti subdomena vrne domene i nalazi se lijevo od nje. U naem
sluaju to je efri.
3. Ukoliko postoji potreba, Ekonomski fakultet Rijeka moe kreirati i svoju
poddomenu - knjinica.efri.hr i slino. Takva hijerarhija moe ii do 127 nivoa od
ega svaka daljnja lijeva oznaka ne moe imati vie od 63 ASCII znaka. Ukupno,
domena ne moe imati vie od 253 znaka dok neki registrari koji upravljaju
domenama mogu biti i restriktivniji oko duine domene koju odobravaju.
Pravo na dobivanje odreene domena povjereno je ustanovama zvanim registrarima domena
(eng. domain name registrars). Registrari moraju biti odobreni od strane Internet
10

Corporation for Assigned Names and Numbers (ICAAN). Za nacionalne vrne domene
uvijek postoji vrna institucija koja administrira tom domenom. U Hrvatskoj ta institucija je
CARNet koja definira pravilnik po kojem se ureuju pravila dodjeljivanja hr domene.
Veina domena koje se koriste za web servis poinju sa www zbog prakse da se posluitelje
naziva po servisu kojeg pruaju. Posluitelji za Web servis imaju www oznaku, posluitelji
za FTP servis imaju ftp oznaku itd. Ovisno kako je podeen posluitelj, domena sa i bez
www oznake moe isto ili razliito funkcionirati. Veina web servera je podeena da radi na
oba naina. Paralelno s tim, neki web preglednici su podeeni da sami nadodaju www
oznaku na poetku web adrese, ako ona nije eksplicitno navedena.
Uz HTML dokumente koji su fiziki nosioci podataka, DNS sustav koji regulira promet tih
podataka, trei nuan element Web-a su web pretraivai bez kojih usluge Weba ne bi bile
mogue. Web pretraiva je softwerska aplikacija koja slui slanju, primanju i prezentaciji
informacija koje posluitelj poalje. Informacijski izvori se identificiraju sa unificiranim
identifikatorom izvora (engl. Uniform Resource Identifier ili skraeno URI) i mogu biti
stranice, fotografije, video ili druga vrsta sadraja ( Jasobs & Walls, 2009). Upravo pomou
URI-a mogue je jednoznano adresirati bilo koju vrstu datoteke i otvoriti je pomou web
pretraivaa. Meusobno povezivanje vie dokumenata mogue je klikom mia na onaj
element

koji

predstavlja

hipervezu

povezuje

se

na

drugi

dokument.

S vremenom je zapoet rat meu proizvoaima koji su uvodili vlastite standarde u nainu
prikazivanja i interpretiranja HTML pravila. Danas se svi vei proizvoai dre HTML i
XHTML standarda te tako omoguuju skoro identino renderiranje prikaza HTML
dokumenata. Vaniji podaci danas najkoritenijih web pretraivaa prikazani su u tablici.
Tablica 2: Usporedba danas vodeih Web pretraivaa, 2010

Pretraiva

Proizvoa

Trenutn Udio na tritu Podrani operativni sustavi

a verzija

Internet Explorer Microsoft

8.0

52,68%

Windows

Firefox

Mozilla

3.6

30,69%

Windows, Mac OS, Linux

Chrome

Google

6.0

9,80%

Windows, Mac OS, Linux

Safari

Apple

5.0

5,09%

Windows, Mac OS

Opera

Opera software ASA

10.6

1,91%

Windows, Mac OS, Linux

(Izvor: izradio autor prema podacima www.en.wikipedia.org [URL:

http://en.wikipedia.org/wiki/Usage_share_of_web_browsers ])

11

Broj korisnika Web usluga i njihovo vrijeme provedeno surfajui, konstatano raste u
cijelom svijetu. S druge strane, veliki broj web stranica i web aplikacija sve vie uvjetuje
registraciju prilikom koje se daje vei ili manji broj osobnih podataka. Takve baze podataka
koje broje na stotine tisua, nekad i milijune korisnika, predstavljaju veliku vrijednost u
svijetu marketinga. Postoje opravdane sumnje kako neki web servisi ustupaju baze podataka
svojih korisnika drugim korporacijama uz velike naknade. Problem privatnosti dolazi do
izraaja i kod zapisa koji ostaju memorirani na web pretraivaima. Ukoliko korisnik
iskljuivo koristi samo svoje raunalo to i nije neki problem, no ukoliko vie osoba koristi
isto raunalo, ovaj problem dolazi do izraaja. Moderni web pretraivai su doskoili tome
izradom posebnih tzv. Private mode naina pretraivanja. Na taj nain, gaenjem
pretraivaa, svi podaci o njegovu koritenju (na kojim stranicama je bio, to je tamo gledao
i to je upisivao) se automatski briu.
S aspekta sigurnosti potrebno je istaknuti i prijetnju zlonamjernog skeniranja prometa.
Kada klijent ili posluitelj meusobno komuniciraju i alju jedan drugome podatke, uz
nezatieni promet, isti se moe bez veih problema presresti i proitati. Kod online
plaanja i slanja ostalih slinih podataka to predstavlja ozbiljnu prijetnju. U tom sluaju
postoje dvije razine zatite koje su se pokazale vrlo uspjene, a to su kriptiranje prometa
preko HTTPS protokola i koritenje SSL certifikata. Promet osjetljivog sadraja trebao bi
svakako koristiti ove metode zatite. Svaka ozbiljnija web trgovina takve mjere ve i koristi.
Uz privatnost i sigurnost kod Web-a se insistira i na jo jednoj karakteristici, a to je
pristupanost (eng. accessibility). Princip pristupanosti se odnosi na praksu omoguavanja
koritenja Web usluga bez obzira na fizike i mentalne sposobnosti korisnika.
Kada su web stranice i web aplikacije dobro dizajnirane, implementirane i ureene svi ili
gotovo svi korisnici e imati jednaku priliku koritenja sadraja i funkcionalnosti.
Osim za vrijeme izrade sadraja, istom problemu idu u susret i web pretraivai sa svojim
dodatnim mogunostima u smjeru pristupanosti. Tako na primjer, ako web stranice imaju
premaleni font, sam pretraiva ima mogunost poveavanja fonta kako bi osobe sa slabijim
vidom ipak mogle itati takav sadraj. Osniva Web-a Tem Berners-Lee jednom je istaknuo
kako je snaga Web-a u njegovoj univerzalnosti. Dostupnost i iskoristivost Web-a od strane
svakoga bez obzira na njegove mogunosti je jedna od najvanijih karakteristika tog medija
(W3C, n.d.).

12

2.4. UTJECAJ WEB-A NA DANANJEG OVJEKA

U toki 2.2. ovog rada prezentirani su podaci i statistika koja govori kako gotovo dvije
milijarde ljudi na svijetu koristi Internet. Velika veina njih Internet koristi na dnevnoj bazi
te sve vie vremena troe na konzumiranje usluga koje Internet, posebice web servis,
omoguuje. Takva, relativno nova pojava u ivotu ljudi izaziva viestruke efekte koje
strunjaci raznih znanstvenih podruja pokuavaju prouavati i interpretirati.
S neuropsiholokog aspekta znanstvenici govore kako koritenje Interneta uzrokuje
prilagodbe mozga koje omoguuju bolje filtriranje mnotva dostupnih informacija te lake
donoenje brzih odluka. Na taj nain ta tehnologija moe uvelike ubrzati uenje i poveati
osobnu kreativnost. Neka istraivanja govore kako iskusni korisnici Interneta imaju
dvostruko veu aktivnost u podrujima mozga koja su odgovorna za donoenje odluka i
kompleksnije prosuivanje. Tako se za starije osobe preporuuje surfanje Web-om, umjesto
da se puno vremena troi na pasivno gledanje televizora.
U zadnje vrijeme jaa i socijalni utjecaj Web-a na obinog ovjeka. Raniji je Internet bio
poput dananje televizije, uglavnom jednostran te je postojala jasna crta izmeu onih koji
publiciraju informacije i onih koji informacije konzumiraju. Glavna karakteristika novije
generacije Web-a, za koji se esto koristi naziv Web 2.0, je micanje te granice izmeu
njih i nas. Sve vie maha uzimaju oni sadraji i servisi gdje su autori i korisnici
informacija meusobno isprepleteni. Noviji formati web stranica kao to su blog i forum ne
vre razliku izmeu urednika i itatelja. Svi su ravnopravni i svatko se moe izraziti na
slobodan, besplatan i jednostavan nain. ak i velike medijske kue sve vie integriraju
socijalne alate u svoja online izdanja pa tako danas skoro da i ne moemo nai vei portal
koji ne omoguava komentiranje svakog lanka koji je na portalu publiciran. Danas, najvea
imena na Web-u prikazuju sadraj iji su autori iskljuivo posjetioci, a ne zaposleni urednici
neke medijske kue koji bi taj sadraj trebali pisati. Primjer takvog web sjedita je
YouTube.com koji omoguava posjetiocima da samostalno publiciraju svoj video uradak i
omogue posjetiocima irom svijeta da taj uradak pogledaju, komentiraju, oznae ga da im
se svia itd. Osim spomenutog portala slinu popularnost su doivjeli i slini servisi poput
Flicker.com (dijeljenje fotografija), Scribid.com (dijeljenje dokumenata) i drugi. Sve
navedeno uvelike omoguava prosjenom korisniku da komunicira, identificira se sa
odreenim sadrajima, istrauje i aktivno se ukljui u odreenu socijalnu sferu sukladno
13

njegovom interesu. Zadnje dvije godine najveu popularnost su dobile takozvane socijalne
mree. Najpoznatija meu njima je Facebook.com. Neki korisnici Web poistovjeuju sa
Facebook-om i razlika izmeu toga im nije previe jasna. Podijeliti svoja iskustva,
fotografije, diskutirati o nekoj temi, grupno se ukljuiti u odreenu kampanju i stvoriti
respektabilno javno mijenje o nekoj drutvenoj temi danas predstavlja vanu mo koja je
dokazala da moe ozbiljno utjecati i na politike reime neke drave te jaati informiranost i
demokraciju nekog drutva.
Internet je sa svojim mogunostima utjecao i na nain uenja. Nakon dostupnosti Internet
mree i funkcionalnosti koje je Web omoguavao, krajem prolog desetljea termin elearning ili e-uenje se sve ee poeo spominjati. Uenje na daljinu, kako ga se esto
nazivamo, ima nekoliko oitih prednosti:

Poveani pristup vrsni strunjaci pojedinog podruja dostupni su globalnom

auditoriju koji ele uiti sadraj njihova podruja.

Prilagodljivost i fleksibilnost za polaznika jer su izvori najee dostupni po

principu 24x7 te omoguavaju polazniku veliku prilagodbu.

Razvoj dodatnih vjetina sam proces e-uenja trai od korisnika savladavanje

stanovitih tehniko-edukativnih vjetina koji uvelike pomau ueniku u kasnijem
traenju i obavljanju svog posla.

Vie od svega, Web je promijenio nain dananjeg poslovanja. Neki vaniji elementi
poslovanja na koje je ova revolucija utjecala su sljedei:

brzina i niski trokovi komunikacije,

komuniciranje sa globalnim tritem gotovo bez teritorijalnog ogranienja,

mogunost direktne prodaje dobara i usluga preko online trgovine,

mogunost rada od kue za veliki broj zaposlenika.

14

3 . OSNOVNA OBILJEJA WEB KORISNIKOG

SUELJA
3.1. OPENITO O KORISNIKOM SUELJU
Korisniko suelje ini prostor izmeu ovjeka i stroja. Bilo da je rijei o industrijskom
stroju, kuanskom aparatu, automobilu ili raunalnom programu, korisnikom suelju je cilj
efikasno koritenje i kontrola objekta s kojim korisnik radi, kao i povratna informacija koju
korisnik dobiva od tog objekta. Discipline usko povezane sa kreiranjem i testiranjem
korisnikog suelja su ergonomija i psihologija. Glavni elementi komunikacije su:

ulaz koji omoguava korisniku da upravlja svojim objektom i daje mu naredbe i

izlaz koji omoguava prikazivanje efekta korisnikova rada od strane tog objekta.

Objekt koji je predmet ovjekova upravljanja, moemo kategorizirati u dvije skupine;

hardware i software. Ova zadnja kategorija zauzima posebno mjesto u novije vrijeme s
obzirom na konstantno poveanje koritenja elektronikih ureaja koji imaju upravljake
programe kojima ovjek moe upravljati. Najpoznatiji primjeri takvih ureaja su osobno
raunalo, mobilni telefoni, GPS ureaji, putna raunala u automobilima i brojni drugi.
U svijetu raunala najee se spominju dvije grupe suelja (Wikipedia.org, 2010):

grafika korisnika suelja (Graphical User Interface GUI) omoguavaju

ulazne naredbe preko tastature i mia te svoj izlaz realiziraju preko grafikog prikaza
na monitoru. Pretea ovog tipa suelja je komandni redak koji je omoguavao ulaz
iskljuivo preko tastature i izlaz u obliku obinog teksta. Upravo je komercijalizacija
GUI suelja unijela revoluciju u koritenju osobnih raunala kad je tvrtka Apple
proizvela svoj prvi operativni sustav s takvim sueljem.

web bazirana korisnika suelja ili web korisnika suelja slino kao i kod
gornjeg sluaja samo to je izlaz uvijek manifestiran u obliku web stranice . Taj izlaz
moe biti manifestiran na klasian nain, a to je ponovno uitavanje stranice ili
putem modernijih tehnologija koje omoguavaju asinkronu komunikaciju korisnika i
korisnikog suelja.

15

3.2. WEB STRANICE

3.2.1. Osnovne karakteristike web stranica
Uzevi u obzir temu ovog rada kao i injenicu da termini poput web stranice, web sjedite
(engl. website) i web aplikacija veini ljudi esto slue kao sinonimi, potrebno je definirati
ove pojmove s obzirom da svaki od njih ima svoje posebno znaenje i nalazi se u nekom
odnosu prema ostalim terminima.
Web stranica je HTML dokument koji omoguava prezentaciju informacija u razliitim
oblicima kao to je tekst, fotografija, video ili zvuk. Svaka web stranica je dostupna preko
svoje jedinstvene web adrese. Primjer web adrese jedne web stranice koja prezentira
informacije o pristupu Internetu u Hrvatskoj je http://www.carnet.hr/pristup_internetu.
Do web stranice se moe doi unoenjem njene tone adrese direktno u traku za adresu u
nekom web pretraivau ili pomou hiperlinkova na nekim drugim stranicama koji pozivaju
tu web adresu. Ti hiperlinkovi mogu biti na nekoj web stranici istog web mjesta ili nekog
drugog web mjesta.
Web mjesto je kolekcija web stranica. Web stranica je dio web mjesta. Jedno web mjesto
moe imati samo jednu ili nekoliko tisua web stranica. Web adresa web mjesta je obino
ista web domena, npr www.carnet.hr. Ta domena otvara prvu web stranicu tog web mjesta.
Razlika web stranice i web mjesta izraena je u fizikom odnosu cjeline i njegova djela.
Razlika izmeu web stranica2 i web aplikacija lei u funkcionalnoj razlici. Web stranice su
kolekcija dokumenata koji sadre statian sadraj, slike i video sa ogranienom ili nikakvom
funkcionalnou. Primarna uloga web stranica je da informira korisnike. S druge strane, web
aplikacije su dinamini i interaktivni sistemi koji omoguuju korisniku izvravanje
odreenih poslova. Znai glavna uloga web stranica je pruanje informacija dok je primarna
uloga web aplikacija omoguavanje funkcionalnosti svojim korisnicima. Web adresa
tipinih web stranica je www.pbz.hr dok je net.pbz.hr/pbz365/ web adresa tipine web
aplikacije koja omoguava internet bankarstvo Privredne banke Zagreb.

2 Na Hrvatskom jeziku se zadrao termin web stranice umjesto web mjesta. Iz tog razloga u nastavku ovog
rada e se koristiti termin web stranice kao mnoina, a podrazumjevati e se web mjesto (eng. website)

16

Vrstom sadraja, ciljanom publikom i svojom funkcionalnou razvile su se razliite vrste

web stranica koje bi se mogle podijeliti u sljedee tipove (Rocketface.com, n.d.):
1. Komercijalno prezentacijske web stranice u komercijalnom sektoru, ovaj tip
stranica je najei. Stranice mogu imati osnovni sadraj o svojoj djelatnosti i ponudi
a mogu prezentirati i kompletan katalog svojih proizvoda i usluga.
2. Komercijalno transakcijske web stranice prvenstvena svrha ovog tipa web
stranica je prodaja proizvoda ili usluga. Osim kvalitetne prezentacije proizvoda,
omoguena je kupnja procesom stavljanja proizvoda u virtualnu koaricu i njegovo
plaanje klasinim nainima (bankarski nalog ili pouzee) ili putem kreditne kartice.
Najpoznatiji primjer ovakvog tipa web stranica je www.amazon.com.
3. Osobne web stranice - svrha ovog tipa je pruanje informacija o pojedincu ili
manjoj grupi ljudi (obitelj ili slino). Sadraj je veinom predmet interesa vlasnika
kao na primjer njegov hobi. Auriranje i administriranje stranice je preputeno
vlasniku. Tipian primjer osobne web stranice je http://www.jakubkrcmar.cz.
4. Web stranice organizacija slui prezentiranju i zagovaranju zajednikog
miljenja o nekoj temi ili nekom podruju. Na ovakvim stranicama se nalaze
korisnici slinih razmiljanja o istoj temi. Osim iste prezentacije sadraja, ove
stranice esto imaju mogunost interakcije njihovih korisnika. Interakcija se obino
postie pomou foruma i chata. Primjer je www.suza.hr.
5. Edukacijske web stranice glavni fokus sadraja ovih stranica bi trebao biti
edukativnog karaktera. Naglasak je na kvaliteti edukacijskog sadraja, a ne na
njegovoj koliini ili na estetskom dojmu stranica. Primjer je www.w3schools.com.
6. Zabavne web stranice prvenstvena svrha ovih web stranica je zabavljanje
korisnika prilikom koritenja. Sporije uitavanje stranice, nekonvencionalni pristup
izgledu i navigaciji kroz ove stranice je prihvatljivo. Primjer je gamebox.net.hr.
7. Informacijske web stranice esti termin koji se koristi za ovaj tip web stranica je
web portal. Svrha je omoguiti korisniku veliku koliinu aktualnog sadraja
grupiranog u neke okvirne teme. Ove web stranice mogu biti opeg tipa, npr.
www.index.hr ili se mogu temeljiti na nekoj temi kao npr. www.zdravakrava.hr.
8. Blog veliku popularnost zadnjih est-sedam godina doivio je uptavo ovaj tip web
stranica. Naglasak je na aurnom publiciranju vlastitog sadraja autora s
mogunou javnog komentiranja svakog lanka. Primjer je www.blog.hr.
9. Hibridne web stranice predstavljaju kombinaciju gore navedenih glavnih tipova.

17

Tone kriterije po kojima bi se mjerila i ocjenjivala kvaliteta web stranica je vrlo teko
utvrditi. Neke od njih bi mogle biti sljedee: (Panian, 1999):

stranice se trebaju brzo uitavati,

stranice trebaju biti to manje veliine mjereno u kilobajtima,

tablice i okvire koji se upotrebljavaju za izgled stranica treba upotrebljavati prema

nekim pravilima,

izbjegavati slijepe stranice,

poveati preglednost,

izbjegavati pretjeranu upotrebu slika i animacija ako nisu relevantna za sadraj,

stranice treba testirati u svim veim pretraivaima,

odgoditi registraciju korisnika,

interaktivne obrasce treba uiniti to jednostavnijima,

omoguiti dostupnost stranica bez obzira na sistem njegova auriranja.

Profesorica Marina iin-ain govori o sljedeih pet kriterija:

Tablica 3: Kriterij za procjenu kvalitete web stranica

Kriteriji

Pitanja za laku procjenu

Tonost

Tko je napravio taj dokument?

Moe li se kontaktirati autora?
Usporediti sadraj s drugim izvorima.
Moe li se pronai greke na prvi pogled?
Gdje je dokument objavljen?

Autoriziranost

Da li je autor kvalificiran za davanje tih informacija?

Da li je autor strunjak na tom podruju?
Da li je dokument pristran?
Koja je svrha dokumenta?

Objektivnost

Da li je informacija miljenje ili injenica?

Da li stranica ima poveznice na srodne stranice?
Da li srodna stranica ima poveznicu na ovu stranicu
Da li je sadraj rasistiki, nacionalistiki ili seksistiki?

Vaenje

Da li je informacija datirana?
Da li je informacija objavljena?
Koliko je stara informacija?
Da li poveznica upuuje na postojeu stranicu?

Dostupnost

Da li je vrijeme odaziva brzo?

Da li je stranica dosljedna?
Da li se lako kretati stranicom?
Da li se moe pristupiti stranici za raznih pretraivaa?
Da li se potrebno registrirati?
Da li je slobodna ili se plaa?
(Izvor: iin-ain, 2003)

18

Bez obzira na prije navedene tipove stranica, svima je zajedniki cilj privui to veu panju
odnosno to veu posjeenost. Nain na koji korisnici mogu doi na neke web stranice su:

direktnim unosom web adrese u web pretraiva,

pomou linka na nekoj drugoj web stranici koji je povezan sa vlasitiom,

pomou web pretraivaa traenjem eljenih web stranica po kljunoj rijei.

Upravo ova zadnja stavka predstavlja sve vei udio naina dolaska posjetioca na eljene
web stranice. Web pretraivai i nain njihova pretraivanja web prostora uzimaju sve veu
panju marketing strunjacima koji ele vei trini udio. Iz to razloga razvila se cijela jedna
disciplina koja se bavi optimizacijom web stranica za bolju poziciju na rezultatima pretrage
Search engine optimizing (SEO). SEO ukljuuje analizu eljenih kljunih rijei i
optimiziranje web stranica za te termine kako bi se postigla vea posjeenost web stranica.
Za rezultat SEO aktivnosti kao i za druge podatke potrebne za analizu posjeenosti slue
razni alati. Danas postoje brojni naini i brojne aplikacije koje mogu vrlo tono mjeriti i
prikazati rezultate posjeenosti stranica. Od brojnih, najvie se istie Google Analytics besplatna usluga koju je Google omoguio svojim korisnicima. Za njeno koritenje potrebno
je otvoriti svoj raun na Google-u, postaviti na stranice odreeni kod i usluga je aktivirana.
Podaci mjerenja se prikazuju preko web korisnikog suelja. Mogue je analizirati
posjetioce, pojedinu grupu sadraja kao i izvore sa kojih su doli na stranice.
Slika 2: Prikaz suelja Google Analytics usluge mjerenja posjeenosti web stranica

(Izvor: www.google.com/analytics )

19

3.2.2. Specifinosti korisnikog suelja kod web stranica

Web stranice su namjenjene prvenstveno pretraivanju sadraja te su principi dizajniranja
njihova suelja zbog toga neto drugaiji u odnosu na web aplikacije. Za razliku od
klasinih windows aplikacija, gdje su elementi suelja vrlo standardizirani, na sueljima
web stranica imamo sasvim drugi sluaj. Svaka web stranica eli biti unikatna, ljepa i bolja
od konkurencije. Iz tog razloga neupueni dizajneri znaju napraviti sasvim neproduktivna
suelja, koja nisu previe korisna posjetiocima koji ne znaju gdje traiti neki sadraj, ne
znaju gdje se trenutno nalaze i slino.
Bez obzira na injenicu da nema pravila, mogu se izdvojiti neke cjeline koje ine svako
profesionalno suelje web stranice.
Slika 3: Anatomija tipine web stranice

(Izvor: Bearid, 2007:7)

Glavni blok sadraja svaka web stranica mora imati jedan blok koji povezuje sav
sadraj. To je obino prvi <div> element HTML dokumenta. Kad ne bi bilo ovog elementa,
sadraj bi se rasprostirao po itavoj irini web preglednika to bi naruilo njenu estetsku
dimenziju i preglednost sadraja. Glavni blok moe biti definiran apsolutnom irinom
izraenom u mjernoj jedinici (najee piksel) ili apsolutno u postotku.
20

Logo se preporua pozicionirati u lijevi gornji kut web stranice. Zajedno sa bojama, logo
predstavlja vizualni identitet vlasnika pa je zbog marketinkih razloga bitno da je
konzistentan sa vizualnim identitetom tvrtke. Prema logotipu, posjetioc odmah shvati da li
se nalazi na eljenom mjestu ili ne. Logotip bi cijelo vrijeme trebao biti identian kroz sve
stranice jednog web mjesta. Po praksi i standardima, logo bi trebao biti i link na poetnu
stranicu web mjesta. Uz logo se esto pozicionira i slogan tvrtke koji daje izjavu o tome
ime se tvrtka bavi.
Navigacija su vrata kroz koje se ulazi na ostali sadraj web stranica. Korisnici oekuju
glavnu navigaciju poravnatu horizontalno odmah ispod logotipa ili vertikalno ispod
logotipa. Ako je ikako mogue, glavna navigacija bi trebala biti iznad podruja do kojeg se
dolazi sputanjem mia (skrolling), a to znai unutar gornjih 500-600 piksela stranice.
Ukoliko su web stranice opsene, dolazi do potrebe kreiranja drugog ili ak i treeg nivoa
izbornika. Ima raznih nain za kreiranje podizbornika kao to su padajui izbornici,
sekudarni izbornici horizontalno ispod primarnih, sekundarni izbornici vertikalno u desnoj
ili lijevoj koloni i slino
Slika 4: Primjer organizacije navigacije sa primarnim i sekundarnim izbornicima

(Izvor: http://www.applereviews.com)

Sadraj je najvaniji dio web stranice. Posjetioc dolazi na stranicu da bi proitao ono to
je u glavnom sadraju. Ukoliko on nije jasno vidljiv i ukoliko nije jasno to je glavni
sadraj, posjetioc e ugasiti pretraiva ili e otii na drugo web mjesto gdje moe nai ono
to ga interesira. Poeljno je da sadraj ima jasno istaknuti naslov, ispisan veim fontom,
ispod kojeg dolazi sadraj u obliku teksta, fotografija i videa.
Podnoje nalazi se na dnu stranice. To je uobiajeno mjesto za izjavu prava o koritenju
sadraja i za kontakt podatke tvrtke. Trenutno je trend ponavljanja glavnih ili svih linkova i
u podnoju. Na taj nain se omouvaa posjetiocu da prilikom zavretka itanja sadraja
trenutne stranice odmah ima mogunost prelasna na neku drugu. U pogledu dizajna,
21

podnoje treba jasno sugerirati da je to mjesto zavretka glavnog sadraja, a to se postie

drugom bojom, horizontalnom crtom ili nekom drugom tehnikom.
Slika 5: Primjer podnoja koji sadri kompletnu navigaciju web stranica

(Izvor: http://www.productivedreams.com)

Prazan prostor je vrlo vaan isto kao i svi gore navedeni elementi. Web stranica mora
imati praznog mjesti, reklo bi se da die, a ne da je svaki njen centimetar popunjen
tekstom, fotografijama, tablicama ili drugim sadrajem. Prazan prostor daje dizajnu
prozranost i preglednost, a time i veu ugodu posjetiocu koji ita sadraj.
Ovisno o kojem tipu web stranice je rije ili kojem se tipu i koliini sadraja radi, raspored
elemenata e biti drugaije organiziran. Osnovnim stranicama je dovoljna jedna kolona gdje
su na vrhu izbornici , a ispod sadraj. Poveavanjem razine navigacije, izdvajanjem liste
nekog tipa sadraja (npr. novosti, povezane vijesti, blog postovi i sl.), prikazivanje banera i
ostalih elemenata, ukazuje se potreba za sloenijom organizacijom.
Slika 6: Tipini primjeri organizacije sadraja web stranica

(Izvor: izradio autor)

22

3.3. WEB APLIKACIJE

3.3.1. Relevantne znaajke web aplikacija
Kao to je ranije spomenuto, web aplikacije imaju naglasak na funkcionalnost.
One su interaktivni sistemi koji pomau korisnicima da odrade eljene zadae i time
poveaju njihovu produktivnost. Primarna zadaa web aplikacija je odraditi posao koji slui
njihovim korisnicima za obavljanje zadataka, sukladno definiciji poslovnog pravila za koji
je web aplikacija i napravljena.
Dok web stranice trebaju biti to jednostavnije i omoguavati svakome brzo snalaenje i
koritenje, web aplikacije od njihovih korisnika zahtijevaju vei stupanj ukljuenosti i
znanja o sistemu kojeg web aplikacija obrauje. Korisnici rabe web aplikaciju kao alat za
obavljanje kritinih poslovnih zadataka u njihovom svakodnevnom poslu. Ukoliko se
posjetiocima web stranice ne sviaju i ne pruaju informacije na nain i u koliini koju bi
htjeli, oni mogu svoju potrebu, vrlo lako, zadovoljiti na nekoj drugoj web stranici. To nije
sluaj sa web aplikacijama. Ponajvie u sluaju poslovnih web aplikacija, korisnik je
primoran koristiti upravo tu jednu koja mu je na raspolaganju i ne postoji nekoliko drugih
alternativa.
Jedna od vanijih podjela je ona na web aplikacije otvorenog tipa i web aplikacije
zatvorenog tipa. Glavna odlika onih otvorena tipa je da su dostupni svima onima koji
otvore svoj raun kod pruatelja takve usluge. Korisnici mogu slobodno pristupati takvoj
aplikaciji putem web-a kao to to ine i pregledavajui web stranice. Neke od takvih web
aplikacija otvorena tipa su potpuno besplatne dok je za koritenje nekih potrebno platiti
odreeni iznos. U praksi su to vrlo esto mali iznosi koji se plaaju periodino, obino
mjeseno. Kao obraun naplate se obino koristi broj korisnika koji pristupaju preko istog
rauna, broj koritenih serverskih resursa (broj megabajta) ili neka druga jedinica ovisno o
tipu aplikacije. Web aplikacije zatvorena tipa su najee iskljuivo poslovne aplikacije koje
nisu dostupne svima preko javne mree, ve se koriste za interne potrebe neke tvrtke od
strane njihovih zaposenika i eventualno njihovih partnera. Takve aplikacije su esto
dizajnirane i realizirane da zadovolje specifine potrebe odreene tvrtke te se njih radi po
narudbi. Te aplikacije se najee pokreu preko lokalne raunalne mree tvrtke ili preko
njene virtualne privatne mree ukoliko su dijelovi tvrtke dislocirani.
23

S obzirom na naglasak na funkcionalnost koju trebaju odraivati web aplikacije, njihovo

tehnoloko dizajniranje i impementacija zahtijevaju odreeni stupanj sloenosti. Aplikacije
su obino podjeljene u logike slojeve gdje svaki sloj ima svoju dodjeljenu ulogu. Pomalo
zastarjele tradicionalne desktop aplikacije sastoje se od samo jednog sloja koji se odvija na
jednom raunalu. Web aplikacije zahtijevaju vie slojeva koji se odrauju na barem dva
raunala: posluitelju i klijentu. Iako postoje razliite varijante, u praksi se najee nailazi
na web aplikacije koje imaju tri sloja.
Prezentacijski sloj
Odvija se u web pretraivau. Ovdje korisnik vri interakciju sa web aplikacijom; unosi
potrebne podatke i dobija rezultate rada koje sustav odradi. Klasine web aplikacije
zahtijevaju nanovo uitavanje same stranice nakon korisnikove akcije (npr. klik na gumb
Unesi) to zakida kvalitetu korisnikog iskustva zbog vremena koje je potrebno da se
stranica ponovno uita. Novije tehnologije izale su tome u susret i omoguavaju asinhrono
odvijanje procesa to omoguava koritenje web aplikacija na nain kao to je to kod
klasinih stolnih aplikacija. Neke od tih tehnologija su Microsoft Silverlight, Adobe Flex i
Java FX. Tako za koritenje Adobe Flex-a potrebna je instalacija Adobe Flash programa.
Najvie je u praksi zaivjela AJAX tehnologija koja je nezavisan tehnoloki standard i
kompatibilan je sa svim postojeim tehnologijama.
Aplikacijski sloj
Veina funkcionalnog dijela posla odvija se na serverskoj strani web aplikacije, gdje se
koristi neke od brojnih dinaminih web tehnologija, koje omoguuje web server ili
aplikacijski server. Primjeri tehnologja su : PHP, ASP.Net, Python, Ruby on Rails, JSP/Java
i druge. Neke od tih tehnologija su zatvorenog tipa dok su druga rjeenje otvorenog tipa i
odvijaju se na svim platformama odnosno na svim operativnim sustavima.
Sloj baze podataka
Gotovo svaka web aplikacija ima potrebu za trajnim spremanjem vee ili manje koliine
podataka. Spremanjem podataka se bave sustavi zvani kao baze podataka. Baze podataka se
nalaze na strani posluitelja te mogu, ali i ne trebaju fiziki biti na istom posluitelju kao i
aplikacijski sloj web aplikacije. Najpoznatije baze podataka za potrebe web aplikacija su
MySQL, PostgreSQL, SQL server, Oracle itd.

24

Slika 7: FreshBooks web aplikacija za slanje, praenje i evidenciju poslovnih rauna

(Izvor: http://www.freshbooks.com)

Osnovne prednosti koritenja web aplikacija u odnosu na tradicionalna desktop rjeenja su

(Wikipedia.org, 2010):

Web aplikacije ne zahtijevaju kompleksne procedure za njihovo uvoenje u velike

organizacije. Sve to treba je instaliran web pretraiva i pristup mrei.

Nema potrebe za kupovanjem skupih radnih stanica sa visokim performansama rada

budui da se veina sistemskih zahjeva odvija na posluiteljima.

Skupih procedura za auriranje i nadogradnju sustava ovdje nema jer se sve odvija
centralizirano na posluitelju.

Laka integracija sa ostalim uslugama koje se temelje na web tehnologiji kao to je

email servis ili usluge pretraivanja i indeksiranja sadraja te mobilne tehnologije.

Nema ogranienja u koritenju razliitih operativnih sustava budui da svaki od njih

ima web pretraiva koji je jedini uvijet za rad sa web aplikacijama.

Neki vaniji nedostaci web aplikacija:

Web pretraiva mora biti kompatibilan sa zahtjevima web aplikacije.

U sluaju prekida veze izmeu klijenta i posluitelja rad je potpuno onemoguen.

Kompletna ovisnost o centralnom posluiteljskom raunalu.

este nadogradnje i nedovoljno uklanjanje greaka svake verzije.

Tvrtke mogu pratiti kompletan promet i imati uvid to svako radno mjesto radi to u
nekim sluajevima stvara problem privatnosti.

25

3.3.2. Korisniko suelje za potrebe interaktivnosti

Svaka web aplikacija je unikatna i polazna osnova njena kreiranja je funkcija koju treba
zadovoljavati. Web aplikacija koja slui za upravljanje sadrajem web stranica (CMS web
aplikacija) ili webmail aplikacija, slue sasvim razliitim svrhama. Ipak postoje zajedniki
elementi koje takva suelja koriste i dobra praksa njihove upotrebe slui kao osnova za
kreiranje svakog korisnikog suelja.
Web forme su sastavni dio svake web aplikacije. Za sam ulaz u aplikaciju potrebno se
prijaviti preko web forme.Unos podataka se uvijek obavlja preko web forme kroz jedno ili
vie polja za unos. Istraivanja meu korisnicima govore kako nitko ne voli ispunjavati web
forme te je nuno maksimalno ih pojednostaviti i uiniti ih user friendly. Dobra praksa je
postavljanja sustava pomoi koji daje kratke upute to se u koje polje treba upisati. Sustav
povratne informacije je isto tako jako bitan. Poeljno je da on bude interkativan. Ukoliko
korisnik u polje za email adresu unese neto drugo, suelje bi trebalo dati naznaku da je
podatak kriv odmah nakon to se fokus kursora makne iz tog polja. Za validaciju takvih web
formi potrebno je intenzivno korisiti JavaScript mogunosti koje pruaju napredne
mogunosti po pitanju validacija.
Prikaz lista-detalja je integralni dio svake web aplikaciji. Kada je potrebno prikazati
kumulativni prikaz skupa podataka istog tipa, poeljno ih je prikazati u obliku liste sa
najvanijim informacijama tog tipa podatka. Informacije tog zapisa se prikazuju u kolonama
tablice. Na listi su bitne sljedee karakteristike:

sortiranje zapisa po ulaznom ili silaznom kriteriju neke kolone,

filtriranje koliine podataka po odreenim kriterijima,

listanje stranica, budui da se na jednom prikazu nalazi ograniena koliina zapisa.

Poeljno je da listanje bude numerirano s jasnom naznakom na kojoj stranici te liste
se korisnik nalazi u datom trenutku.

Naprednije mogunosti liste su:

grupiranje zapisa po nekom kriteriju,

reorganizacija poretka kolona liste,

mogunost pokretanja akcije nad svim selektiranim zapisima.

Ukoliko lista ne prikazuje sve informacije tog tipa podatka potrebno je omoguiti prikaz
detalja tog zapisa u zasebnoj formi. Prikaz liste i detalja moe biti na istoj stranici ili na
26

dvije stranice ovisno koliko su liste velike, koliko imaju kolona i koja koliina polja postoji
u prikazu detalja.
Radne ploe sastavni su dio svih kvalitetnijih web aplikacija. Radna ploa predstavlja
ulaznu toku u aplikaciju, prikazuje najvanije informacije u obliku tablice ili ee
grafikone i slui kao jedan zbirni pregled svih vanijih podataka u sustavu. Neke web
aplikacije dozvoljavaju prilagodbu u smilsu samostalnog odabira koje podatke korisnik eli
vidjeti na radnoj ploi. Ta prilagodba se radi na razini svakog korisnika.
Slika 8: Prikaz radne ploe web aplikacije Google Analytics

( Izvor: http://www.google.com/analytics )

Izvjetaji posebice poslovne aplikacije zahtijevaju razne izvjetaje koji se moraju

prikazivati na ekranu, ali i prikazati se u obliku prlagoenom za ispis na pisau . Neke tvrtke
koriste vie web aplikacija specijaliziranih za odreene zadatke. Nekada se podaci moraju
izvesti iz jedne aplikacije, odnoso uvesti u drugu aplikaciju to moe biti povezano i sa
izvjetajima.
Kod korisnikog suelja web aplikacija, korisnici su neto drugaijeg profila od korisnika
web stranica. Posjetioci web stranica su obino tamo jednokratno ili vrlo rijetko i provode
na tom suelju nekoliko sekundi do par minuta. Kod web aplikacija to nije sluaj. Neki
korisnici cijelo radno vrijeme imaju otvoreno suelje neke web aplikacije i intenzivno ga
koriste dui vremenski period. Zbog toga dolaze do izraaja i performanse takvih suelja.
AJAX tehnologija se ovdje intenzivno koristi kako bi sprijeila nepotrebno ekanje i
eliminirala potrebu za ponovnim uitavanjem prikaza na suelju.
27

4. PRISTUP RAZVOJU WEB SUELJA U TVRTKI

DOMO PRO
4.1. DJELATNOST I DOSADANJE ISKUSTVO
Tvrtka je u svojih pet godina postojanja prevenstveno bila orjentirana na proizvode i usluge
vezane za vizualnu komunikaciju koristei web tehnologiju. Prvi proizvod je bio Visual
Card koji je bio ponuen prvenstveno turistikom, graevinskom i sektoru posredovanja u
prometu nekretnina. Radi se o zaokruenoj prezentaciji objekta kroz nekoliko naina kao to
su virtualno interaktivno razgledavanje prostora u 360 stupnjeva, klasine fotografije, 3D
prikaz objekta i interaktivna mapa za geografsko pozicioniranje lokacije objekta.
Cilj proizvoda je bio na jedinstven i iskljuivo vizualan nain, omoguiti korisniku
jednostavan i zabavan nain upoznavanja odreenog objekta; hotela, kue za odmor,
nekretnine za kupnju i slino. Visual Card se dostavljao naruiocu na CD mediju te se
postavljao i na web stranice kao multimedijalni dodatak na ve postojee web rjeenje.
Od samih poetaka, paralelno za ovim proizvodom, poelo se raditi na jednostavnijim i
neto sloenijim prezentacijskim web stranicama koje su bile statinog karaktera. U zadnjoj
fazi razvoja poslovanja pristupilo se i razvoju web aplikacija koje su prenstveno sustavi za
upravljanje sadrajem web stranica. Danas tvrtka nudi sljedee usluge:

Konzultantski poslovi vezani za izradu novog ili reorganizaciju postojeeg web

rjeenja, bilo da je rije o web stranicama ili web aplikacijama.

Osmiljavanje, izrada prototipa i implementacija korisnikog suelja.

Prilagoavanje postojeih ili izrada novih web aplikacija i programiranje za web.

Optimizacija web stranica za potrebe bolje pozicioniranosti na web trailicama.

Veina web stranica su klasine prezentacijske naravi koje omoguuju vlasniku prezentaciju
svoje djelatnosti, proizvoda i usluga te omoguuju interakciju putem online formulara za
upit. Moe se rei da je konani cilj ovakvih web stranica ostvarivanje to veeg broja
konverzija to znai pretvoriti posjetioce u kontakte s konanim ciljem realizacije suradnje.
Iako su trenutno u manjini, u konstantnom su porastu zahtjevi za naprednijim web
stranicama u smjeru publiciranja kataloga ponude s mogunou narudbe i online plaanja
28

kreditnim karticama, povezivanje sadraja na socijalne mree, integracija stranica sa

newsletter sustavima i slino. Od web aplikacija najvie se realiziraju one koje omoguuju
samostalno upravljanje sadrajem web stranica. Klijenti danas ele samostalno i aurno
upravljati svojim online marketingom i prodajom, a ne traiti konstantne intervencie od
strane svog dobavljaa. Osim navedene vrste web aplikacija, u ponudi su i newsletter
sustavi za marketing putem elektronike pote i CRM (Customer relationship management)
sustavi za grupno i organizirano upravljanje marketing potencijalnim i postojeim kupcima.
Klijenti su preteno male i srednje velike tvrtke u privatnom sektoru i to najvie iz
djelatnosti turizma i prometa nekretnina. Takvim tvrtkama se omoguuje proizvod i usluga
po sistemu klju u ruke te se svi zahtjevi odrauju u potpunosti; od faze savjetovanja pa
sve do implementacije i odravanja.
Danas ve postoje tvrtke koje su specijalizirane samo za osmiljavanje web korisnikog
suelja. Dakle nije rije o usluzi kompletne realizacije, ve samo o osmiljavanju i dizajnu
suelja web stranica i web aplikacija. Takve tvrtke to obino rade iskljuivo za velike
klijente kod inicijalne izrade novih projekata ili, neto ee, kod analize postojeeg rjeenja
i njihova poboljanja u smjeru estetike i upotrebljivosti. S obzirom na veliinu tipinih
klijenata i njihova budeta, Domo Pro nastoji primjenjivati iste principe kad je rije o
korisnikom suelju te potivati standarde vezane za profesionalnu izradu tog dijela svojih
proizvoda. Uzevi u obzir da, gotovo u pravilu, svaki projekt podrazumijeva rad nad
korisnikim sueljem, lako je zakljuiti kako taj dio posla zahtijeva najvie znanja, iskustva
i vremena u realiziaciji dosadanjih projekata.
Iskustvo je pokazalo da najvanija komponenta gotovo svakog rjeenja je upravo korisniko
suelje. To je toka u kojoj naruioc, ukoliko je zadovoljan, daje zeleno svijetlo projektu
ili ga osporava i trai izmjene. To posebno dolazi do izraaja kod web stranica odnosno
njenih estetskih karakteristika. Ovdje treba posebnu panju i energiju usmjeriti na edukaciju
naruioca na sve aspekte koji su bitni kod web stranica te naglasiti kako nije najvanije
zadovoljiti estetske kriterije samog naruioca, ve napraviti suelje koje e zadovoljiti
prosjenu ciljanu publiku kojoj se eli prezentirati sadraj. Kod web aplikacija sluaj je
neto drugaiji. Estetska komponenta je minimalna. Najvanije je omoguiti intuitivno
snalaenje u procesima kojima se upravlja, kvalitetu validacije sadraja koji se unosi i
smanjiti vrijeme koje je potrebno za obaviti odreeni zadatak.
29

4.2. CMS SUSTAVI I NJIHOVO KORISNIKO SUELJE

Ranije je spomenuto kako Domo Pro u pravilu na svakom projektu izrade web stranica
implementira prateu web aplikaciju za potrebe samostalnog upravljanja sadrajem tih
stranica. Ta vrsta aplikacije se u pravilu naziva Content management system (CMS).
Generalno gledajui, CMS sustavi upravljaju sadrajem kao to su dokumenti, fotografije,
tekstualni podaci i slino. Sustav slui za pohranu, kontrolu, uvid u revizije i publiciranje
sadraja. Takvi sustavi su evoluirali, tako da se danas spominju dvije osnovne kategorije:

Enterprise sustavi upravljanja sadrajem (ECMS),

Web sustavi upravljanja sadrajem (WCMS).

Dok ECMS prvenstveno slui za upravljanje nestrukturiranim podacima nekog poduzea i

namjena je iskljuivo inteterne naravi, WCMS se koristi za pojednostavljivanje publiciranja
sadraja na javnim web stranicama (Wikipedia.org, 2010.). Takvi sustavi omoguuju
odvajanje sadraja, njegova dizajna i procesa publiciranja. Na taj nain, autor sadraja ne
treba imati nikakvo tehniko predznanje da bi mogao upravljati bilo kakvim sadrajem
svojih web stranica.
Iako postoje rjeenja gdje nema razlike u izgledu korisnikog suelju izmeu web stranice i
CMS web aplikacije, postoji snana potreba za razlikovanjem tog dvoje. Razlog tomu su
dva razliita pristupa i potrebe koje imaju korisnici koji s jedne strane informativno gledaju
web stranice za razliku od urednika sadraja koji njime upravlja kroz CMS web aplikaciju.
Slika 9: Razlika suelja javne web stranice (lijevo) i pripadajueg CSM sustava (desno)

(Izvor: izradio autor prema web stranici: http://www.san-rocco.hr)

30

Na temelju viegodinjeg iskustva rada sa korisnicima, dolo se do zakljuka kako su glavni

razlozi izrade zasebnog korisnikog suelja za potrebe CMS aplikacija viestruki.
Navigacija
Urednik sadraja ima drugaiji pristup prilikom konzumiranja sadraja od posjetitelja.
Glavne potrebe su sistematinost, preglednost, mogunost pretrage i opcija za grupnim
radnjama nad vie zapisa istog tipa sadraja. S druge strane, navigacija javnih web stranica
je uvelike orjentirana po sasvim drugim kriterijima, najvie marketing principima.
Raspored sadraja
Slino kao i u sluaju navigacije, organizacija suelja za potrebe CMS korisnika potpuno se
razlikuje od potrebe posjetitelja web stranice. Dok se kod web stranica esto prikazuju
podruja stranice sa oglasnim prostorom, formularima za pretplatu na newsletter,
izdvojenim sadrajima i slino, u CMS sustavima to je potpuno nepotrebno i stvara
konfuziju uredniku sadraja te takvi elementi trebaju biti uklonjeni iz CMS suelja.
Estetski elementi
Web stranice trebaju pratiti vizualni identitet tvrtke. Ukoliko je rije o sadraju vezanom za
zabavu, muziku i djecu, tada e vizualni doivljaj web stranica biti areni, multimedijalni i
nekonvencionalni. Ukoliko takve web stranice imaju CMS sustav, njegovo suelje treba biti
potpuno drugaije i predstavljati maksimalnu jednostavnost i preglednost gdje je sve
podreeno funkcionalnosti i sadraju kojim se upravlja.
Kada je rije o CMS sustavima Domo Pro koristi dvije vrste rjeenja:

Drupal platforma je sustav otvorenog koda kojeg razvija zajednica na razini

cijelog svijeta koja radi na nadogradnjama i podrci prema svim svojim korisnicima.
Taj sustav nije najbolje rjeenje u pogledu korisnikog suelja za krajnjeg korisnika
ve ga je trebalo posebno prilagoditi kako bi zadovoljio kriterije koji su definirani od
strane tvrtke Domo Pro. Suelje je prilagoeno internim standardima te predstavlja
kvalitetno rjeenje koje je mogue u relativno kratko vrijeme implementirati.

Individualna rjeenja po narudbi ukoliko su funkcionalni zahtjevi dosta

sloeniji te je budet klijenata za projekt vei, pristupa se prilagoenom razvoju
cijele web aplikacije kao i cijelog korisnikog suelja koji se prilagoava svrsi te
aplikacije. Primjer takvog rjeenja nalazi se na sljedeoj ilustraciji.
31

Slika 10: Prikaz suelja web aplikacije po narudbi za interno voenje lagera vozila

(Izvor: intranet mrea naruitelja iz Zagreba)

Jedan od najvanijih elemenata kada je rije o web aplikacijama i korisnikom suelju je

sustav pomoi unutar samog suelja. Pomo se odnosi na upute koje korisniku sugeriraju u
koje polje treba neto upisati ukoliko je rije o poetnicima ili manje vjetim korisnicima
raunala. Bitna je i povratna informacija koju sustav daje korisniku nakon to se odradila
neka akcija. Na primjer, nakon to korisnik klikne na potvrdu auriranja sadraja sustav
treba, nakon uspjenog provoenja procesa auriranja podataka u svoju bazu, potvrditi
korisniku porukom kako je radnja uspjeno izvrena. Ukoliko to nije sluaj, treba na vidnom
mjestu istaknuti kako radnja nije odraena i koji je uzrok tome. Drugi esti sluaj je unos
krive email adrese u polje u kojem se to trai. Pomou JavaScripta suelje se moe napraviti
dovoljno pametno da netom nakon krivog unosa korisnik dobije upozorenje da e-mail
adresa nije ispravno upisana. Na taj nain, korisnik stekne odreenu razinu komocije u radu
sa tom aplikacijom to je svakako jedna od vanijih karakteristika dobrog suelja.
Bez obzira na napore oko pojednostavljivanja naina upravljanja i kontekstualne pomoi u
samoj aplikaciji, neposredna edukacija je vrlo bitna. Preko edukacije, korisnik postepeno
stie znanja o upravljanju aplikacijom te na brz i interaktivan nain stjee potrebne vjetine
koje e mu trebati u kasnijem radu. Edukacija se prakticira neposrednim fizikim sastankom
ili pomou telefona i programa za udaljeno pristupanje raunalu korisnika preko Interneta.
32

4.3. SMJERNICE ZA DALJNJI RAZVOJ

Nakon viegodinjeg rada sa web korisnikim sueljima u tvrtki Domo Pro prilino je
logian zakljuak kako e njihova ulaga biti sve znaajnija. Ostale web tehnologije koje su
isto tako sastavni dio svakog web rjeenja, ne doivljavaju bitniju evoluciju. Ako se za
primjer usporedi tehnologija u domeni relacijske baze podataka ili razvoj programskih
jezika, vidi se kako ovi segmenti ne doivljavaju bitnije promjene u kraem vremenskom
razdoblju. U domeni tehnologije korisnikih suelja ubrzana evolucija je prilino oigledna.
Razlog tomu bi mogao biti u sljedeim injenicama:

Sve vea upotreba web stranica i web aplikacija u poslovnoj i socijalnoj domeni

Novi ureaji, poput mobitela, pomou kojih se moe pristupiti Internetu, a koji
predstavljaju nove izazove kako napraviti optimalno korisniko suelje.

Sve vea brzina Interneta koja omoguava nove tehnologije razvoja web suelja.

Potvrena veza izmeu poslovno uspjenih web stranica i aplikacija s jedne strene i
kvalitete njihovog korisnikog suelja s druge strane.

Zbog navedenog, Domo Pro ima cilj daljnje poboljanje kvalitete izrade web korisnikih
suelja web stranica i aplikacija za svoje klijente. Posebno se to odnosi na sljedee stavke:

Konstantno praenje standarda i primjera dobre prakse novih istraivanja i

preporuka vrhunskih strunjaka u ovom podruju ima sve vie. Praenje tih sadraja
na konstantnoj bazi je uvijet za poslovanje na profesionalnoj razini u ovom poslu.

Sve vea upotreba AJAX tehnologije i HTML 5 standarda - te dvije tehnologije

otvaraju neke nove mogunosti kako lake i efikasnije rijeiti neke poznate
probleme. One omoguavaju i neke sasvim nove karakteristike web suelja.

Vea primjena tehnologije otvorenog koda (Open Source) globalne zajednice

koje se okupljaju oko pojedinih rjeenja postaju sve vee i snanije. Web sustavi koji
proizlaze iz takvog pristupa imaju znaajne prednosti u odnosu na zatvorene sustave
iza kojih stoje korporacije poput tvrtki kao to su Microsoft, Oracle i druge.

Praenje rezultata koritenja i njihova analiza posebice se to odnosi na web

stranice i praenje analize njihove posjeenosti te stupnja konverzije u odnosu na
kvalitetu njihova web suelja kakvo je za njih inicijalno napravljeno.

33

5. PROCES RAZVOJA WEB SUELJA

5.1 PROCES I PRINCIP DIZAJNIRANJA WEB KORISNIKOG SUELJA
Kvalitetno suelje se fokusira na korisnika i na njegove radne zadatke. Iako ovo izgleda
prilino oigledno i samo po sebi jasno, puno web developera nije uspjelo zadovoljiti
potrebe svojih korisnika iako je web stranica ili web aplikacija tehniki zadovoljila unapred
definirane ciljeve. Web developeri vole kompleksnost i istraivanje, pritom zaboravljajui
da u konanici korisniko suelje njihova proizvoda mora zadovoljavati ovjeka i olakati
mu koritnjenje tog sustava na maksimalno jednostavan nain.
U nekim sluajevima identifikacija korisnika je prilino oigledna. Ako je rije o naruenoj
poslovnoj web aplikaciji za neku kompaniju, korisnici su njihovi zaposlenici. Ukoliko je
rije o javnim web stranicama ili otvorenoj web aplikaciji stvari nisu tako jednostavne.
Najprije je potrebno od strane web developera shvatiti da oni sami nisu konani korisnici i
ne treba zakljuke temeljiti iskljuivo na njihovu sudu. Korisnici web stranice ili web
aplikacije nisu ni naruitelji. Iako e oni u veoj ili manjoj mjeri utjecati na konaan izgled
suelja, moraju biti svijesni da oni sami nee raditi s tim sueljem i koristiti ga nekoliko sati
dnevno. Najvaniji su konani korisnici te se njih najvie treba uzeti u obzir.
Identifikacija korisnika i njihovih potreba se moe obaviti koristei nekoliko metoda
(Slideshare.net, n.d.)

kontekstualni dizajn kao polazna toka,

metoda posmatranja,

kontekstualni interview,

fokusne grupe.

Metode modeliranja korisnika i njihovih potreba su

kreiranje scenarija,

kreiranje Persona.

Bez obzira na rezultat procesa identifikacije korisnika, jedno je sigurno: mora se uzeti u
obzir iskusni korisnici kao i oni poetnici. Poetnicima se mora omoguiti da se prilagode i

34

upoznaju suelje to je prije i to je bre mogue. Naprednim korisnicima treba omoguiti

da poznate radnje omoguiti obavljaju to efikasnije mogue. Neki strunjaci tome
pristupaju na nain da u biti rade dva korisnika suljelja, ali u mnogim sluajevima je to
bolje izvesti preko jedinstvenog suelja, a pomou raznih tehnika kao to

je metoda

stupnjevitog otvaranja.
Postoje razni procesi po kojima se moe realizirati korisniko suelje. Danas
najinteresantniji je Agilni pristup. Njegova glavna prednost je to to se temelji na
konstantnoj interaktivnosti. Svaka interacija se sastoji od svih faza definiranih u tom
procesu. To znai da na kraju prve inteakcije, ve postoji proizvod koji moe biti testiran, a
to je prototip. Proces se moe podjeliti u etiri cjeline: skiciranje, izrada prototipa, testiranje.
Skiciranje
Ovo je jednostavna i vrlo efikasna metoda istraivanja i ilustriranja razliitih ideja s kojima
dizajner poinje svoj rad. Cilj je napraviti rjeenje pomou skiciranja razliith koncepata.
Veina skica e biti vrlo brzo baena u smee, ali to nije nikakav problem budui da
njihovo kreiranje nije ni novano ni vremenski skupo. Upravo ova injenica je ono to
skiciranje ini vrlo monom metodom u ovom procesu. Jednom kad se napravi prava
skica ili barem prava s aspekta autora, moe se pristupiti detaljnijoj analizi i razraivanju
detalja a to znai izrada wireframe-a i kasnije prototipa

Slika 11: Primjer skice za izradu novog web korisnikog suelja

(Izvor: izradio autor)

35

Izrada prototipa
Prototip je konceptualni model koji prikazuje namjeru odnosno ideju dizajna (Warfel,
2009). Nakon skiciranja, sljedei korak je izrada pravog prototipa koji e simulirati
konano korisniko suelje. Prototip moe imati implementirane neke ili sve mogunosti u
smjeru funkcionalnosti koje su planirane za konano rjeenje, ali te funkcije u biti ne rade
nita trajno pozdadinski programski kod ne postoji, kao ni pripadajua baza podataka.
Bitno je da korisnici koji testiraju prototip dobiju dojam kako e se obavljati pojedina
radnja. Na primjer, ukoliko se radi o web aplikaciji koja obavlja kalkulativne zadatke, moe
se omoguiti generini unos podataka i prikaz rezultata kalkulacije.
Ukoliko je rije o pasivnim web stranicama, prototip moe biti u obliku fotografije koja je
rezultat rada u nekom od foto editora kao to je npr. Photoshop. Ako je rije o web
aplikaciji, prototip je bolje napraviti u obliku statinog HTML-a bez pozadinskog
programskog koda. Tada ja samo bitno da se omogui koritenje online formi za potrebe
rada sa podacima ulaz i izlaz rezultata operacije. Ovdje je glavni cilj omoguiti korisniku
to kvalitetniji i realniji uvid u konano rjeenje, kako bi se eventualne greke ili propusti
mogli korigirati. Istovremeno, cilj je to manje resursa potroiti za izradu prototipa budui
da e on doivljavati vee ili manje promjene. Osim to se prototip moe raditi u nekom
foto editoru (npr. Photoshop) ili nekom HTML editoru (npr. Dreamweaver), postoje i
specijalizirani alati za izradu prototipa.
Slika 12: Izrada sloenijeg interaktivnog prototipa pomou specijalne aplikacije Axure

(Izvor : http://www.axure.com/ )

36

Testiranje
Faza koja nikako ne bi trebala biti zanemarena je faza testiranja. To je i najvanija faza u
procesu izrade korisnikog suelja. Ovdje dolazi do upoznavanja krajnjeg korisnika sa
izgledom i mogunostima suelja. Osnovno pravilo, to se testiranja tie, je: testirati treba
od samog poetka i to vrlo esto. Detaljnije o metodama testiranja govoriti e se u
narednim poglavljiva ovog rada.
Uz navedeni proces, bitno je naglasiti i principe dobrog korisnikog suelja kojih bi se
trebalo drati prilikom njegova dizajniranja i implementacije. Slijede najvaniji principi.
Konzistentnost - korisnika suelja bi trebala biti konzistentna kroz sve dijelove rjeenja;
od navigacije preko odabira boje pa sve do vrste odnosno tipa koritene terminologije koja
se nalazi na samom suelju. Ovo se zove interna konzistencija. Ali, korisnika suelja bi
trebala biti konzistentna i unutar iste grupe proizvoda i unutar grupe proizvoda istog
proizvoaa. Najbolji primjer toga su aplikacije Microsoft Office paketa. Svi programi koji
ulaze u ovaj paket imaju korisniko suelje koje je vrlo blisko jedno drugom.
Familijarnost se vrlo esto mjea sa konzistentnou. Bit ovog principa je da elementi
korisnikog suelja ili cijela koncepcija bude bliska standardima koje korisnik ve
prepoznaje i time olakava svoje snalaenje u suelju. Npr. standard je da se klikom na
glavni logo web stranica dolazi na njegovu poetnu stranicu ili da se klikom na link kontakt
dolazi do adrese i broja telefona vlasnika web stranice.
Efikasnost korisnik treba to bre i to lake odraditi aktivnosti za koje web rjeenje slui.
Posebice to dolazi do izraaja kod web aplikacija gdje korisnik vri intenzivnu dvosmjernu
interakciju sa posluiteljem. Za ovaj princip vano je rano identificirati sve radne zadatke
koji e se obavljati preko tog suelja. Efikasnost je mogue unaprijediti i pomou
personalizacije korisnikog suelja ukoliko to suelje omoguava.
Povratne informacije sistem povratne informacije je bitan kod svakog suelja koje
ukljuuje ulaz od strane korisnika. Korisniku treba omoguiti informaciju koja upuuje na
trenutno stanje sistema. Ako je dolo do greke, to treba uoljivo pisati na ekranu. Ukoliko
je unesen krivi podatak, poruka mora biti jasno upuena korisniku. Kad aplikacija obrauje
podatke, i za to joj treba vremena, poruka o trenutnom stanju treba biti javljena korisniku.
37

Estetska strana korisnikog suelja je vrlo vana u konanom iskustvu korisnika i njegovom
zadovoljstvu. Estetika kod web-a je vrlo esto i krivo shvaena te je neki percipiraju kao
najvaniju stvar. Ukoliko je dojam u prvih par sekundi zadovoljavajui web stranica ili
web aplikacija je dobra i suprotno, ukoliko naruitelja rjeenje ne obori s nogu na prvi
pogled potrebno je sve ponoviti. Ovo je potpuno krivi pristup. Web stranice i web
aplikacije nisu umjetnika djela. Da li je cilj web rjeenja da ga se gleda i divi se njegovoj
poetnoj stranici? Prvenstveni cilj svakog web suelja je naglasak na jednostavnosti i
korisnosti te sve to nema veze s tim je potrebno zadrati podalje od njega i suzdrati se od
nepotrebnog kienja i nagomilavanja estetskih detalja koji su sami sebi svrha. Ako vizaulni
elementi ne pomau toj jednostavnosti i korisnosti ne bi trebali biti implementirani.
Estetika web korisnikog suelja moe se podjeliti u nekoliko elemenata (Bearid, 2007):
Raspored i kompozicija - Postoje neki sastavni djelovi web suelja kao to su: logo,
navigacija, glavni sadraj, podnoje i prazan neispunjen prostor. Njihov omjer, organizacija
i raspored su vrlo bitni i uvelike ovise o tipu sadraja koji se prikazuje na tom rjeenju.
Boje - Paleta koritenih boja gotovo uvijek proizlazi iz vizualnog identiteta tvrtke.
Kombinacija boja bi trebala potivati dobru praksu i ne naruavati preglednost sadraja.
Tipine sheme slaganja boja su akromatine, monokromatine, analogne, komplementarne i
triadine. Glavna podjela boja je na tople i hladne boje.
Tipografija - Budui da se suelje veinom sastoji od tekstualnog sadraja - veliina, boja i
tip fonta ini veliku razliku u doivljaju i ugodi koritenja takvog suelja. Fontovi koji se
koriste na web-u moraju biti web-safe fontovi. Dijele se u dvije skupine: serifni i neserifni
fontovi. Za izlaze na ekran se preporua koritenje neserifnih fontova zbog njihove vee
preglednosti.
Fotografije O odluci da li neki foto materijal stavit na web treba se pitati da li je taj
materijal relevantan, da li je interesantan, da li je ugodan. Izvori fotografija mogu biti
izraeni u vlastitoj reiji, kupljeni na Internetu ili narueni od profesionalnog fotografa.
Teksture Predstavljaju sve ostale grafike elemente i uzorke koji se koriste u estetici
suelja; tokice, linije, okvire, krivulje itd. esto se isti koriste kao pozadinski elementi.
Njihovom kombinacijom, veliinom i odnosom, mogu se efikasno naglasiti eljeni elementi.
38

5.2. TEHNOLOGIJE ZA IMPLEMENTACIJU

5.2.1. HTML
HTML (Hyper Text Markup Language) je jezik za opisivanje web stranica
(W3schools.com, n.d.). Za razliku od mnogih tumaenja, HTML nije programski jezik,
nego jezik za oznaavanje (markup). To znai da se sastoji od kolekcije oznaka zvanih
tagovi pomou kojih se omoguuje definiranje prikaza sadraja na samoj stranici. Ve je
reeno kako je web stranica i HTML dokument ista stvar. Zadnji izraz je vie tehniki i
naglaava HTML tehnologiju koja je osnova za izradu web stranice.
HTML tagovi su kljune rijei okruene sa znakovima < i > kao to je npr. tag <html>.
Tagovi veinom dolaze u paru pa se tako govori o otvaranju taga <p> i zatvaranju taga
</p>. Osnovna konstrukcija HTML dokumenta je podjela na zaglavlje <head> i tijelo
<body>. Zaglavlje se ne prikazuje u pretraivau ve slui za definiranje samog dokumenta
i nekih njegovih djelova. Zaglavlje npr. sadri definiciju koje e se enkodiranje korisiti, koji
je naslov stranice, koje su kljune rijei i opis za potrebe web pretraivaa i slino. Tijelo
stranice se sastoji od sadraja koji se prikazuje krajnjem korisniku u web pregledniku.
Tablica 4: Popis osnovnih HTML tagova i njihovo kratko objanjenje

Tag

Objanjenje

<title>...</title>

Definira naslov stranice koji se prikazuje u zaglavlju web

pretraivaa i na ispisu stranice na pisa.

<p> ... </p>

Predstavlja paragraf teksta koji se odvaja od teksta ispred i teksta

nakon sa veim proredom.

<b> </b>

Oznaava sadraj koji se prikazuje podebljanim slovima bold

<i> </i>

Oznaava sadraj koji se prikazuje ukoenim slovima - italic

<u> </u>

Oznaava sadraj koji se prikazuje podcrtanim stilom - underline

<h1> </h1>
<h2> </h2>

<h6> </h6>

Oznaava sadraj koji predstavlja naslov. Automatski se odvaja

proredom u odnosu na sadraj koji prethodi i koji slijedi. Broj 1
definira da je rije o najveem naslovu. Raspon veliine naslova
definra se brojem koji moe biti od 1 -6 gdje je <h1> najvei naslov
a <h6> najmanji naslov

<hr />

Horizontalna crta koja se moe koristiti kao separator izmeu dva

bloka sadraja. Ovaj tag nema svoj sadraj pa se ne zatvara na
klasian nain
(Izvor: izradio autor)

39

Slika 13: prikaz HTML koda jedne web stranice

(Izvor: izradio autor)

Osnovna uloga web pretraivaa je na temelju tagova prikazati korisniku onakvu definiciju
izgleda kakvu je zamislio web dizajner. Sljedea ilustracija prikazuje kako Mozilla Firefox
web pretraiva interpretira gornji HTML kod i prikazuje ga korisniku. Gotovo svaki web
pretraiva omoguava uvid u HTM kod na kojem se temelji dati prikaz tako da svatko
moe provijeriti kako je pojedina web stranica napravljena. U Firefox pretraivau dovoljno
je pomou preaca Ctrl + U dobiti na uvid taj HTML kod.
Slika 14: prikaz iste stranice u Firefox web pretraivau

(Izvor: izradio autor)

40

Kao to se moe primjetiti u gornjem prikazu koda, tagovi nisu dovoljni za postii potrebnu
definiciju elementa koji se prikazuju. Samo tag <img>, koji definira prikaz fotografije nije
dovoljan, ve su mu potrebne daljnje instrukcije koju fotografiju prikazati, koji je njen
alternativni tekst itd. Te daljnje definicije zovu se atributi pomou kojih se to moe postii.
U prijanjem tekstu je spomenuta posljednja varijanta HTML standarda, a to je XHTML
1.0. (Extensible HyperText Marku Language). Gornji kod je napisan po toj specifikaciji. Ta
specifikacija uvodi neto stroa pravila na dotadanji HTML 4.01. Osnovne karakteristike
tog standarda su(W3Schools.com, n.d..):

XHTML je restriktivnija verzija HTML 4.01,

XHTML je HTML definiran kao XML aplikacija,

XHTML definira da se tagovi moraju pravilno otvarati i zatvarati,

svaki tag mora biti zatvoren,

svaki tag i naziv atributa se mora pisati malim slovima,

vrijednost atributa bora biti unutar navodnika,

XHTML mora imati korijenski element.

5.2.2. CSS
Rastom popularnosti web tehnologije, svatko je htio imati to ljepe web suelje. isti tekst
sa kojom popratnom fotografijom nije vie zadovoljavao zahtjeve vlasnika koji su htjeli
korak vie u estetici i dizajnu svojih web stranica i web aplikacija. Tada se poelo u HTML
gurati elemente koji nisu svojstveni definiranju strukture web stranice, ve spadaju u
kategoriju definiranja izgleda tih elemenata. Tu je dolo do velikih problema za web
developere i traio se nain kako odvojiti strukturu od naina prikazivanja. Tada je dolo do
ideje stvaranja standarda koji bi bio specijaliziran za estetsku stranu dizajna web suelja.
CSS (Cascading Style Sheets) ili na hrvatskom kaskadni stilski obrasci, slui za opis
prezentacijske semantike (izgled i formatiranje) dokumenta koji je napisan u nekom jeziku
za oznaavanje. Veinom se CSS aplicira na dokumente pisane u HTML ili XHTML jeziku,
ali moe ga se upotrijebiti i za bilo koju vrstu XML jezika ukljuujui SVG i XUL.
Specifikacija ove tehnologije je opeprihvaeni stadard kojeg potuju svi proizvoai web
software-a, a ije administriranje i unapreivanje je u okviru W3C konzorcija
(Wikipedia.org, 2010.).
41

CSS koristi vrlo jednostavnu sintaksu koja se sastoji on niza engleskih rijei koji su user
friendly i vrlo samo deskriptivni. Pravila stiliziranja pomou ove tehnologije moemo
smatrati jednim od lakih za savladavanje te nije potrebno specifino znanje koje zahtijevaju
ostale tehnologije i programski jezici. CSS se sastoji od liste pravila. Svako pravilo sastoji
se od dvije cjeline: selektor i deklaracijski blok. Sljedea ilustracija to najbolje pokazuje.
Slika 15: Sintaksa pisanja CSS stilova

(Izvor: http://www.w3schools.com/css/css_syntax.asp)

Selektori mogu biti:

HTML tagovi tada CSS preuzima ulogu formatiranja svih elemenata na stranici
koji su definirani tim tagom. U gornjem sluaju definiran je izgled glavnih naslova.

CSS klase to su zasebni atributi koji se postavljaju unutar bilo kojeg taga, ime se
definira da e taj tag formatirati ono to je u toj deklaraciji stila specificirano.
Ovi selektori poinju sa tokom. Primjer: .zaglavlje {font-weight:bold};

Tag identifikatori su isto tako zasebni atributi koji jednoznano definiraju

odreeni tag koji se onda formatira CSS-om. Razlika u odnosu na klase je to se
jedan identifikator moe definirati samo jednom, dok se klase mogu postavljati u
neogranienom broju tagova. Ovi selektori poinju sa znakom ljestve.
Primjer: #kolona {color:#900B09; background-color:transparent};

Kombinacija navedenih selektora ukoliko je HTML dokument sloen i ukoliko

postoji potreba za detaljnijim definiranjem pojedinih elementata, moe se
kombinacijom gornja tri selektora omoguiti stiliziranje odreenog taga.
Primjer: .zaglavlje #kolona {text-decoration:none;background-color:transparent};

Stilske definicije se mogu nalaziti na tri mjesta:

direktno u samom HTML kodu kao vrijednost atributa odreenog taga,

u <head> dijelu HTML dokumenta i pozivati se unutar eljenih tagova,

u zasebnom dokumentu ekstenzije .css koja se poziva u <head> dijelu HTML-a.

42

5.2.3. JavaScript
Razvojem web tehnologije i korisnikih suelja dolo je do ogranienosti, ne samo s
estetske strane, (a o emu se pobrinuo CSS) ve i sa funkcionalne strane. HTML tagovi ne
omoguavaju nikakvu dodatnu funkcionalnost osim da definiraju strukturu stranice. Bila je
potrebna neka tehnologija koja e se pobrinuti o tome te je dolo do stvaranja nove
tehnologije - JavaScript. To je pravi programski jezik kojim se omoguava puna
funkcionalnost unutar pretraivaa te uz HTML i CSS tehnologiju omoguava gotovo
neograniene mogunosti kreiranja web korisnikih suelja.
Najvea primjena JavaScript-a je klijentska strana web pretraivaa koji ima ugraene
interpretere za izvravanje njegova koda. Koristi se prvenstveno za unapreivanje razvoja
korisnikog suelja i dinamikih web stranica. Java nije isto to i JavaScript to se esto
poistovjeuje. Java je puni programski jezik koji se kompajlira, dok je JavaScript skriptni
jezik koji obrauje interpreter, najee u web browseru. Iako razliiti, ima i dosta slinosti
u njihovoj sintaksi i praksi koritenja kljunih rijei budui da obje tehnologije nasljeuju
dobre prakse C programskog jezika.
Neke od mogunosti JavaScript-a su (W3schools, n.d.):

Daje web dizajnerima na raspolaganje puni programerski alat iako web

dizajneri nisu programeri, JavaScript je dovoljno lagani jezik za postizanje osnovnih
funkcionalnsti koje su potrebne za neko suelje.

Omoguava postavljanje dinamikog teksta u HTML dokument slui za

pruanje povratnih informacija sustava kao i za cijeli niz drugih potreba.

Moe reagirati na razne dogaaje koje pokree korisnik klikovi miem,

prelazak mia preko fotografije i sl. su dogaaji na koje JavaScript moe reagirati.

Omoguava se itanje i dinamiko pisanje HTML elemenata ovo otvara cijeli

niz mogunosti i potpunu kontrolu nad prikazom korisnikog suelja.

Mogue je izvravati validaciju podataka u web formularima ovo je najvanije

svojstvo koje je neophodno kod web aplikacija i korisnike interakcije.

Mogue je izvriti provjeru raznih parametara web pretraivaa korisnika

dolazi do izraaja kad treba pisati dupli kod zbog nekompatibilnosti pretraivaa.

JavaScript moe upravljati tkz. kolaiima (cookies) na strani klijetna ukoliko

web rjeenje treba spremati i provjeravati podatke na strani korisnika.
43

JavaScript kod se moe, kao i CSS, impementirati na tri naina u HTML kod:

slobodnim stilom i samostalno u sklopu tagova koji su unutar <body> taga,

unutar funkcija koje se deklariraju u <head> tagu, a mogu se pozivati na temelju

raznih dogaaja (eventa),

cijeli deklaracijski kod se pie u zasebni dokument ekstenzije .js , koji se poziva
odmah na poetku renderiranja HTML dokumenta, u <head> tagu.
Slika 16: Prikaz HTML koda koji deklarira i poziva JavaScript funkciju

(Izvor: izradio autor)

Gornji primjer prikazuje sluaj kad je JavaScript funkcija show_confirm() deklarirana u

samom dokumentu, u njegovu zaglavlju. Funkcija se poziva klikom na gumb i otvara popup
dijalog sa uputom Press a button!. Ukoliko se pritisne gumb OK javiti e se poruka You
pressed OK! dok ako se pretisne gumb Cancel, javiti e se poruka You pressed Cancel!.
Vrlo slina implementacija se moe koristiti u sueljima web aplikacije kad korisnik eli
brisati neki podatak te ga se dodatno pita za potvrdu da li stvarno eli brisati zapis.
Intenzivno koritenje JavaScript koda stvorilo je potrebu breg i lakeg koritenja njenih
mogunosti sa to manje runog pisanja koda. U tu svrhu stvorile su se razne JavaScript
biblioteke koje imaju veliku koliinu koda integriranu u sebi i omogujuju koritenje tog
koda preko jo jednostavnijeg API suelja. Najpoznatiji primjer takve biblioteke je jQuery.
44

5.2.4. Ajax
Jedna od glavnih zamjerki korisnikog suelja web stranica i web aplikacija, u odnosu na
suelje kod klasinih stolih aplikacija, je ponovno uitavanje stranice nakon korisnikove
akcije. Ukoliko korisnik gleda prvih deset stavki u tablici izlaznih faktura i eli vidjeti
sljedeih deset, klikom na gumb 11-20 stranica e se ponovono uitati da bi mogla
prikazati sljedeih deset stavaka tablice. To ponovno uitavanje predstavlja dva nedostatka;
troenje vie vremena i troenje sistemskih resursa posluitelja i mree. Kako bi se tome
doskoilo, razvila se AJAX tehnologija.
AJAX (Asynchronous JavaScript and XML) omoguava web stranicama da se osvjeavaju
asinhrono bez ponovnog uitavanja stranice, ve se osvjeava samo onaj dio koji je
potreban za prikazati novo stanje nakon korisnikove interakcije. Rezultat toga je bri radi i
puno bolje korisniko iskustvo takvog suelja. AJAX nije neka nova tehnologija ve se
temelji na nekoliko postojeih standarda te ih efikasno koristi za svoju svrhu. Ti standardi su
XMLHttpRequest element, JavaScript, CSS i XML.
Slika 17: Kronoloki prikaz kako funkcionira AJAX tehnologija

(Izvor: http://www.w3schools.com/ajax/ajax_intro.asp)

Prvo popularnije koritenje ove tehnologije bilo je kod Google Maps, gdje se omoguila
manipulacija zemljopisnom mapom bez ponovnog uitavanja stranice. Danas tu tehnologiju
koristi i Google trailica kako bi unaprijedila suelje pretraivaa tako da nudi prijedloge
termina nakon to korsnik unese prvih par njegovih slova.

45

5.2.5. Grafiki elementi

Sastavni dio svakog korisnikog suelja ine grafiki elementi. Iako se HTML definicijama
rasporeda i CSS definicijama estetskog stila moe postii visoko sofisticirana suelja, uvijek
postoji potreba pozivanja nekog grafikog elementa koji se ne moe definirati tim
tehnologijama. U tom sluaju poziva se neka grafika datoteka kako bi se prikazala na
odreenom mjestu a koja je pripremljena u nekom od grafikih editora. U sluaju web
stranica, minimalni grafiki element je logo tvrtke koji se pozicionira u gornjem lijevom
kutu svake web stranice, a koji je obino neka grafika datoteka.
Formata grafikih datoteka ima jako puno no za potrebe Web-aa koriste se tri tipa formata
(Buildwebsite4u.com, n.d.):

GIF (Graphic Information Format) pogodan je za one grafike prikaze koji

koriste svega nekoliko boja. Primjer su grafikoni, ikone ili tekst u obliku fotografije.
Razlog tomu je tehniko ogranienje formata koji moe definirati samo 256 boja.

JPG (Joint Photographic Experts Group) koristi se najvie kod potrebe za

prikazom fotografija i ostalih vrsta prikaza koji zahtjevaju prikaz velike koliine
boja. Ovaj format ima raspon prikaza od 16 milijuna boja.

PNG (Progressive Network Graphics) je neto novijeg datuma sa nizom

dodatnih mogunosti u odnosu na JPG i GIF format. To je i razlog to ga neki web
preglednici ne podravaju pa treba biti oprezan s njegovim koritenjem.

Svi gore navedeni formati su bitmap formati to znai da se poveavanjem zoom-a gubi
njihova kvaliteta prikaza. Baziraju se na definiranju boje na bazi piksela. Drugi tip formata
je vektorski format grafike koji se slui sloenijim algoritmima i ne bazira se na pikselu. Od
ovog formata, za potrebe web grafike, zaivio je samo swf format iji je autor tvrtka Adobe.
Koristei Flash tehnologiju moe se izraditi statina i animirana vektorska grafika. Jedini
uvijet njegova koritenja je instalacija Adobe Flash Playera, dodatka u web pretraiva.
Kod implementacije web korisnikog suelja i koritenja grafikih datoteka potrebno je
voditi rauna o performansama. Svaka grafika datoteka ima svoj URL i zasebno se uitava
to zahtjeva konstantnu komunikaciju sa posluiteljem. Treba voditi rauna da takvih
elemenata bude to je manje mogue i da budu to manji svojom veliinom.

46

5.2.6. Alati za izradu korisnikog suelja

Za sve gore navedene tehnologije potrebni su adekvatni alati pomou kojih dizajneri
korisnikog suelja mogu svoj posao odraditi bre i preciznije. Svakom profesionalnom
dizajneru suelja potrebna su tri osnovna alata:

Tekstualni editor - omoguava ureivanje HTML, CSS, JavaScript i AJAX koda.

Za ovo moe posluiti i obian tekst editor kao to je Notepad. Dok je on ak i
poeljan kod ljudi koji ue ove tehnologije, profesionalci ipak koriste neki od
profesionalnih alata koji nude brojne napredne mogunosti i ubrzavaju rad. Na ovom
polju najvie se koristi Adobe Dreamweaver koji nudi brojne napredne mogunosti
za sve navedene tehnologije. Ono to se najvie svia developerima je paralelno
ureivanje dokumenta kroz kod ili kroz WYSIWYG grafiko suelje. Ostali
poznatiji alati u ovoj grupi su Microsoft Expression Web (nasljednik Front Page-a),
CoffeeCup HTML editor, Aptana i mnogi drugi veinom potpuno besplatni.

Grafiki editor omoguuju ureivanje grafikih datoteka za potrebe web suelja.

Najpoznatiji predstavnik ove grupe alata definitivno je Adobe Photoshop koji
prednjai svojim mogunostima, podrkom i dokumentacijom. U sferi open source
grafikih editora tu je Gimp kojeg koriste Linux korisnici. Za potrebe vektorske
grafike

ili

vektorske

animacije,

glavni

alat

je

Adobe

Flash.

Monitoring i debuging alat za kreiranje kvalitetnog web suelja, nije ga dovoljno

samo osmisliti i razviti, ve je potrebna analiza, mjerenje raznim parametrima,
traenje grekaka i konstantna optimizacija. Ova faza razvoja ne bi se trebala
zanemarivati te svakako zahtjeva neke alate kako bi se taj posao mogao kvalitetno
obaviti. U ovom segmentu alata istie se Firebug koji se pokazao najboljim. Firebug
nije samostalan program ve se instalira kao pomoni program web pretraivau
Mozilla Firefox. Otvaranje web dokumenta u tom pretraivau, Firebug poinje
analizirati i izvjetavati o nizu parametara koji web dizajneru govore niz dodatnih
tehnikih informacija. Neke od mogunosti tog odlinog softwarea su: inspekcija
HTML dokumenta s mogunou editiranja CSS stilova u realnom vremenu,
napredni JavaScript debugger, analiza koritenja mrenog prometa i performansi itd.

47

Slika 18: Prikaz suelja Adobe Dreamweavera, Adobe Photoshopa i Firebug-a

(Izvor: izradio autor)

5.2.7. Dobra praksa

Iskustvo profesionalnih web dizajnera i reakcije korisnika ukazuju na neke mjernice kojih se
preporuljivo drati i koji su se dokazali kao dobra praksa u razvoju web suelja:
1. koritenje XHTML standarda u odnosu na stariju HTML verziju,
2. koristiti <div> elemente za pozicioniranje elemenata, a ne tablice,
3. CSS stilove smjestiti u zaseban dokument, a ne ih fiziki postavljati u HTML,
4. JavaScript kod smjestiti u zaseban dokument i pozivati ga iz HTML dokumenata,
5. CSS stilove i JavaScript dokumente komprimirati da se to bre uitavaju,
6. koristiti CSS sprites za grafike elemente i time smanjiti viak DNS lookups-a,
7. optimalno smanjiti veliinu grafikih elemenata da se ne narui kvaliteta prikaza,
8. koristiti font za prikaz tekstualnog sadraja umjesto grafikih elemenata s tekstom,
9. vane informacije trebaju biti pri vrhu stranice, a ne da se do njih dolazi skrolom,
10. paziti na kontrast boja izmeu teksta i pozadine zbog itljivosti sadraja,
11. veliina fonta i prored moraju omoguiti ugodno itanje i slabovidnijim osobama,
12. omjeri veliina suelja trebaju biti prilagoeni rezoluciji 1024 x 768 piksela.
48

4.3. TESTIRANJE KORISNIKOG SUELJA

Nakon kvalitetnog planiranja i implementacije nikako se ne bi smijelo preskoiti vrlo vanu
stavku u kreiranju web korisnikog suelja, a to je njegovo testiranje. Iako testiranje moda
nekoga upuuje na provjeru da li suelje ispravno radi to je svakako bitno za provjeriti,
ovdje dolazi do izraaja neto to se zove testiranje upotrebljivosti (eng. Usability testing).
Kao to svaku stvar treba testirati prije putanja u produkciju, ista je stvar sa korisnikim
sueljem. Web developeri i web dizajneri, iako talentirani i vrlo profesionalni u svom poslu,
nisu tipini korisnici njihova rezultata rada. Oni razmiljaju na malo drugaiji nain i izrada
suelja za njihov sklop razmiljanja vrlo esto i nije isti kao to e biti nain percipiranja
suelja od strane njihovih tipinih korisnika.
Testiranje upotrebljivosti je sistematski nain promatranja pravog i potencijalnog korisnika
proizvoda na nain kako ga on koristi i to pod relativno kontroliranim uvjetima. Ova metoda
se razlikuje od drugih evaluacijskih metoda, kao to su provjera kvalitete i demonstracija
proizvoda, po tome to korisnik pokuava samostalno izvriti zadatke vezane za taj proizvod
uz kontroliranu pomo ispitivaa. Testiranje se provodi u laboratoriju, u sali za sastanke, na
lokaciji korisnika ili na udaljeni nain preko Interneta. Tvrtke koriste ovu metodu da bi
procjenili software, hardware, dokumentaciju, web stranicu ili bilo koji proizvod koji ima
neki oblik korisnikog suelja (Dumas i Loring, 2008:2)
Slika 19: Tipino okruenje kod testiranja upotrebljivosti web suelja

(Izvor: www.testingwebusability.com )

49

Takvo testiranje se moe provoditi u raznim fazama razvojnog procesa. Ne treba ekati da
cijeli posao bude gotov da bi se napravilo testiranje. Za neka sloenija suelja preliminarna
testiranja s korisnicima se mogu obaviti ve u fazi skiciranja naelnog rjeenja ili ak i prije.
Testiranje upotrebljivosti se obavlja neposrednim kontaktom izmeu ispitivaa i ispitanika
kojeg bi trebao predstavljati reprezentativni korisnik web stranice ili web aplikacije,
odnosno vie njih u nizu. Simulira se situacija kada korisnik susree napravljeno suelje i
analiziraju se reakcije na razne zadatke koje ispitanik pokuava napraviti.
Bitno je napomenuti da ova vrsta testiranja nije isto to i koritenje fokus grupa. Marketing
strunjai esto koriste fokus grupe za donoenje njihovih poslovnih odluka. Ovdje se
inzistira na interakciji jedan na jedan ispitivaa i ispitanika neposrednim kontaktom, a ne
iznoenje grupnog miljenja o nekom dijelu web suelja. Evo neke injenice oko
korisnikog testiranja kojeg istie relativno visoki autoritet na tom podruju, Steve Krug
(Krug, 2000: 141):
Ako elite uspjean web, trebate ga testirati
Nakon to web developer ili cijeli tim provedu neko vrijeme radei na nekom rjeenju, ve
nakon kratkog vremena ne moe vidjeti svoje rezultat s aspekta novog korisnika koji e to
rjeenje koristiti. Testiranje podsjea autora da nismo svi jednaki i da to treba uzeti u obzir.
Testiranje jednog korisnika je 100% bolje od testiranja niti jednog
Testiranje se uvijek isplati bez obzira kako je provedeno i od strane koga. ak i najloiji
test sa krivim ispitanikom e otkriti nedostatke ijim rjeavanjem e se poboljati proizvod.
Testiranje jednog korisnika u ranoj fazi realizacije je bolje od testiranja 50 njih na
samom kraju realizacije
Testiranje ne bi trebao biti ogroman posao koji e alocirati velike resurse i kojeg treba
obaviti jednom i to na kraju. Kratka i jeftina testiranja u toku razvoja su puno bolja.
Vanost angairanja reprezentativnih ispitanika je precjenjeno
Iako je dobro doi do ispitanika koji predstavljaju prototip pravog korisnika datog web
rjeenja, puno je bolje testiranja provoditi esto i rano sa bilo kakvim ispitanicima.

50

Smisao testiranja nije da se neto potvrdi ili odbaci ve povratna informacija

Vrlo je teko organizirati ispitivanje koje e izolirati neki detalj suelja i apsolutno prikazati
rezultat ispitivanja. Ono to je najbitnije je skup svih reakcija ispitanika i njihova analiza.
Testiranje je interaktivni proces
Testiranje nije jednokratni proces. Nakon to se ustanovi kako veina ispitanika imaju
problema sa nekim dijelom suelja, to treba ispraviti i ponovo testirati sa drugim
ispitanicima. Moda se problem rjeio, a moa i nije. Moa je novije rjeenje jo i gore.
Nita ne moe pobiti reakciju korisnika uivo
Na kraju krajeva, korisniko suelje je napravljeno za njih. Oni e ga koristiti i u njemu se
snalaziti. Kako se moe pobiti njihovo minjenje sa strane web developera?
Jedna stavka je vrlo kritina kada se govori o testiranju upotrebljivosti, a to je pitanje
koliki broj ispitanika je optimalan. S obzirom da takva testiranja zahtijevaju odreene
trokove, veliki broj ispitanika u vie serija ispitivanja moe znaiti znaajna financijska
izdvajanja. Jo jedan od autoriteta na ovom podruju dokazuje kako je pet ispitanika po
seriji sasvim dovoljan broj. Kroz tih pet osoba utvrdi se veina problema koje je potrebno
korigirati. Prvi testirani korisnik odmah uoi vee nedostatke, drugi korisnik obino to
potvruje sa odreenim modifikacijama prethodnog komentara. Trei ispitanik obino
potruje svoje prethodnike i dodaje svoje varijacije komentara to je isto sluaj sa etvrtim i
petim. to se vie ispituje u istoj seriji sve se manje uoava novih nedostataka.
Grafikon 2: Omjer broja korisnika i pronaenih nedostataka suelja

(Izvor: Nilsen, 2000)

51

Neki autori smatraju da je taj broj i manji. Neki zagovaraju broj tri kao optimalan broj
ispitanika po seriji. Ve etvrti ispitanik ponavlja ono to su uoila prethodna trojica. Zato
bi bilo bolje ispitivanje zaustaviti, web dizajnerima i web developerima dati rezultate
ispitivanja i organizirati sljedeu seriju ispitivanja tek nakon to se suelje korigira.
Postoje dvije vrste testova:

Okvirno ispitivanje predstavlja prikazivanje primjera suelja i praenje prvih

reakciju ispitanika na to suelje; da li ga razmije, da li shvaa svrhu, kako je
organiziran, kako funkcionira itd.

Ispitivanje kljunih zadataka podrazumijeva intenzivnije ukljuivanje ispitanika

dodjeljivanje konkretnih zadaa i preenje kako se snalazi i rjeava problem.
Tablica 5: Karakteristike ispitivanja po fazama razvoja web suelja

TO SE
TESTIRA

PLANIRANJE

SKICA

PROTOTIP

Konkurentna web
suelja

Skica poetne
Sve to ima u
stranice web
prototipu od izgleda
stranice ili kontrolni i funkcionalnosti
panel web
aplikacije

PRVA GOTOVA
VERZIJA
Sve to je napravljeno

Skice ostalih tipova

suelja
FORMAT

Funkcionalna web
suelja

VRSTA
TESTA

Okvirno ispitivanje Okvirno ispitivanje Okvirno ispitivanje

Okvirno ispitivanje

Kljuni zadaci

Razumjevanje
Kljuni zadaci
sastavnih elemenata

Kljuni zadaci

to im se svia?

Da li shvaaju bit?

Da li shvaaju bit?

Da li i dalje shvaaju
bit?

Kako im to
odgovara?

Da li je to ono to
im treba?

Da li shvaaju
navigaciju suelja?

NA TO SE
FOKUSIRA

Papir

to dobro radi?

HTML prototip

Funkcionalno suelje

Da li mogu izvriti
kljune zadatke?

Da li mogu
intuitivno shvatiti
gdje se to nalazi?

Kako je teko
izvriti kljune
zadatke?
DUINA
TRAJANJA

60 minuta

15-20 minuta

45 - 60 minuta

60 minuta

BROJ
TESTOVA

1-3

1-3

1-3

(Izvor: Krug, 2000:152)

52

Osim ispitivaa i ispitanika, preporua se ukljuivanje i promatraa koji promatraju

ispitivanje. Strogo se preporua da promatrai budu odvojeni u drugoj prostoriji i ne smetaju
svojom oitom prisutnou ispitaniku. Ukoliko je takvo okruenje teko ostvarivo, jedan od
alata je snimanje samog procesa ispitivanja. Ispitanika je potrebno upozoriti i traiti
doputenje za isto. Snimka se kasnije detaljnije analizira kako od strane ispitivaa tako i od
strane web developera koji su suelje realizirali, ali i od strane poslovnog naruitelja tog
web rjeenja.
Proces ispitivanja bi se trebao sastojati od sljedeih cjelina:

Dobrodolica ispitaniku se treba zahvaliti na dolasku, objasniti mu emu slui to

ispitivanje i upozoriti da se ispitivanje snima i/ili promatra od strane treih osoba.
Ispitanik bi se trebao osjeati ugodno i treba mu se dati do znanja da nita to
napravi nije pogreno ili tono. Neformalan vokabular i slobodni stil komunikacije
tokom ispitivanja je svakako poeljan.

Plan ispitivanja ispitanika treba upoznati sa procesom ispitivanjima, vrstama

pitanja, vremenom koliko e ispitivanje trajati i slino.

Uvodna pitanja pitanja koja su obino namjenjena da sakupe osnovne informacije

o samom ispitaniku, njegovom iskustvu koritenja web suelja i slino. Taj dio moe
biti i u pisanoj formi koju ispitanik moe ispisati kroz neki formular.

Pitanja o web suelju na ova pitanja ispitanik odgovara tako to gleda u

kompjutorski monitor i pomou mia i tastature pokuava izvriti ono to se od njega
zatrai. Ispitanika se moli da svoj misaoni proces to je vie mogue glasno iznosi te
verbalno iznosi tok misli dok pokuava rijeiti zadatak. Paraleno s tim svoj fokus
oima moe izraavati kretnjama miem i time uputiti ispitivaa koji dio suelja je
potencijalno nejasan i problematian. Ispitaniku se ne smije sugerirati rjeenje ve
ga se podsjea kako se ne ispituje njega nego web suelje.

Zavrna pitanja - trai se od ispitanika da iznese svoje iskustvo kroz proces

testiranja, to im se najvie svialo, to im je bio najvei problem itd. Obino su
ispitanici inspirirani za razgovor kad znaju da je test gotov pa je to vrijedna prilika
da se dobiju vrijedne informacije.

53

6. UTJECAJ WEB KORISNIKOG SUELJA NA

USPJENOST POSLOVANJA PODUZEA
6.1. KRITERIJI MJERENJA USPJENOSTI
U poslovnom svijetu svaki rezultat neke aktivnosti mora biti mjerljiv. To je sasvim logino
jer se tek analizom dobivenih rezultata moe ocjeniti da li je neko ulaganje bilo isplativo i
da li je omoguilo odreenu korist poduzeu. Postoji nekoliko najvanijih kriterija po
kojima se moe kvantitativno izraziti efekt web stranica.
Posjeenost web stranica s obzirom na mogunosti web tehnologije, ovaj pokazatelj je
najlake pratiti. Postoji itav spektar alata koji se mogu aktivirati kako bi se vrilo
automatsko praenje posjeenosti. Napredniji alati omoguuju, ne samo praenje broja
posjetitelja po danima, nego i cijeli niz analitikih podataka koji daju detaljniji uvid u
posjeenost web stranice. Neki od takvih pokazatelja su analiza posjetitelja po dobu dana,
po dravi iz kojih dolaze, koji operativni sustav koriste, da li je rije o posjetiteljima koji su
doli prvi puta ili su ponovili svoj dolazak i tako dalje. Sasvim je jasno kako je cilj svakog
poslovnog subjekta da povea posjeenost svojih web stranica prvenstveno u svrhu
promocije i dostizanja veeg broja marketinkog potencijala.
Slika 20: Prikaz dijela radne ploe ponajboljeg alata za mjerenje posjeenosti web stranica

(Izvor: http://www.google.com/analytics)

54

Postizanje vee posjeenosti usko je povezano sa optimizacijom web stranica za web

trailice poput Google.com. to je web stranica bolje rangirana na trailicama za odreene
kljune rijei, to je vei potencijal bolje posjeenosti. Optimizacija web stranica za trailice
(Search Engine Optimizing, skraeno SEO) ukljuuje niz mjera od kojih je jedan dio
svojstven samom korisnikom suelju web stranica. Prilikom izrade web suelja, sukladno
dobroj praksi web dizajna i web upotrebljivosti, automatski se radi optimizacija za trailice.
Ukoliko su web stranice kvalitetno dizajnirane i upotrebljive za krajnjeg korisnika, velikim
su dijelom optimizirane i za web trailice. Odreeni tip web stranica zaustavlja se na ovom
kriteriju mjerenja uspjenosti. Prvenstveno je rije o prezentacijskim stranicama kojima je
cilj obian branding odreenog proizvoda. No i takve stranice s vremenom idu korak dalje u
smjeru interaktivnosti sa posjetiocem s ciljem konverzije.
Konverzija moe znaiti nekoliko stvari ovisno o kontekstu. Za neke web stranice,
stupanj konverzije je udio posjetitelja koji su kupili neki proizvod online. Za druge je to broj
posjetitelja koji su se registrirali i postali korisnici web stranica sa mogunou prijave
(Jerkovi, 2010). Sve se svodi na konkretniji odnos izmeu vlasnika web stranica i
posjetitelja koji bi trebao ii korak dalje od klasinog pregledavanja sadraja. Stupanj
konverzije je omjer broja postignutih ciljeva u odnosu na broj posjetitelja. Ako se od tisuu
posjetitelja registriralo njih pedeset, rije je o stupnju konverzije od 5%. Kod ovog kriterija
mjerenja, dizajn i upotrebljivost korisnikog suelja igra puno veu ulogu nego kod
prethodno spomenutog kriterija broja posjeta. Ukoliko se dizajner suelja nije kvalitetno
posluio osnovnim principima

koji jasno ukazuju i motiviraju posjetitelja da napravi

konverziju, negativne posljedice se odmah manifestiraju na vrlo malom stupnju konverzije.

I obrnuto, strunim pristupom i relativno skromnim budetom moe se uvelike poboljati
ovaj pokazatelj kod postojeih ili kod izrade novih web stranica i web aplikacija.
Pokazatelj povratak ulaganja (Return On Investment ili skraeno - ROI) je omjer
novaca koji je dobiven ili izgubljen zbog odreene investicije u odnosu na sami iznos te
investicije (Loveday i Niehaus, 2008). Ukoliko je tvrtka uloila deset tisua kuna u
poboljanje web upotrebljivosti svojeg web prodajnog mjesta i time uzrokovala poveanje
prihoda od trideset tisua kuna, ROI pokazatelj je 3 ili 300% (ukoliko ga se izraava
relativno). Ovaj pokazatelj je jedan od vanijih u ekonomiji openito. Sadraj koji slijedi e
detaljnije ukazati vezu izmeu iskoristivosti web korisnikog suelja i ROI pokazatelja.

55

6.2. UTJECAJ UPOTREBLJIVOSTI WEB SUELJA NA ROI

Rezultati ulaganja u web stranice i web aplikacije mogu se mjeriti na dva naina; na
kvalitativnom i na kvantitativnom principu. Toka u kojoj se mogu mjeriti korisnika
suelja je njihova upotrebljivost. Iako je rezultat mjerenja upotrebljivosti lake izraziti
kvalitativnim pokazateljima, njegovo kvantitativno izraavanje je isto tako mogue.
Poboljanjima upotrebljivosti moe se direktno utjecati na prodaju, smanjiti broj poziva
prema slubi za korisnike te poveati zadovoljstvo korisnika i njihovu privrenost
proizvodima i uslugama tvrtke. Dok se sve nabrojano prvenstveno odnosi na web stranice,
kod web aplikacija koje se interno koriste, takoer je mogue poboljanje poveanom
upotrebljivou web aplikacija. To se ponajvie manifestira na smanjenju vremena da se
izvri odreeni zadatak, smanji koliina pogreaka i vremena potrebnog za njihovo
uklanjanje te a se povea zadovoljstvo zaposlenika koji to suelje koriste.
Kako bi se dobio to toniji ROI pokazatelj koji je rezultat poboljanja upotrebljivosti
suelja, mnogi faktori se trebaju uzeti u obzir. Vano je prikupljati podatke prije i poslije
testiranja upotrebljivosti, kako bi se mogli generirati kvantitativni pokazatelji koji se onda
mogu lako usporediti. Mjerne veliine se mogu kvantificirati u sljedeim oblicima
(Usabilityfirst.com, n.d.) :

stopa izvrenja zadataka kojeg ispitanik izvrava,

vrijeme potrebno da se odreeni zadatak izvri,

uestalost traenja pomoi unutar same web stranice ili web aplikacije,

stopa izbacivanja greaka zbog krivih radnji korisnika,

mjerenje subjektivnog zadovoljstva korisnika.

Iako se upotrebljivost moe poboljavati na ve postojeim rjeenjima, jo je vei povrat

ukoliko se faktor upotrebljivosti uzme u obzir za vrijeme razvoja i inicijalne implementacije
web stranica ili web aplikacija. Organiziranim radom na upotrebljivosti korisnikog suelja
tijekom faze dizajna moe se utjecati na smanjenje cijene same izrade, smanjenje vremena
potrebnog za izradu i unaprijediti konani proizvod. Stalnim fokusom na krajnjeg korisnika
rjeenja i razinu upotrebljivosti kroz itavo vrijeme dizajniranja i implementacije - od
analize zahtjeva, konceptualnog dizajna i skiciranja, izrade prototipa i na kraju produkcije osigurava se da e finalni proizvod biti dugo koriten, a ne isproban pa odbaen.

56

6.3. PRIMJERI IZ PRAKSE

Postoje primjeri iz prakse koji govore o pozitivnim efektima ulaganja u upotrebljivost svojih
web proizvoda. Paljivom analizom, odabirom i kvantifikacijom pokazatelja mogue je
dokazati povezanost takvih ulaganja sa pozitivnim ROI pokazateljem.
Foraker je na svojim web stranicama http://www.breastcancer.org napravio redizajn
korisnikog suelja i poboljanje nekih funkcionalnih elemenata. Te intervencije su
rezultirale poveanjem posjeta od 117%, broj registriranih korisnika se poveao za 41%,
paljivim testiranjem upotrebljivosti dolo se do podatka kako se vrijeme potrebno za
registraciju smanjilo za 53% te se ostvarila uteda od oko 69% na korisnikoj podrci. Kad
su se ti podaci sveli na novane jedinice, dolo se do nekoliko desetaka tisua dolara koje su
se utedile i usmjerile u druge svrhe (Usabilityfirst.com, n.d.).
Georgia Aquarium je morski akvarij koji je prije analize i unapreenja svojeg web
rijeenja obavljao 8-10% kupnji karata putem svoje web stranice. Nakon intenzivnog
testiranja i unapreenja svojih web stranica (http://www.georgiaaquarium.org), obavljalo se
prosjeno 70% prodaje ulaznica. Ukupan broj ulaznica koji se realizirao 21 mjesec nakon
redizajna iznosio je 21 milijun. Najdirektnija uteda je u ogromnom novcu koji se utedio od
tampanja tako velike koliine ulaznica. Jednostavnou i preglednou online kupnje
ulaznice, kupci su si sami printali ulaznicu uoi dolaska u akvarij (Computerworld.com,
2007).
IBM je jedna od najveih korporacija u ICT sektoru na svijetu. Postojala je ogromna
koliina intranet aplikacija i ECMS sustava koji su bili na raspolaganju zaposlenicima za
itav spektar usluga. Veina zaposenika nikad nije ni koristila taj sustav jer je praktiki bilo
nemogue nai pravu informaciju u zadovoljavajue vrijeme. IBM je redizajnom cijelog
sustava, a ponajvie korisnikog suelja nanovo povezao oko 680 web mjesta sa oko 11
milijuna stranica. Sustav se zove IBM Dynamic Workplaces i danas predstavlja najvaniji i
primarni izvor informacija za sve zaposlenike korporacije (Smeaton, 2002).

57

7. ZAKLJUAK
Fenomen Internet kao mrea svih mrea, ve je u samom poetku unio revolciju u svojoj
primjeni. Nije bio zamiljen kao platforma koja e biti dostupna velikom broju ljudi, ve je
primjena trebala biti za vojne i znanstvene projekte te njihovo povezivanje. Demokratskim
pristupom od samih poetaka njegova nastajanja i brzim irenjem po itavom svijetu
otvorile su se brojne mogunosti primjene i izvan poetno definiranih okvira. Prvi korisnici
bili su sistemski i mreni profesionalci koji su trebali imati specijalna znanja iz ovog
podruja. Za obinog ovjeka tu nije bilo jo nikakvog mjesta.
Ono to je Internet uinilo globalno poznatim, je jedan od servisa koji se razvio na toj
globalnoj platformi a to je web servis. Tim Berners-Lee i njegov tim imali su za cilj
pribliiti uslugu Interneta irokoj javnosti na vrlo jednostavan i logian nain; omoguiti
relativno jednostavan standard izrade sadraja i mogunost intuitivnog povezivanja tog
sadraja pomou sistema hiperveza. Pojavom prvih HTML preglednika takav sadraj se
poeo nezaustavljivo koristiti u sve veoj mjeri. Bilo je to doba ulaska grafikog
korisnikog suelja u svijet osobnih raunala i time se jo vie pribliavalo osobno raunalo
i globalna mrea na sa zaposlenicima u tvrtkama pa i domainstvima. Razlog je vie nego
oit jednostavnost i intuitivnost upotrebe za prosjenog korisnika.
Na poetku su to bile samo osnovne prezentacijske web stranice statinog karaktera.
Urednik web stranica je sadraj kreirao i objavio na Internetu dok su korisnici irom svijeta
taj sadraj mogli pregledavati. Sve veom primjenom te tehnologije, web je doivljavao
evoluciju velikih koraka iz godine u godinu. Ono to je najvanije, s obzirom na temu ovog
rada, je usavravanje standarda koji su omoguili kvalitetnije prezentiranje i ureivanje
sadraja s estetske strane kao i mogunost interaktivnosti od strane korisnika. Korisnik je
poeo biti u mogunosti slanja upita, kupovanja i drugih interaktivnih radnji. Tu su se
poelo polako odvajati kategorije web stranica od web aplikacija. Web stranice su preteno
statinog karaktera i slue prvenstveno za jednosmjernu komunikaciju. Naglasak je na
estetici prikaza te koliini i rasporedu prezentiranog sadraja. Web aplikacije su poele
koristiti tvrke za postizanje vee fleksibilnosti i smanjenja trokova odravanja svojih
poslovnih aplikacija. Kako pred dvadeset ili deset godina, pa tako i danas, postoji konstantni
trend prebacivanja informatikog software-a na globalnu mreu koja se koristi upravo preko
tih istih web standarda.
58

Konkurentnou sadraja koji su dostupni na Webu sve vie dolazi do izraaja nain njihove
prezentacije. Postoje web stranice na kojima se vrlo teko snai, doi do prave informacije
ili orjentirati se gdje se sada korisnik nalazi. Za razliku od takvih, ima i onih web stranica
koje korisniku predstavljaju pravo zadovoljstvo njihova koritenja. Svaka potreba koju je
korisnik imao zadovoljila se na brz i efikasan nain. Razlika tog dvoje utjee na poslovni
rezultat poduzea na najizravniji mogui nain. Iz tog razloga razvile su se dvije nove
discipline koje se bave upravo problematikom korisnikog suelja. Prva disciplina je web
dizajn koja se bavi prouavanjem estetske strane korisnikog suelja. Estetiku ine palete
boja, vrsta tipografije, grafiki materijali i nain njihove kombinacije i povezivanja. Druga
disciplina je upotrebljivost web stranica i web aplikacija koja je neto novijeg datuma ali
sagledava iru problematiku percipiranja web korisnikog suelja.
Moglo bi se napraviti usporedba sa jednim hotelom za odmor. Hotel na prvi pogled izgleda
impresivno i oku ugodno. Sam hotel, njegov okoli i interijer. Ali kad gost prilazi hotelu,
nije mu sasvim jasno gdje se tu nalazi glavni ulaz. Kad ga i nae, gdje je tu recepcija?
Trebala bi biti odmah kraj glavnog ulaza, ali ovdje to nije sluaj pa treba uloiti dodatni
napor kako bi se nalo glavnu recepciju. A kad se konano dobije kartica za otvaranje vrata
sobe i kad se doe ispred tih vratiju, nije sasvim jasno da li tu karticu treba negdje gurnuti,
proi njome ispred kvake ili neto tree. Kad gost nekako i ue u tu sobu, koja naravno
izgleda jako lijepo, treba malo utroiti vremena za nai sklopku za upaliti svijetlo. Moglo bi
se rei kako opisani hotel ima estetiku na visokoj razini ali njegova upotrebljivost je vrlo
kritina. Ista je stvar i kod korisnikog suelja web stranica i web aplikacija.
Opisano iskustvo web studija Domo Pro pokazuje kako je korisniko suelje najvaniji
element kako javnih web stranica, tako i pripadajue CMS web aplikacije preko koje
vlasnik ureuje svoj sadraj. Loe rjeenje CMS suelja uzrokuje frustracije korisnika i
uestale pozive prema korisnikoj slubi od koje se trai asistencija. Sustav koji funkcionira
u pozadini je sakriven i lake podnosi manje propuste slabog dizajna i implementacije.
Ukoliko baza podataka nije dobro dizajnirana, programski kod nije optimiziran te sadri
veu koliinu redundancije to nee bitnije utjecati na konano zadovoljstvo korisnika. Ni
vlasnik web stranica ni njezin posjetitelj to ne vide niti osjete. Ono s ime se oni iskljuivo
susreu je korisniko suelje. Sukladno tome, razvijaju se specifini pristupi i dolazi se do
primjera dobre prakse kako pristupiti kvalitetnijoj izradi web suelja. Iako ima varijacija na
temu, proces izrade treba imati tri cjeline: dizajniranje, implementaciju i testiranje.
59

Prilikom dizajniranja web suelja treba paziti na budue korisnike kasnijeg rjeenja. Treba
ih identificirati i analizirati. Raditi suelje web uilice za djecu predkolskog uzrasta ili web
aplikaciju za potrebe brokerske kue su vrlo razliite stvari. Razlog tome je ciljana grupa
korisnika koju u startu treba identificirati i ispitati. Vrijeme koje je na raspolaganju
dizajnerima suelja je sve krae i krae. To je jedan od glavnih razloga zato se uveo agilni
pristup i njegovi principi u izradi korisnikih suelja. Takav pristup podrazumijeva
ukljuivanje svih faza dizaniranja suelja u jednoj interaciji. Na taj nain se vrlo brzo
napravi prototip suelja nad kojim se odmah zatim obavi korisniko testiranje. Tehnologija
za implementaciju je danas prilino kvalitetna i standardizirana. U ne tako davna vremena,
nestandardiziranost HTML jezika, slaba podrka za CSS tehnologiju i nemogunost
asinhrone komunikacije sa web posluiteljem su predstavljali ograniavajui faktor kojeg su
web developeri rjeavali vrlo teko ili nikako.
Po miljenju autora ovog rada, najvaniji element u izradi web korisnikog suelja je
ispitivanje njegove upotrebljivosti. Ispitivanje provode strunjaci, koji su osposobljeni za
takvo ispitivanje, zajedno sa testnim korisnicima. Takva ispitavanja bi trebala biti esta i u
svim fazama realizacije projekta. Od faze planiranja i dizajniranja, faze implementacije pa i
nakon putanja u produkciju. Ispitivanja upotrebljivosti daju vrlo vrijedne povratne
informacije koje mogu ukazati na nedostatatke koji se tada korigiraju. Za utvrivanje nekih
od pokazatelja uspjenosti web rjeenja, upravo ovakva ispitivanja su polazna toka koji
daju eljene odgovore i omoguavaju kvantifikaciju pokazatelja.
Zakljuak ovog rada je potvrdio ranije navedenu hipotezu kako je korisniko suelje
najvaniji element web stranica i web ablikacija. Osim kvalitativnih pokazatelja koji na to
upuuju, postoji cijeli niz kvantitativnih mjerenja gdje su istraivanja uputila na zakljuak
kako web projekt pada ili prolazi sukladno zadovoljstvu korisnika koji koriste njegovo
korisniko suelje.

60

LITERATURA
KNJIGE I ASOPISI

Bearid, J 2007, The principles of beautiful web design, Sitepoint, Collingwood

iin-ain, M, EM Pearce, C i Korin-Lustig, A 2003, Teaching students web sites

evaluation, Zbornik radova MIPRO, Opatija

Dumas, J i Loring, B 2008, Moderating usability test, Morgan Kaufmann,

Burlington

Franji, M 1999, Digitalna ekonomija Internet budunost poslovanja,

Digimark d.o.o., Zagreb

Gates, B 1999, Poslovanje brzinom misli, Izvori, Zagreb

Jacobs, I i Walls N 2009, Architecture of the World Wide Web Volume One, W3C
Consortium, Cambridge

Jerkovi, JI 2010, SEO Warrior, O'Relly Media Inc., Sebastopol CA

Krug, S 2000, Dont make me think, New Riders, USA

Loveday, L i Niehaus, S 2008, Web Design for ROI, New Riders, Barkeley CA

Panian, 1999, Poslovna informatika koncepti, metode i tehnologija, Informator,

Zagreb

Petri, D 2002, Internet uzdu i poprijeko, Bug d.o.o., Zagreb

Reese, G 1997, Database programming with JDBC and Java, O'Reilly & Associates
Inc, Sebastopol CA

Warfel, TZ 2009, Prototyping a practicioner's guide, Rosenfeld Media, New York

Wardrip-Fruin N i Montfort N 2003, The New Media Reader, MIT Press, Cambridge

61

INTERNET

Buildwebsite4u.com, n.d., Web graphics formats, preuzeto16.08.2010,

<http://www.buildwebsite4u.com/building/web-graphics-formats.shtml >

CARNet, 2001, Hrvatske Internet adrese, preuzeto 14.8.2010, <http://www.dns.hr/ >

Computerworld.com, 2007, Best in class 2007: Georgia Aquarium,

preuzeto20.08.2010, <http://www.computerworld.com/s/article/9030680/
Underwater_Web?taxonomyId=14&pageNumber=1 >

Gfk Hrvatska 2009, Gdje smo danas u informatikoj pismenosti, preuzeto

13.08.2010, <http://www.gfk.hr/public_relations/press/press_articles /005364/
index.hr.html>

Internet World Stats 2010, Internet usage statistics, preuzeto 10.08.2010,

<http://www.internetworldstats.com/stats.htm >

Nilsen, J 2000, Why You Only Need to Test with 5 Users, preuzeto16.08.2010,
<http://www.useit.com/alertbox/20000319.html>

Rocketface.com, n.d., Types of websites, preuzeto14.08.2010,

<http://www.rocketface.com/analyze_website/types_of_websites.html >

Smeaton, J 2002, BM's Own Intranet: Saving Big Blue Million, preuzeto21.08.2010,
<http://www.intranetjournal.com/articles/200209/ij_09_25_02a.html >

Slideshare, n.d., Web Usability: session 4, preuzeto 25.08.2010,

<http://www.slideshare.net/laceves/methods-for-identifying-and-modeling-usersneeds >

Usabilityfirst.com, n.d., Case Studies, preuzeto17.08.2010,

<http://www.usabilityfirst.com/about-usability/usability-roi/case-studies/>

Usabilityfirst.com, n.d., Measuring ROI, preuzeto17.08.2010,

<http://www.usabilityfirst.com/about-usability/usability-roi/measuring-roi/ >

Usabilityfirst.com, n.d., Usability ROI, preuzeto17.08.2010,

<http://www.usabilityfirst.com/documents/U1st_BCO_CaseStudy.pdf>

W3C, n.d., Web accessiblity initiative, preuzeto14.08.2010,

<http://www.w3.org/WAI/>

Webopedia.com, 2010, The difference between the internet and World wide web,
preuzeto 15.08.2010, <http://www.webopedia.com/DidYouKnow/Internet/2002/
Web_vs_Internet.asp >
62

W3Schools.com, n.d., CSS Introduction, preuzeto 25.08.2010,

< http://w3schools.com/css/default.asp>

W3Schools.com, n.d., HTML Introduction, preuzeto 25.08.2010,

<http://w3schools.com/html/html_intro.asp>

W3Schools.com, n.d., Introduction to XHTML, preuzeto 25.08.2010,

< http://w3schools.com/xhtml/xhtml_intro.asp >

W3Schools.com, n.d., JavaScript Introduction, preuzeto 25.08.2010,

<http://w3schools.com/js/default.asp>

Wikipedia.org, 2010, Cascading Style Sheets, preuzeto 30.08.2010,

<http://en.wikipedia.org/wiki/Cascading_Style_Sheets >

Wikipedia.org, 2010, Content management system, preuzeto 23.08.2010,

< http://en.wikipedia.org/wiki/ Content_management_system >

Wikipedia.org, 2010, HTML, preuzeto 30.08.2010,

<http://en.wikipedia.org/wiki/html >

Wikipedia.org, 2010, Internet, preuzeto 28.08.2010,

< http://en.wikipedia.org/wiki/Internet >

Wikipedia.org, 2010, Usage share of web browsers, preuzeto 29.08.2010,

< http://en.wikipedia.org/wiki/Usage_share_of_web_browsers >

Wikipedia.org, 2010, User interface, preuzeto 05.09.2010,

< http://en.wikipedia.org/wiki/User_interface >

Wikipedia.org, 2010, Web, preuzeto 07.09.2010,

< http://en.wikipedia.org/wiki/Web >

Wikipedia.org, 2010, Web applications, preuzeto 09.09.2010,

< http://en.wikipedia.org/wiki/Web_application >

63

POPIS SLIKA
Slika 1: Klijent-posluitelj model................................................................................9
Slika 2: Prikaz suelja Google Analytics usluge mjerenja posjeenosti web stranica19
Slika 3: Anatomija tipine web stranice......................................................................20
Slika 4: Primjer organizacije navigacije sa primarnim i sekundarnim izbornicima. . .21
Slika 5: Primjer podnoja koji sadri kompletnu navigaciju web stranica.................21
Slika 6: Tipini primjeri organizacije sadraja web stranica......................................22
Slika 7: FreshBooks web aplikacija za slanje, praenje
i evidenciju poslovnih rauna........................................................................25
Slika 8: Prikaz radne ploe web aplikacije Google Analytics....................................27
Slika 9: Razlika suelja javne web stranice i pripadajueg CSM sustava..................30
Slika 10: Prikaz suelja web aplikacije po narudbi za interno
voenje lagera vozila...................................................................................32
Slika 11: Primjer skice za izradu novog web korisnikog suelja..............................35
Slika 12: Izrada sloenijeg interaktivnog prototipa pomou specijalne
aplikacije Axure...........................................................................................36
Slika 13: prikaz HTML koda jedne web stranice.......................................................40
Slika 14: prikaz iste stranice u Firefox web pretraivau...........................................40
Slika 15: Sintaksa pisanja CSS stilova........................................................................42
Slika 16: Prikaz HTML koda koji deklarira i poziva JavaScript funkciju..................44
Slika 17: Kronoloki prikaz kako funkcionira AJAX tehnologija..............................45
Slika 18: Prikaz suelja Adobe Dreamweavera, Adobe Photoshopa i Firebug-a.......48
Slika 19: Tipino okruenje kod testiranja upotrebljivosti web suelja.....................49
Slika 20: Prikaz dijela radne ploe ponajboljeg alata za mjerenje
posjeenosti web stranica ............................................................................54

64

POPIS TABLICA
Tablica 1: Korisnici Interneta u svijetu........................................................................7
Tablica 2: Usporedba danas vodeih web pretraivaa, 2010.....................................11
Tablica 3: Kriterij za procjenu kvalitete web stranica................................................18
Tablica 4: Popis osnovnih HTML tagova i njihovo kratko objanjenje.....................39
Tablica 5: Karakteristike ispitivanja po fazama razvoja web suelja........................52

POPIS GRAFIKONA
Grafikon 1: Svrha koritenja Interneta u Hrvatskoj u 2009. godini..............................7
Grafikon 2: Omjer broja korisnika i pronaenih nedostataka suelja.........................51

65

IZJAVA

Kojom izjavljujem da sam diplomski rad II s naslovon DIZAJN, IMPLEMENTACIJA I

TESTIRANJE KORISNIKOG SUELJA WEB STRANICA I WEB APLIKACIJA
izradio samostalno pod vodstvom dr.sc. Slavomira Vukmirovia. U radu sam primjenio
metodologiju znanstveno istraivakog rada i koristio literaturu koja je navedena u popisu
literature. Tue spoznaje, stavove, zakljuke, teorije i zakonitosti koje sam izravno ili
parafrazirajui naveo u diplomskom radu, na uobiajen sam nain citirao i povezao
fusnotama s koritenim bibilografskim jedinicama. Rad sam izradio u skladu s nacionalnim i
meunarodnim normama o autorskom radu ili djelu. Rad je pisan u duhu Hrvatskog jezika.

Student
_______________________
Franko Antievi