VELEUČILIŠTE U RIJECI

Marko Fresl, Vedran Hibler

Kvaliteta web sjedišta

Seminarski rad iz kolegija Upravljanje kvalitetom IS-a

Rijeka, 2016.

VELEUČILIŠTE U RIJECI

Poslovni odjel

Specijalistički diplomski stručni studij Informacijske tehnologije u poslovnim sustavima

Kvaliteta web sjedišta

Seminarski rad iz kolegija Upravljanje kvalitetom IS-a

MENTOR: STUDENTI:

Sabrina Šuman, predavač Marko Fresl

Vedran Hibler

Rijeka, ožujak 2016.

Sažetak

Temeljni cilj ovoga seminarskoga rada je upoznavanje korisnika za pojmovima koji se

vežu za kvalitetu web sjedišta. Spomenuti će se metode vrednovanja web sjedišta, metrike

uspješnosti web sjedišta i trendovi u dizajnu web sjedišta koji su trenutno aktualni. Isto tako

pokazati će se greške prilikom izrade web sjedišta. Cilj rada je korisnika upoznati sa načinom

izrade kvalitetnog web sjedišta.

Ključne riječi: kvaliteta web sjedišta, metrike, metode, trendovi u dizajnu

Sadržaj

1.Uvod ........................................................................................................................................ 1

2. Općenito o web sjedištima ..................................................................................................... 2

2.1. URL ................................................................................................................................. 2

2.2. Funkcije web sjedišta ....................................................................................................... 2

2.3. Načela web sjedišta .......................................................................................................... 3

3. Web upotrebljivost ................................................................................................................. 4

4. CMS ....................................................................................................................................... 8

5. SEO ........................................................................................................................................ 9

6. Metode vrednovanja upotrebljivosti web sjedišta ................................................................ 10

6.1. Metode pregledavanja .................................................................................................... 10

6.1.1.Metode procjene prema heuristikama .................................................................. 10

6.1.2.Kongitivna metoda ............................................................................................... 11

6.2. Metode testiranja ........................................................................................................... 11

6.2.1.Razmišljanje na glas ............................................................................................. 11

6.2.2.Metoda praćenja oka ............................................................................................ 12

6.2.3.Automatsko zapisivanje podataka ........................................................................ 12

6.3. Metode ispitivanja ......................................................................................................... 13

6.3.1.Upitnici ................................................................................................................. 13

6.3.2.Terensko ispitivanje ............................................................................................. 13

7. Metrike uspješnosti web sjedišta .......................................................................................... 14

7.1. Stopa napuštanja stranice ............................................................................................... 15

7.2. Prosječan broj pogleda stranice ..................................................................................... 15

7.3. Prosječan trošak po pogledu stranice ............................................................................. 15

7.4. Prosječno vrijeme provedeno na stranici ....................................................................... 15

7.5. Stopa posjetioca koji se vraćaju ..................................................................................... 16

7.6. Stopa „prolaza“ .............................................................................................................. 16

7.7. Agregirana kratkoročna metrika .................................................................................... 16

7.8. Dublja metrika web sjedišta ........................................................................................... 16

8. Trendovi kod dizajna web sjedišta u 2015. godini ............................................................... 17

9. Greške pri izradi web sjedišta .............................................................................................. 21

10. Primjeri dobrih i loših web sjedišta .................................................................................... 23

11. Zaključak ............................................................................................................................ 26

10. Popis literature .................................................................................................................... 27

11. Popis slika .......................................................................................................................... 28

7

1. UVOD

Kroz ovaj rad pokušati će se korisnika uputiti u način izrade i prepoznavanja kvalitetnog

web sjedišta. Tijekom posljednjih dva desetljeća kroz istraživanje znanstvene discipline

interakcije između računala i korisnika postavljeni su neki standardi pomoću kojih bi se

trebalo graditi web sjedište da bude jednako za upotrebu kako iskusnim tako i neiskusnim

korisnicima. Velika većina korisnika internet koristi isključivo kao neku vrstu medija za

nabavljanje informacija. Koriste ga i iskusni korisnici za pronalaženje dodatne pomoći, a isto

tako i neiskusni koji prvi puta sjedaju za računalo.

Riječ kvaliteta dolazi od latinske riječi “qualitas” što znači sposobnost, vrijednost,

svojstvo, značajka. Kvalitetu nekog proizvoda ili usluge definira potreba i želja korisnika i

realizacija istih od strane proizvođača

Usability odnosno upotrebljivost, iskoristivost predstavlja jednostavnost upotrebe nekog

proizvoda ili usluge. Predmet korištenja može biti web stranica, software aplikacija, alat,

proces i slično.

Motivacija za pisanje ovoga rada proizašla je iz činjenice da trenutno postoji veliko

zasićenje dobrim ali nepreglednim web stranicama. Na internetu postoji za svaku pretragu bar

100 000 rezultata od kojih su većini korisnika „potrebni“ samo oni na prvom listu pretrage.

Iako je moguće da neka manje „lijepa“ web stranica sadržava puno relevantnije informacije

ali je slabo posjećivana radi neorganiziranosti te neurednosti. Uz pomoć ovoga rada objasniti

ćemo što je web sjedište, što je web upotrebljivost te koje su metode i metrike za procjenu tj.

izradu kvalitetnog web sjedišta. Isto tako navesti ćemo koje su učestale greške koje developeri

rade te koji su trendovi trenutno aktualni prilikom dizajna web stranice. Sve gore navedeno

ćemo potkrijepiti primjerima dobrih i loših web stranica.

8

2. Općenito o web sjedištu

Web sjedište još poznato pod nazivima web mjesto. Ružić (Ružić, 2013, 6.) definira web

sjedište kao više međusobno povezanih i integriranih web stranica koje čine cjelinu dok je

web stranica hipertekstualni dokument na internetu (razlikuje se od običnog teksta u tome što

sadrži hipertekstualne linkove tj. link na jednoj stranici prilikom klika vodi na drugu stranicu).

Sada kada je objašnjena razlika između web sjedišta i web stranica možemo podijeli web

sjedišta prema funkcionalnosti na sljedeća:

• Osobni

• Komercijalni

• Vladini

• Neprofitnih organizacija

2.1. URL

Uz pojam web sjedišta bitno je spomenuti i pojam URL (uniform resource locator) koji

predstavlja internetsku adresu određenog resursa. Resurs na koji pokazuje URL adresa može

biti određena web stranica, slika, dokument ili bilo koji podatak koji se nalazi na određenom

web poslužitelju.

2.2. Funkcije web sjedišta

Ružić (Ružić, 2013., 13.) nalaže pet funkcija koje bi „dobro“ web sjedište trebalo

obavljati.

1. Privlačenje posjetitelja na web sjedište nuđenjem nekih aktualnih te

zanimljivih tema i sadržaja

2. Zadržavanje istih uz ažuriranje te dobavu potrebnog „aktualnog“ sadržaja

3. Privlačenje posjetitelja da ponovno dođu na isto web sjedište

4. Zaključivanje posla

5. Postprodajne usluge i servis

9

Slika 1. Funkcije web sjedišta

Izvor: http://www.efos.unios.hr/e-marketing/wp-content/uploads/sites/5/2013/04/e-

marketing2013-03-web-sjediste.pdf , obrada autora. 12.3.2016.)

2.3. Načela web sjedišta

Biloš (Biloš, 2013., 27.) opisuje da su načela web sjedišta sljedeća:

1. Jednostavan prikaz na web sjedištu

2. Jasna poruka na web sjedištu

3. Lagana navigacija

4. Ažurna informacija

5. Zanimljiv sadržaj

Ponovno

privlačenje

posjetitelja

Zadržavanje

posjetitelja

Postprodajne

usluge

Privlačenje

posjetitelja

Zaključivanje

posla

10

3. Web upotrebljivost

Kao što je spomenuto veliki postotak korisnika koji pristupaju internetu pristupaju u nadi

da će pronaći odgovarajuće informacije pa je stoga potrebno prilikom izrade web sjedišta

primijeniti odgovarajuće tehnike web dizajna tj. dizajna informacija te navigacije. Ukratko

korisniku se treba omogućiti jednostavno, pouzdano i brzo pronalaženje traženih informacija.

Međutim promatrajući korištenje interneta od strane manje iskusnih korisnika očituje se

problem korištenja interneta u pronalaženju pouzdanih informacija te nesnalaženje obavljanja

konkretnih zadataka kao što su kupnja nekog proizvoda i slično. Stoga je propisan standard

ISO 13407: human-centred design process koji opsuje proces izrade sustava koji uvažava

potrebe korisnika. Kroz razvoj sustava koji koristi gore navedeni standard potrebno je provesti

četiri aktivnosti:

1. Definiranje konteksta upotrebe

2. Definiranje zahtjeva

3. Izrada većeg broja dizajniranih rješenja

4. Vrednovanje dizajna (vrednovanje upotrebljivosti)

Vukovac i Orehovački u svom radu „Metode vrednovanja web upotrebljivosti“ nalažu da

se prije same izrade web sjedišta ili web stranice odabere ciljana publika za koju je

namijenjen sadržaj na webu (npr. učenik, nastavnik, roditelj, nogometaš ili slično), njene

karakteristike (npr. godine, stupanj obrazovanja, iskustvo korištenja interneta) te preduvjeti

pomoću koji će pristupati internetu (hoće li to biti preko računala, mobitela, žičnom ili

bežičnom vezom). Poštivanjem ovih gore koraka te preporuka uvelike se povećava

upotrebljivost web sjedišta jer naime teško je moguće da će jedno web sjedište dati

informacije potrebne za sve vrste korisnika.

Razni istraživači, institucije i praktičari kreirali su još neke dodatne smjernice za izradu

„kvalitetnog“ web sjedišta od kojih su najpoznatije Nielsenove smjernice. Nielsen je sastavio

više smjernica međutim deset ih se uzelo kao općeprihvaćenih. One trebaju otkriti kritične

točke i probleme u korisničkom sučelju web sjedišta te se odnose na provjeru sljedećih

elemenata: navigaciju, funkcionalnost, kontrola, jezik pisanja, povratna informacija,

dosljednost, manipulacija greškama i vizualna čistoća.

11

1. Vidljivost (preglednost) statusa sustava- web stranica bi trebala informirati korisnika o

trenutačnim događanjima na istoj kroz neke povratne informacije u što kraće

mogućem roku. Recimo ako korisnik klikne na određeni link te dođe do problema

komunikacije tj. period otvaranja sljedeće web stranice zahtijeva dulje vrijeme čekanja

dobro bi bilo postaviti takozvanu progresnu traku.

Slika 2. Primjer progresne trake (eng. Loading bar)

Izvor: http://rlv.zcache.com/loading_bar_canvas_print-

r33e5784fe05148fab24225fc618ce930_idrqs_8byvr_1024.jpg , 12.3.2016.)

2. Sustav treba biti isti kao i u realnom svijetu-web stranica treba imati jasan i razumljiv

jezik, pod time se misli na korištenje jezika koji je razumljiv ciljanoj publici. Također

bi informacije trebale biti organizirane logično kako su korisnici naviknuli u

stvarnome svijetu. Primjer: ako se radi web stranica za računalne programere jezika

c++ nema smisla tekstualno objašnjavati rješenje već napisati programski kod dok bi

recimo da su ciljanja publika književnici upotrebljavanje teksta bilo primjereno.

3. Korisnička kontrola i sloboda izbora- problem se najviše očituje kod manje iskusnih

korisnika koji na web stranici dobiju zasićenje informacija te počnu nasumično

klikati po njoj. Svrha ove smjernice je da sustav mora imati jasno naznačen izlaz kako

bi se moglo napustiti neželjeno stanje. Primjer je da sustav treba imati određenu

funkciju za povratak napravljene neželjene naredbe. Na sljedećoj slici je prikazan

primjer kada je slučajno stisnuta tipka na outlook mail-u te ju prikazuje kao pročitanu

iako to nije. Klikom na navedenu ikonu vraća se prvobitno stanje.

12

Slika 3. Undo opcija na outlook mail poslužitelju

Izvor: izradili autori

4. Konzistentnost i standardi- kontrole, funkcije, ikone te greške na stranici trebaju biti

jednake kroz cijelo vrijeme korištenja web sjedišta. To znači da se koriste ikone koje

su korisnicima već poznate sa drugih web sjedišta a ne da se izmišljaju vlastite.

Primjer poznatih ikona na web stranicama redom za povećaj, obriši naruči.

Slika 4. 3 najpoznatije ikone za povećanje, brisanje i naručivanje

Izvor: izradili autori

5. Sprječavanje grešaka- korisnik treba imati jasan uvid kada se pojavi određena greška

na web stranici, međutim umjesto obavijesti o grešci, bolje je imati sustav koji

sprječava pojavu greške iako je to u praksi teško neostvarivo. Primjer ako određena

web stranica vrši određenu vrstu ažuriranja ili je trenutačno nedostupna korisniku se

treba dati obavijest o tome.

Slika 5. Nemogućnost pristupa web stranici

Izvor: izradili autori

13

6. Prepoznavanje umjesto sjećanja- treba smanjiti opterećenje korisnikove memorije na

način da su svi objekti jasno vidljivi i dostupni. Korisnik se ne treba prisjećati

informacija koje su bile dostupne u jednom dijelu dijaloškoga okvira. Primjer je da se

koristi tzv. tooltip koji služi za opisivanje elemenata koji nisu jasni korisniku.

Slika 6. Tooltip pomoći-što je kontrolni broj

Izvor:izradili autori

7. Fleksibilnost i učinkovitost korištenja- kao što je više puta navedeno razlikujemo

iskusne i neiskusne vrste korisnika, međutim sustav treba biti prilagođen na način da

ga obje vrste korisnika mogu jednostavno i efikasno koristiti. Za iskusne korisnike

sustav treba imati tzv. akceleratore npr. kombinacijom tipki ctrl+p korisniku se

omogućuje ispis navedenog dokumenta.

8. Estetski i minimalni dizajn- mnogo početnika u kreiranju web sjedišta dodaje prevelik

broj elemenata te se na taj način stvara tzv. vizualna buka na web sjedištu koja

rezultira smanjenom vidljivošću bitnih informacija. Primjer, pozadinske slike na web

stranici iako privlačne otežavaju čitanje teksta na stranici.

9. Pomoći korisniku da prepozna, dijagnosticira i spriječi greške- obavijesti o greškama

trebaju jednosmisleno i jasno opisati o kakvoj se vrsti greške radi te kako ju je moguće

spriječiti. Primjer: ako korisnik krivo upiše lozinku potrebnu za log in, sustav treba

izbaciti poruku da je lozinka krivo upisana.

14

10. Pomoć i dokumentacija- većina web stranica ima link „Help“, to se naziva sustav

pomoći koji je namijenjen korisnicima kako bi lakše odrađivali određene zadatke na

toj web stranici. Mora biti kratak i jasan. Na mnogo stranica taj „Help“ se očituje kao

FAQ (često postavljana pitanja) koji omogućuje korisnicima da riješe određeni

problem koji je već više korisnika prije njega imalo.

5. CMS

CMS je kratica od Content management system što dosnovno ima značenje da je to sustav

za upravljanje sadržajem. Filić(Filić, 1) objašnjava da sustav omogućuje upravljanje velikim

brojem informacija te sinkronizaciji podataka s više izvora. Također nalaže da takvi sustavi

služe za izvršavanje projekta u velikim poslovnim okruženjima, ali danas je najveća uloga

CMS sustava u kreiranju web stranica novijih generacija s implementiranim HTML5 i CSS3.

Filić (Filić, 1) nalaže kako CMS sustave najviše odlikuje pristupačno web sučelje te

WYSIWYG direktan pregled izvršenih promjena na web sučelju. Sustav je moguće koristiti

„offline“ lokalno na računalu, ali se najčešće koristi „online“ gdje je moguće, s bilo kojeg

mjesta gdje ima internet pristupa, vršiti promjene sadržaja web stranice. Vrlo bitna mogućnost

je podjele uloga pri mjenjanju sadržaja na web stranici, tada administrator ima sve ovlasti a

pojedinačno je developerima moguće podjeliti uloge te time je omogućeno zadatke izvršavati

brže i učinkovitije s manjom mogućnošću pogreške. U današnje vrijeme je vrlo bitna

povezivost web sjedišta s društvenim mrežama, što svi noviji CMS-ovi omogućuju. Bitno je

naglasiti da su CMS sustavi većinom bazirani za izradu sjedišta „blog“ izgleda. Tada je

moguće uz samu izradu web sjedišta dodavati sadržaj putem „post“ načina koji je namjenjen

korisnicima koji često dodavaju nove sadržaje na svoja web sjedišta.

U današnje vrijeme vrlo često nastaju novi CMS sustavi,a trenutno najpoznatiji CMS

sustavi su Wordpress, Joomla i Drupal.

Slika 7. Wordpress Slika 8. Joomla Slika 9. Drupal

Izvor:(http://568397435.r.lightningbase-cdn.com/wp-

content/uploads/2013/11/Drupal_Joomla_WordPress.png, 13.3.2016.)

15

5. SEO

SEO kratica od Search Engine Optimization. Šarić (Šarić, 2008) objašnjava da SEO

optimizacija obuhvaća niz zadataka i faktora koji što su kvalitetniji to je samo web sjedište

kvalitetnije. SEO je među najbitnijim faktorima optimizacije web sjedišta za web

pretraživače. Algoritmi i roboti web pretraživača neprestano pretražuju internet s ciljem

uvrtavanja novih web sjedišta u tražilice. Samo pozicioniranje tj. Rangiranje web sjedišta

uvelike ovisi o SEO optimizaciji. Optimizacija je bazirana prema ključnim riječima (tzv.

keyword) koji opisuju namjenu i smisao web sjedišta. Sav smisao optimizacije se izvršava s

ciljem povećanja posjeta na web sjedište, jer sama posjeta web sjedištu stvara publiku koja od

web sjedišta dobiva tražene informacije, a što je više posjetitelja to je web sjedište

konkurentnije u odnosu na duga web sjedišta iste (ili slične) tematike.

Da bi se SEO optimizacija što kvalitetnije provela Šarić (Šarić, 2008.) nalaže da je

potrebno dobro istražiti tržište, preispitati konkurenciju, povezivati web sjedište s društvenim

mrežama te drugim web sjedištima jer što web sjedište ima veću stopu pregleda to je

konkurentnije, a samim time je pubilici, klijentima te ostalim korisnicima interneta omogućen

lakši pronalazak web sjedišta. Sam proces SEO optimizacije web sjedišta nema svoj kraj, tj

nema određenu fazu kada se može smatrati da je optimizacija izvršena u potpunosti. SEO je

dugoročni proces koji ovisno o konkurentnoj temi stranice može trajati kraće ili duže, a da bi

web sjedište ostalo konkurentno potrebno je raditi na tome da sjedište neprestano ima

posjetitelja.

Implementaciju SEO optimizacije te samu analizu web sjedišta automatizirano provode

CMS sustavi kroz većinom besplatne nadogradnje. Analiza se provodi pregledavanjem

sadržaja stranice, a u analizu se ubrajaju svi tekstovi na web sjedištu, ali i detalji na web

sjedištu poput naziva slika, domene, naslova, podnaslova i sl.

Slika 10. Search engine optimization

Izvor: (http://www.pennapowers.com/mainsite/wp-content/uploads/2015/07/Seo.jpg ,

13.3.2016.)

16

6. Metode vrednovanja web upotrebljivosti

Vukovac i Orehovački u svom radu „Metode vrednovanja web upotrebljivosti“ opisuju

kako se vrednovanje upotrebljivosti provodi pomoću različitih metoda koje se mogu podijeliti

na analitičke metode koje provode stručnjaci, dok su druge empirijske metode kojima se

upotrebljivost testira pomoću korisnika. Te metode se mogu svrstati u tri različite kategorije:

1. Metode pregledavanja

2. Metode testiranja

3. Metode ispitivanja

6.1 Metode pregledavanja

Korištenjem metoda pregledavanja procjenjuje se usklađenost web sjedišta sa gore

navedenim standardom ISO 13407 te smjernicama za izradu. Konačna ocjena web sjedišta

ovisi o sudu skupine ljudi koji su proveli evaluaciju.

6.1.1 Metode procjene prema heuristikama:

Heuristika je naziv za opće načelo prema kojoj se tijekom procesa razvoja oblikuju novi

ili ocjenjuju postojeći funkcionalni dijelovi na njoj. Pomoću ove metoda jedan ili više

stručnjaka testiraju da li web sjedište podržava 10 općepriznatih smjernica koje je razvio J.

Nielesen. Tijekom testiranja neovisno da li je jedan ili više stručnjaka svaki od njih prolazi

minimalno dva puta kroz sve elemente sučelja i testira ih. Kroz prvo prolaženje stručnjak se

upoznaje s web sjedištem i njegovim mogućnostima dok se u drugom prolaženju fokusira na

određene elemente i funkcionalnosti te ih procjenjuje prema popisu heuristika (Nielesenove

smjernice). Konačni rezultat nažalost predstavlja ništa drugo već listu problema upotrebljivost

koja je proizašla radi nepoštivanja heuristike. Ovu metodu kao što je spomenuto može

provesti i jedan stručnjak međutim to nije poželjno jer su istraživanja pokazala da jedan

stručnjak može pronaći samo 35% postojećih problema. Prednosti ove metode je mogućnost

provođenja u svim fazama razvoja, jeftina je te uz veći broj stručnjaka koji ju provode i

pouzdana. Nedostatci se očituju u odabiru stručnjaka za pregled pošto on mora imati iskustva

u tome.

17

6.1.2 Kongnitivna šetnja

Ova metoda ima drugačiji pristup od gore navedene, naime zadatak joj je da simulira

ponašanje korisnika kada koristi tu web stranicu na način da rješava određene zadatke. Naime

stručnjak koji testira dobiva definiran cilj te korake za dolaženje do njega. Prilikom izvedbe

zapisuju se svi problemi na koje se naišlo i u kojem dijelu „scenarija“. Ovo je vrlo praktična

metoda jer daje u uvid što bi potencijalno korisnik mogao učiniti da se nađe u određenoj

situaciji te na koje bi probleme naišao te kako bi ih pokušao riješiti. Na kraju pregleda

popisuje se lista problema sa preporukama kako ih riješiti te se šalje razvojnom timu. Također

postoji inačica verzije ove metode koja se naziva multidisciplinarna kongnitivna šetnja u kojoj

krajnji korisnik, programer i stručnjak zajedno prolaze kroz cijelu web aplikaciju

komentirajući svaki dio. Prednosti ove metode se očituju u identifikaciji problema koji

proizlaze prvenstveno iz upotrebe aplikacije, dok s druge strane od nedostataka važno je

spomenuti sporu i pretjerano detaljnu metodu za pregled.

6.2 Metode testiranja

Pomoću metoda testiranja dobivamo informacije o tome na koji način korisnici

upotrebljavaju web te na koje poteškoće nailaze. Tijekom provođenja ove metode korisnici

dobivaju određene zadatke za izvođenje a evaluatori1 prate sve interakcije korisnika s web

aplikacijom te na taj način bilježe greške koje pronalaze. Pomoću ove metode moguće je

doznati koliko je određena web aplikacija „dobra“ za izvođenje određenih zadataka, te koje se

greške javljaju prilikom izvršavanja istog.

6.2.1 Razmišljanje na glas

Ovaj pojam se ubraja među najvažnije metode za testiranje upotrebljivosti određenog web

sjedišta ili web aplikacije. Svrha ove metode je da korisnici kroz čitav period korištenja

određene stranice govore na glas o svojim mislima. Na taj način evaluatori shvaćaju kako

pojedini korisnici doživljavaju određeni sadržaj i elemente. Razmišljanjem na glas evaluator

pozorno sluša korisnika te na taj način vrlo jednostavno može bilježiti na koje probleme

korisnik nailazi prilikom korištenja. Postoji više varijanta ove metode:

1 stručnjak koji provodi testiranje

18

• Retrospektivni izvještaj- u ovoj varijanti metode korisnik ne komentira na glas

prilikom korištenja već provede određeni zadatak do kraja te prilikom završetka

verbalno opisuje svoja iskustva te probleme na koje je naišao. Nedostatak ove metode

je što korisnik na taj način ne uspije precizno opisati sve probleme

• Konstruktivna interakcija-u ovoj varijanti umjesto standardnog jednog korisnika

uzimaju se dva korisnika te provode isto testiranje na taj način se može puno detaljnije

saznati u čemu je problem.

Bez obzira na korisnost ove metode ova metoda se rijetko upotrebljava jer oduzima veliku

količinu vremena za provođenje te je korisnicima jednostavno naporno i neprirodno koristiti

web aplikaciju uz istovremeno obavljanje zadatka i verbaliziranja misli.

6.2.2 Metoda praćenja oka

Ova metoda iako čudno zvuči se također ubraja u jedne od najvažnijih metoda testiranja

upotrebljivosti web sjedišta. Kroz ovu metodu se istražuju pokreti oka korisnika kroz

korištenje web aplikacije jer se smatra da ako je korisniku potrebno previše „pomaka“ očiju

da ta stranica izaziva mentalni i fizički napor.

6.2.3 Automatsko zapisivanje podataka

Automatskim zapisivanje pohranjuju se svi podaci vezani uz interakciju korisnika sa

sučeljem web aplikacije. Taj postupak uključuje vrijeme koje je korisniku potrebno da izvrši

neki zadatak, broj pritisaka tipki na tipkovnici i na mišu, korištenje pomoći (Help), brojeve

grešaka na koje je korisnik naišao i slično. Pomoću ove metode jednostavno se može radi

automatiziranog zapisivanja doznati na koji način različite vrste korisnika pristupaju

riješavanju iste greške. Glavni nedostatak ove metode što ona naime pokazuje što korisnici

rade ali ne i razlog zašto su odabrali taj način riješavanja. Ova metoda se najčešće koristi u

kombinaciji s metodom razmišljanja na glas.

19

6.3 Metode ispitivanja

Ova metoda koristi se kako bi se doznalo cjelokupno zadovoljstvo web aplikacije na kraju

njezinog razvoja ali se mogu i koristiti tijekom razvoja web aplikacije kako bi se dodatno

utrvdile potrebe korisnika.

6.3.1 Upitnici

Upitnici kako je i svima poznato se sastoje od grupe pitanja i skupa otvorenih ili

zatvorenih pitanja. Kroz ovu metodu se ne ispituje direktno upotrebljivost web aplikacije već

se pita korisnike za njihova mišljenja. Subjektivne aspekte upotrebljivosti web aplikacije

najlakše je izmjeriti Likertovom ljestvicom stavova. Likertova ljestvica zasnovana je na

načelu da svaka izjava na ljestvici ima jednaku važnost u odnosu na to koliko odražava stav

prema pitanju u upitniku. Iako je upitnik moguće promijeniti kroz bilo koju fazu u razvoju

web sjedišta on se najčešće primjenjuje tek nakon što je web sjedište podignuto te se na njemu

nalazi određeni sadržaj. Da bi upitnik bio relativno pouzdan studije nalažu da broj ispitanika

ne smije biti manji od 30 ljudi. Nedostatak ove metode je što svaki pojedinačni korisnik može

na postavljeno pitanje odgovoriti drugačije nego što misli radi recimo lošega raspoloženja,

umora i slično.

6.3.2 Terensko ispitivanje

Ovo ispitivanje se provodi u okolini u kojoj korisnik svakodnevno obavlja različite zadatke

na web aplikaciji. Prikupljanje podataka iz ovog ispitivanja je potrebno izvršavati na način da

ne smetamo korisniku te ga ni na koji način ne ometamo, u suprotnome informacije koje

dobijemo bi mogle biti krive i nepouzdane. Dakle, idealna situacija bi bila kada bi evaluator

prikupljao podatke o radu korisnika neprimjetno te tako korisniku omogućio nesmetan rad. U

praksi je teško izvesti gore navedeno, naime prilikom praćenja korisnika često ga se ometa u

radu. Iz tog razloga koriste se druge određene tehnologije kao što su kamera te se pomoću nje

vidi rad korisnika i na taj način se prikupljaju podaci. Međutim problem s kamerom je što se

kasnije video snimak mora detaljno analizirati pa uzima više vremena od klasičnog terenskog

ispitivanja.

20

7. Metrike uspješnosti web sjedišta

Salihović (Salihović, 2013., 3.) definira metrike uspješnosti web sjedišta kao određene

mjere koje su namijenjene za ocjenjivanje učinkovitosti i efikasnosti tog web sjedišta.

Primjer pokazatelja uspješnosti bi bilo praćenje ljudi koji posjećuju određenu web

stranicu, na taj se način može doznati koliko ljudi je do određenog perioda dolazilo na tu

stranicu te nakon određene promjene je li se broj posjeta smanjio ili povećao. Na taj način

mogu se donositi određene odluke. Kroz sljedeći rad prikazane su metrike uspješnosti koje

je Salihović(Salihović, 2013., 3.) definirao. Slika 7 pokazuje osnovne pokazatelje e-

metrike.

Slika 11. Osnovni pokazatelji e-metrika

Izvor: https://prezi.com/x_b8wrcj6bze/e-metrike-i-pokazatelji-uspjesnosti/, obrada autora,

13.3.2016.)

1. Broj korisnika- svaki korisnik koji pristupa web stranici

2. Broj posjeta- pristup određenog korisnika

3. Broj pregleda stranica- pri svakom pristupu korisnik pregledava jednu ili više web

stranica

4. Redoslijed klikova- redoslijed kojim korisnik pregledava web stranicu

5. Broj zahvata- akcija kojom korisnik zahvaća neku ili sve datoteke unutar web stranice

U daljnjem radu su navedene i objašnjene najznačajnije e-metrike

2.Broj posjeta 3.Broj pregleda

stranice

5.Broj zahvata 4.Redoslijed klikova

1.Broj korisnika

21

7.1 Stopa napuštanja stanice

Naziva se još i Bounce rate a to je stopa koja pokazuje koliko korisnika napušta web

mjesto nakon što pregledaju jednu stranicu. Ona mjeri:

1. Uspješnost ili kvalitetu sadržaja web sjedišta

2. Efikasnost i frekvenciju promjene sadržaja

3. Kvalitetu navigacije web sjedišta

Ako je bounce rate za početnu stranicu (eng.Home page) 80% to znači da 80% korisnika

koji su pristupili toj stranici ne ulazi u pod stranice već ju odmah napuštaju.

7.2 Prosječan broj pogleda po stranici

Ili averege page views per visit stopa koja pokazuje broj zahvata stranica u nekom

određenom vremenu te je pomoću nje moguće izmjeriti koliko su angažirani korisnici na njoj

te koliko „duboko“ istražuju sadržaje na njoj.

7.3 Prosječan trošak po pogledu stranice

Ili avarage cost per page predstavlja mjeru od velike važnosti izdavačima jer dozvoljava da

se dosegne nova publika i pretvori u profit. Na primjer ako korisnik zna da će po pregledu

stranice dobit 0,30kn onda mora trošak po pregledu stranice održati ispod 0,30kn kako bi

ostvario profit.

7.4 Prosječno vrijeme provedeno na stranici

Ili avarage time on site. Kod ove metrike se ne radi samo o broju pregleda stranica već i

samoj činjenici da li sadržaj na web lokaciji zanima korisnike te koliko ga oni prate. Ova

metrika pokazuje:

1. Da li se doseže do korisnika (osoba koje posjećuju web sjedište)?

2. Da li se obraća korisnicima a oni odgovaraju provodeći vrijeme na web sjedištu?

22

7.5 Stopa posjetioca koji se vraćaju

Ili rate of returns je jedna od najvažnijih metrika u mjerenju angažiranosti korisnika. Viša

stopa povrata korisnika za specifičnu riječ jer razlog za veći fokus na te korisnike. Smatra se

da korisnici pregledavaju web „hodnike“ jednako kao i izloge u prodavaonicama, međutim

potrebno je stvoriti koncentraciju na njima vrijedne sadržaje ili informacije.

7.6 Stopa prolaza

Ili click through rate metrika koja pokazuje koliko korisnika dolazi na web sjedište s nekog

drugog specifičnog web sjedišta (npr. koliko korisnika je došlo na web sjedište s google-a).

ova metrika mjeri uspješnost promotivnih aktivnosti web mjesta (što se na više stranica

oglašavate to ćete imati više posjeta).

7.7 Agregirana kratkoročna metrika

Ova metrika pokazuje promet po stranicama ili kategorijama unutar nje.

7.8 Dublja metrika web sjedišta

Izračunava se na način da se broj kupovina pojedinih proizvoda podijeli sa brojem posjeta

tog proizvoda ili traženja informacija o njemu. Mogućnosti koje se mogu javiti kod prodaje

putem web sjedišta:

1. Nizak interes za kupovinu- javlja se radi problema u navigaciji ili je proizvod preskup

ili neatraktivan rješenje je jednostavno da ga se makne iz ponude

2. Malen broj posjeta, ali veliki promet- pravi kupci lako pronalaze proizvode međutim

aktualne proizvode se preporučuje u „top-selling“ kategoriju

3. Veliki broj posjeta, veliki promet- u ovoj situaciji je sve odlično, proizvod je

atraktivan promet je velik pa nema potrebe trošiti na dodatne promocije

4. Veliki broj posjeta, malen promet- potrebno promijeniti strategiju prodaje, cijenu ili

slično kako bi se navuklo korisnik.

23

8. Trendovi u dizajnu web sjedišta u 2015. godini

Pintar (Pintar, 2015.) nalaže sljedećih 7 trendova kao preporuke za dizajniranje web

stranica tj. web sjedišta.

1. Velike slike: Ovo je jedan od trendova koji je uvelike zaživio proteklih godina u

svijetu web dizajna. Obično se takve slike ali i videa koriste kao pozadina samog web

sjedišta, ali se nerijetko protežu kroz cijelo sjedište. Bitno je voditi računa ukoliko se

slika odabere kao pozadina da ona bude jednostavna, kvalitetna i profesionalno

napravljena. Slike su jedan od prvih elemenata koje korisnik uoči nakon pristupanja

sjedištu.

Slika 12. Velika slika

Izvor: izradili autori

2. Responzivni dizajn (engl. Responsive Web Desing-RWD) je jedan od najbitnijih

novih trendova web dizajna. Korištenjem RWD pristupa pri izradi web stranica

omogućuje se i osigurava preglednost i čitljivost na svim uređajima i ekranima koji

korisnik posjeduje. Time se uklanja potreba „zoomiranja“ za pregledavanje određenih

sadržaja putem mobitela. Da bi takav dizajn i pristup pri izradi funkcionirao kako

treba, potrebno je izraditi i odabrati kvalitetni i veličinom prilagodljivu sliku.

24

Slika 13. Responzivni dizajn

Izvor : izradili autori

3. Interaktivnosti: osnova svakog web sjedišta je interaktivnost korisnika sa samim

sjedištem, odnosno vas. Najbolja interaktivnost se postiže korištenjem raznih videa,

animacija, jednostavnog pomicanja pokazivača gore-dolje i slično. Vrlo je važno na

sjedištu imati dobar sadržaj, ali još važnije uspjeti kroz taj sadržaj ispričati priču o sebi

i svom proizvodu

4. Velika tipografija: postala je praksa uporaba velikih fontova za naslove podnaslova i

za tekst. Puno je jednostavnije i oku ugodnije čitati takve tekstove, istaknuti sve ono

što je na web sjedištu važno. To je ono što se prvo uočava i čita.

25

Slika 14. Velika tipografija

Izvor : izradili autori

5. Flat dizajn: uporaba flat dizajn poznatog i kao ravan ili plosnat dizajn u porastu je

posljednjih godinu-dvije. To je jednostavan i čist dizajn bez kiča i „šminke“.

Slika 15. Flat dizajn

Izvor: (https://www.avalon.hr/blog/2015/03/top-7-web-dizajn-trendova-za-2015-godinu/

13.3.2016.)

26

6. „Scroling“ webovi: Ovakav pristup pri izradi podrazumijeva pomicanje odnosno

kretanje kroz web sjedište gore-dolje. Na taj način se u većini web sjedišta osigurava

bolje korisničko iskustvo iz razloga jer se time smanjuje broj nepotrebnih klikanja. Na

ovaj način osigurava se kontrola brzine pomicanja teksta, slika i ostalih elemenata

sjedišta.

7. „Card“ dizajn: ovakva vrsta dizajna može se povezati sa responzivnim dizajnom i

ujedno je vrlo koristan alat kod dizajniranja responzivnih web stranica. Korištenjem

tzv. kartica sadržaj ali i sami dizajn su vrlo modularni. Mogu se vrlo jednostavno

preurediti i izmijeniti. To je također vrsta jednostavnog i čistog web dizajna. Stranice

tako izrađene su vrlo pregledne i čitljive.

Slika 16. „Card“ dizajn

Izvor: ( https://www.avalon.hr/blog/2015/03/top-7-web-dizajn-trendova-za-2015-godinu/

13.3.2016.)

27

9. Greške pri izradi web sjedišta

Filić (Filić. 2016.) navodi sljedećih 10 najčešćih grešaka prilikom dizajniranja web

stranica tj. web sjedišta.

1. Nečitljivost teksta zbog slabog kontrasta: ovo predstavlja poprilično čestu grešku u

samome dizajnu. Dizajneri u želji da naprave što ljepše stranice, bogate dizajnom

stavljaju grafičke elemente u pozadinu teksta radi koji često tekst postane nečitljiv.

2. Neujednačenost dizajna među stranicama: greška se očituje u tome da svaka pojedina

web stranica određenog web sjedišta ima drugačiji dizajn što krajnjem korisniku pruža

„osjećaj“ da se više ne nalazi na istom web sjedištu.

3. Nedostatak naslova i opisa: vrlo je bitno da se za svaku stranicu napiše naslov kako bi

se korisnika uputilo na sadržaj te stranice. Istraživanja su pokazala da bez obzira

koliko „dobrih“ informacija bilo u samome tekstu da se korisnici orijentiraju za

pronalaženje informacija prema naslovu.

4. Pretjerana upotreba grafike i animacija: iako se preporučuje napraviti interaktivnu

stranicu s animacijama, videima i slično bitno je ne pretjerati u tome. Naime korisnici

na web sjedište dolaze s nadom pronalaska informacija a ne zabave. Bitno je da

korisnik već u prvih nekoliko sekundi pronađe informacije koje su mu potrebe inače se

pokazalo da korisnik napušta stranicu.

5. Prekomjerno korištenje različitih fontova i boja tekstova: preporučuje se izabrati 1 ili 2

fonta koji će se koristiti jer se javlja isti problem kao i u 1. točci.

6. Ne označavanje posjećenih linkova: bitno je da se ne mijenjaju boje ili izgledi linkova.

Naime svaki korisnik zna kako link izgleda i kako se koristi. Ako se dizajn linka

promjeni može doći do zbunjivanja korisnika.

28

7. Veliki blokovi dosadnih tekstova: web stranice bez tekstualnog sadržaja ne vrijede

ništa, no isto tako predugačak tekst može biti problem. Svaki korisnik koji uđe u web

stranicu na kojoj se nalazi puno neprekinutog teksta, u jednom velikom bloku će

napustiti stranicu.

8. Dobar izgled u samo jednom pregledniku: naime na tržištu postoji mnoštvo web

preglednika. Bitno je napraviti stranicu da ona izgleda lijepo na svim preglednicima, a

ne samo na jednom.

9. Fiksna veličina fonta: n ajbolje je dizajnirati web stranice na takav način da veličina

fonta ne narušava raspored elemenata na stranici. Tada se može

koristiti relativna veličina fonta, umjesto fiksne veličine. To daje mogućnost da

korisnik sam odredi veličinu koja mu najbolje odgovara.

10. Otvaranje novog prozora: mnogi misle da je, klikom na link koji vodi na tuđe

stranice, bolje otvoriti novi prozor preglednika. Na taj način, posjetitelj nije napustio

web stranicu. Na žalost, većina običnih korisnika otvara prozore u punoj veličini i nisu

ni svjesni da nisu napustili web stranice. Kad su pogledali što su htjeli i žele se vratiti

natrag na web stranicu, očekuje ih neugodno iznenađenje. Tipka za natrag ne radi.

29

10. Primjeri dobrih i loših web sjedišta

„Dobre“ web stranice:

Slika 17. Primjer 1

Izvor: (http://time.com/3054279/50-best-websites-2014/ ,14.3.2016.)

Slika 18. Primjer 2

Izvor: (http://time.com/3054279/50-best-websites-2014/ ,14.3.2016.)

30

Slika 19. Primjer 3

Izvor: (http://time.com/3054279/50-best-websites-2014/ ,14.3.2016.)

„Loše“ web stranice:

Slika 20. Primjer 4

Izvor: (https://www.branded3.com/blog/top-10-worst-websites/ ,14.3.2016.)

31

Slika 21. Primjer 5

Izvor: (https://www.branded3.com/blog/top-10-worst-websites/ ,14.3.2016.)

Slika 22. Primjer 6

Izvor: (https://www.branded3.com/blog/top-10-worst-websites/ ,14.3.2016.)

32

11. Zaključak

Razvoj web sjedišta iako je lagano naučiti pomoću interneta teško je procijeniti koje su

dobre, a koje loše karakteristike koje se trebaju nalaziti na tom web sjedištu. Kao što je

spomenuto više puta korisnike na internetu dijelimo u dvije grupe: iskusne i neiskusne. Tu se

javlja problem nekog općeg standardiziranja izrade web sjedišta

Kroz ovaj seminarski rad prošli smo kroz osnove samoga web sjedišta, njegovu

upotrebljivost. Objasnili smo metode i metrike uspješnosti web sjedišta. Isto tako prikazali

smo trendove prilikom dizajniranja, objasnili najčešće pogreške koje developeri rade te sve to

potkrijepili primjerima. Cilj rada je bio pobliže upoznati korisnika koji potencijalno želi

izgraditi web sjedište sa smjernicama za izradu kako bi njegov konačan proizvod (web

sjedište) bilo „kvalitetno“. Jer kao što je više puta rečeno bez obzira koliko je web sjedište

sadržajno dobro to ništa ne znači ako dizajn i navigacija kroz njega nije jednostavna i dobra.

Možemo zaključiti da su visoko kvalitetna web sjedišta ona koja pružaju relevantne, dobre

i korisne sadržaje, ali prilikom njihovog dizajna i razvoja treba uzeti u obzir poglavlja

razrađena kroz ovaj seminarski rad. Potrošiti puno novca i vremena pri izradi nekog sjedišta

nije nikakvo jamstvo da ono bude kvalitetno.

33

Popis literature

1. Filić, A.: 10 najvećih grešaka u web dizajnu, 14.3.2016.,

(http://www.izradainternetstranica.net/dizajn_web_stranica/10_najvecih_gresaka.html

,14.3.2016.)

2. Filić, A.: Što je CMS i zašto vam je potreban, 14.3.2016.,

(http://www.izradainternetstranica.net/dizajn_web_stranica/10_najvecih_gresaka.html

,14.3.2016.)

3. Newman. J., Aamonth, D.: 50 best websites 2014, 8.2014.,

(http://time.com/3054279/50-best-websites-2014/ , 14.3.2016.)

4. Pintar, M.: Top 7 web dizajn trendova za 2015. godinu, 2/2015.,

https://www.avalon.hr/blog/2015/03/top-7-web-dizajn-trendova-za-2015-godinu/ ,

14.3.2015.)

5. Ružić , D, Biloš, A., Kelić, I.: Web sjedište, 05/2013. (http://www.efos.unios.hr/e-

marketing/wp-content/uploads/sites/5/2013/04/e-marketing2013-03-web-sjediste.pdf ,

14.3.2016.)

6. Salihović, N.: E-metrike i pokazatelji uspješnosti, 12/2013.,

(https://prezi.com/x_b8wrcj6bze/e-metrike-i-pokazatelji-uspjesnosti/, 14.3.2016.)

7. Šarić, B.: Što je SEO?, 11/2008., (http://www.webstrategija.com/ws/03/sto-je-to-seo

, 14.3.2016.)

8. Throup, J.:Top 10 worst websites you'll wish you hadn't seen, 7/2014.,

(https://www.branded3.com/blog/top-10-worst-websites/, 14.3.2016.)

9. Vukovac, D., Orehovački, T.: Metode vrednovanja web upotrebljivosti, 2005.

(https://bib.irb.hr/datoteka/473208.PlantakVukovac_Orehovacki.pdf , 14.3.2016.)

34

Popis slika

Slika 1. Funkcije web sjedišta ................................................................................................... 2

Slika 2. Primjer progresne trake (eng. Loading bar) .................................................................. 4

Slika 3. Undo opcija na outlook mail poslužitelju .................................................................... 5

Slika 4. 3 najpoznatije ikone za povećanje, brisanje i naručivanje ........................................... 5

Slika 5. Nemogućnost pristupa web stranici .............................................................................. 5

Slika 6. Tooltip pomoći-što je kontrolni broj ............................................................................ 6

Slika 7. Wordpress ..................................................................................................................... 5

Slika 8. Joombla ......................................................................................................................... 5

Slika 9. Drupal ............................................................................................................................ 5

Slika 10. Search engine optimization ......................................................................................... 5

Slika 11. Osnovni pokazatelji e-metrika ................................................................................. 12

Slika 12. Velika slika .............................................................................................................. 15

Slika 13. Responzivni dizajn ................................................................................................... 16

Slika 14. Velika tipografija ..................................................................................................... 17

Slika 15. Flat dizajn ................................................................................................................. 17

Slika 16. „Card“ dizajn ............................................................................................................ 18

Slika 17. Primjer 1 .................................................................................................................... 21

Slika 18. Primjer 2 .................................................................................................................... 21

Slika 19. Primjer 3 .................................................................................................................... 22

Slika 20. Primjer 4 .................................................................................................................... 22

Slika 21. Primjer 5 .................................................................................................................... 23

Slika 22. Primjer 6 .................................................................................................................... 23