Usability case study.Evaluation of a user interface for www.sportsdirect.com

1. Univerzitet u Beogradu
Fakultet organizacionih nauka
Seminarski rad
Predmet: Interakcija čovek računar
Tema: Evaluacija korisničkog interfejsa web
sajta www.sportsdirect.com
Mentor: Uroš Šošević
Student: Stefan Vasić 3733/2017
Beograd, april 2018.

2. Sadržaj
1.Uvod........................................................................................................................................... 3
2. Korisnički interfejs....................................................................................................................... 4
3. Heuristička evaluacija.................................................................................................................. 5
Definicija zadataka i akcija........................................................................................................... 6
Cilj heurističke evaluacije i analiza................................................................................................ 7
Vidljivost statusa sistema......................................................................................................... 7
Povezanost između korisničkog interfejsa i stvarnog sveta......................................................... 8
Pomoć korisnicima da prepoznaju, dijagnozirajui oporave se od grešaka....................................8
Korisnička kontrola i sloboda....................................................................................................9
Fleksibilnosti efikasnost korišćenja......................................................................................... 11
Estetski i minimalisticki dizajn................................................................................................. 11
Predlog poboljšanja interfejsa.................................................................................................... 12
3. Cognitive walkthrough metoda.................................................................................................. 13
Plan testiranja........................................................................................................................... 14
Definisanje zadataka i akcija...................................................................................................... 14
Prolazak kroz zadatke i akcije..................................................................................................... 15
4. Thinking Aloud.......................................................................................................................... 17
Plan testiranja........................................................................................................................... 18
Rezultati i analiza...................................................................................................................... 20
Predlog poboljšanja interfejsa.................................................................................................... 24
5. Zaključak .................................................................................................................................. 25
6. Literatura.................................................................................................................................. 26

3. 1.Uvod
U današnje vreme tokom razvoja informacionih sistema 50% vremena razvoja se
utroši za razvoj korisničkog interfejsa, a preostalih 50% za ostale delove sistema.
Otud je evidentno da je porastao uticaj i vrednost korisničkog iskustva u oblastima
web ili desktop aplikacija. Korisničko iskustvo nije vezano za unutrašnji rad sistema
ili usluga, već funkcionise spolja, gde je korisnik direktno u kontaktu sa samim
sistemom, na samom interfejsu i podrazumeva sve aspekte interakcije krajnjeg
korisnika sa nekim sistemom ili proizvodom. Dizajn korisničkog iskustva je proces
unapređenja zadovoljstva korisnika s određenim proizvodom, kojise ostvaruje kroz
poboljšanje upotrebljivosti, pristupačnosti, informacijske arhitekture, vizualnog
dizajna i dizajna interakcija. Dizajn korisničkog iskustva često se bavi pitanjima
konteksta. Estetski dizajn osigurava da dugme web aplikacije ima privlačan oblik i
teksturu. Funkcionalni dizajn osigurava da se pokrene odgovaraću akcija nakon
klika korisnika. Dizajn korisničkog iskustva osigurava da estetski i funkcionalni
aspekti dugmeta rade u kontekstu ostatka aplikacije i onoga što korisnik pokušava
da postigne, postavljajući pitanja: "Da li je dugme premalo za važnost funkcije" i
"Da li dugme na pravom mestu u odnosu na ostale dugmiće i informacije web
aplikacije?". Svaki pokušaj poboljšanja korisničkog iskustva ima za cilj efikasnost.
Ona u suštini dolazi u dva ključna oblika: pomažućiljudima da rade brže i pomažu
da oni prave što manje grešaka. Poboljšanje efikasnosti korisničkog interfejsa
poboljšava produktivnost i upotrebljivost u celini. Što je manje vremena potrebno
za ispunjavanje zadatog zadatka više se aktivnosti može završiti za jedan dan. U
skladu sa starim pojmom da je vreme novac, uštedom vremena ispunjavanja
zahteva direktno se prevodi u štednju novca. Poboljšanja korisničkog interfejsa se
rade i kroz samu evaluaciju korisničkog interfejsa primenom analiza odgovarajućim
metodama. U daljem nastavku rada biće prikazana evaluacija korisničkog interfejsa
sajta www.sportsdirect.com. Korišćene su metoda Heuristička evaluacija
korisničkog interfejsa, Cognitive walktrough i Thinking Aloud.

4. 2. Korisnički interfejs
Grafički korisnički interfejs (енгл. Graphical User Interface (GUI), i okruženje)
je softversko okruženje koje omogućava korisniku adekvatnu komunikaciju sa
kompjuterom koristeći prethodno definisane funkcije. Grafički korisnički interfejs je
način čovekovog komuniciranja sa kompjuterom koji koristi prozore, ikonice i
menije kojima se može manipulisati mišem ili tastaturom.
Začeci grafičkog korisničkog intefejsa se mogu naći još kod Vanevar Buša,
naučnika i futuriste koji je radio za Massacuhsetts Institute of Tecnology
(MIT) tokom Drugog svjetskog rata. Bush je 1945. godine kostruisao
mašinu Memexkoja je mogla da organizuje i klasifikuje članke iz stručnih časopisa.
Memex je trebalo da predstavlja informacijski sistem za metodično sortiranje teksta
po principu relacija nastalih na ideji Bushovih asocijacija.
Većina hardverskih uređaja takođe sadrži i korisnički interfejs, iako obično nije tako
složen kao kod softvera. Uobičajeni primer hardverskog uređaja sa korisničkim
interfejsom je daljinski upravljač. Tipični TV daljinski upravljač ima numeričku
tastaturu, dugmad za jačinu zvuka i izbor kanala, tastere za isključivanje zvuka i
paljenje/gašenje, ulazni selektor i druge tastere koji obavljaju različite funkcije.
Ovaj skup dugmadi i način na koji su postavljeni na kontroleru čini korisnički
interfejs. Ostali uređaji, kao što su digitalni fotoaparati i stereo sistemi, takođe
imaju korisnički interfejs.
Iako korisnički interfejs može biti dizajniran za hardver ili softver, većina korisničkih
interfejsa je kombinacija oba. Na primer, za kontrolu softverskog programa, obično
morate koristiti tastaturu i miš koji imaju svoj korisnički interfejs. Isto tako, za
kontrolu digitalnog fotoaparata, možda ćete morati navigirati kroz menije na
ekranu, što je softverski interfejs. Bez obzira na aplikaciju, cilj dobrog korisničkog
interfejsa je da bude user-friendly. Na kraju krajeva, svi znamo koliko frustrirajuće
može biti korišćenje uređaja koji ne funkcioniše onako kako želimo.

5. 3. Heuristička evaluacija
Heuristička evaluacija (predložena od strane Nielsen-a I Molich-a 1992 godine) je
metoda za bržu, jeftiniju i jednostavnu proveru evaluacije korisničkog interfejsa. U
procesu evaluator prolazi kroz proučavanje i pregledanje stranica uz donošenje
zaključaka koje se temelje na opšte prihvaćenim principima web upotrebljivosti. Cilj
je otkriti problem kako bi se isti mogli iznova testirati i proveravatiu procesu razvoja
(pošto je ovaj metod evaluacije veoma jednostavan za primenu, poželjno ga je
koristiti u ranim etapama izrade dizajna) ili izmene web stranice. Heuristička
evaluacija ne bi trebalo da zameni testiranje upotrebljivosti. Iako se heuristika
odnosi na kriterijume koji utiču na upotrebljivost vašeg sajta, pitanja koja su
identifikovana u heurističkom vrednovanju su različite od onih pronađenih u testu
upotrebljivosti. Prednosti heurističke evaluacije: mogu pružiti neke brže i relativno
jeftine povratne informacije dizajnerima, mogu se dobiti povratne informacije u
ranoj fazi dizajna, dodeljivanje tačne heuristike može pomoći pri predlaganju
najboljih korektivnih mera dizajnerima, može se koristiti sa drugim metodama
analize upotrebljivosti, može se proizvestianaliza upotrebljivosti kako biste dodatno
ispitali potencijalna pitanja. Mane heurističke evaluacije: potrebno je znanje i
iskustvo kako bi efikasno primenili heuristiku, ponekad je teško pronaći obučene
stručnjake i mogu biti vrlo skupi, trebalo bi koristiti više stručnjaka i agregirati
njihove rezultate, evaluacija može identifikovati više manjih problema i manje
glavnih problema.
10 Nilsenovih heuristika:
1. Vidljivost statusa sistema: Korisnik bi uvek trebalo da bude informisan o
tome šta se dešava, putem odgovarajućih povratnih informacija u
razumnom roku.
2. Povezanost između korisničkog interfejsa i stvarnog sveta: interfejs
bi trebao govoriti jezik korisnika, sa rečima, frazama i konceptima poznatim
korisniku, a ne sistemski orijentisanim terminima. Prateći konvencije iz
realnog sveta činimo da se informacije javljaju u prirodnom i logičkom
poretku.
3. Korisnička kontrola i sloboda: Korisnici često izaberu sistemske funkcije
pogrešno i potreban je jasno označeni "izlaz u slučaju nužde" kako bi
napustili neželjeno stanje bez potrebe za proširenim dijalogom.
4. Konzistentnost i standardi: Korisnici ne bi trebali da se pitaju da li različite
reči, situacije ili akcije znače istu stvar. Potrebno je pratiti konvencije
platforme.
5. Prevencija grešaka: Još bolje od dobrih poruka o grešci je pažljiv dizajn
koji sprečava pojavu problema na prvom mjestu. Potrebno je ili uklonite
uslove pogrešne za greške ili ih proveriti i predstavite korisnicima sa opcijom
potvrde pre nego što se korisnik opredeli za akciju.
6. Prepoznavanje ispred sećanja: Minimizacija opterećenja korisnika
memorije kroz kreiranje vidljivih objekata, akcija i opcija. Korisnik ne bi
trebalo da pamti informacije iz jednog dela dijaloga u drugi. Uputstva za
upotrebu sistema trebaju biti vidljiva ili lako dostupna kada god je to
moguće.

6. 7. Fleksibilnost i efikasnost korišćenja: akceleratori - koje korisnik
početnik ne vidi - mogu često ubrzati interakciju za stručnog korisnika tako
da sistem može da zadovoljava i neiskusne i iskusne korisnike. Potrebno je
dozvoliti korisnicima da prilagođavaju često korišćene akcije.
8. Estetski i minimalistički dizajn: dijalozi ne bi trebalo da sadrže
informacije koje su irelevantne ili retko potrebne. Svaka dodatna informacija
u dijalogu se nadmeće sa relevantnim informacijama i smanjuje njihovu
relativnu vidljivost.
9. Pomozite korisnicima da prepoznaju, dijagnoziraju i oporave se od
grešaka: poruke o grešci treba da budu izražene na uproščenom rečniku
(bez koda), precizno ukazuju na problem i konstruktivno predlažu rešenje.
10.Pomoć i dokumentacija: Iako je bolje da se sistem može koristiti bez
dokumentacije, možda će biti potrebno pružiti pomoć i dokumentaciju.
Potrebno je da se svaka takva informacija (ne prevelikog obima) može lako
pretražiti, fokusirajući se na zadatak korisnika, uz navođenje konkretnih
koraka koje treba sprovesti.
Definicija zadataka i akcija
rb Scenario Opis Lista zadataka
1 Kreiranje
korisničkog naloga
na sajtu
sportsdirect.com
Korisnik se nalazi na početnoj
stranici. Potrebno je da unese sve
tražene podatke.
Popunjavanje polja
za registraciju
2 Pretraga proizvoda Korisnik se nalazi na početnoj
stranici.
Potrebno je da pretraži svu mušku
obuću.
Popunjavanje polja
za pretragu.
3 Filtriranje liste
proizvoda
Korisnik se nalazi na stranici
pretrage, Potrebno je da pretraži
svu mušku obuću (broj 44), raspona
cena između 20 i 40 € sortira cene
rastuće.
Prikaz proizvoda po
određenom
kriterijumu
(manipulisanje
filterima).
4 Odabir proizvoda i
ubacivanje
proizoda u
korpu(kupovina)
Korisnik se nalazi na stranci
proizvoda, potrebno je da proveri
izgled artikla izabere boju, veličinu
(potrebno je da korinsik proba da
zaboravi da izabere nešto od
navedenog) i doda artikal u korpu.
Dodavanje
proizvoda u korpu.

7. 6 Korisnički servis i
pomoć
Korisnik se nalazi na stranici
artikla.Potrebno je da korisnik
pronađe Help komandni link i pročita
upustva o veličinama artikala,
uslovima pošiljke i načinu plaćanja.
Postavljanje pitanja
tehničkoj podršci
7 Plaćanje i način i
uslovi isporuke
Korisnik se nalazi na stranici
potrošačke korpe, potrebno je da
ispuni niz koraka popunjavajući
razne forme ne bi li pružio
informacije vezane za plaćanje i
isporuku.
Plaćanje izabranih
artikala.
Evaluaciju izvodi ekspert. Trajanje evaluacije: 60min. Potrebno je da ekspert uradi
prethodno definisane taskove.
Cilj heurističke evaluacije i analiza
Cilj prethodno navedenih zadataka je da se ispita usklađenost sistema sa
prethodno pomenutim heuristikama i heurističkom evaluacijom oceni korisnički
interfejs i predlože rešenja koja bi poboljšala korisnički interfejs omogućila
korisnicima bolji ugođaj celog sistema i poboljšala efikasnost. U nastavku sledi
analiza korisničkog interfejsa po heuristikama.
Vidljivost statusa sistema
Uočeno je da nakon registracije nema nikakve povratne infromacije da li je
potrebno verifikovati mejl, ili poruke o uspesno realizovana registraciji. Korisnik se
nakon registracije automatski vrati na početnu stranu i ne zna da li ulogovan da li
može da kupuje ili ne. Tek nakon klika na Account u gornjem desnom uglu se može
primetiti da je korisnik ulogovan(Slika 1).
Slika 1. Prikaz posle registracije

8. Povezanost između korisničkog interfejsa i stvarnog sveta
Ekspert je primetio da prilikom nakon izbora određenog artikla obuće postoji
mogućnost pregleda artikla u “3D” okruženju uz pomoć opcije 360 View gde je uz
pomoć slajdera moguće rotirati artikal i omogućiti korisniku da vidi kako artikal
izgleda u stvarnom svetu i na taj način se lakše odluči na kupovinu (slika 2).
Slika 2. Realističan prikaz artikla - 360 View
Pomoć korisnicima da prepoznaju, dijagnoziraju i oporave se od grešaka
Nakon izbora željenih artikala u okviru same potrošačke korpe je moguće proveriti
pojedinačnu i sumarnu cenu ali korisnik ima mogućnost i da promeni veličinu ili
količinu artikala i na taj način prepozna, dijagnozira grešku i izvrši blagovremenu
korekciju.
Slika 3. Izlged potrošačke korpe

9. Nakon izvšavanja zadataka i akcija ekspert došlo je do problema sa serverom i
izbacivanja poruke o grešci. Poruka ne prati heuristiku iz podnaslova i ne predlaže
korisniku akciju za oporavak od greške, takođe poruka sadrži i određeni kod:
Reference itd koja dodatno zbunjuje korisnika. (Slika 4)
Slika 4. Poruka o grešci nakon problema sa serverom
Korisnička kontrola i sloboda
Nakon izbora željenih artikala u okviru same potrošačke korpe, takođe moguće je
u bilo kojem trenutku uklonuti artikal iz korisničke korpe uz pomoć komandnog
linka Remove i na taj način omogućiti korisniku izlaz u slučaju nužde (označen
crvenim ovirom: slika 3). Ekspert je primetio da u toku niza koraka u kojima se
popunjavaju forme sa informacijama vezanih za placanje i isporuku postoji izlaz u
slučaju nužde (slika 5- obeležen crvenim okvirom) koji omogućava odustanak i
slobodan izlaz korisniku.
Slika 5. Niz koraka za izvršenje plaćanja izabranih artikala

10. Konzistenstnost i standardi
Nakon sto se iz padajućeg menija sa slike 1. izabere Edit password dobija se
prikaz sa slike 6. Možese primetiti odstupanje od konzistentnostiu nazivu akcije
za promenu lozinke i da je potrebno da i u meniju i formi bude isti naziv (change
password ili edit password).
Slika 6. Prikaz forme za promenu lozinke
Nakon što korisnik klikne na navigacioni meni “Mens” otvara se stranica (slika 7)
na kojoj je nestala ikonica potrošake korpe i dugme “Checkout” za završetak
kupovine, na ovaj način dolazi do odstupanje od konzistentnostikorisničkog
interfejsa.
Slika 7. Odstupanje od konzistentnosti – stranica Mens
Prevencija grešaka
Na slici 6 je moguće videte napomenu da lozinka mora biti minimum 6 karaktera i
da mora da sadrži bar jedno veliko, malo slovo i broj. Ova napomena je
prevencija greške izbora passworda i omogućava korisniku da ubrza i olakša
registraciju ili promenu lozinke.

11. Fleksibilnost i efikasnost korišćenja
Nakon osnovne pretrage muške obuću mogu se uočiti filteri koji omogućavaju bržu
i efikasniju pretragu, omogućavajući detaljniju pretragu po brendu, boji veličini I
opsegu cena (slika 8). Ova napredna pretraga uz sortiranje po želji korisnika brže
korisnika navigira do željenog artikla.
Slika 8. Filteri za efikasniju pretragu
Estetski i minimalisticki dizajn
Ekspert je primetio da navigacioni meni (slika1) sadrži nekoliko naziva podmenija
koji imaju slično značenje (Running, Sports, Outdoor, Football) i da su možda neki
od ovih podmenija irevelantni i retko potrebni i da se sve može smestitipod Sports.
Takođe se može primetiti da mnogi od podmenija: mens, ladies, kids (primer mens
- slika 9) sadrže u sebi sekcije za football, sports itd. koje su već prikazane u
glavnom navigacionom meniju što se kosi sa heuristikom iz podnaslova. Takođe se
može primetiti da su sami podmeniji nepregledni i teško razumljivi sa lošim
prikazom i nagomilavanje informacija što može dovesti do smanjivanja relativne
vidljivosti, zbunjivanja korisnika i smanjene zainteresovanostiza samu kupovinu.

12. Slika 9. Izgled navigacionog podmenija
Pomoć i dokumentacija
Prilikom izbora navigacionog linka “Help” iz hedera sa vrha strane otara se korisnički
servis sa dokumentacijom i upustvima vezanim za registraciju, izbor veličina,
praćenje pošiljke i ostale moguće probleme (slika 10). Na ovaj način je ispoštovana
heuristika iz podnaslova ali se stiče utisak da je za sajt ovog renomea potreban
realtime sistem korisničke podrške koje bi moglo da brže reši pojedine korisničke
probleme i pospeši efikasnost.
Slika 10. Delimičan izgled korisničkog servisa
Predlog poboljšanja interfejsa
Nakon analize korisničkog interfejsa heurističkom evaluacijom stiče se utisak da je
dobro projektovan za svoju svrhu (globalna prodaja sportske opreme ogromnog
asortimana robe za razne profile klijenata) i da omogućava relativno dobru
upotrebljivost. Kao što je već delimično pomenuto upotrebljivost analiziranog

13. sistema bi se mogla pospešiti: dodavanjem chat sistema korisničke podrške,
dodavavanjem dodatnih navigacionih menija u podmenije i na taj način boljim
grupisanjem omogućiti korisniku bolju relativnu vidljivost informacija,
sinhrnoizovanje naziva komandnog linka za promenu lozinke i naslova same forme
za izmenu, omogućavanje da naziv navigacionog padajućeg menija Account u
stvari bude korisničko ime i na taj način pruži bolju informaciju korisniku o stanju
sistema, naročito prilikom prve registracije. Takođe je potrebno rešiti problem
nestajanja potrošačke korpe i dugmeta “Checkout” na stranici mens, kao i problem
nedovoljne podrške korisniku u slučaju greške.
3. Cognitive walkthrough metoda
Cognitive walkthrough metoda je razvijena početkom devedesetih od strane
Whartona i saradnika, i postigla je veliku publikativnu upotrebljivosti kada je
objavljena kao poglavlje u knjizi Jakob-a Nielsen o upotrebljivosti, "Usability
Inspection Methods". Cognitive walkthrough je metoda procene upotrebljivosti u
kojoj jedan ili više evaluatora kroz niz zadataka postavljaju niz pitanja iz
perspektive korisnika. Fokus kognitivnog pristupa je na razumijevanju sposobnosti
učenja i prilagođavanja kod novih korisnika ili korisnika koji (na primer) vrlo retko
posećuju web sajt i koriste sistem. Cognitive walkthrough je prvobitno dizajniran
kao sredstvo za procenu prolaznih i korištenih sistema poput poštanskih kioska,
automatskih bankomata i interaktivnih eksponata u muzejima gdje korisnici imaju
vrlo malo ili ništa od obuke. Međutim, cognitive walkthrough metoda se uspešno
koristi sa složenijim sistemima poput CAD softvera i alata za razvoj softvera kako
bi se razumelo prvo iskustvo novih korisnika sa sitemom.
Prednosti:
1. Može se uraditi bez inicijalnog pristupa korisnicima.
2. Za razliku od nekih metoda analize upotrebljivosti, eksplicitno se uzima u
obzir zadatak korisnika.
3. Pruža predloge kako poboljšati sposobnost učenja upravljanjem sistemom
4. Može se primijeniti u bilo kojoj fazi razvoja.
5. Brza je i jeftina ako se primeni u streamline form-i.
Nedostaci:
1. Vrednost podataka je ograničena veštinama evaluatora.
2. Teži da daje relativno površnu i usku analizu koja se fokusira na reči i
grafiku koja se koristi na ekranu.
3. Metoda ne daje procjenu o učestalosti ili ozbiljnosti identifikovanih
problema.
4. Pratećenje metode po pravilima, koja su istaknuta u istraživanju, može da
bude vrlo naporno.

14. Cognitive walkthrough metoda počinje sa analizom taskova, kojisu određeni nizom
koraka ili akcija koje se zahtevaju od korisnika da uradi tokom testiranja. Ekspert
prolazi kroz taskove, postavljajući sebi set pitanja u svakom koraku. Tokom
ispitivanja cognitive walkthrough metoda fokus stavlja na pitanja: Hoće li korisnik
ići ka pravom cilju? Da li će korisnik uočiti da su potrebne akcije dostupne? Hoće li
korisnik povezati neophodne akcije sa ciljem koji želi da postigne? Ako se izvrši
prava akcija, hoće li korisnik biti svestan napretka? Tokom odgovaranja na ova
pitanja tokom svakog taska, problemi sa upotrebljivošću sistema će lako biti
uočeni, da bi se u nekoj od sledećih faza rešili boljom implementacijom.
Plan testiranja
U cognitive walkthrough metodi evaluiranja korisničkog interfejsa mogu
učestvovati eksperti za usability ili softver developeri. S obzirom da se testiranje
bavi analizom efektivnosti sistema a ne njegovom efikasnošću ili zadovoljstvom
korisnika nije potrebno angažovatikorisnike sistema. Evaluacija će trajati 1 sat.
Definisanje zadataka i akcija
Definisani su sledeći zadaci i akcije koje je potrebno izvršiti za komepletiranje tih
zadataka:
RB Zadatak Opis Lista zadataka
1 Pronalazak artikla
muške obuće sa
najvećim
popustom
Korisnik se nalazi na stranici
pretrage i potrebno je da
dodatno sortira artikle i
pronađe mušku obuću na
najvećem popustu.
- Kliknuti na padajući meni
“Sort” i izabrati komandni
link “Discount (High to Low)”.
2 Dodavanje
željenog artikla u
potrošačku korpu
Korisnik se nalazi na stranici
željenog artikla i potrebno je
da artikal ubaci u potrošačku
korpu
Izaberati boju, veličinu i
količinu željenog artikla i
kliknuti na komandni link
“Add to bag”.
3 Pronalazak
korisničkog
servisa
Korisnik se nalazi na početnoj
stranici i treba da uoči link
koji vodi ka korisničkom
servisu(Help).
Kliknuti na link “Help” (deo
header-a stranice)
4 Dodavanje
željenog artikla u
listu želja
(wishlist)
Korisnik se nalazi na stranici
željenog artikla i potrebno je
da artikal ubaci u listu želja
-Izaberati boju, veličinu i
količinu željenog artikla i
kliknuti na komandni link
“Add to wishlist”.
5 Pregled stanja
korpe sa
mogućnošću
izmene
Korisniku treba da izvrši
pregled stanja korpe
Kliknuti na dugme
“Checkout” u gornjem
desnom uglu.

15. Prolazak kroz zadatke i akcije
U nastavku su odgovorieksperta na pitanja cognitive walkthrough metode vezana
za prethodno definisane zadatke i akcije.
1. Pronalazak artikla muške obuće sa najvećim popustom
1. Hoće li korisnik ići ka pravom cilju,
tj. rešavati problem u pravom smeru
Da
2. Da li će korisnik uočiti da su
potrebne akcije dostupne?
Da
3. Hoće li korisnik povezatineophodne
akcije sa ciljem koji želi da postigne?
Da
4. Ako se izvrši prava akcija, hoće li
korisnik biti svestan napretka?
Da
2. Dodavanje željenog artikla u potrošačku korpu
1. Hoće li korisnik ići ka pravom cilju,
tj. rešavati problem u pravom smeru
Da
2. Da li će korisnik uočiti da su
potrebne akcije dostupne?
Da
3. Hoće li korisnik povezatineophodne
akcije sa ciljem koji želi da postigne?
Da
4. Ako se izvrši prava akcija, hoće li
korisnik biti svestan napretka?
Da
3. Pronalazak korisničkog servisa
1. Hoće li korisnik ići ka pravom cilju,
tj. rešavati problem u pravom smeru
Da
2. Da li će korisnik uočiti da su
potrebne akcije dostupne?
Ne
3. Hoće li korisnik povezatineophodne
akcije sa ciljem koji želi da postigne?
Da
4. Ako se izvrši prava akcija, hoće li
korisnik biti svestan napretka?
Da
4. Dodavanje željenog artikla u listu želja (wishlist)
1. Hoće li korisnik ići ka pravom cilju,
tj. rešavati problem u pravom smeru
Da
2. Da li će korisnik uočiti da su
potrebne akcije dostupne?
Ne
3. Hoće li korisnik povezatineophodne
akcije sa ciljem koji želi da postigne?
Da
4. Ako se izvrši prava akcija, hoće li
korisnik biti svestan napretka?
Ne

16. 5. Pregled stanja korpe sa mogućnošću izmene
1. Hoće li korisnik ići ka pravom cilju,
tj. rešavati problem u pravom smeru
Da
2. Da li će korisnik uočiti da su
potrebne akcije dostupne?
Da
3. Hoće li korisnik povezatineophodne
akcije sa ciljem koji želi da postigne?
Ne
4. Ako se izvrši prava akcija, hoće li
korisnik biti svestan napretka?
Da
Analiza dobijenih rezultata i predlog rešenja
Nakon testiranja korisničkog interfejsa pri rešavanju postavljenih zadataka
uočeno je nekoliko loših rešenja:
1) Kod zadatka pronalaska korisničkog servisa korisnik će uspeti da
pronađe i izvrši akciju međutim “Help” link nije dovoljno dobro istaknut i
korisniku će biti potrebno vreme da ga pronađe čime gubimo na
upotrebljivosti samog korisničkog servisa. Predlog rešenja je bolje
isticanje(boja) i lociranje “Help” link-a (potencijalno neposredno pored
dugmeta “Checkout”).
2) Kod zadatka dodavanja željenog artikla u listu želja (wishlist) korisnik
možda neće uspeti da uoči komandni link “Add to wish list” jer izgleda slično
kao obična labela i nije dovoljno dobro istaknut dok je dugme “Add to bag”
previse dominantno. Predlog rešenja je bolje isticanje(boja) komandnog
linka “Add to wish list” takođe je možda potrebno uokviriti sam komandni
link ne bi li dobio formu dugmeta. Takođe nakon klika na komandnilink “Add
to wish list” dolazi do povećanja broja u wish list-u i neprimetne poruke u
okviru naziva komandog linka, kupac nije svestan statusa sistema. Predlog
rešenja je bolje je da postoji uočljivija poruka koja bi obavestila korinika o
dodavanju artikla u listu zelja.
3) Kod zadatka pregled stanja korpe sa mogućnosti izmene natpis na
dugmetu: “Checkout”, ne odgovara adekvatno cilju koji korisnik želi da
postigne. Predlog rešenja je da se natpis na dugmetu preimenuje u ”Show
my bag” jer je i naslov bodija strane koja se otvara ”My bag ”.

17. 4. Thinking Aloud
Metoda Thinking Aloud je jedna od najznačajnijih metoda za evaluaciju
upotrebljivosti. Thinking Aloud metoda ima svoje korene u psihološkim
istraživanjima. Razvijena je od stare metode introspekcije. Introspekcija se zasniva
na ideji da se mogu posmatrati događaji koji se odvijaju u svesti, kao što se mogu
posmatrati događaji u stvarnom svijetu. Ova metodu je u polje evaluacije
upotrebljivosti sistema prvi uveo Klejton Luis prilikom rada za IBM, sa tim u vezi
objavljen je i rad: “TaskCentered User Interface Design: A Practical Introduction by
C. Lewis and J. Rieman”. Metoda je razvijena na osnovu tehnika i analize protokola
od strane Eriksona i Sajmona. Metoda podrazumeva da u eksperimentu učestvuju
ispitanici koji koriste sistem i da tokom korišćenja sistema rešavaju problem po
problem, razmišljajući naglas. Pre početka zadataka je bitno da korisnici pročitaju
naglas set instrukcija i na taj način izvrše pripremu za testiranje. Od korisnika se
zahteva da verbalizuju sve što vide, razmišljaju i osećaju, kao i akcije koje izvode
dok izvršavaju postavljeni zadatak. Takođe je potrebno neprimetno podsetiti
korisnika ukoliko prestane sa verbalizacijom akcija koje se izvršavaju. Komentari
koje korisnik daje su najbolji, bitno je da se korisnik ne usmerava sa direkntim
pitanjima kao što je “Zašto si to uradio?”. Test sesije se snimaju što učesnicima u
razvoju aplikacije ili proizvoda omogućava uvid u korisničke akcije i načine na koji
korisnici reaguju. Verbalizacijom onoga o čemu razmišljaju, ispitanici nam
omogućavaju uvid u to kakav je njihov doživljaj sistema. Na ovaj način se mogu
lako identifikovati nedostaci sistemu koje se odnose na pogrešno razumevanje od
strane korisnika i videti kako korisnici interpretiraju svaku stavku interfejsa.
Thinking Aloud metoda može da se primeni u bilo kom ciklusu razvoja korisničkog
interfejsa, na samom početku (npr. paper prototyping), pa sve do konačne
implementacije korisničkog interfejsa.
Prednosti Thinking Aloud metode:
1. pronalazi mnoge usability probleme,
2. utvrđuje zašto se ovi problemi događaju,
3. mali broj testiranih korisnika (3 do 5),
4. moguće primeniti metodu u ranom u procesu razvoja sistema,
5. zahteva malo administrativne ekspertize.
Nedostaci Thinking Aloud metode:
1. razmišljanje naglas može uticati na ponašanje korisnika u toku rešavanja
problema,
2. ne može da pruži podatke o performansi i statističke podatke (bottom-line
podatke)
3. nemogućnost oslonjanja na korisnička objašnjenja (Maier, Nisbett)

18. Plan testiranja
Za testiranje je od opreme potreban računar, na kom će se i realizovati testiranje.
Potrebno je da računar ima pristup na internet, jer će se vršiti testiranje web sajta.
U testiranju će učestvovati 2 ispitanika. Svaki ispitanik će imati sat vremena da
odgovori na taskove uz prisustvo lica koje vodi projekat i beleži sve rezultate.
Testiranje će se obaviti 22.04.2018. sa početkom u 18h i20h. Svaki ispitanik će
imati svoj termin. U ispitivanju će učestvovati dve osobe starosti 26-30 godina.
Cilj testa: Evaluacija upotrebljivosti korisničkog interfejsa. U toku testiranja biće
sniman zvuk ali i sam ekran (screen recording) kako bi se u toku analize dobili što
bolji podaci o greškama korisnika.
Sprovođenje testiranja
Prilikom testiranja, biće potrebno da korisnici reše sledeće taskove:
Rb Scenario Opis Lista Zadataka Akcije potrebne za
izvrsavanje
1. Registracija
na web sajtu
Registracija
korisnika na web
sajtu
www.sportsdirects.
com
Potrebno je da
korisnik otvori
stranicu za
registraciju i
popuni
registracionu
formu.
• Otvoriti browser (Chrome)
• Ukucati
www.sportsdirect.com
• Pronaći link Sign in gornjem
desom uglu stranice
o Kliknuti na link Sign in
• Pronaci sekciju new
Customers
o Kliknuti na dugme
Continue
• Popuniti registracionu formu
o Kliknuti na dugme
Register - potvrditi
registraciju
2. Pronalazenje
proizvoda
Korisnik je ulogovan
nalazi se na
pocetnoj stranici
sajta. Trebalo bi da
koriscenjem
pretrage sajta
pronadje određeni
proizvod.
Pronaci proizvod:
zenska obuća –
ladies shoes
• Pronaci polje za pretragu
o Ukucati kljucne reči: ladies
shoes
Filtrirati
proizvode po
boji(white),
veličini 6(39).
• Fokusirati se na filter: Refine
by
o U padajućem meniju
Colour čekirati belu boju
white.
o U padajućem meniju Size
čekirati veličinu 6 (39)
Sortirati
proizvode po
rastućoj ceni
(Price Low to
High)
• Pronaci padajući meni sa
labelom(nazivom) Sort
o Kliknuti na padajući meni
o Kliknuti na opciju Price
(Low To High)
3. Kupovina
proizvoda i
dodavanje
proizvoda u
listu želja
Korisnik je
ulogovan i izvršio
zadatke vezane za
pronalaženje
proizvoda.
Selektovanje
najpovoljnijeg
proizvoda i
pregled
proizvoda
o Kliknuti na prvi proizvod iz
liste koji zadovoljava
zadate filtere
o Pregledati artikal kroz
prikaz slika iz više uglova

19. Potrebno je da
izabere
najpovoljniji
proizvod iz
sortirane liste, i
izvrsi ubacivanje u
korpu istog.
o Kliknuti na link 360 View
iznad slike artikla
o Slajderom ispod slike
kontrolisati prikaz artikla
Popunjavanje
forme i
dodavanje artikla
u korpu doavanje
artikla u listu
želja, pregled
liste želja.
• Pronaci formu za kupovinu u
desnom delu ekrana
o Selektovati veličinu (Size)
6(39)
o Selektovati količinu: 2
artikla (Quantity)
o Kliknuti na dugme “Add to
bag”
o Selektovati veličinu (Size)
5
o Selektovati količinu: 1
artikal (Quantity)
o Kliknuti na link “Add to
wish list”
o Kliknuti na link “Wish list”
u gornjem desnom uglu
stranice
4. Pregled
stanja
korpe i
izvršavanje
kupovine
Korisnik je
ulogovan na sajtu i
ubacio je želeni
artikal u korpu.
Potrebno je da
izvrši pregled
stanja korpe, izvrši
potrebnu korekciju
a zatim izvrši niz
koraka vezanih za
adresu i placanje.
Pregled i
korekcija stanja
korpe (smanjiti
količinu artikala
na 1)
• Pregledati stanje tabele My
bag
o Kliknuti na dugme
Checkout u gornjem
desnom uglu stranice,
o Klinuti na – u koloni Qty,
tabele My bag
o Kliknuti na dugme Update
u koloni Size tabele My
bag ili u dnu tabele
Kupovina
proizvoda
• Pronaći Order summary
sekciju stranice
• Kliknuti na dugme Continue
Securely
• Popuniti formu Delivery
Options
• Kliknuti na Continue
Securely
• Čekirati Express Delivery
• Kliknuti na Continue
Securely
• Kliknuti na Pay with Card
• Popuniti formu sa podacima
iz internet kartice koju
dobija ispitanik
• Kliknuti na dugme continue
• Klikomi na dugme Pay now
se izvršava transakcija (na
kartici nema sredstava)

20. 5. Pristup
korisničkom
servisu
Korisnik je
ulogovan na sajtu i
izvršio je plaćanje.
Potrebno je da
pristupi
korisničkom
servisu i pošalje
poruku korisničko
servisu.
Pristupanje
korisničkom
servisu
• Pronaći Help link, gornji
desni ugao stranice
o Kliknuti na Help Link
desnom uglu stranice
Slanje poruke
korisničkom
servisu
• Pronaći Contact us sekciju
stranice u desnom delu
stranice
o Kliknuti na link contact
form
• Pronaći Subject padajući
meni, centralni deo stranice
o Kliknuti na padajući meni
o Izabrati “Orders: Can i
cancel my order?”
o Upisati proizvoljni broj u
tekst polj Order number
o Upisati poruku “How can I
cancel my order, if i had
ordered it 2 days ago?” u
tekstualni prostor ”Enter
your message”
o Kliknuti na dugme Submit
Rezultati i analiza
Nakon što ispitanici završe obavljanje prethodno definisanih taskova, beleže se
detaljne analize rezultata rada ispitanika, kao i problemi sa kojima su se ispitanici
susreli. Na osnovu analize dobićemo jasnu sliku onoga što treba da se poboljša u
postojećem sistemu. Rezultati ispitivanja su sledeći:
Scenario Ispitanik 1 Ispitanik 2
1.
Registracija
na web sajtu
Rešavanje
zadatka
Uspešno Rešavanje
zadatka
Uspešno
Vreme
izvršenja
6:57 Vreme
izvršenja
7:59
Komentari i
problemi
korisnika
 Lep dizajn i jasno
istaknuti popusti(
problem orjentisanost
sajta ka muškoj
populaciji(veća
količina popusta))
 Neuobičajen naziv
dugmeta za pristup
stranici za
registraciju
(Continue)
 Korisnik nije uspeo iz
prvog puta da nadje
Sign in link.
 Ispitanik nekoliko
puta pokušao da
uradi copy-paste
Komentari i
problemi
korisnika
 Ispitanik se žalio na
previse sitan font i
nepreglednost.
 Ispitanik nije primetio
poruku kojom je
objašnjena sekcija za
nove korisnike, nije
uobičajena naziv za
registraciju novih
korisnika.
 Previse sitan font
prilikom unosa email
adresa- nepregledno
 Greška ispitanika
prilikom skrolovanja
izbora godine rođenja,
duže vreme potrebno

21. potvrđivanja naziva
mejla i tek što je
video da to nije
moguće ručno
prekucao mejl
 Ispitanik nije bio
svestan šta se desilo
nakon završetka
registracije
da izabere pravu
godinu
 Ispitanik nije primetio
uslove kako lozinka
treba da izgleda i
izabrao neadekvatnu
lozinku
 Ispitanik zbunjen
nakon završetka
registracije, kliknuo na
padajući meni Account
2.
Pronalazenje
proizvoda
Rešavanje
zadatka
Uspešno Rešavanje
zadatka
Uspešno
Vreme
izvršenja
4:51 Vreme
izvršenja
3:47
Komentari i
problemi
korisnika
 Ispitanik teže
pronašao korisničku
pretragu. Prilkom
kretanja kursora
aktivirao se
navigacioni meni i
sa mnosto teksta i
reklama zbunjivao
ispitanika.
 Lepa preglednost
pretrage proizvoda.
 Problem sa izborom
veličine, u filteru
upisane samo
engleske mere
veličine
 U listi proizvoda su
razni dezeni
proizvoda a ne
samo željeni beli
Komentari i
problemi
korisnika
 Ispitaniku potrebno
duže vreme da
pronađe belu boju,
nekoliko puta vukao
slajder gore dole
 Ispitaniku je zasmetalo
što su za veličine
upisane samo engleske
mere
 Lep prikaz ispitanik
napomenuo da se lako
snalazi
3.
Kupovina
proizvoda i
dodavanje
proizvoda u
listu želja
Rešavanje
zadatka
Delimično uspešno Rešavanje
zadatka
Delimično uspešno
Vreme
izvršenja
6:41 Vreme
izvršenja
7:56
Komentari i
problemi
korisnika
 Teško lociranje 360
View linka
 Ispitaniku se sviđa
realističnost prikaza
obuće 360 view
 Korisnik nije locirao
akciono dugme (-)
za smanjivanje
količine, već se
dosta mučio i na
kraju problem rešio
direktnim unosom
broja.
Komentari i
problemi
korisnika
 Ispitanik prvobitno
izabrao artikal koji ima
samo jednu sliku i
nema opciju 360 View
 Ispitanika prilikom
prikaza slika artikla
prvo zbunjivalo što
prilikom samog
prelaska kursorom
preko malih sličica
dolazi do promene
glavne slike, a

22.  Nakon klika za
dodavnje u wish
listu, ispitanik nije
bio svetan akcije,
nakon toga klinuo
još nekoliko puta
ispitanik je isprva
pokušavao da klikne
 Lep prikaz 360 view
vidi se iz svih uglova
 Nekoliko puta kliknuta
pogrešna veličina
pojavila- previse slabo
obeleženo selektovano
polje, samo kvačica
 Ispitanik nije bio
svestan akcije nakon
dodavanja u listu želja,
stranica je bila
skrolovana nije video
promenu broja artikala
u listu želja
4.
Pregled
stanja korpe
i izvršavanje
kupovine
Rešavanje
zadatka
Neuspešno Rešavanje
zadatka:
Uspešno
Vreme
izvršenja
11:45 Vreme
izvršenja
13:35
Komentari i
problemi
korisnika
 Ispitanik je u okviru
opcija isporuke
mogao da izabere
samo Irleand kao
zemlju isporuke.
Nakon dužeg
pokušavanja da
ispravi grešku,
ispitanik je nastavio
sa Irskom kao
državom isporuke.
 Korisnik greškom
kliknu na Pay with
PayPal
 Forma je nakon
izbora adrese
automatski popunila
polja Town, State,
Postcode, ali i
contact number od
prethodno
registrovanog
korisnika na sajtu,
što je zbunilo
ispitanika koji je
morao da briše
kontakt broj i unosi
novi.
 Ispitanika zbunilo
pojavljivanje
Delivering i Billing
adrese nakon
Komentari i
problemi
korisnika
 Ispitanika zbunilo što
se prelaskom na
dugme checkout
pojavilo stanje korpe,
pa je sačekao neko
vreme pre klika
 Ispitaniku zasmetalo
što umesto Quantity u
tabeli My Bag pise Qty,
a ima mesta, prilikom
izbora količine je bio
ceo naziv
 Ispitanik greškom
zalutao u navigacioni
meni
 Ispitanik nezadovoljan
što i nakon registracije
ponovo mora da
popunjava iste
podatke u formu
 Korisnik u okviru polja
za adrese pretraživao
države i zastave, nisu
sve adrese ponuđene
već samo za veća
mesta.
 Kada se unosi broj
kartice nije
ispoštovana forma sa
razmacima kao što je
na pravoj kartici

23. samog potvrđivanja
kupovine.
 Nejasno sta je Issue
number kod unosa
podataka sa kartice
 Lak prolazak kroz
korake plaćanja i
opcija isporuke, lepo
objašnjeno, kod
poslednjeg koraka lep
prikaz adrese, artikala
iz korpe cene
5.
Pristup
korisničkom
servisu
Rešavanje
zadatka:
Uspešno Rešavanje
zadatka:
Neuspešno
Vreme
izvršenja
2:51 Vreme
izvršenja
3:33
Komentari i
problemi
korisnika
 Ispitanik kliknuo na
Contact us umesto
na contact form
 Ispitanik se požalio
na preglednost
Contact us forme,
trebalo mu je neko
vreme da pronađe
Subject padajući
meni
 Pozitivan komentar
ispitanika na
povratnu
informaciju “Your
Message was
Succesfully Sent!”
Komentari i
problemi
korisnika
 Ispitaniku iskočio
navigacioni meni
prilikom kretanja
kursora ka Help linku
 Nepregledna stranica
korisničkog servisa
previse informacija
odjednom
 Ispitanik kliknuo
Contact us u okviru
tabele Customer
Services pa tek onda
Contact form
 Nakon unosa broja
pošiljke ispitanik
stisnuo enter (primetio
da mora da se vrati da
bi saznao pravi broj
isporuke) i poslao
poruku bez tela
poruke, a dobio je
obaveštenje o
uspešnom slanju
poruke

24. Predlog poboljšanja interfejsa
1. Ispitanici su nekoli puta imali problem sa iskakanjem navigacionog menija
prilikom samog prelaska kursora preko njega, predlog rešenja da navigacioni meni
reaguje samo na klik a ne na prelazak kursora. Takođe je potrebna i bolja
organizacija samih navigacionih podmenija.
2. Povećati font i vidljivost dodatnih informacija i samih instrukcija koje
korisnik teško uočava prilikom popunjavanja formi ili prilikom kupovine.
3. Promeniti Sign In stranu, staviti veći focus na registraciju, naslov New
Custumer preimenovatiu Register New Customer, preimenovatidugme ove sekcije
umesto Continue u Register.
4. Pri filtriranju proizvoda po veličini potrebno je omogućiti vidljivost izbora i
po engleskom i evropskom standardu veličina npr Size 6(39).
5. Potrebna je bolja organizacija stanice korisničkog servisa, uz bolju
preglednost. Takođe je potrebno onemogućiti slanje poruke korisničkom servisu
sa praznim telom.
6. Potruditi se da nakon filtriranja artikala budu prikazani samo artikli koji su
definisani filterom (pojavljuju se druge boje iako je filtrirana samo bela). Svaki
artikal obuće bi trebalo da ima nekoliko slika i mogućnost 360 View (trenurno nije
slučaj). Takođe je potrebna vidljivije rešenje promene količine artikala sa (+ i -)
prilikom dodavanja u korpu i promena naziva kolone Qty tabele My Bag u Quantity
čime se održava konzistentnost.
7. Izmeniti način unosa adrese (trenutno rešenje ima bagove) isporuke
prilikom koraka zaključivanja kupovine. Potrebno je da forma unosa adrese
isporuke preuzme deo informacija koje je korisnik uneo prilikom registracije kako
bi se izbeglo duplo kucanje.
8. Kod unosa podataka sa platne kartice prilagoditi formu unosa podataka
stvarnom izgledu podataka na samoj kartici (veza sa stvarnim svetom) i bolje
objasniti ili izbaciti polje Issue number.

25. 5. Zaključak
U ovom radu je realizovana evaluacija korisničkog interfejsa sajta
www.sportsdirect.com. Nad postojećim korisničkim interfejsom, izvršeno je
ispitivanje upotrebljivosti sistema korišćenjem više metoda. Korišćene su metode:
Heuristička evaluacija interfejsa, Cognitive Walktrought metoda, i Thinking Aloud
metoda. Prve dve metode pripadaju grupi ekspertskog testiranja, dok poslednja
metoda pripada grupi testiranja nad korisnicima. Kao rezultat ispitivanja mogli smo
da uočimo da se korisnici snalaze relativno dobro na postojećem korisničkom
interfejsu i da interfejs dobro služi svojoj svrsi: lak pregled, filtriranje i kupovina
artikala uz lep dizajn i prigodan utisak. Nakon analize podataka dobijene iz svake
metode dati su predlozi rešenja koja bi poboljšala korisnički interfejs povećala
upotrebljivost i dovela do povećanog zadovoljstva korisnika, što bi se odrazilo na
efikasnost samog sajta i povećani broj korisnika.

26. 6. Literatura
• https://sr.wikipedia.org/wiki/Grafi%C4%8Dki_korisni%C4%8Dki_interfejs
• https://techterms.com/definition/user_interface
• http://www.usabilitybok.org/think-aloud-testing
• http://www.nngroup.com/articles/ten-usability-heuristics/
• "Thinking Aloud: The #1 Usability Tool", J. Nielsen, 16. Januar 2012
• https://www.usability.gov/how-to-and-tools/methods/heuristic-
evaluation.html
• https://www.interaction-design.org/literature/article/how-to-conduct-a-
cognitive-walkthrough
• Qualitative Evaluation, Dr Saul Greenberg, Univ. Calgary
• http://www.nngroup.com/articles/thinking-aloud-the-1-usability-tool/
• Evaluacija upotrebljivosti web aplikacije metodama Thinking Aloud i Focus
Group, Mirko Stupar, Vladimir Petrović, Visoka škola elektrotehnike i
računarstva strukovnih studija Beograd