1

Sveučilište u Splitu

Umjetnička akademija u Splitu

Dizajn u novim medijima

SEMINARSKI RAD

Dizajniranje, vrednovanje i implementacija

Korisničkog sučelja web sjedišta HCI kolegija

STUDENTI:

Ivan Milas, Oleg Šuran, Luka Vidoš

Split, 11. svibnja, 2010.

2

Sadržaj 1. Uvod .................................................................................................................................................................... 3

2. Kriteriji za vrednovanje korisničkog sučelja ................................................................................................... 4

2.1. Funkcionalnost ............................................................................................................................................ 4

2.2. Upotrebljivost .............................................................................................................................................. 4

2.3. Navigacija .................................................................................................................................................... 4

2.4. Dizajn stranice ............................................................................................................................................. 5

3. Proces dizajna korisničkog sučelja ................................................................................................................... 6

3.1. Korisnička analiza ....................................................................................................................................... 6

3.2. Prototip korisničkog sučelja ........................................................................................................................ 7

3.3. Papirni prototip ............................................................................................................................................ 7

3.4. Tehnike izrade prototipa .............................................................................................................................. 7

3.5. Evaluacija korisničkog sučelja .................................................................................................................... 7

3.6. Jednostavne tehnike evaluacije .................................................................................................................... 7

4. Analiza zadatka .................................................................................................................................................. 8

4.1. Analiza pet web sjedišta na temu HCI ......................................................................................................... 8

4.1.1. http://www.hcibook.com/e3/ ............................................................................................................. 8

4.1.2. http://hci.stanford.edu/ ..................................................................................................................... 9

4.1.3. http://www.hcii2011.org/ ............................................................................................................... 10

4.1.4. http://www.hcii.cmu.edu/ ............................................................................................................... 11

4.1.5. http://www.bcs-hci.org.uk/hci2008/ ............................................................................................... 12

4.2. Analiza sadržaja za web sjedište HCI kolegija .......................................................................................... 13

4.3. Prva procjena i arhitektura stranice ........................................................................................................... 13

5. Papirnati prototip ............................................................................................................................................ 14

6. Dinamički prototip ........................................................................................................................................... 17

7. Testiranje upotrebljivosti ................................................................................................................................ 18

7.1. Ulazni upitnik ............................................................................................................................................ 18

7.2. Zadaci ........................................................................................................................................................ 18

7.3. Izlazni upitnik ............................................................................................................................................ 19

8. Rezultati upitnika ............................................................................................................................................. 20

9. Finalno rješenje ................................................................................................................................................ 23

10. Zaključak ........................................................................................................................................................ 24

3

1. Uvod Interakcija čovjeka i računala (eng. Human Computer Interaction, HCI) bavi se

razumijevanjem, oblikovanjem, vrednovanjem i implementiranjem interaktivnih računalnih sistema namijenjenih čovjekovoj upotrebi (Preece i dr., 1994), a sve radi osiguravanja upotrebljivih i funkcionalnih računalnih sistema. Osnovni problem nastaje prilikom oblikovanja i tehničkog realiziranja korisničkog sučelja, koji će komunikaciju između čovjeka i računala učiniti jednostavnijom i učinkovitom, usmjerenom obavljanju željenog zadatka, a koje će ujedno istodobno posjedovati transparentnost nužnu za razvijanje korisnikove neopterećenosti samim sučeljem.

Ispravno dizajniranje web portala je presudan element za njegovu uspješnost. Osnova za to je plansko analiziranje problema. Na osnovu te analize slijedi dizajn sustava. Detaljan dogovor između web programera i korisnika neophodan je i posebno važan za sve oblasti programiranja.

4

2. Kriteriji za vrednovanje korisničkog sučelja

2.1. Funkcionalnost Osnovna funkcija korisničkog sučelja (eng. User Interface) je olakšavanje dijaloga,

komunikacije čovjeka i računala. Naime, za razliku od pisane riječi, korisničko sučelje nije namijenjeno neprekidnom kontinuiranom čitanju, već predstavlja „okvir“ predviđen neprestanim složenim kretanjima. Povećavanjem konzistentnosti i jasnoće korisničkog sučelja, povećava se i njegova djelotvornost, što je od presudne važnosti budući da „korisničko sučelje otvara vrata moći računalnog sistema“ (Marcus i Van Dam, 1991).

Najnovija istraživanja pokazuju da je korisničko sučelje, odnosno, interakcija čovjeka i računala, i dalje visoko na listi područja s velikim „raskorakom znanja“ kojim se izražava u kojoj mjeri važnost područja nadmašuje trenutno znanje. Funkcionalnost je karakteristika kojom se utvrđuje ispravnost rada pojedinih funkcija korisničkog sučelja. Funkcionalnost propisuje što virtualni proizvod treba imati da bi ispunio postavljene zahtjeve.

Funkcionalnost obuhvaća analizu pet karakteristika: prikladnost, točnost, povezanost, usuglašenost, sigurnost / zaštita

2.2. Upotrebljivost Upotrebljivost je osnovni koncept interakcije čovjeka i računala, zaokupljen načinom

realiziranja sistema lakših i jednostavnijih za učenje, ali i za korištenje (Preece i dr., 1994; Nielsen, 1993; Shackel, 1991). Istraživanja pokazuju da pridavanje značaja upotrebljivosti dramatično snižava cijenu, a povećava produktivnost (Nielsen i Landauer, 1993; Nielsen i Phillips, 1993).

Čak i minimalna primjena vrednovanja upotrebljivosti zajedno s poboljšanjem od 20 pogrešaka za ispravak najlakših pogrešaka, povećava učinkovitost korisnika s 19% na čak 80% (Shneiderman, 1998). Vidljivo je zašto je inženjerstvo upotrebljivosti (eng. Usability Engineering), odnosno proces u kojem se kvantitativno specificira upotrebljivost proizvoda, u širokim razmjerima postalo organiziranom disciplinom s postavljenim principima i određenim standardima.

Očigledno je da je za svakog pojedinca komunikacija s računalom postala barem toliko važna koliko i sama obrada na njemu. Međutim, mnogi siromašno dizajnirani računalni sistemi ukazuju na poteškoće prilikom dizajniranja upotrebljivog načina interakcije čovjeka i računala. Upotrebljivost je karakteristika kojom se procjenjuje lakoća korištenja i rukovanja interaktivnim sistemom. Ovu ocjenu daju interaktivni korisnici (krajnji korisnici). Analiza upotrebljivosti se vrši u svim fazama životnog ciklusa softvera. Ukoliko se predviđa da krajnji korisnik vrši adaptacije i dorade softvera treba navesti uvjete, načine i metode za provođenje dorade.

Upotrebljivost obuhvaća analizu četiri karakteristike: razumljivost, preglednost, savladivost, izvršivost

2.3. Navigacija Navigacija je posebno važna u dizajnu sučelja. Trenutnim stanjem web tehnologije,

veza između korisnika i web stranice omogućena je putem hipertekstualne navigacije između dokumenata. Bez lokalne organizacije informacija, glavni problem na web stranici je nedostatak informacija o tome gdje se trenutno nalazimo. Jasne, konzistentne ikone, grafičke

5

sheme i tekstualni prikaz te kratak sažetak na ekranu može uliti korisniku povjerenje, da pronađe ono što traži bez gubitka vremena.

Korisnici bi uvijek trebali biti u mogućnosti vratiti se na naslovnu stranicu, kao i na ostale važne navigacijske točke unutar same stranice. Glavni linkovi, koji bi trebali biti prisutni na svakoj stranici obavještavaju korisnika da je još uvijek unutar stranice.

2.4. Dizajn stranice Grafički dizajn kreira vizualnu logiku, optimalni balans između vizualnog doživljaja i

grafike ili tekstualne informacije. Bez vizualnog utjecaja, oblika, boje i kontrasta, stranice su obično dosadne i neće motivirati posjetioca da ispita njihov sadržaj. Dokumenti sa gustim tekstom, bez kontrasta i vizualnog olakšanja koje nudi grafika i pažljivi prelom strane i tipografija - teži su za čitanje, naročito na ekranima sa niskom rezolucijom. Bez dubine i kompleksnosti teksta, (pre)dizajnirane stranice riskiraju razočarenje kod korisnika, jer nude slab balans vizualnog doživljaja, tekstualne informacije, i interaktivnih linkova.

Kada smo uspostavili kompromis između količine grafike i teksta koji ćemo upotrijebiti u dizajnu stranice, potrebno je pažljivo uspostaviti vizualnu hijerarhiju. Naglasit ćemo važne elemente i organizirati sadržaj logično i predvidljivo. Posjetitelj stranicu vidi prvo kao veliku količinu oblika i boja, sa elementima iz prednjeg plana koji su u kontrastu sa pozadinom. Tek kasnije počinje izdvajati određene informacije, i to prvo iz slika, ukoliko su prisutne, a tek onda počinje raščlanjivati „teži“ sadržaj teksta i počinje čitati pojedine riječi i fraze.

6

3. Proces dizajna korisničkog sučelja Dizajn korisničkog sučelja je iterativni proces koji uključuje blisku vezu između

korisnika i dizajnera. Postoje 3 osnovne aktivnosti u tom procesu.

• Korisnička analiza – razumijevanje što je to što će korisnik raditi u sistemu; • Prototip sistema – razvijanje niza prototipa kao eksperiment; • Evaluacija sučelja – eksperimentiranje sa ovim prototipovima sa korisnicima

Na slijedećoj slici je prikazan proces dizajna korisničkog sučelja. Nakon analize i razumijevanja korisničkih aktivnosti kreira se papirna verzija prototipa i radi njegova evaluacija. Zatim se kreira dinamička verzija prototipa, pristupa njegovom izvršenju i ponovo radi evaluacija i tek nakon toga pristupa se implementaciji finalnog korisničkog sučelja.

Slika 1: Proces dizajna korisničkog sučelja

3.1. Korisnička analiza Ako ne razumijemo ono što korisnici žele raditi sa stranicom, onda nemamo realnu

perspektivu izrade efikasnog sučelja. Korisnička analiza se mora opisati u smislu da je i korisnici i drugi dizajneri mogu razumjeti

Postoje tri najznačajnije tehničke analize:

1. Zadatak analize – modelirani koraci uključeni u kompletiranje zadataka 2. Intervjui i upitnici – ispitivanje korisnika o njihovom radu 3. Etnografija – promatranje korisnika za vrijeme rada

Analiza i razumijevanje

korisničkih aktivnosti

Izrada papirnatog prototipa

Evaluacija dizajna s krajnjim

korisnicima

Prototip dizajna Izrada dinamičkog

prototipa

Evaluacija dizajna s krajnjim

korisnicima

Funkcionalni prototip

Implementacija završnog

korisničkog sučelja

7

3.2. Prototip korisničkog sučelja Cilj prototipa je da dopusti korisnicima do dobiju direktno iskustvo u radu sa sučeljem.

Bez takvog iskustva je nemoguće suditi o upotrebljivosti jednog sučelja.

Izrada prototipa može imati dvije faze:

• u ranoj fazi se može koristiti prototip u papirnom obliku; • dizajn se onda prerađuje i razvija u sofisticirani automatski prototip.

3.3. Papirni prototip U ovom slučaju primjenjuje se prelazak kroz scenarija i pomoću crteža sučelja.

Scenarij se koristi kako bi se predstavio niz interakcija sa sučeljem. Papirni prototip je efikasan način dobivanja korisnikove reakcije na prijedlog dizajna.

3.4. Tehnike izrade prototipa Postoje tri osnovne tehnike izrade prototipa:

1. Script-driven prototype – razvija se skup skripti i ekrana pomoću alata kao što je Mockup, Macromedia Director, Adobe Flash i sl.

2. Visual programming – koristi se jezik dizajniran za brz razvoj kao što je Visual Basic

3. Internet-based prototype – koristi web browser i pripadajuće skripte

3.5. Evaluacija korisničkog sučelja Procjenu dizajna korisničkog sučelja treba izvesti kako bi se ocijenila njegova

pogodnost. Sveobuhvatna procjena je vrlo skupa i nepraktična za većinu sistema. Idealno, sučelje bi trebalo vrednovati prema specifikaciji upotrebljivosti. Međutim, takve specifikacije se rijetko izvode.

3.6. Jednostavne tehnike evaluacije Radi dobivanja povratne informacije primjenjuju se upitnici za korisnike (feedback).

Također, tu je i video snimanje korištenja sistema i evaluacija nakon toga. Instrumentacija koda za prikupljanje informacija o korištenju alata i grešaka korisnika.

8

4. Analiza zadatka Temu koja je zadana je izrada web sjedišta za kolegij Interakcije čovjeka i računala

(dalje u seminaru – HCI).

4.1. Analiza pet web sjedišta na temu HCI Prvi korak je bila analiza web sjedišta slične tematike. Odabrana je lista raznolikih

sjedišta, obzirom da počinjemo bez ikakvih materijala. Cilj ovog dijela istraživanja je dobiti nekakav početak za izradu papirnog prototipa, te vidjeti koje tipove materijala bi mogli očekivati na web stranici.

4.1.1. http://www.hcibook.com/e3/

Slika 2: web sjedište HCI Book

HCI Book (third edition) je web sjedište namijenjeno studentima, profesorima i svim zainteresiranima za HCI.

Sjedište vizualno odiše činjenicom da je nastao u prošlom stoljeću. Jedina pozitivna stavka navedenog sjedišta je djelomična upotrebljivost, ali samo u segmentu jasno istaknutih linkova, tj. poveznica sa idućom stranicom, koje proizlaze iz osnovnih standarda i početaka web dizajna.

Nepotrebno je ulaziti u dublju analizu sjedišta jer se kroz jednostavne indicije proizašle iz osnova web dizajna (vizualna atraktivnost, boje, tipografija, informacijska arhitektura) lako raspoznaje dotrajalost sjedišta.

(+) Jasno istaknuti linkovi – poveznice sa idućom stranicom

(–) Vizualno „zaostalo“ sjedište. Zaglavlje nije u funkciji linka za početnu stranicu. Vizualna i informacijska neujednačenost stranica.

9

4.1.2. http://hci.stanford.edu/

Slika 3: web sjedište HCI Stanford Group

Web sjedište Standford HCI Grupe je namijenjeno informiranju zainteresiranih skupina interakcijama čovjeka i računala te studentima istog fakulteta.

(+) Nema

(–) Informacijska arhitektura totalna nepoznanica dizajneru sjedišta! Izbornik je neraspoznatljiv. Centralni dio sjedišta se ne razlikuje od vijesti u desnoj rubrici. Upotrebljivost je zakazala u segmentu isticanja poveznica koje vode van sjedišta.

Standford HCI sjedište bi sigurno bolje funkcioniralo u okviru jednog web CMS-a/bloga. Očito je da autori web sjedišta nemaju dovoljnu naobrazbu za osmišljavanje i realiziranje kvalitetnog web sjedišta.

10

4.1.3. http://www.hcii2011.org/

Slika 4: web sjedište HCI International 2011

Web sjedište HCI International 2011 ima svrhu pravovremenog informiranja svih zainteresiranih za konferenciju HCI u Japanu.

(+) Jednostavnost, preglednost, jasno istaknuti linkovi. Naglašena je upotrebljivost - funkcionalnost prenaglašena, stavljena ispred estetike. Web sjedište „izgrađeno“ po svim standardima W3C-a.

(–) Grafički nezanimljivo sjedište, namijenjeno pregledu u nižim rezolucijama – pojavljuje se problem „velikih bjelina“ na velikim rezolucijama.

Sjedište je zbir svih najosnovnijih web standarda.

11

4.1.4. http://www.hcii.cmu.edu/

Slika 5: web sjedište HCI Institute

Informativno i edukacijsko web sjedište HCI Instituta - Carnegie Mellon iz Pittsburgha. Namijenjeno studentima, profesorima i svim zainteresiranima u HCI.

(+) Dobar primjer usklađenosti estetike i funkcionalnosti. Grafički dotjerano sjedište koje također sadrži standarde W3C-a. Prepoznatljiv vizualni identitet, usklađene boje, sjedište oživljeno fotografijama. Tipografija čitljiva, estetski usklađena.

(–) Neujednačenost svih stranica.

12

4.1.5. http://www.bcs-hci.org.uk/hci2008/

Slika 6: web sjedište British Computer Society HCI group

British Computer Society HCI Group

Navedeno sjedište dobar je primjer zbira svih klasičnih web standarda.

(+) Informacijska arhitektura naglašena (jasno definirani naslovi, nadnaslovi, osnovni tekst, linkovi…). Izbornik popraćen navigacijom – koja nam olakšava snalaženje na stranicama i brzo preskakanje sa jedne cjeline na drugu.

Web sjedište vizualno izgleda korektno, zaglavlje je kvalitetno dizajnirano (znak, izbornik) dok je „tijelo“ sjedišta „osiromašeno“.

(–) Loš odabir tipografije, teško čitljiva zbog malog proreda, također veličina slovnog znaka ne trpi malu širinu stupca. U centralnom djelu sjedišta nedostaju boje koje se koriste u zaglavlju – boje bi dodatno oživile sjedište. Web ima grešaka u kodu, vidljivih u podnožju sjedišta.

13

4.2. Analiza sadržaja za web sjedište HCI kolegija Nakon kratke analize sjedišta sličnog sadržaja, slijedio je drugi korak – analiza

sadržaja koji bi se trebao nalaziti na web sjedištu HCI kolegija. To je učinjeno kroz anketu vezanu za korištenje sadržaja na postojećim sjedištima PMF-a, kolegija i moodle sustava.

Što očekujete naći na sjedištu HCI kolegija

1. informacije o odnosu čovjeka i računala 2. novosti o kolegiju, i iz svijeta HCI 3. puno golih cura koje grle kompjutere,

tu i tamo mogu izostavit kompjuter 4. informacije i obavijesti o kolegiju 5. očekujem pronaći interakciju čovjeka i računala

Koliko vremena provodite na sjedištima HCI / PMF-a / moodle-a

1. ništa 2. samo kad uploadam radove 3. ne prečesto 4. jedanput na tjedan 5. oko 10 min mjesečno

Koje aspekte sjedišta najviše koristite

1. ništa 2. moodle 3. novosti 4. moodle sustav 5. rado bih koristio forum da znam gdje se nalazi

Koliko ste aktivni na sjedištu HCI (moodle / forum / ...)

1. nisam 2. jako malo 3. nisam uopće 4. nisam aktivna 5. prilično aktivan

Imate li potrebu koristiti web sjedište HCI kolegija i kakav je vaš doživljaj korištenja dosadašnjih izvora informacija

1. da, trebalo bi bit na sjedištu dosta poveznica sa drugih sajtova, zanimljivih vijesti, itd

2. imam, usko vezano za područje studiranja, ali mi je vizualno neatraktivna i teška za snalaženje, zbog toga gubim motivaciju

3. nisam oduševljen sjedištem i volio bih se više uključiti

4. potrebno je navikavanje, nisam zadovoljna vizualima

5. u istraživačke svrhe, nisam baš zadovoljan (1) student 3. god. PMF-a, (2) student 4. god. DNM-a, (3) neozbiljan student 3. godine UMAS-a, (4) studentica PMF-a 4. godine (5), student FESB-a 5. godine

Anketa 1: očekivanja od web sjedišta HCI kolegija i dosadašnja aktivnost

Anketa je pokazala kako sjedištima koje postoje nedostaje sadržaja poput novosti (vezane uz kolegij i tematiku kolegija), linkova i foruma. Korisnici se žele više uključiti te bi voljeli imati kvalitetnu poveznicu sa e-learning portalom. Također se teže snalaze na postojećim sjedištima i neugodno se osjećaju koristeći.

4.3. Prva procjena i arhitektura stranice Na temelju anketa se kreirala i arhitektura sjedišta koja je odražavala potrebe studenata

i koja bi u nekom trenutku mogla biti proširiva.

• Novosti s odsjeka: zanimljivosti & vijesti za studente • O HCI kolegiju: o HCI kolegiju, program kolegija, nositelji kolegija, ustanove • Istraživanja i projekti: istraživački rad, projekti, znanstveni radovi • Sudionici kolegija: odsjeci koji sudjeluju u organiziranju nastave i lista studenata • Literatura: linkovi, knjige • Moj profil: integracija s moodle-om (osobni podaci, ocjene, obveze, evidencija

izostanaka) • Kontakt

14

5. Papirnati prototip Nakon što je određeno što bi se uopće trebalo nalaziti na web sjedištu, bilo je potrebno

provesti malo istraživanje na „terenu“. Prva ideja koja je bila je bio pregled informacija i izbornik na slijedeći način:

Slika 7: Skica rasporeda informacija na web sjedištu

1. Zaglavlje (logo, naziv, adresa) 2. Glavni izbornik 3. Sadržaj 4. Oglasna ploča 5. Korisnički račun, Moodle 6. Forum 7. Footer (copyright i kontakt)

Nakon toga se kreirala skica na papiru i tri odabranika (studentica PMF-a, student prve godine UMAS-a i student FESB-a) su davala svoje komentare.

Kao metodu prototypinga smo izabrali hamer kolaže gdje smo označili bojama tipove sadržaja i tipove informacija, što je vidljivo iz slika. Sivom bojom su označeni zaglavlje i podnožje, zelenom izbornik, crveno sadržaj a plavom dodatne opcije.

1

2 3 4

5

6

7

15

Slika 8: prijedlog ispitanika sa FESB-a

Prva varijanta koju smo dobili je bila skoro pa očekivana, otprilike kao što smo je i sami skicirali, kolega sa FESB-a je zaključio da je ovo najčitkije, no naglasio je da je ovo previše portalski sistem te izrazio zabrinutost za količinu materijala koju mi imamo.

Slika 9: prijedlog ispitanice sa PMF-a

Druga varijanta je bila vrlo slična osim što su informacije postavljene u dnu. Kolegica sa PMF-a je rekla kako se već naviknula na sučelje PMF-a i moodle-a, te da ne bi puno toga mijenjala i ovdje. Nije se zabrinjavala za sadržaj, jer „i ovako su naše stranice malo prazne“.

Zanimljivo je da je primijetila kako tekst i sadržaj bi trebao zadržati više bjeline, a manje ovih zatvorenih kvadratića.

16

Slika 10: prijedlog ispitanika sa UMAS-a

Kolega sa UMAS-a je ovome pristupio studiozno, postavio je neočekivano pitanje – koji sadržaj točno mi imamo te koliko je ovo „veliko“. Kad smo objasnili cijeli zadatak, zaključak je bio da je sasvim nepotreban detalj sa izbornikom u zasebnoj kolumni te zasebnoj oglasnoj ploči za vijesti. Obzirom da se radi o stranici koja je vrlo specifične kategorije – treba sve to svesti na minimum. Tako je izbornik prešao u zaglavlje, vijesti u svoju kolumnu, dok je sadržaj u svojoj.

Na temelju kratkog istraživanja, zaključili smo da zbog mobilnih uređaja te aktivnog polja web stranice ipak treba postaviti vijesti u lijevu kolumnu, a desno sporedni sadržaj čime se uvelike popravlja upotrebljivost stranice.

17

6. Dinamički prototip Prvi dinamički prototip je naišao na zanimljive komentare i zato je odluka pala na

skroz drugačiji pristup. Naime, zamolili smo kolege koji su radili na papirnatom prototipu da prođu kroz dinamički prototip, i zaključak je bio – stranica je jasna, ali „prešarena“, „problematične upotrebljivosti“, „prenatrpana informacijama“ i „preportalska“.

Slika 11: web sjedište HCI kolegija, prvi dinamički prototip

Ovo je bila potvrda da cijeli projekt treba biti reduciran na stvarnu količinu sadržaja, te u potpunom skladu sa pravilima koji stoje za interakciju čovjeka i računala.

Slika 12: web sjedište HCI kolegija, drugi dinamički prototip

S ovim, potpuno reduciranim webom, koristeći osnovne tipografske elemente, gotovo da je cilj potpuno postignut. Čak i bez ikakvog „dizajna“ se tu nalazi sve što je potrebno.

18

7. Testiranje upotrebljivosti Testiranje upotrebljivosti je jedno od najvažnijih dijelova izrade sjedišta. Za ovu fazu

je važno imati potpuni funkcionalni dinamički prototip, čime bi dobili maksimalno na egzaktnosti podataka.

Obzirom na kratak vremenski rok, dinamički prototip će biti simuliran.

7.1. Ulazni upitnik Ulaznim upitnikom od ispitanika možemo doznati koliko je njihovo znanje o

računalima, webu, tematici HCI kolegija te njegovim očekivanjima.

Za ulazni upitnik ćemo koristiti slijedeća pitanja:

1.1 Kako bi ocijenili svoje poznavanje računala? slabo 1 2 3 4 5 izvrsno

1.2 Kako bi ocijenili svoje znanje korištenja interneta? slabo 1 2 3 4 5 izvrsno

1.3 Koliko vremena provodite „surfajući“ webom? ne „surfam“ 1 2 3 4 5 više od 5 sati

1.4 Pregledavate li web sjedišta na mobitelu? nikako 1 2 3 4 5 stalno

1.5 Zanima li vas područje interakcije čovjeka i računala?

ne zanima 1 2 3 4 5 zanima

1.6 Riječima opišite vaša očekivanja od web sjedišta HCI kolegija:

7.2. Zadaci Prvi zadatak: Pronađite e-mail adresu profesorice Granić.

Drugi zadatak: Pronađite raspored predavanja.

Treći zadatak: Saznajte ocjenu iz zadnjeg kolegija.

19

7.3. Izlazni upitnik Za izlazni upitnik smo odlučili dati pitanja koja bi nam dala odgovor i smislenost

cijelog ovog zadatka. Također bi saznali koliko je uporabljivo ovakvo web sjedište.

1.1 Opće reakcije na web stranicu komplicirana 1 2 3 4 5 6 7 jednostavna

1.2 neprikladana 1 2 3 4 5 6 7 prikladna

1.3 kruta 1 2 3 4 5 6 7 fleksibilna

1.4 Ispunjava svoju svrhu ni približno 1 2 3 4 5 6 7 u potpunosti

1.5 Osnovna funkcionalnost ne zadovoljava 1 2 3 4 5 6 7 zadovoljava

1.6 Korištenjem web stranice zadaci se izvršavaju sporo 1 2 3 4 5 6 7 brzo

1.7 komplicirano 1 2 3 4 5 6 7 jednostavno

1.8 Web stranicu bi koristili ako baš morate 1 2 3 4 5 6 7 rado

1.9 nikada 1 2 3 4 5 6 7 uvijek

1.10 Općenito ste s webom nezadovoljni 1 2 3 4 5 6 7 zadovoljni

2.1 Sučelje vam se ne sviđa 1 2 3 4 5 6 7 sviđa

2.2 Stječete opći dojam da je zaslon web stranice konfuzan 1 2 3 4 5 6 7 vrlo jasan

2.3 nepregledan 1 2 3 4 5 6 7 pregledan

2.4 Količina informacija na zaslonu je nedovoljna 1 2 3 4 5 6 7 dovoljna

2.5 Organizacija informacija na zaslonu je nelogična 1 2 3 4 5 6 7 logična

2.6 Izgled ikona na ekranu je: dvosmislen 1 2 3 4 5 6 7 jednoznačan

2.7 zbunjujući 1 2 3 4 5 6 7 jasan

3.1 Naučiti upotrebljavati, koristiti stranicu je komplicirano 1 2 3 4 5 6 7 jednostavno

3.2 Nazivi linkova su zbunjujući 1 2 3 4 5 6 7 jasni

3.3 Pamćenje naziva je teško 1 2 3 4 5 6 7 lagano

3.4 Pamćenje ikona je teško 1 2 3 4 5 6 7 lagano

3.5 Potreban broj koraka za pojedini zadatak je prevelik 1 2 3 4 5 6 7 taman

3.6 Smatrate da je pri tome broj vaših pogrešnih pokušaja

veliki 1 2 3 4 5 6 7 mali

20

8. Rezultati upitnika

Slika 13: prvi ispitanik – student PMF-a

Prvi ispitanik (student PMF-a, prva godina, matematika) je ušao u cijeli projekt vrlo sarkastično, obzirom da je često spomenuo kako sve stvari pokušavamo prevesti sa „engleštine“ a kratica za sjedište nam je HCI (a ne IČR) i slično. Njegova očekivanja nisu bila velika, naučio je na mane sjedišta PMF-a, bugove moodle sustava, tako da je želio samo dobiti malo više informacija o samom kolegiju, primjere radova i sl.

Od njega smo više informacije uspjeli dobiti preko razgovora s njime, pogotovo jer je dosta komentirao. Općenito mu je ocjena našeg sjedišta bila nekih 4/7, varirala je na temu, njegov je osobni komentar bio da je sjedište suhoparno, dizajn sterilan, iako – unatoč tome, pregledan i lak za upotrebu.

Desna strana mu je bila čak i totalni višak, obzirom da je na moodle sustav već naviknut, tako da bi bilo sasvim dovoljno imati nekakav sadržaj kao što je oglasna ploča, bez foruma i samo login.

Pohvalio je pokušaj dizajniranja bez velikog dizajna, iako on osobno nije ljubitelj takvih sjedišta.

Njegov zaključak je bio da bi uz male izmjene kao što su: više teksta na naslovnici, jer na količinu prostora kojeg imamo – trebalo bi ipak iskoristiti to da umjesto „teasera“ stavimo veći dio vijesti ili čak cijelu ako nije preduga.

21

Slika 14: drugi ispitanik – student PMF-a

Drugi ispitanik (diplomirani FER-ovac), kojemu je struka usko vezana uz mobilnu industriju je u projekt ušao bez očekivanja, shvatio je zadatak ozbiljno. Nije do sada sudjelovao u ovakvom tipu istraživanja, ali je bez problema odradio sve zadatke.

Nije bio zadovoljan dizajnom, iako je iznimno lako koristio sučelje. Posebnu je zamjerku dao na naslove koji su bili na desnoj strani, koji su bili gumbovi, iako nisu imali svrhu. Smatra da je to nepotreban detalj, kao i ovi neki elementi ASCII „hijeroglifa“.

Zaključio je da su to neki elementi koje bi trebalo srediti. Predložio je da razmislimo što se može učiniti da je stranica lakše čitljiva na velikim monitorima, te kako da istu prilagodimo za mobilne uređaje. Tu je zapravo pohvalio dizajn koji se ne nameće, i da bi ovakav „lagan“ dizajn bio idealan za pregled sjedišta putem mobitela.

Slika 15: treća ispitanica – studentica produkt dizajna

22

Posljednja ispitanica (studentica produkt dizajna treće godine u ZG-u), je bila jedina koja je naišla na male poteškoće kod testiranja. Smatra se iskusnom u radu sa računalima i web sjedištima, no problem joj je bio zadatak provjere svojih ocjena. Budući da nikad nije bila u kontaktu sa e-learning portalima, nije niti pretpostavila kako će doći do ocjene svojih zadataka.

Ostatak sadržaja je bio jasan, bila je zadovoljna dizajnom, za koji smatra da ispunjava svoju funkciju. Rekla je da postoji prostora za doradu (naslovi u različitim bojama, naslovi u desnoj traci) te da joj nije jasno zašto se toliko miješa hrvatski i engleski – te da moramo biti u tom kontekstu jako dosljedni.

9.1. Analiza upitnika i plan promjene Ispitanici imaju puno iskustva u pretraživanju interneta. Svi ispitanici provode barem

četiri sata dnevno. HCI ih ne oduševljava previše, niti smo upitnikom kod njih postigli promjenu mišljenja. Od web sjedišta HCI kolegija očekuju jednostavnost, intuitivnost i lakoću pamćenja.

Rješenje sjedišta su svi ocijenili kao vrlo jednostavnim, prikladnim te smatraju kako ispunjava svoju svrhu. Do zadanih informacija su došli brzo, jednostavno i bez grešaka. Količina informacija na zaslonu im je taman, no trebalo bi iskoristit prostor za poboljšanje. Smatraju kako je korištenje prilično intuitivno i lako pamtivo, no dizajn traži određene dorade. Sudionici upitnika su zaključili da bi neke poznate elemente ipak trebalo promijeniti (gumbovi umjesto naslova, različite boje za linkove, bjeline), no generalno je efekt bio pozitivan.

Ispitanica koja nije bila ranije upoznata sa Moodle sustavom je imala problema kod rješavanja trećeg zadatka, a samo sučelje joj se zbog toga činilo malo konfuzno. Svakako je nužno pripaziti na miješanja jezika, kako u vijestima, tako u linkovima i sadržaju. Također, naziv kolegija im se činio teško pamtljivim.

Na temelju ovih rezultata koje smo dobili kroz ovo kratko istraživanje, radimo ispravke na postojećem dizajnu i predstavljamo finalno rješenje.

23

9. Finalno rješenje Kada su se uzeli odgovori ispitanika u obzir, na samom dizajnu je odrađen niz

promjena koji je uvelike utjecao na funkcionalnost. Kao primjer smo uzeli studenta iz skupine koja je imala problema u snalaženju kroz stranicu (student UMAS-a, druga godina) koji nije upoznat sa moodle sustavom, kao ni tematikom stranice – i u jednom iznimno kratkom testiranju sa ponovljenim zadacima – nije bilo nikakvih problema, svi elementi su se posložili, što ne znači da nema još mjesta za ispravke i dorade.

Slika 16: finalno web sjedište za HCI kolegij

24

10. Zaključak Niti jedan zadatak nije lagan, dovođenje jednog projekta u kratko vrijeme od početne

faze do finalnog rješenja – traži kvalitetnu metodologiju, strpljivost i otvorenost prema promjenama. Ovdje smo se prvi put susreli sa ovakvim načinom rada, koji smo zaista proveli od početka do kraja, gdje je rezultat bio vidljiv. Broj ispitanika kroz ova testiranja nije niti približan da bi obilježavao stvarno stanje, ali odabir fokus grupa je bio vrlo bitan, te je dao dovoljan spektar za minimalnu procjenu rezultata.

Ugodno smo bili iznenađeni odazivom ispitanika i njihovim konstruktivnim kritikama no da je ostalo puno mjesta za dorade, to je potpuno jasno.