RAZVOJ MOBILNE UPORABNIŠKE IZKUŠNJE NA PRIMERU VREMENSKE APLIKACIJE

Transkripcija

1 UNIVERZA V MARIBORU FAKULTETA ZA ELEKTROTEHNIKO, RAČUNALNIŠTVO IN INFORMATIKO Davor Val Vega RAZVOJ MOBILNE UPORABNIŠKE IZKUŠNJE NA PRIMERU VREMENSKE APLIKACIJE Diplomsko delo Maribor, marec 2017

2

3 RAZVOJ MOBILNE UPORABNIŠKE IZKUŠNJE NA PRIMERU VREMENSKE APLIKACIJE Diplomsko delo Študent(ka): Študijski program: Mentor: Davor Val Vega Visokošolski študijski program Računalništvo in informacijske tehnologije doc. dr. Matej Črepinšek, univ. dipl. inž. rač. in inf. I

4 ZAHVALA Rad bi se zahvalil svojemu mentorju doc. dr. Mateju Črepinšku za vso pomoč in odlične nasvete ob študiju. Zahvala gre tudi moji ženi Ani za neizmerno podporo in vsakodnevno vzpodbudo ob pisanju diplomskega dela, staršem ki so mi omogočili študij ter sodelavcem v podjetju TFStoritve d.o.o. II

5 III

6 IV

7 V

8 Razvoj mobilne uporabniške izkušnje na primeru vremenske aplikacije Ključne besede: uporabniška izkušnja, android, vreme, material design UDK: 004.5: (043.2) Povzetek: Na trgu je čedalje več razvijalcev programske opreme, posledično pa tudi aplikacij, ki ne dajejo poudarka dobri uporabniški izkušnji. To lahko prestavlja težavo, saj je uporabniška izkušnja mejnik med oblikovanjem in funkcionalnostjo in je velik del tega, kar uporabniki v aplikaciji dejansko opazijo. Če je ta del dober, lahko uporabnika privabimo, večja verjetnost je, da ga obdržimo kot zvestega uporabnika, lažje pa ga tudi prepričamo v nakup. VI

9 VII

10 Developing a Mobile User Experience: a Case Study of a Weather Application Key words: user experience, android, weather, material design UDK: 004.5: (043.2) Abstract: Development community is rapidly growing. That means that number of applications is growing. High percentage of this applications do not have a strong user experience. This by itself can have a serious impact on retention, because functionality and user experience are what users notice most. If this is the part we do well, the success is almost guaranteed. Users will notice good user experience and they will most probably buy into our app and stay loyal customers. VIII

11 IX

12 KAZALO 1 UVOD WEATHERLOVE UPORABNIŠKA IZKUŠNJA Kaj je uporabniška izkušnja? Zgodovina uporabniške izkušnje Primer uporabniške izkušnje iz narave Primer dobre uporabniške izkušnje na primeru popularne aplikacije Weatherlove Timeline Material Design Barvne palete Ikone Tipografija Komponente Material Design-a RAZVOJ UPORABNIŠKE IZKUŠNJE Analitika produkta Google Play Console Google Analytics Analiza konkurenčnih produktov Prisluh uporabnikom (ankete, komentarji, blog) Google Google Play Console Vprašalniki Uporabniški testi Psihološki vpliv Izboljšanje uporabniške izkušnje s psihološko analizo Lokalizacija Proces prevajanja UPORABNOST Ergonomija Pripomočki za ljudi s posebnimi potrebami X

13 6 RAZVOJ Kodiranje z uporabo aplikacije Android Studio Implementacija uporabniškega vmesnika za konfiguracijo gradnikov Virne datoteke... Error! Bookmark not defined Razlaga mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi Drawable NinePatchDrawable ColorDrawable StateListDrawable Animation String SKLEP VIRI XI

14 KAZALO SLIK Slika 1: Weatherlove Slika 2: Weatherlove Slika 3: Weatherlove Slika 4: Weatherlove 2.0 gradniki... 4 Slika 5: Levo je prikazana prva računalniška miška [5], desno pa sodobna [6]... 7 Slika 6: Insekt obišče cvet [8]... 8 Slika 7: Glavni uporabniški vmesnik aplikacije Weather Timeline... 9 Slika 8: Primerjava gradnikov. Zgoraj Weather Timeline, spodaj Weatherlove Slika 9: Primer uporabe barvne palete v Layout-u [12] Slika 10: Dnevni prikaz z grafom temperature v aplikaciji Weatherlove Slika 11: Ikona aplikacije Weatherlove Slika 12: Primer različnih vrst Roboto tipografije Slika 13: Statistični prikaz verzij operacijskega sistema Android z nameščeno aplikacijo Weatherlove in aplikacij iz kategorije vreme Slika 14: Grafični prikaz namestitev aplikacije Weatherlove Slika 15: Trenutni delež uporabnikov aplikacije Weatherlove po državah Slika 16: Prikazuje primer bottom navigation [18] Slika 17: Foggov model [20] Slika 18: Posnetek zaslona Android Studio Slika 19: Primerjava implementacije Holo (levo) ter Material Design-a (desno) v konfiguratorju gradnikov Slika 20: Mapa/res z virnimi datotekami Slika 21: Drawable-i, ki smo jih narisali za potrebe aplikacije in jih postavili v /res/drawable-nodpi Slika 22: Primer bitne slike NinePatchDrawable Slika 23: Rezultat uporabe NinePatchDrawable, viden kot modra črta na gradniku 2x1 aplikacije Weatherlove XII

15 KAZALO IZVORNE KODE Primer kode 1: Vremenski pojavi v slovenščini Primer kode 2: Vremenski pojavi v ruščini Primer kode 3: NinePatchDrawable Primer kode 4: Metoda s katero smo narisali ozadje na gradnik Primer kode 5: ColorDrawable Shape, ki izriše krog Primer kode 6: StateListDrawable Primer kode 7: Animation resource Primer kode 8: String resource-i XIII

16 UPORABLJENE KRATICE UX - User Experience XML - extensible Markup Language API - Application Programming Interface ios - iphone Operating System MDPI - Medium Dots Per Inch HDPI - High Dots Per Inch NODPI - Density Independant Dots Per Inch LDPI - Low Dots Per Inch GIMP - GNU Image Manipulation Program DPI - Dots Per Inch MS - Milisekunda IDE - Integrated Development Environment XIV

17 XV

18 1 UVOD Skozi diplomsko delo bom predstavil svojo pot izdelave dobre aplikacije od začetka do delujočega prototipa. Ob tem bom izpostavil napake, ki sem jih naredil med delom in povedal, kako je to vplivalo na uspešnost projekta. Ob pisanju diplomskega dela sem opazil, da postaja to delo zbirka napotkov za mladega programerja, ki želi postaviti aplikacijo od samega začetka, na čim bolj vidno mesto, z najboljšo možno ergonomijo in potencialom. Bralec se bo spoznal z uporabniško izkušnjo, ki je ključna pri tem, ali bodo uporabniki aplikacijo naložili na svojo napravo, jo sprejeli in uporabljali. V biografiji Steva Jobsa user experience prevajajo kot uporabniško doživetje, kar sicer ni ustaljen prevod, vendar nam pokaže širšo sliko da uporabniška izkušnja ni le izkušnja, temveč celo doživetje, proces, saj predstavlja dojemanje in odzive človeka, ki uporablja produkt. Če se tega zavedamo, lažje razumemo faze razvoja produkta, jih povežemo z odzivi uporabnikov in tako hitreje ter učinkoviteje pridemo do končnega cilja aplikacije s čim boljšo uporabniško izkušnjo, ki uporabnika prepriča že v trgovini z aplikacijami (z ikono in opisom) in v kateri uporabniki zaradi dobrega doživetja preživijo več časa. Diplomsko delo ni garancija, saj sem še vedno v fazi učenja, je pa skupek uporabnih načel, ki lahko bralca pripeljejo do boljšega rezultata. 1

19 2 WEATHERLOVE Aplikacija Weatherlove (slike 1 do 4) je rezultat večletnega skupinskega dela pri podjetju TFStoritve d.o.o. Skozi diplomsko delo se bomo nanašali na ideje, statistike in izvorno kodo, ki je nastala za aplikacijo Weatherlove, zato se zdi pomembno, da aplikacijo predstavimo s kratkim uvodom. To je čudovita in enostavna Android aplikacija za prikaz vremenske napovedi za 14 dni, za kar do 10 krajev naenkrat, ki si jih lahko uporabniki na enostaven način dodajo sami. S preprostim prikazom prikaže vremenske podatke, kot so sončni vzhod in zahod, trenutno temperaturo ter občutek temperature, možnost padavin, moč ter smer vetra, zračni pritisk, vidljivost ter ostale manj uporabljene podatke, ki uporabnika utegnejo zanimati. Aplikacija je implementirana v Holo slogu (Holo je vizualni slog), a delno prehaja na Material Design (Material Design je nov vizualni slog, ki v celoti zamenja Holo). Skozi cikel aktivnosti aplikacije uporabniku sporoča trenutna vremenska stanja preko obvestil. Podpira Android operacijski sistem do trenutnega 7.1. Aplikacija je bila od začetka razvoja do danes nameščena na Android napravah in ima preko dnevno aktivnih uporabnikov. S pomočjo skupnosti je bila prevedena v več kot 10 jezikov. Spodaj so prikazani posnetki zaslonov aplikacije, ki je trenutno objavljena v trgovini Google Play. 2

20 Slika 1: Weatherlove 0.9 Slika 2: Weatherlove 1.0 3

21 Slika 3: Weatherlove 2.0 Slika 4: Weatherlove 2.0 gradniki 4

22 3 UPORABNIŠKA IZKUŠNJA 3.1 Kaj je uporabniška izkušnja? UX ali v slovenskem jeziku uporabniška izkušnja je koncept, ki vsebuje različne discipline: načrtovanje interakcije, načrtovanje vmesnika, uporabnost in informacijsko arhitekturo [1]. Naš poslovni cilj izboljšanja uporabniške izkušnje je bil povečati uporabnikovo zadovoljstvo, povečati njegovo zvestobo in mu ponuditi najboljšo interakcijo z aplikacijo. Definicijo uporabniške izkušnje lahko torej zapišemo, kot da je to proces načrtovanja in oblikovanja produkta, ki je uporaben in preprost za uporabo. Sam proces pa uporabnika usmerja, da uspešno doseže svoj cilj, pri čemer to stori efektivno in elegantno. Glede načrtovanja uporabniške izkušnje in načrtovanja vmesnikov je nekaj nejasnosti. Uporabniška izkušnja je to, kako produkt deluje, uporabniški vmesnik pa, kako produkt izgleda. Potujmo v čas, ko smo bili zadnjič v restavraciji in spomnimo se, kakšno hrano so ponujali. Zakaj smo se odločili ravno za tisto restavracijo? Kakšna je bila naša prva izkušnja s prostorom, ko smo vstopili v restavrcijo? Se spomnite, kako so vas sprejeli natakarji? Je bil jedilni list jasen? Je hrana prišla hitro? Je bil natakar prijazen? Je bila hrana dobra? Boste še šli nazaj? Vsi vaši občutki o restavraciji so posledica uporabniške izkušnje restavracije. 5

23 3.2 Zgodovina uporabniške izkušnje Začetek uporabniške izkušnje, ki jo obravnavamo v diplomski nalogi, opazimo pri pojavu prvih elektronskih naprav. Če pogledamo razvoj uporabniške izkušnje pri kalkulatorju jasno vidimo, kako je potekala evolucija. Od velikih in počasnih, vse do majhnih, hitrih naprav z možnostjo popravljanja formul. A glede na enciklopedije [2] dejanski začetki uporabniške izkušnje segajo v pozno 19. stoletje, ko se je pojavila rast korporacij. Tipična primera filozofije dobe strojev sta Winslow Taylor in Henry Ford, ki sta bila pionirja efektivnosti in produktivnosti človeškega dela. Taylorjeva raziskava o efektivnosti interakcij med delavci in njihovimi orodji je zagotovo predhodnik uporabniške izkušnje, kot jo poznamo danes. Izraz uporabniška izkušnja se je začel pojavljati v javnosti okoli leta 1990, ko je Donald Norman [3] spregovoril o tej takrat dokaj nepoznani znanosti v reviji Want Magazine. V prvi polovici 20. stoletja se je pojavilo novo področje ergonomija. Med svetovnima vojnama se je začela revolucija naprav, ki so čim bolj izkoriščale človekovo gibčnost. V sredini 20. stoletja je cvetela industrija efektivnost in človeška iznajdljivost v podjetjih kot je Toyota. Njihov produkcijski sistem z naslovom Toyota Production System je cenil efektivnost obenem pa je bil do delavcev spoštljiv in jih vpeljal v proces, s katerim so lahko sami izboljševali delovni proces. Ena ključnih vrednost Toyotine filozofije je bila spoštovanje ljudi, ta pa je vplivala na efektivnost in optimizacijo produkcijske linije. Eden od primerov uporabniške izkušnje je bila vpeljava vrvi, katero je lahko potegnil delavec in s tem zaustavil tekoči trak, nato pa razložil, kako lahko izboljšajo delovni proces. V približno istem obdobju so začele nastajati prve knjige, povezane z uporabniško izkušnjo, kot je npr. knjiga Henryja Dreyfussa z naslovom Designing for people. V njej so opisane metode, ki jih razvijaci uporabniške izkušnje uporabljajo še danes, kadar kreirajo produkte v skladu z željami uporabnikov. V knjigi je avtor zapisal: "Razvijalcu uporabniške izkušnje spodleti, kadar postane interakcija med uporabniki in produktom točka konflikta. Razvijalec uporabniške izkušnje pa je uspel, kadar interakcije z produktom za uporabnike varnejša, bolj udobna, bolj efektivna - to tudi pomeni, da jo bo uporabnik z večjim veseljem tudi kupil." [4] 6

24 V istem časovnem obdobju so tudi znanstveniki razvijali novo področje, imenovano kognitivna znanost. Kognitivna znanost združuje človekovo sposobnost kratkega spomina s koncepti umetne inteligence. Ti znanstveniki so poskušali z različnimi testi pridobiti podatke o tem, kako lahko računalnik izboljša človeške mentalne sposobnosti. Kar ljudem načeloma ni znano, je to, da je Xerox prvi iskal inovacije v računalništvu in jih našel kar nekaj, ki jih sedaj redno uporabljamo ob delu z računalniki in mobilnimi napravami. Razvili so računalniško generirane grafične bitne slike bitmap, prvi grafični vmesnik in celo miško. Slika 5: Levo je prikazana prva računalniška miška [5], desno pa sodobna [6] Glede na informacije iz Wikipedije lahko termin uporabniška izkušnja pripišemo podjetju Apple, ko se je v 90. letih prejšnjega stoletja psiholog Donald Norman pridružil podjetju. Njegov naziv je bil arhitekt uporabniške izkušnje. Če citiram njegove besede: "Ta termin sem izumil, ker sem videl, da je izraz vmesnik računalnik-človek preozek. S terminom sem želel zajeti vse, kar se tiče človekove izkušnje s produktom, vključno z industrijskim dizajnom, grafiko, vmesnikom, fizično interakcije in navodilom uporabe." [3] Danes je področje uporabniške izkušnje hitro rastoče, pozornost mu posvečajo tudi univerze z novimi programi, kot sta na primer univerza Stanford [32] in univerza na Dunaju, Technikum Wien Academy, s programom Master of Advanced Studies in User Experience [7]. 7

25 3.3 Primer uporabniške izkušnje iz narave Cvet je ustvarjen tako, da čimbolje privabi insekte in jim ponudi varno zavetišče za hranjenje, kar bralcu pokažemo na sliki 6. Z vonjem in barvo jih privabi in jim ponudi prijazno uporabniško izkušnjo. Cvet insektu ponudi hrano, obenem pa insekt ki nima občutka da vrača karkoli v zameno, opraši cvet iz katerega nato nastane plod. Slika 6: Insekt obišče cvet [8] 3.4 Primer dobre uporabniške izkušnje na primeru popularne aplikacije Weatherlove Timeline Google je z designersko smernico, ki jo je poimenoval Material Design poenotil izgled uporabniške izkušnje na platformi Android. Pred to smernico smo poznali smernico Holo, ki pa ni bila tako dovršena. S tem je Google nekoliko olajšal delo programerjem, ki po mojih izkušnjah nismo najbolj vešči dizajniranja aplikacij brez šablone. S šablono pa se izjemno poveča možnost uspeha aplikacije, seveda v kolikor jo programer izkoristi v svoj prid. Možnost uspeha se poveča zaradi uporabnikove takojšnje domačnosti z aplikacijo. Za primer navajam aplikacijo Weather Timeline. Aplikacija je še posebaj primerna, saj je bila na konferenci, ki jo vsako leto or ganizira Google, Google I/O, v letu 2015 razglašena kot aplikacija, ki je najbolje uporabila Material Design. 8

26 Če povzamem besede zapisane na spletni strani zmagovalcev nagrade Material Design Awards, ki jih podeljuje podjetje Google, aplikacija Weather Timeline jasno prikazuje, kako lahko aplikacija s točno določenim fokusom prikazuje večino principov material design-a. Tipografija povleče uporabnikove oči na najbolj pomembne informacije, kar pomeni, da so informacije preprosto razvidne. Prikazi podatkov so jasni in nenatrpani. Pogumna uporaba barv doda vizualno privlačnost brez nasičenosti, poleg tega pa so barve popolnoma prilagodljive. Ko preživiš več časa z aplikacijo Weather Timeline, začneš opažati dodatne podrobnosti: vremenske ikone so animirane, graf prikaza temperature se odzive na uporabnikov dotik in prikaže natančne vrednosti. Ko vse skupaj povzamemo, vidimo, da vse to doda k bogati uporabniški izkušnji [9]. Spodaj na sliki 7, smo bralcu priložili posnetek zaslona glavnega uporabniškega vmesnika aplikacije Weather timeline. Na sliki 6 pa smo podali primerjavo gradnika aplikacije Weather Timeline in gradnika aplikacije Weatherlove. Slika 7: Glavni uporabniški vmesnik aplikacije Weather Timeline [10] 9

27 Slika 8: Primerjava gradnikov. Zgoraj Weather Timeline, spodaj Weatherlove. 10

28 3.5 Material Design Material Design je enoten sistem, ki združi teorijo z dejanskimi gradniki in orodji za kreiranje digitalnih izkušenj. [11] Ponuja nam barvne palete, ikone, tipografijo in ostale grafične elemente Barvne palete Google nam ponuja čudovite barvne palete za uporabo v naših aplikacijah oz. v pomoč za razvoj celostne podobe našega produkta. Barvne palete razdelijo na primarne in sekundarne barve. Na spletni strani, ki smo jo zavedli v viru predlagajo, da v naših aplikacijah, ki sledijo smernici Material Design uporabimo najprej primarno barvo ki jo poimenujejo 500, nato pa glede na željen rezultat uporabimo sekundarne [12]. Spodaj, na sliki 9 smo bralcu prikazali, kakšen močan vpliv lahko imajo izbrane barve v Layout-u. Slika 9: Primer uporabe barvne palete v Layout-u [12] 11

29 Tudi mi smo upoštevali nasvete, ki nam jih podaja Material Design o uporabi barv. Odločili smo se, da bomo kot glavno barvo uporabili barvo s heksadecimalnim številom #1d628b, kar je razvidno na sliki 10, ki prikazuje Weatherlove dnevni prikaz z grafom temperature. Slika 10: Dnevni prikaz z grafom temperature v aplikaciji Weatherlove Ikone Zakonitosti material designa pravijo, da naj bodo ikone geometrijske oblike, ki vizualno predstavljajo glavno funckionalnost produkta [13]. Najbolj pomembna ikona v aplikaciji je ikona produkta, saj je le-ta tudi najbolj izpostavljena. Uporabnik jo prvič vidi v trgovini Google Play. Veliko razvijalcev testira kako dobro deluje ikona v trgovini, saj mončno vpliva na uporabnikovo odločitev, ali bo namestil produkt. 12

30 Za primer, kako močno lahko vpliva sprememba ikone, navajam primer Pera Haglunda, ki je s spremembo ikone produkta podvojil število dnevnih uporabnikov njegove aplikacije Kids Animals Jigsaw Puzzles [14]. Tudi za naš projekt smo iskali primerno ikono, ki smo jo prikazali na sliki 11. Odločili smo se za minimalistično ikono, nakateri je razviden oblak, ki uporabniku pove, da gre za vremensko aplikacijo, ter srce, ki k sporočilu doda, da gre za aplikacijo za navdušence. Slika 11: Ikona aplikacije Weatherlove 13

31 3.5.3 Tipografija Tipografija je pomembna s stališča uporabnikovega zaznavanja aplikacije. Za našo aplikacijo smo izbrali Roboto tipografijo (na sliki 12), ki jo priporoča Material Design, saj je tako aplikacija usklajena z operacijskih sistemom, ki prav tako uporablja Roboto. Eden izmed dejavnikov izbora te tipografije je bil tudi, da je aplikacija odlično berljiva širom sveta; Roboto podpira tipe pisave, kot so latiniska, grška, kitajska, korejska in arabska, zato smo se še toliko raje odločili zanjo [15]. Slika 12: Primer različnih vrst Roboto tipografije Komponente Material Design-a Google nam z Material Design-om ponuja ogromen nabor komponent. Februarja 2017 so nam na voljo naslednje komponente [16]: bottom navigation, bottom sheets, buttons, FAB, cards, chips, 14

32 data tables, dialogs, dividers, expansion panels, grid lists, lists, menus, pickers, progress & activity, selection controls, sliders, snackbars & toasts, steppers, subheaders, tabs, text fields, toolbars, tooltips, widgets. 15

33 4 RAZVOJ UPORABNIŠKE IZKUŠNJE Razvoj uporabniške izkušnje smo za potrebe produkta razdelili na več delov: analitiko produkta, grafilko, razvoj, prisluh uporabnikom. Skozi opise faz na konkretnem primeru bo bralcu postalo jasno, kako poteka razvoj uporabniške izkušnje. 4.1 Analitika produkta Z izvajanjem analitike produkta smo merili, na kakšen način so uporabniki uporabljali našo aplikacijo. Kasneje smo na podlagi podatkov, kot so čas na posameznih aktivnostih, demografiji in podobno, kreirali uporabne informacije. Na podlagi infomacij pa smo izboljšali produkt. Videli smo, da se nam splača izboljšati interakcijo glavnega fragmenta in prevesti aplikacijo v ruščino Google Play Console Google Play Console je naše prvo orodje za analitiko aplikacije, ki temelji na Androidu. Preko "Play Console" med drugim tudi objavimo aplikacijo na trg. V njej spremljamo število vseh prenosov naše aplikacije, število trenutnih uporabnikov, demografijo, ocene ter komentarje [17]. Zaradi narave operacijskega sistema Android je fragmentiranost verzij le-tega izjemno velika. Proizvajalci naprav namreč niso primorani posodabljati operacijskega sistema na napravah, tako da je dobro poznati svoje uporabnike in njihove naprave. Na podlagi analize, ki smo jo naredili z orodjem Google Play Console smo ugotovili, da delež uporabnikov aplikacije Weatherlove s starejšimi verzijami Android operacijskega 16

34 sistema ni zanemarljiv. Spodnja slika 11 prikazuje statistiko verzij operacijskega sistema Android z nameščeno aplikacijo Weatherlove. S primerjavo leve in desne tabele razberemo, da so naša ciljna skupina uporabniki s starejšimi Android napravami, zato je pomembno, da podpiramo različice operacijskega sistema od 2.3. naprej. Levi del slike 13 prikazuje verzije operacijskega sistema Android, ki imajo nameščeno aplikacijo Weatherlove. Desni del pa verzije operacijskega sistema Android, ki imajo nameščene aplikacije iz kategorije vreme. Slika 13: Statistični prikaz verzij operacijskega sistema Android z nameščeno aplikacijo Weatherlove in aplikacij iz kategorije vreme. Slika 14 prikazuje število namestitev aplikacije Weatherlove od leta 2012, ko smo jo v trgovini Google Play prvič objavili. Vrh na sredini grafa je posledica prevoda aplikacije v ruščino. Kako smo prišli do tega, da je aplikacijo smiselno prevesti v ruščino, bom opisal v poglavju Google Analytics. Od leta 2015 se jasno vidi trend padanja uporabnikov; takrat smo nehali delati na aplikaciji, tako da je upadanje števila uporabnikov logična posledica prenehanja naših aktivnosti. 17

35 Slika 14: Grafični prikaz namestitev aplikacije Weatherlove Google Analytics Google Analytics je orodje za natančno analizo mobilnih aplikacij informacijskega podjetja Google. Orodje sledi uporabniku ročno ali pa avtomatsko. Z ročnim načinom lahko natančno definiramo, kaj želimo meriti, avtomatski pa zajame splošne informacije. Merimo lahko vsak dotik zaslona znotraj naše aplikacije, za pridobitev uporabnih informacij pa se uporabniku niti ni potrebno dodatkniti zaslona - uporabne informacije nam lahko pove že podatek, na katerem delu aplikacije preživi večino časa. Orodje nam posreduje podatke v realnem času. Ko smo dodali aplikaciji Weatherlove Google Analytics knjižnico, smo opazili, da večina naših uporabnikov živi v Rusiji (slika 15). Na podlagi teh rezultatov smo se odločili prevesti aplikacijo v ruščino, kar je še dodatno povečalo število naših uporabnikov brez uporabe plačljivih oglasov. Delež uporabnikov v Rusiji se je tako povečal na kar 40%, pred tem je bil okoli 25%. 18

36 Slika 15: Trenutni delež uporabnikov aplikacije Weatherlove po državah Analiza konkurenčnih produktov Običajno se lotimo analize konkurenčnih aplikacij z iskanjem podobnih. V podjetju smo se tega najprej lotili direktno. To pomeni, da smo odprli spletni trgovini Google Play in Apple Store in uporabili podobne ključne besede, s katerimi bi opisali svojo aplikacijo in to so bile: weather, material design, widgets, forecast, graph. Najprej nas je zanimlo število prenosov aplikacije. Vedno smo si izbrali pet najuspešnejših aplikacij, ki so temeljile na trenutno najbolj primernem stilu na Androidu Material Design. Na list papirja smo zapisali imena teh petih aplikacij in za vsako posebej napisali nekaj alinej, zakaj mislimo, da je ta aplikacija uspešna. Nato smo na podlagi največkrat uporabljenih besed v opisih aplikacij poskušali zožati izbor na 3 točke, kar nas je pripeljalo do weather, widgets in graph. Zato smo se primarno fokusirali in poskušali čimbolje implementirati te tri module. 19

37 4.2 Prisluh uporabnikom (ankete, komentarji, blog) Google+ Za aplikacijo Weatherlove smo se precej posvečali podporni skupnosti aplikacije na platformi Google+. Opazili smo, da je prisluh uporabnikom dvorezni meč: medtem ko je na eni strani to izjemno hiter način odkrivanja in odpravljanja hroščev, se lahko precej hitro znajdemo v časovno zahtevnih debatah, kaj specifično dodati aplikaciji. Iz mojih osebnih izkušenj lahko izluščim, da lahko aplikaciji tudi škodimo, če želimo implementirati vsako zahtevo posameznega uporabnika Google Play Console Odlično orodje za prisluh uporabnikom je tako imenovana konzola Google Play Console, ki smo jo omenili že pri statistiki v kateri spremljamo osnovno analitiko, ocene ter komentarje uporabnikov naše aplikacije. Velika večina komentarjev je skoraj spam neuporabni komentarji. Z nekaj vloženega časa lahko izločmo ta spam in izluščimo najpogostejše zahteve uporabnikov. V zadnji različici je Google dodal funkcionalnost, da lahko na uporabnikov komentar tudi odgovorimo Vprašalniki Obstajajo možnosti, kot sta na primer Survey Monkey in Google Forms. Z njima sestavimo vprašalnik, ki ga posredujemo uporabnikom preko različnih medijev. Če targetiramo že obstoječe uporabnike, lahko uporabimo potisna obvestila ali ob posodobitvi aplikacije, ko se izvede določena akcija, dodamo oglas z obvestilom o anketi Uporabniški testi Nekaj časa po objavi Weathrelove verzije 3.0, smo se odločili, da naredimo uporabniški test. To smo storili tako, da smo na testiranje aplikacije povabili prijatelje, ki do takrat še 20

38 niso uporabljali naše aplikacije. Na testu smo opazili, da uporabnikom ni dovolj jasno, da se lahko med različnimi deli aplikacije premikajo s potegi prstov gor in dol. Zato smo se odločili, da bomo v naslednji posodobitvi aplikacije implementirali bottom navigation, ki smo ga že omenili ob naštevanju komponent, ki nam jih ponuja smernica Material Design. Slika 16: Prikazuje primer bottom navigation [18] 4.3 Psihološki vpliv Velikokrat nas lahko preseneti, da uporabniki ne uporabljajo naše aplikacije, kot bi si mi, kot razvijalci, želeli. Prepričati ljudi, da je naša vremenska aplikacija ravno ta, katero želijo uporabljati, je izredno težko. Da bi izboljšali pridobivanje novih in ohranitev obstoječih uporabnikov je vredno vložiti ure v razumevanje, kaj žene uporabnika do določenega obnašanja. Zato je dobro pogledati psihologijo, ki razišče, kako se tvori nova navada in zakaj ta ostane. Menim, da je smiselno, da v svoji aplikaciji poiščemo sprožilec, s katerim uporabnik začuti potrebo, da odpre aplikacijo. Naš cilj je bil narediti aplikacijo, ki bo uporabniku sporočala natančno vremensko napoved, ampak nismo vedeli, kako motivirati uporabnika k uporabi. Iz raziskav psihologov nam je znano, da ljudi k uporabi ženejo zunanji faktorji, kot so npr. denarna nagrada in notranji faktorji, kot je npr. zadovoljstvo, ki ga dobimo ob uporabljanju apliakcije. Sam nisel našel dobrega načina, kako bi izgledal zunanji faktor v vremenski aplikaciji, zato se tega področja ne bom dotikal. 21

39 4.3.1 Izboljšanje uporabniške izkušnje s psihološko analizo Eden od načinov izboljšanja uporabniške izkušnje je uporaba Foggovega modela [19]. Njegov model pokaže, da so uporabniki najbolj dovzetni za akcije, ko so motivirani. Iz modela smo izvedeli, da kadar je uporabnik motiviran in neko stvar opravi z lahkoto, bo to tudi storil. V kolikor pa je njegova motivacija nizka, ali pa je delo težko, ga bomo težko prepričali v akcijo. To nam na lep način prikaže Foggov model na sliki 17. Slika 17: Foggov model [20] To v primeru vremenske aplikacije pomeni, da je za tako preprost element, kot je potisno obvestilo pomembno le-to prikazati ob pravem trenutku. Eden od možnih načinov izvedeti, kdaj je najboljše prikazati obvestilo, je uporaba Google-ovega Activity Recognition API-ja [21]. Ta aplikaciji sporoča, kaj uporabnik počne v tistem trenutku. Npr. dober trenutek za prikaz vremenskega obvestila je, ko uporabnik hodi ali kolesari, ni pa dober trenutek, ko spi ali vozi avtomobil. Ko dobimo informacijo, kdaj uporabnik torej hodi, je lažje prikazati obvestilo ob pravem času. Ob tem je pomembno meriti uporabnikovo dejavnost ob različnih trenutkih dneva in nato meritev uporabiti za optimizacijo aplikacije. Ker pa so si 22

40 uporabniki med sabo različni, nam zgolj implementacija najboljše statistično gledane opcije ne bo zadovoljila vseh uporabnikov, zato je dobro po nekaj dneh uporabe aplikacije ponuditi vsakemu uporabniku nekaj vprašanj, da si sam prilagodi, kako želi, da se aplikacija obnaša. Na podlagi odgovorov lahko nato dodatno optimiziramo aplikacijo. 23

41 4.4 Lokalizacija Lokalizacija je pomemben del uporabniške izkušnje. Že v poglavju o analitiki smo pisali, da je bila za nas ključnega pomen, saj smo z njo dosegli tuje trge. Spodaj opišemo kako smo se procesa lokalizacije lotili Proces prevajanja Najprej smo poskrbeli, da so bila vsa besedila aplikacije prevedena v angleščino. To smo storili sami z znanjem angleškega jezika, ki smo ga pridobili s časom in izkušnjami. Nato smo na spletni portal [22], ki je bil v času prevajanja v beta različici, objavili naša besedila. V ta namen smo poklicali na pomoč podporno skupnost, ki smo jo gradili na Google+, kjer smo objavili navodila, kako nam lahko pomagajo. Odziv skupnosti je bil odličen. V nekaj mesecih so uporabniki sami prevedli aplikacijo v naslednje jezike: ruščino, nemščino, francoščino, italjanščino ter hrvaščino. <string name="weather_sunny">sončno</string> <string name="weather_mostly_sunny">pretežno sončno</string> <string name="weather_partly_sunny">delno sončno</string> <string name="weather_intermittent_clouds">zmerno oblačno</string> <string name="weather_hazy_sunshine">megleno sončno</string> <string name="weather_mostly_cloudy">pretežno oblačno</string> Primer kode 1: Vremenski pojavi v slovenščini 24

42 <string name="weather_sunny">солнечно</string> <string name="weather_mostly_sunny">чаще солнечно</string> <string name="weather_partly_sunny">временами солнечно</string> <string name="weather_intermittent_clouds">переменная облачность</string> <string name="weather_hazy_sunshine">затуманенное солнце</string> <string name="weather_mostly_cloudy">чаще облачно</string> Primer kode 2: Vremenski pojavi v ruščini 25

43 5 UPORABNOST 5.1 Ergonomija Ergonomija je prilagoditev delovnega okolja uporabniku. Z ustreznim ergonomskim načrtovanjem se preprečijo poškodbe zaradi ponavljajočih se gibov, ki se lahko sčasoma razvijejo in povzročijo dolgotrajno delovno nezmožnost [23]. Moj pogled na ergonomijo bom razdelil na dva dela. En del je dejanska mehanska ergonomija, drugi pa je, da uporabniku prikažemo samo okleščene pomembne stvari. Ko postavljamo elemente na aplikaciji, je dobro, da imamo v mislih, kako bo uporabnik držal telefon, ko bo izvajal akcije v naši mobilni aplikaciji. Uporabniki za interakcije z zaslonom večino časa uporabljajo palec, zato je dobro, da imamo v mislih, kakšni so naravni gibi palca. Palec se rad giblje krožno in ne samo po x in y osi. Ker so telefoni postali veliki, odsvetujem postavljanje elementov s katerimi bo uporabnik pogosto operiral v pokončnem položaju v zgornja kota. Če zgornje nasvete združimo s Fittovim zakonom, ki govori o interakciji človeka z napravo bomo gotovo imeli dobro ergonomijo. Fittov zakon [24] pravi, da je čas, ki ga uporabnik porabi, da doseže svoj cilj (npr. gumb) izračun do razdalje in velikost cilja. Ko se razdalja do cilja povečuje, se tudi čas za interakcijo povečuje. Ko se cilj zmanjšuje pa se interakcija spet časovno poveča. Potrebno pa se je tudi zavedati, da lahko ergonomija potencialno skrajša uporabnikovo sejo. 5.2 Pripomočki za ljudi s posebnimi potrebami Ljudje imamo različne hibe, ki so lahko vizualne, slušne ali fizične: od slabovidnosti, naglušnosti in gluhosti, do težav z motoriko. 26

44 Okoli 25% uporabnikov mobilnih telefonov ima kakšno hibo. Glede na medicinska poročila ima 9% ljudi barvno slepoto. To pomeni da ima približno 10 od 100 uporabnikov barvno slepoto. Takšni uporabniki bodo še posebej cenili naš trud, ki smo ga vložili, da lahko tudi oni uporabljajo našo aplikacijo [25]. Dostopnost (accesibility) pomeni narediti aplikacijo tako, da jo bodo lahko uporabljali uporabniki s hibami. Da naredimo našo aplikacijo uporabno vsem ljudem, ne potrebujemo veliko truda. Mobilni operacijski sistemi v večini podpirajo različne možnosti za ljudi s posebnimi potrebami, a jih moramo kot razvijalci programske opreme aktivirati v naši aplikaciji. Kot razvijalci, ki podpiramo accesibility, ne samo da razveselimo vsaj 25% (potencialnih) uporabnikov, s tem lahko dosežemo tudi unique selling point to je tisto, kar nas loči od ostalih aplikacij in nam da veliko prednost. Z lahkoto lahko tudi v medijih izpostavimo naš trud in tega bodo veseli tudi ljudje, ki nimajo hib. Zakaj pa to lahko loči našo aplikacijo od ostalih? Ker se večina razvijalcev ne odloči za implementacijo pripomočkov za ljudi s posebnimi potrebami. Operacijski sistemi z vsako različico še bolj stremijo, da podprejo čedalje več pripomočkov za ljudi s posebnimi potrebami. Kaj lahko storimo kot razvijalci? Potrebno je poznati našo bazo uporabnikov, da se lažje odločimo, ali res potrebujemo vse aspekte pripomočkov za ljudi s posebnimi potrebami. Najlažje je implementirati pripomočke za ljudi s posebnimi potrebami, ki jih podpira operacijski sistem, ker implementacije po meri vzamejo veliko časa. Ko implementiramo pripomočke za ljudi s posebnimi potrebami, je potrebno narediti preizkuse na uporabnikih, da vidimo, ali smo sploh izboljšali interakcijo. Večino teh težav lahko rešimo ob snovanju aplikacije, tako da naredimo kratek uporabniški test, da ponudimo uporabniku različne teme in kontraste. Dobro je, da sledimo t.i. Human Interface Guideline za ios operacijski sistem oz. v našem primeru Material Design smernice, ki že imajo priporočila za tipografijo, uporabo barv, navigacijo. 27

45 Obenem je lažje zasnovati aplikacijo, ki podpira pripomočke za ljudi s posebnimi potrebami od začetka, kot da to dodajamo na koncu razvoja. 28

46 6 RAZVOJ 6.1 Kodiranje z uporabo aplikacije Android Studio Resource-i se kodirajo v razširljivem označevalnem jeziku XML. To je preprost računalniški jezik, skupek določenih označb imenovanih tag-i, ki so razvrščeni v vnaprej določeno obliko [26]. Kodiranja smo se lotili v aplikaciji Android Studio, ki je posebna oblika IntelliJ, namenjena razvijalcem Android aplikacij in iger, razvita s strani Google-a. Slika 18: Posnetek zaslona Android Studio Na levem delu slike 18 prikažemo tako imenovane resource datoteke; te zajemajo različne vrste XML-jev, pisav in multimedijskih datotek. Sredinski del je bil namenjen pisanju programske kode; večinoma je bilo to v Javi ali XML-ju. Povsem desno pa je bil upodobljen vmesnik, kako bi naj izgledal posamezni layout na fizični napravi. Opazili smo, da upodobljen vmesnik ni bil vedno zanesljiv in da je bilo potrebno po vsaki večji spremembi aplikacijo zgraditi in namestiti na napravi, ali vsaj emulatorju (emulator je poseben program, ki posnema izbrano vrsto Android naprave). 29

47 6.2 Implementacija uporabniškega vmesnika za konfiguracijo gradnikov Eden od naših ciljev je bil izboljšati uporabniku prijazen in izjemno fleksibilen konfigurator gradnikov, ki je bil kompatibilen z Android različico 2.3 in novejšimi. To je v primeru aplikacije Weatherlove bilo še kako pomembno, saj smo z uporabo analitičnega orodja Google Analytics ugotovili, da je število uporabnikov na tej sedaj že nekoliko zastareli različici še vedno visoko. Konfigurator gradnikov je vseboval: osnovne nastavitve (izbira kraja in prednastavljenih tem), dodatne nastavitve (izbira ikon, merskih enot, oblike datuma, oblike ure, izbire zagona aplikacije kadar se uporabnik dotakne ure in podobnih nastavitev), specifične nastavitve za zadnji del gradnika (barva besedila, pisava besedila, barva ozadja in transparentnost ter nastavitev obrobe), specifične nastavitve za uro (barva besedila, pisava besedila, barva ozadja in transparentnost ter nastavitev obrobe), aktivni prikaz gradnika trenutnih nastavitev. Na spodnji sliki 19 bo bralcu razvidno, kako smo spremenili izgled starega konfiguratorja gradnikov z implementacijo pravil, ki jih določa smernica Material Design. V naslednjih poglavjih bom prikazal dejanske primere razvoja in jih tudi razložil, bralcu pa bom tudi obrazložil komponente, ki smo jih uporabili. 30

48 Slika 19: Primerjava implementacije Holo (levo) ter Material Design-a (desno) v konfiguratorju gradnikov. 6.3 Viri Za potrebe razvoja grafičnega dela uporabniške izkušnje smo ugotovili, da je za dobro aplikacijo potrebna več kot samo programska koda. Viri (angleško resources) so datoteke, kot, a ne omejene na slike, zvoke, definicije layout-ov, definicije animacij in string-e. Resource smo skupaj s programsko kodo pretvorili v uporabniško izkušnjo aplikacije Weatherlove. Opazili smo, da je dobra navada shraniti vse vire datoteke v mapo /res. Tako smo tudi storili. V našem primeru smo mapo/res razdelili na anim, drawable, layout, menu in values. 31

49 Kot je bralcu razvidno na sliki 20, smo nekaterim podmapam dodelili posebne oznake, ki se začnejo z znakom -. S temi oznakami določimo sami aplikaciji, kako se naj obnaša na različnih Android napravah. Slika 20: Mapa/res z virnimi datotekami 32

50 Viri (angleško resources), ki smo jih uporabili pri izdelavi naše aplikacije: Drawable Animation Layout Menu String Style Dimension Color V nadaljevanju diplomskega dela smo opisali vire bolj podrobno: kaj so in na kakšen način smo jih implementirali v našo aplikacijo Razlaga mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi Standardna funkcionalnost Android operacijskega sistema ob zagonu aplikacije pove, na kakšni resoluciji (merjena v dpi) se ta poganja. Mdpi pomeni, da gre za resolucijo večjo od 160dpi, hdpi pomeni, da gre za resolucijo večjo od 240dpi, xhdpi večjo od 320dpi in tako dalje. Zaradi tega lahko aplikaciji pripravimo drawable za različne dpi-je. Opazili smo, da je to vsekakor zelo pametno, saj smo na ta način zmanjšali obremenitev procesorja in prihranili na zasedenosti pomnilnika. Obenem smo opazili, da vsak Drawable poveča velikost aplikacije, še posebno, kjer smo iste Drawable priložili za več različnih resolucij. Zato smo se pri večjih BitmapDrawable-ih (slika 19) odločili, da jih priložimo samo enkrat in jih skaliramo sami, te datoteke pa smo shranili v nodpi. To je pomenilo, da se Drawable ni avtomatično skaliral na zaslonih, posledično je Drawable na zaslonu z višjo resolucijo izgledal manjši kot na zaslonu z višjo, sami pa smo poskrbeli, da smo jih primerno skalirali. 33

51 Slika 21: Drawable-i, ki smo jih narisali za potrebe aplikacije in jih postavili v /res/drawable-nodpi Drawable Googlova spletna stran za Android razvijalce pravi [27], da je drawable abstrakcija nečesa kar lahko narišemo. V večini primerov gre za fizične slike oz. BitmapDrawable, ki ji želimo kasneje dodati parametre in se nanjo sklicevati iz Java dela programa. V tem primeru je dovolj, da sliko dodamo v mapo res. Poznamo pa še naslednje vrste tipa Drawable: NinePatchDrawable LayerDrawable, StateListDrawable, LevelListDrawable, TransitionDrawable, ClipDrawable, ScaleDrawable, ShapeDrawable, ColorDrawable, SelectorDrawable. 34

52 Nekaj od teh jih podrobneje na primerih pokažemo spodaj NinePatchDrawable NinePatchDrawable je posebna oblika Drawable-a, s katero smo zmanjšali velikost Drawable-ov za potrebe widgetov in uporablja končnico.9.png. Narisali smo ga v Gimp-u, ki je odprto kodno orodje za upravljanje s statičnimi grafičnimi elementi. Oblika NinePatchDrawable nam je omogočila, da smo majhen Drawable brez izgubi raztegnili na določenem pixel-u. Uporabili smo ga v večih primerih en primer vključno z xml implementacijo pa je viden spodaj. NinePatchDrawable smo za potrebe widgetov pustili v beli barvi in smo jih barvali dinamično kar pokažemo kasneje. Slika 22: Primer bitne slike NinePatchDrawable 1: <?xml version="1.0" encoding="utf-8"?> 2: <nine-patch 3: xmlns:android=" 4: android:dither="true" 5: android:src="@drawable/border_bottom_rounded" /> Primer kode 3: NinePatchDrawable 35

53 Vrstica 1 - XML deklaracija in kodiranje besedila UTF-8 Vrstica 2 in 3 - deklaracija resource-a nine-patch Vrstica 4 - z uporabo android:dither=true izboljšamo grafično kvaliteto pri raztegljivih slikah NinePatchDrawable, kadar Drawable nima iste konfiguracije slikovnih točk kot zaslon, kar smo pri razvoju opazili zelo pogosto Vrstica 5 - z oznako android:src smo določili Drawable vir private static final void drawbackground(remoteviews remoteviews, ImageView imageviewbackground, ImageView imageviewborder, WidgetThemeBackground settings, BgResource bgresource) { } if (imageviewbackground!= null) { if (settings!= null && bgresource!= null) { drawresource(remoteviews, imageviewbackground, bgresource.getbackgroundresid()); setcolorfilter(remoteviews, imageviewbackground, settings.getbackgroundcolor()); setalpha(remoteviews, imageviewbackground, settings.getbackgroundopacity()); } else { drawresource(remoteviews, imageviewbackground, 0); } } Primer kode 4: Metoda s katero smo narisali ozadje na gradnik 36

54 Slika 23: Rezultat uporabe NinePatchDrawable, viden kot modra črta na gradniku 2x1 aplikacije Weatherlove ColorDrawable ColorDrawable je zelo uporabna oblika Drawable [28]. Z zelo preprostim xml zapisom, napolnimo Canvas z izbrano barvo. Z uporabo ColorDrawable-ov smo prihranili podatkovni prostor, saj nam za preprosta ozadja ni bilo potrebno prilagati BitmapDrawable-ov. V nekaterih naših primerih smo uporabili izpeljanko razreda ColorDrawable Shape [29] s katero smo dosegli, da se nam izriše krog v točno določeni dimenziji. 1: <?xml version="1.0" encoding="utf-8"?> 2: <shape xmlns:android=" android:shape="oval" > 3: <size android:height="@dimen/graph_list_view_default_image_size" 4: android:width="@dimen/graph_list_view_default_image_size" /> 5: <solid android:color="@color/grey_dark"/> 6: </shape> Primer kode 5: ColorDrawable Shape, ki izriše krog 37

55 Vrstica 1 - XML deklaracija in kodiranje besedila UTF-8 Vrstica 2 - definicija razreda shape in posebna označba android:shape="oval", ki pove Drawable-u, da se izriše kot oval. Če ne bi podali oblike, bi se Drawable izrisal kot pravokotnik, v našem primeru pa kvadrat. Vrstica 3 in 4: značka size sprejme atributa android:height in android:width pri čemer smo jih definirali dinamično z razredom Dimension Vstica 5: drawable-u smo dinamično definirali barvo z uporabo razreda Color StateListDrawable StateListDrawable je objekt, ki deduje od razreda Drawable [30]. Objekt združi več različnih bitnih slik, ki predstavljajo isti grafični element v večih stanjih. Vsak gumb v Android operacijskem sistemu ima več stanj - aktiven, izbran in privzet. Z uporabo StateListDrawable lahko vsakemu gumbu ali drugim objektom spreminjamo grafične elemente za vsako stanje. Ker smo v našem projektu večkrat želeli uporabiti gumb narejen po meri smo ta objekt večkrat uporabili. Implementacijo enega primera smo prikazali spodaj. 1: <selector xmlns:android=" 2: <item android:drawable="@drawable/abc_list_selector_disabled_holo_light" android:state_enabled="false" android:state_focused="true" android:state_pressed="true"/> 3: <item android:drawable="@drawable/abc_list_selector_disabled_holo_light" android:state_enabled="false" android:state_focused="true"/> 4: <item android:drawable="@drawable/abc_list_selector_background_transition_holo_light" android:state_focused="true" android:state_pressed="true"/> 5: <item android:drawable="@drawable/abc_list_selector_background_transition_holo_light" android:state_focused="false" android:state_pressed="true"/> 6: <item android:drawable="@drawable/abc_list_focused_holo" android:state_focused="true"/> 7: <item android:drawable="@color/material_dark_background"/> </selector> 38

56 Primer kode 6: StateListDrawable 1 - definicija značke selector je obvezna in mora biti korenska. Vsebuje lahko enega ali več item značk kot bo bralcu razvidno spodaj 2 - ta značka item, prikaže Drawable abc_list_selector_disabled_holo_light kadar je grafični element onemogočen, ima fokus in je pritisnjen 3 - ta značka item, prikaže Drawable abc_list_selector_disabled_holo_light kadar je grafični element onemogočen in ima fokus 4 - ta značka, prikaže Drawable abc_list_selector_background_transition_holo_light kadar je grafični element pritisnjen in ima fokus 5 - ta značka, prikaže Drawable abc_list_selector_background_transition_holo_light, kadar je grafični element pritisnjen ima grafični element fokus 6 - ta značka, prikaže Drawable abc_list_focused_holo kadar ima grafični element fokus 7 - ta značka, prikaže drawable material_dark_background v privzetem stanju Animation Z uporabno Animation vira smo v aplikacijo dodali nekaj življenja. Poznamo dve obliki animacij. Prva je AnimationDrawable s katero nanizamo več grafičnih elementov Drawable, kot dele sekvence. Vsak element AnimationDrawable predstavlja en del animacije oz. en frame [31]. V našem primeru smo uporabili animacijski razred ViewAnimation. Z njim smo animirali grafični element layout-a tako, da se je ob zagonu aplikacije prikazal z zamikom 300ms. Najprej je bil povsem prosojen, potem pa postal popolnoma viden. 1: <?xml version="1.0" encoding="utf-8"?> 2: <set xmlns:android=" 3: <alpha 4: android:fromalpha="0.0" 5: android:toalpha="1.0" 6: android:interpolator="@android:anim/accelerate_interpolator" 7: android:duration="300" 39

57 8: android:repeatcount="0" /> 9: </set> Primer kode 7: Animation resource Vrstica 1 - XML deklaracija in kodiranje besedila UTF-8 Vrstica 2 - definicija razreda set. Razred set je vsebnik, ki sprejme animacijske atribute Vrstica 3 - značka alpha predstavlja razred AlphaAnimation. Omogoči fade-in, fade-out animacijo Vrstica 4 - atribut android:fromalpha predstavja najvišjo stopnjo prosojnosti ob začetku animacije Vrstica 5 - atribut android:toalpha predstavja najnižjo stopnjo prosojnosti ob koncu animacije Vrstica 6 - z uporabo značke android:interpolator smo izbrali standardni interpolator accelerate_interpolator, ki predstavlja razred AccelerateInterpolator. Razred omogoči, da se animacija začne počasi in potem pospešuje do konca animacije. Vrstica 7 - z značko android:duration smo nastavili čas trajanja celotne animacije Vrstica 8 - z značko android:repeatcount="0" smo animaciji povedali, da želimo, da se ta ne ponovi String Z uporabo String vira smo predstavili besedila v Android aplikacijo. Je preprost vir, na katerega smo se sklicevali z name atributom. To pomeni, da smo lahko v eno virno datoteko zapisali več besedil, ki so bila ugnezdena v atribut vir (resources). Spodaj, v primeru kode 8, smo prikazali del datoteke strings.xml iz projekta Weatherlove. <resources> <string name="monday">monday</string> <string name="tuesday">tuesday</string> <string name="wednesday">wednesday</string> <string name="thursday">thursday</string> <string name="friday">friday</string> 40

58 </resources> <string name="saturday">saturday</string> <string name="sunday">sunday</string> Primer kode 8: String resource-i 41

59 7 SKLEP Ne le ob pisanju diplomske naloge, temveč skozi celoten proces razvoja mobilne vremenske aplikacije Weatherlove v podjetju TFStoritve d.o.o. smo spoznali, da je produkt več, kot le tehnologija za njim. Za uspešen produkt je potreben temeljit razmislek in prisluh uporabnikom, ne le delujoča koda, kar bi nam, kot programerjem, bilo seveda lažje. Uporabniki so najboljši in nepristranski ocenjevalci, od katerih lahko dobimo neprecenljive odzive, ocene in predloge, če jih le poslušamo. Aplikacijo je smiselno testirati na dejanskih uporabnikih in iz testov izluščiti ključne nadgraditve, ki ne le tehnično izboljšajo aplikacijo, ampak jo naredijo tudi prijaznejšo do uporabnikov tako, da izboljšava nadgradi tudi uporabniško izkušnjo. Velikokrat želimo produkt ali aplikacijo, v želji po biti najboljši, dodelati in nadgraditi, vendar jo obenem nemalokrat tudi zakompliciramo. Ko pogledamo nazaj, opazimo, da smo se pri aplikaciji Weatherlove prevečkrat ozirali na specifične stvari, ki so pravzaprav malenkosti in izgubljali čas po nepotrebnem, uporabniki pa našega dela niso razumeli kot nadgraditev. Zavedati se moramo, da je enostavnost uporabe, seveda poleg kakovosti, ena izmed ključnih stvari, zaradi katerih lahko pritegnemo več uporabnikov, zato se je bolje držati načela manj je več in vpeljati spremembe, ki so kakovostne in res uporabne, brez da bi uporabnika zmedli. V našem primeru to pomeni, da bi bilo bolje, kot nadgrajevati specifične stvari, ki jih ne opazi veliko uporabnikov, objavljati redne posodobitve aplikacije z manjšimi, ampak bolj uporabniku vidnimi spremembami. Verjetno bi nam to vzelo manj časa, učinek pa bi bil večji. V diplomski nalogi za primer navajam, kako lahko preprosta sprememba, kot je sprememba ikone ali prevod aplikacije v dodaten jezik poveča število dnevnih uporabnikov aplikacije. Na tem mestu bi opozoril, da iz Slovenije še vedno ni mogoče prodajati mobilnih aplikacij prek Google Playa in z njimi služiti z nakupi v aplikacijah, tako da monetizacijo vseh aplikacij, objavljenih iz Slovenije, predstavljajo le oglasi. Za razvoj dobre uporabniške izkušnje ni dovolj le tehnično znanje, potrebno je sodelovanje cele ekipe, razumevanje uporabnikov in njihovih želja. Veseli me, da smo s prijatelji ustanovili podjetje, v katerem smo nabrali neprecenljive izkušnje, ter nam je 42

60 odprlo vrata v svet. Spoznali smo celoten proces izdelave aplikacije od začetne ideje do objave in nadgraditev, dobili smo podjetniško znanje in se soočili z vzponi in padci, ki nam jih ponuja poslovni svet. Trdim lahko, da zaradi te izkušnje lažje opravljam delo programerja in razumem procese ter poslovne cilje, za katerimi v osnovi stoji razvoj aplikacije, zato lažje dajem predloge, kako izboljšati tudi druge produkte oz. aplikacije in njihovo uporabniško izkušnjo. 43