VELEUČILIŠTE U RIJECI

Marko Fresl, Vedran Hibler, Adnan Šatri, Boris Maričevič

Izrada web stranica

Seminarski rad iz kolegija Automatizacija uredskog poslovanja

Rijeka, 2016.

VELEUČILIŠTE U RIJECI

Poslovni odjel

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

Izrada web stranica

Seminarski rad iz kolegija Automatizacija uredskog poslovanja

MENTOR: STUDENTI:

mr.sc. Bernard Vukelić, viši predavač Marko Fresl

Vedran Hibler

Adnan Šatri

Boris Maričević

Rijeka, prosinac 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. Načini automatizacije web sjedišta ........................................................................................ 9

4.1. FAQ (Frequently asked questions) .................................................................................. 9

4.2. Live chat podrška ........................................................................................................... 10

4.3. Specijalizirana kontakt forma ........................................................................................ 10

4.4. Modul fiskalizacije ........................................................................................................ 11

4.5. Marketing automatizacija .............................................................................................. 12

5. Metode vrednovanja upotrebljivosti web sjedišta ................................................................ 13

5.1. Metode pregledavanja .................................................................................................... 13

5.1.1.Metode procjene prema heuristikama .................................................................. 13

5.1.2.Kongitivna metoda ............................................................................................... 14

5.2. Metode testiranja ........................................................................................................... 14

5.2.1.Razmišljanje na glas ............................................................................................. 14

5.2.2.Metoda praćenja oka ............................................................................................ 15

5.2.3.Automatsko zapisivanje podataka ........................................................................ 15

5.3. Metode ispitivanja ......................................................................................................... 16

5.3.1.Upitnici ................................................................................................................. 16

5.3.2.Terensko ispitivanje ............................................................................................. 16

6. Metrike uspješnosti web sjedišta .......................................................................................... 17

6.1. Stopa napuštanja stranice ............................................................................................... 18

6.2. Prosječan broj pogleda stranice ..................................................................................... 18

6.3. Prosječan trošak po pogledu stranice ............................................................................. 18

6.4. Prosječno vrijeme provedeno na stranici ....................................................................... 18

6.5. Stopa posjetioca koji se vraćaju ..................................................................................... 19

6.6. Stopa „prolaza“ .............................................................................................................. 19

6.7. Agregirana kratkoročna metrika .................................................................................... 19

6.8. Dublja metrika web sjedišta ........................................................................................... 19

7. Trendovi kod dizajna web sjedišta u 2015. godini ............................................................... 20

8. Greške pri izradi web sjedišta .............................................................................................. 24

9. Primjeri dobrih i loših web sjedišta ...................................................................................... 26

10. Zaključak ............................................................................................................................ 29

Popis literature ......................................................................................................................... 30

Popis slika ................................................................................................................................ 31

1

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.

2

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

3

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. 4.12.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

4

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.

5

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 , 4.12.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.

6

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

7

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.

8

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.

9

4. Načini automatizacije web sjedišta

Automatizacija web-sjedišta predstavlja prijenos obavljanja određenih funkcionalnosti

sa čovjeka na programski modul implementiran unutar web-sjedišta koji izvodi unaprijed

definirane procese bitne za obradu određene funkcionalnosti. Automatizacija takvog oblika

pruža temeljnu svrsishodnost web-sjedišta jer olakšava izvođenje i obradu poslovnih procesa

te zamjenjuje čovjeka u radu, a samim time potpomaže i smanjenju troškova unutar određene

poslovne organizacije. Neki od oblika automatizacije su: FAQ (Frequently asked questions),

live chat podrška, specijalizirana kontakt forma, moduli fiskalizacije, marketing

automatizacija.

4.1. FAQ (Frequently asked questions)

Često postavljena pitanja predstavljaju određeni oblik automatizacije gdje se korisniku

unaprijed nude odgovori na potencijalno bitna pitanja vezana za sadržaj web-sjedišta, a u

svrhu bržeg dolaženja do informacija, bez postavljanja pitanja putem kontakt forme ili

direktnog kontaktiranja predstavnika web-sjedišta što odužuje postupak dobivanja odgovora

na pitanje za koje postoji predikcija da će zanimati većinu posjetitelja web-sjedišta.

Slika 7. Primjer FAQ-a sa web-sjedišta http://bib.irb.hr/faq – Hrvatska znanstvena

bibliografija

10

Izvor: izradili autori

4.2. Live chat podrška

Live chat predstavlja korisničku podršku klijentima u realnom vremenu putem chat-a.

Kada korisnik pristupi web-sjedištu, ima mogućnost komunicirati s korisničkom podrškom

putem tekstualnih poruka te informirati se o sadržajima na internetskoj stranici. Ovaj način

znatno skraćuje put do dolaska informacija korisniku u odnosu na metode klasične kontakt

forme ili telefonske pozive službi za korisnike.

Slika 8. Prmjer live chat korisničke podrške – Ekupi

Izvor: izradili autori

4.3. Specijalizirana kontakt forma

Klasična kontakt forma nudi odašiljanje upita na univerzalno odredište - najčešće je to

administrator web-sjedišta koji zaprimljeni upit odašilje predstavniku poslovne organizacije

koji onda po predmetnom upitu postupa angažirajući one djelatnike zadužene za spomenuti

upit. Ovakav način komunikacije usluživanja putem internetskih stranica predstavlja dugačak

vremenski put od trenutka slanja upita do primitka upita na konačno odredište s obzirom na to

da upit ne ide izravno referenciranoj stranci. Stoga poboljšanje u automatizaciji ovakvog

11

oblika kontaktiranja klijenata predstavlja specijalizirana kontakt forma kroz koju posjetitelj

navodi područje interesa za koji šalje upit, a upit se zatim šalje upravo osobi koja je zadužena

za predmetno područje. Na taj način automatizira se i ubrzava izvođenje procesa kontakta s

korisnikom web-sjedišta te poboljšava responzivnost u komunikaciji.

Slika 9. Specijalizirana kontakt forma KBC Dubrava – naručivanje na pregled po odjelima

Izvor: izradili autori

4.4. Modul fiskalizacije

Kao jedan od primjera automatizacije web-sjedišta svakako je modul fiskalizacije

računa unutar internetske trgovine. S obzirom na to da je kod nas od srpnja 2013. godine

prisutan postupak naplate gotovinskim sredstvima na način da se svi računi elektronskim

putem šalju Poreznoj upravi, vrlo je bitno prije svakog pokretanja internet trgovine informirati

se o zakonskim regulativama i procesima naplate putem web-shopa. Hrvatski Zakon definira

kartični platni promet kao gotovinski i samim time potrebno je fiskalizirati poslovnu jedinicu

koja prima kartične uplate. Plaćanje karticama - Maestro, Visa, MasterCard, American

Express i drugim kreditnim i debitnim karticama - smatra se prometom u gotovini.

Za njih je potrebno provesti postupak fiskalizacije izdavanja računa. Dakle, i web-shopovi su

12

obuhvaćeni postupkom fiskalizacije. To djelomično otežava otvaranje internetske trgovine

kod nas u smislu povećanja troškova izrade programskih riješenja (modula fiskalizacije) koji

će automatiziranim postupkom nakon kartične naplate (također putem nekih od modula),

izvesti slanje računa Poreznoj upravi kao i fiskalizirani račun poslati kupcu na e-mail. Stoga je

vrlo bitno sprovesti ovakvu vrstu programske implementacije ukoliko posjedujemo web-shop

sa izravnom kartičnom naplatom. U suprotnom, pravni subjekt- vlasnik internetske trgovine je

u prekršaju te riskira pravne sankcije predviđene Zakonom o fiskalizaciji prometa gotovinom.

Iz prethodno navedenih razloga, svaka internetska trgovina koja posluje kartičnim načinom

plaćanja, u obvezi je integrirati automatiziranu fiskalizaciju računa i uskladiti je s platformom

koju koristi za internet trgovinu.

4.5. Marketing automatizacija

Marketing automatizacija vrlo je popularna grana u današnje vrijeme raširenosti socijalnih

mreža te njihove integriranosti sa web-sjedištem. Ona nam omogućuje povezivanje svih

online kanala u jedno i praćenje svakog korisnika pojedinačno po kanalima koje on posjećuje.

Marketing automatizacija zahtjeva modeliranje procesa i pravila koji će se izvršavati

automatizirano po određenim uvjetima. Primjerice, ako posjedujemo tisuću klijenata, bilo bi

vrlo teško pojedinačno pratiti svakoga i individualno mu slati ponude i marketinške materijale

pa stoga marketing automatizacija znatno olakšava taj posao jer po unaprijed definiranim

pravilima automatizirano odrađuje procese vezane za marketing ili CRM. Time se značajno

skraćuje vrijeme za vođenje brige o klijentima, vezano za marketing i odnose s kupcima. Neki

od servisa marketing automatizacije su: Act-On, HubSpot ili Marketo).

Slika 10. Sučelje servisa za marketing automatizaciju Act-On

Izvor: izradili autori

13

5. 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

5.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.

5.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.

14

5.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.

5.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.

5.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

15

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.

5.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.

5.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.

16

5.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.

5.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.

5.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.

17

6. 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,

4.12.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

18

6.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.

6.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.

6.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.

6.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?

19

6.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.

6.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).

6.7. Agregirana kratkoročna metrika

Ova metrika pokazuje promet po stranicama ili kategorijama unutar nje.

6.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.

20

7. 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.

21

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.

22

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/

5.12.2016.)

23

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/

4.12.2016.)

24

8. 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.

25

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.

26

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

„Dobre“ web stranice:

Slika 17. Primjer 1

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

Slika 18. Primjer 2

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

27

Slika 19. Primjer 3

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

„Loše“ web stranice:

Slika 20. Primjer 4

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

28

Slika 21. Primjer 5

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

Slika 22. Primjer 6

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

29

10. 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.

30

Popis literature

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

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

,4.12.2016.)

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

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

3. 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/ ,

4.12.2016.)

4. 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 ,

4.12.2016.)

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

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

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

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

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

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

31

Popis slika

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

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

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

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

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

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

Slika 7. Primjer FAQ-a sa web-sjedišta http://bib.irb.hr/faq ..................................................... 9

Slika 8. Primjer live chat korisničke podrške- Ekupi ............................................................... 10

Slika 9. Specijalizirana kontakt forma KBC Dubrava ............................................................ 11

Slika 10. Sučelje servisa za marketing automatizaciju Act-On .............................................. 12

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

Slika 12. Velika slika .............................................................................................................. 20

Slika 13. Responzivni dizajn ................................................................................................... 21

Slika 14. Velika tipografija ..................................................................................................... 22

Slika 15. Flat dizajn ................................................................................................................. 22

Slika 16. „Card“ dizajn ............................................................................................................ 23

Slika 17. Primjer 1 .................................................................................................................... 26

Slika 18. Primjer 2 .................................................................................................................... 26

Slika 19. Primjer 3 .................................................................................................................... 27

Slika 20. Primjer 4 .................................................................................................................... 27

Slika 21. Primjer 5 .................................................................................................................... 28

Slika 22. Primjer 6 .................................................................................................................... 28