1.UVOD. Ključne reči: upotrebljivost, praćenje, korisnički interfejs, aplikacija

Transcription

1 EVALUACIJA UPOTREBLJIVOSTI KORISNIČKOG INTERFEJSA VEB APLIKACIJA UZ POMOĆ METODA ZA AUTOMATSKO PRIKUPLJANJE PODATAKA O KORIŠĆENJU EVALUATION USABILITY OF USER INTERFACE WEB APPLICATIONS BY METHODS FOR AUTOMATIC DATA COLLECTION ON USING Predrag Krstojević, Fakultet Organizacionih Nauka, pkrstojevic@gmail.com Miloš Milovanović, Fakultet Organizacionih Nauka, milos.milovanovic@fon.bg.ac.rs Marija Bogićević Sretenović, Fakultet Organizacionih Nauka, marija.bogicevic@fon.bg.ac.rs Apstrakt: Razvojem novih tehnologija u računarstvu kao i samih aplikacija, sve više se posvećuje pažnja korisniku, tako da je nastalo projektovanje interfejsa okrenuto korisniku. Ustanovljeno je da postoji korelacija između tačke gledanja i pozicije kursora miša na ekranu, tj. korisnik tokom korišćenja aplikacije pogledom prati kursor na ekranu. Kako evaluacija korisničkog interfejsa iziskuje dosta resursa u laboratorijskim uslovima, osmišljene su i implementirane metode za automatsko praćenje korisnika tokom korišćenja veb aplikacija. U ovom radu biće predstavljeni problemi prilikom praćenja korisnika na internetu, postojeće metode za praćenje korisnika tokom korišćenja veb aplikacija, kao i razvijeno novo rešenje upotrebom savremenih tehnologija. Razvijena aplikacija za praćenje korisnika na internetu sastoji se iz tri celine: klijentske skripte za praćenje korisnika, servera za obradu podataka i admin panela za evaluaciju korisničkog interfejsa. Ključne reči: upotrebljivost, praćenje, korisnički interfejs, aplikacija Abstract: With development of new technologies in IT and new applications, more and more attention is focused on user and in that way is developed projecting of interface targeted for user. It has been acknowledged that there is correlation between point of watching and position of cursor on the mouse on screen, so user during using of application follows cursor on the screen by eyes. As evaluation of user interface requires plenty of resources in laboratory conditions, it has been defined and implemented methods for automatic tracking users, during using of web applications. In this paper, it will be presented problems during tracking users on internet, existing methods for tracking users during using of web applications and also developed new solution by using of modern technologies. Developed application for following of internet users is having three parts: clients script for following user, server for data processing and admin panel for evaluation of users interface. Key words: usability, tracking, user interface, application 1.UVOD HTTP (eng. HyperText Transfer Protocol) je mrežni protokol koji pripada sloju aplikacije OSI referentnog modela, predstavlja glavni i najčešći metod prenosa informacija na vebu. Osnovna namena ovog protokola je isporučivanje HTML dokumenata, tj. veb stranica. Veb strana sastoji se od objekata, tj. HTML fajla, JPEG slika, Java apleta, video zapisa kojim je moguće pristupiti jedinstvenim uniformnim lokatorom resursa (eng. Uniform Resource Locator, URL) [1]. HTTP je protokol za komunikaciju između servera i klijenta, koji funkcioniše po principu zahtev i odgovor. HTTP klijent, koji je najčešće veb pregledač, inicira prenos podataka nakon što uspostavi TCP/IP vezu s udaljenim veb-serverom na određenom portu. Problem prilikom praćenja korisnika jeste nedostatak stanja u HTTP protokolu, tj. kada klijent zatraži fajlove od veb servera, on šalje tražene fajlove bez čuvanja bilo kakvih podataka o stanju korisnika. Ukoliko korisnik zatraži ponovo iste fajlove u roku od nekoliko sekundi, ponovo šalje traženi objekat klijentu bez znanja da je to već jednom učinio. U računarstvu protokol bez stanja je komunikacioni protokol koji tretira svaki zahtev kao nezavisnu transakciju. Pošto HTTP server ne održava nikakve informacije o klijentima, za protokol HTTP se kaže da je protokol bez stanja (eng. stateless protocol) [1]. Ovako koncipiran HTTP protokol u mnogome otežava praćenje korisnika na internetu, jer ne čuva nikakve informacije, kao na primer o vremenu provedenom na veb aplikaciji, prethodno posećenim stranicama ili autorizovanim korisnicima. Međutim, nedostatak stanja u HTTP protokolu je moguće nadomestiti u samim veb aplikacijama, korišćenjem HTTP kolačića, čuvanjem sesija na serveru, sakrivenim elementima u HTML formama, čuvanjem informacija u bazi podataka i slično. Pored HTTP protokola, postoji još niz problema i ograničenja koje neomogućavaju sasvim lako praćenje korisnika na internetu kakav danas poznajemo. Jedan od najvećih problema prilikom praćenja korisnika jeste određivanje jedinstvenog korisnika prilikom posete veb

2 stranice. Iako javna IP adresa na internetu jeste jedinstvena, ona se ne može koristiti za određivanja jedinstvenog korisnika, primarno zbog široke upotrebe NAT (eng. Network Address Translation, NAT). NAT ruteri omogućavaju upotrebu jedinstvene IP adrese za više korisnika. Takođe, još jedan od razloga zašto IP adresa nije pogodan način za određivanje jedinstvenog korisnika jeste dinamičko dodeljivanje IP adresa pomoću protokola DHCPa (eng. Dynamic Host Configuration Protokol). DHCP omogućava da računar automatski dobije privremenu IP adresu koja će biti zamenjena nakon nekog perioda. Problem jedinstvenog korisnika, čini se, nije moguće nikada prevazići u potpunosti, osim ukoliko veb aplikacija nema implementaciju registracije korisnika [2]. 2.PREGLED STANJA U OBLASTI Veb tehnologije za praćenje korisnika su široko primenjene na internetu u današnje vreme. Ove tehnologije se koriste za prikupljanje, skladištenje i povezivanje ponašanja korisnika tokom korišćenja veb aplikacija. Testiranje upotrebljivosti veb aplikacija ima široku primenu, ali zahteva dosta kako ljudskih resursa, tako i materijalnih, iz ovih razloga razvijeni su sistemi za automatsko praćenje korisnika u cilju evaluacije korisničkog interfejsa [3]. Evaluacija upotrebljivosti je proces koji podrazumeva mnogo aktivnosti u zavisnosti od metode koje se koristi, neke on najčešćih aktivnosti su [2]: Snimanje (eng. Capture) prikupljanje podataka o korišćenju (vreme završetka zadatka, greške, odstupanja od korisničkog toka) Analiza (eng. Analysis) tumačenje prikupljenih podataka Kritika (eng. Critique) predlozi za poboljšanje i prevazilaženje problema Merenje korisničkog iskustva i veb analitika su savršeni spoj. Trenutno merenje interakcija korisnika na veb aplikacijama je moguće izvršiti pomoću različitih metoda, kao što su: Logovanje zahteva na veb serveru od strane veb pretraživača (eng. Web server log analysis). Uobičajene informacije koje se mogu prikupiti korišćenjem ove metode su: o Datum i vreme transakcije o IP (eng. Internet Protocol) adresa korisnika o Operativni sistem i veb pretraživač korisnika o Prethodna veb adresa sa koje korisnik došao na trenutnu stranicu o Trenutna stranica ili traženi fajl Analitička praćenje korisnika na strani klijenta pomoću skripti (eng. client-side scripting-based analysis tools). U današnje vreme veoma rasprostranjena metoda, doprinela je boljem razumevanju ponašanja korisnika na veb aplikacijama zbog prirode podataka koje se prikupljaju. Omogućava širok spektar informacija koje se prikupljaju na strani klijenta, kao što su rezolucija ekrana, verzija veb pretraživača, operativni sistem, funkcije dostupne veb pretraživaču kao što su kolačići (eng. cookies), događaji prilikom korišćenja veb pretraživača i drugo. Ova metoda se bazira na kodu (najčešće napisanom u JavaScript programskom jeziku) koji se postavlja na svakoj stranici unutar veb aplikacije. Kada se veb stranica učita na klijentskoj strani, ova skripta počinje svoje izvršavanje i šalje prikupljene podatke na server. Praćenje pokreta očiju korisnika (eng. Eye tracking) Ova metoda zahteva laboratorijske uslove za tesiranje i praćenje korisnika, pre svega zato što je potreban specijalni hardver koji prati pokrete očiju. Praćenje korišćenja kursora i tastature na strani klijenta (eng. Mouse and keyboard tracking) Pomoću ove metode snima se korišćenje miša i tastature prilikom upotrebe veb aplikacije. Najčešće se sastoji od skripte na strani klijenta koja prikuplja podatke o korišćenju i šalje na udaljeni server koji kasnije obrađuje ove podatke. Hibridni model Sastoji se od kombinacije prethodno navedenih modela 2.1 Identifikacija korisnika Poznati problem u oblasti praćenja korisnika jeste identifikacija jedinstvenih korisnika. Svaki računar na internetu ima IP adresu koja se koristi za rutiranje podataka. Međutim, ove IP adrese se mogu lažirati zamenom druge IP adrese na određeni vremenski period. Većina IP adresa se dinamički menja ili postoji jedna javna IP adresa za računarsku mrežu koja se sastoji od više od jednog uređaja. Zbog ovog problema, potrebno je preduzeti dodatne mere identifikacije jedinstvenog korisnika. Postojeća rešenja za praćenje korisnika na klijentskoj strani koriste dodavanje JavaScript koda treće strane u HTML kod. 2.2 Praćenje korisnika i evaluacija korisničkog interfejsa Potrebe za shvatanjem korisnika dovode do praćenja korisnika na klijentskoj strani. Trenutno stanje u oblasti se bazira na upotrebi skript programskih jezika implementiranih na osnovu ECMAScript specifikacije. Danas svakako najpopularnija implementacija jeste JavaScript koji je ugrađen u sve moderne pretraživače (Google Chrome, Mozilla Firefox, Opera, Microsoft IE i Edge). Praćenje korisnika na klijentskoj strani najčešće obuhvata snimanje upotrebe kursora miša i/ili tastature. Za prikupljanje podataka o korišćenju veb aplikacije nije potreban nikakav dodatni hardver ili posebna podešavanja na strani klijenta. Istraživanjem literature, korisnost praćenja korisnika na

3 internetu je očigledno kroz istraživanja koordinacije očiju i miša [4] [5], veb pretraživanja [6] i ponašanja korisnika tokom čitanja [7]. Podaci prikupljeni pomoću aplikacije za praćenje korisnika mogu se podeliti u sledeće grupe [8]: Podaci iz sesije (eng. Session data) Ovi podaci uključuju identifikator sesije, internet pretraživač, operativni sistem i IP adresu korisnika Podaci o pretraživanju (eng. Browsing data) Predstavljaju podatke o naslovu stranice, metod zahteva (get ili post), adresu stranice (URL), parametre i veličinu stranice izraženu u bajtovima Podaci o događajima (eng. Event data) Čine skup akcija izvršenih na interejsu na osnovu događaja, npr. klik mišem na dugme Podaci o DOM-u (eng. DOM data) Ovi podaci uključuju naziv elementa na stranici i njegove atribute (id, class, title, data, value itd.) Podaci o zadacima (eng. Task data) Odnose se na serverske resurse potrebne za obavljanje određenih zadataka, npr. učitavanje početne stranice Razumevanje načina klasifikacije korisnika može biti od pomoći prilikom merenja upotrebljivosti. Autori su u ekperimentu došli do korelacije između pogleda korisnika i pomeraja kursora na ekranu. Takođe, iz ove studije se može zaključiti da četiri od šest kvantitativnih podataka može biti prikupljeno pomoću metoda za praćenje korisnika i tim automatizovati proces evaluacije interfejsa. 3.OPIS APLIKACIJE ZA EVALUACIJU INTERFEJSA VEB APLIKACIJA UZ POMOĆ AUTOMATSKOG PRIKUPLJANJA PODATAKA O KORIŠĆENJU 3.1 Korisnički zahtevi Potrebno je napraviti aplikaciju koja omogućava praćenje interakcije korisnika i veb aplikacije za potrebe evaluacije korisničkog interfejsa. Aplikacija treba da se sastoji iz tri celine: Klijentskog dela gde će se vršiti praćenje korišćenja Serverskog dela za čuvanje i obradu podataka Admin panela gde je moguće vršiti evaluaciju korisničkog interfejsa na osnovu prikupljenih podataka Admin panel treba da ima mogućnost registracije, a zatim i prijave korisnika na sistem. Svakom korisniku može biti dodeljen jedan domen prilikom registracije. U admin panelu treba omogućiti kreiranje anketa po pojedinačnoj stranici na klijentu. Da bi se pratili korisnici na određenoj veb aplikaciji, potrebno je da se učita skripta za praćenje koja se nalazi na serveru aplikacije za evaluaciju korisničkog iskustva. Reprodukciju sesije korisnika u obliku videa od pristupanja veb aplikaciji do završetka korišćenja Pregled korišćenja kursora kako svih korisnika, tako i prema pojedinačnom korisniku u obliku heatmap Pamćenje upotrebe tastature tokom korišćenja i pregled najčešće korišćenih tastera na tastaturi Pregled upotrebe skraćenica na tastaturi koje su implementirane u veb aplikaciji, kao i one koje nisu Prikaz rezultata anketa u obliku izveštaja Preuzimanje heatmape za svaku stranicu u obliku slike Pored ovih izveštaja, potrebno je pamtiti sistemska neprijatna korisnička iskustva, kao što su HTTP greške 404 i Arhitektura aplikacije Aplikacija za evaluaciju korisničkog interfejsa se sastoji iz tri celine. Prva celina je skripta za praćenje korišćenja napisana u JavaScript programskom jeziku koju je potrebno postaviti na veb stranicu za koju je potrebno meriti upotrebljivost. Druga celina jeste serverski deo koji je odgovoran za obradu i skladištenje dobijenih podataka. Podaci se skladište u dve vrste baze podataka. Prvu, relacionu bazu podataka gde se smeštaju struktuirani podaci u tabele, kao na primer podaci o internet pretraživaču, IP adresa korisnika i slično. U drugu vrstu, nerelacionu, bazu podataka smeštaju se nestruktuirani podaci koje nije potrebno menjati tokom vremena, odnosno potrebno je samo vršiti operacije čitanja iz baze podataka nakon njihovog unosa. Treća celina aplikacije, jeste admin panel gde se stakeholder prijavljuje na sistem sa jedinstvenim korisničkim imenom i svojom lozinkom. Nakon uspešne prijave korisnik ima informacije o broju klijenata, snimcima korišćenja aplikacije, vizuelnih mapa pokreta kursora. Admin panel komunicira sa prethodne dve celine, odnosno od serverskog dela dobija prikupljene podatke i prikazuje ih u obliku izveštaja, a od skripte za praćenje dobija informacije o stranicama. Preduslov za praćenje korisnika jeste da HTML stranica kojoj korisnik pristupa sadrži link ka skripti za praćenje. Ukoliko je ovaj uslov ispunjen, podaci o korišćenju se šalju na server za prikupljanje i obradu podataka. Istovremeno, ukoliko je stakeholder ulogovan na admin panelu, on može da prati ponašanje korisnika na veb stranici. Ovi podaci se čitaju sa servera za prikupljanje i obradu podataka. Na Slici 1 je prikazana arhitektura predloženog rešenja. Aplikacija treba da sadrži interaktivne izveštaje o korišćenju veb aplikacije. Potrebno je implementirati sledeće izveštaje:

4 Korisnik Boostrap okvir i JavaScript programski jezik. Za kontrolu verzije koda na serverskoj i klijentskoj strani korišćen je Git Komunikacija pomoću HTML5 poruka JavaScript kod za praćenje korisnika Laravel okvir Rutiranje Kontroler Pregled aktivnosti korisnika tokom korišćenja veb aplikacije u admin panelu omogućen je korišćenjem HTML iframe-a i JavaScript poruka. Aplikacija za evaluaciju korisničkog interfejsa komunicira sa veb aplikacijom nad kojom se vrši evaluacija pomoću JavaScript poruka. Ove poruke se razmenjuju bez ograničenja polise zajedničkog porekla. Detaljan prikaz komunikacije između dve aplikacije prikazan je na Slici 2. Admin Prikaz Model MySQL Baza podataka { MongoDB } Slika 1. Arhitektura aplikacije za evaluaciju upotrebljivosti interfejsa veb aplikacija uz pomoć metoda za automatsko prikupljanje podataka o korišćenju 3.3 Klijentski deo Preduslov za praćenje korisnika jeste da se doda skripta na HTML stranicu koju je potrebno pratiti. Ova skripta ima sledeća zaduženja: Osluškivanje događaja koji se izvršavaju prilikom korišćenja veb aplikacije na kojoj se vrši evaluacija upotrebljivosti Prikupljanje i skladištenje prikupljenih podataka na računaru korisnika Slanje prikupljenih podataka na server putem AJAX-a Komunikacija sa admin panelom za evaluaciju korisničkog interfejsa 3.4 Serverski deo Serverski deo se sastoji iz logike za obradu i skladištenje podataka, kao i admin panel za prikaz prikupljenih podataka u obliku izveštaja. Serverski deo je zadužen za: prihvatanje zahteva dobijenih od klijenta obradu i prosleđivanje podataka komunikaciju sa bazama podataka rad sa korisnicima prikaz podataka u obliku izveštaja 3.5 Tehnologije Tehnologije korišćene prilikom razvoja aplikacije na serverskoj strani su PHP programski jezik sa Laravel okvirom, MySQL i Mongo baze podataka i Vagrant box sa virtuelnom mašinom, dok je na klijentskoj strani korišćen Slika 1 - Komunikacija aplikacije za evaluaciju korisničkog interfejsa i veb aplikacije nad kojom se vrši evaluacija Kao što je na slici prikazano, komunikacija se obavlja po principu zadatak-odgovor, tj. jedna od strana šalje zadatak drugoj koji je potrebno uraditi, tada druga strana izvršava zadatak i odgovara porukom. Na primer, aplikacija za evaluaciju korisničkog interfejsa šalje zadatak i parametre veb aplikaciji da je potrebno skrolovati stranicu unutar iframe-a na određenu poziciju. 3.6 Model i baze Kompletni podaci o korišćenju (klikovi, skrol, pomeraji kursora itd.) smeštaju se u nerelacionu bazu podataka, jer se ovi podaci neće menjati kroz vreme, dok se svi ostali podaci čuvaju u relacionoj bazi podataka. Podaci o klikovima na stranici iz relacione baze podataka se keširaju na fajl sistemu kako bi se smanjio broj poziva ka bazi podataka. 4.PRIMER KORIŠĆENJA Za potrebe testiranja i prezentacije rada aplikacije za evaluaciju korisničkog interfejsa postavljena je Magento Community Edition veb platforma za prodaju na internetu koja dolazi kao softver otvorenog koda.

5 4.1 Registracija i prijava korisnika Aplikacija za evaluaciju korisničkog interfejs zahteva registraciju korisnika. Korisnik aplikacije mora da unese svoje podatke, domen na kome je potrebno pratiti korisnika i svoju lozinku. Nakon uspešne registracije, korisnik je automatski prijavljen na sistem. Ponovnim dolaskom na admin panel aplikacije za evaluaciju korisničkog interfejsa, korisnik mora da se prijavi na sistem unosom svoje adrese i lozinkom. 4.2 Pregled korisnika Uspešnom prijavom na sistem, korisniku se prikazuje lista korisnika koja je pristupila veb aplikaciji nad kojom se vrši evaluacija korisničkog interfejsa. Dostupne informacije o korisnicima su: veb pretraživač, verzija veb pretraživača, IP adresa, zemlja korisnika, kao i lista svih posećenih stranica po korisniku. Klikom na ikonu kamere, administrator pristupa snimku sesije test korisnika za izabranu stranicu Toplotna mapa kretanja kursora Izveštaj o kretanju kursora predstavljen je u obliku toplotne mape. Najčešće posećene površine na ekranu obojene su crvenom bojom, srednje posećene narandžastom bojom, najmanje zelenom bojom, dok transparentne površine predstavljaju površine gde korisnici nisu pomerali kursor. Analizom ovog izveštaja može se saznati kako korisnici čitaju veb stranicu Toplotna mapa klikova Izveštaj o mapi klikova prikazuje najčešće tačke gde su korisnici upotrebili taster na mišu. Ovim izveštajem može se shvatiti korisnikova percepcija veb stranice, na primer da li su korisnici kliknuli na važne linkove ili čak da li su kliknuli na površine koje nemaju nikakvu akciju Toplotna mapa korišćenja tastature Izveštaj o korišćenju prikazuje najčešće korišćene tastere na tastaturi. Aplikacija za evaluaciju korisničkog interfejsa prepoznaje korišćenje prečica na tastaturi, time administratori mogu da shvate koje prečice su korisnicima intuitivne tokom korišćenja aplikacije Toplotna mapa skrolovanja Izveštaj toplotne mape skrolovanja prikazuje koliko su korisnici skrolovali na određenoj veb stranici. Ovaj izveštaj može da pokaže koliko je korisnika videlo ili nije uopšte videlo neki sadržaj. Na primer, nakon analize, može se zaključiti da je potrebno podići neki važan sadržaj ili link na vrh stranice, jer većina korisnika ih ni ne vidi. Najvažniji izveštaj prilikom evaluacije korisničkog interfejsa jeste video korišćenja veb aplikacije. Ovaj izveštaj u potpunosti reprodukuje korišćenje veb aplikacije korisnika, 5.ZAKLJUČAK U ovom radu napravljen je pregled metoda za praćenje korisnika na internetu, kao i metoda za automatsko prikupljanje podataka tokom korišćenja. Pored već postojećih metoda za praćenje korisnika, predloženo je i novo rešenje koja se oslanja na koncepte metode za praćenje korišćenja kursora i tastature na strani klijenta. Predstavljen je značaj korišćenja metoda za automatsko prikupljanje podataka u evaluaciji korisničkog interfejsa. Na osnovu istraživanja trenutnih rešenja u oblasti, kao i novih tehnologija, razvijena je JavaScript biblioteka za praćenje korišćenja veb aplikacija. Implementirano rešenje koristi savremene mogućnosti internet pretraživača koje omogućavaju prevazilaženje ograničenja prilikom praćenja korisnika na strani klijenta. Takođe, razvijena je veb aplikacija za obradu prikupljenih podataka i admin panel za prikaz obrađenih podataka u obliku izveštaja. U planu je dalji razvoj i optimizacija aplikacije, kroz mogućnost upotrebe još neke od metoda za prikupljanje podataka o korisniku. Što se tiče daljeg razvoja aplikacije u planu je i integracija sa alatima za veb analitiku. Prikupljanje podataka o korisniku i njegovom ponašanju na internetu je uveliko u upotrebi u marketinške svrhe. Na primer, društvene mreže poput Foursquare-a koriste informacije o lokaciji korisnika za marketinšku segmentaciju korisnika [9]. Međutim, u oblasti merenja upotrebljivosti korisničkog interfejsa može se očekivati povećanje upotrebe metoda za automatsko prikupljanje podataka, kao i stvaranje inteligentnih sistema koji prepoznaju greške na korisničkom interfejsu. REFERENCE [1] J. F. Kurose and W. K. Ross, Umrežavanje računara od vrha ka dnu, Amherest: CET, [2] D. Chaffey, F. Ellis-Chadwick, K. Johnston and R. Mayer, Internet Marketing, England: Pearson Education, [3] M. O. K.-i. M. Mikio Kiura, "Webjig: An Automated User Data Collection System," in 13th International Conference, HCI International, San Diego, [4] A. Ranganathan, "cross-site xmlhttprequest with CORS," mozilla, [Online]. Available: [Accessed ]. [5] J. Bešter, A. Kos and U. Sedlar, "Tracking Mouse Movements for Monitoring Users' Interaction with Websites: Implementation and Applications," in Electrotechnical Review, Ljubljana, [6] R. e. a. a. Spiro, Eye-mouse coordination patterns on web search results pages, -: Proceedings of the extended abstracts on Human factors in computing systems (CHI EA), 2008.

6 [7] W. R. W. a. D. S. Huang J., No clicks, no problem: Using cursor movements to ununderstand, -: Proceedings of the SIGCHI conference on Human factors in computing systems (CHI), [8] F. a. L. A. Mueller, Cheese: tracking mouse movement activity on websites, a tool for user modeling, -: CHI '01 extended abstracts on Human factors in computing systems, [9] EC, "Opinion 13/2011 on Geolocation services on smart mobile devices," Data Protection Working Party, Vols. -, no. -, pp , 2011.