ANALIZA UPORABNIŠKIH VMESNIKOV NA MOBILNIH NAPRAVAH

Transcription

1 Gregor Bohak ANALIZA UPORABNIŠKIH VMESNIKOV NA MOBILNIH NAPRAVAH Diplomsko delo Maribor, marec 2012

2

3 I Diplomsko delo univerzitetnega študijskega programa ANALIZA UPORABNIŠKIH VMESNIKOV NA MOBILNIH NAPRAVAH Študent: Študijski program: Smer: Mentor: Lektorica Gregor Bohak UN ŠP Računalništvo in informatika Informatika doc. dr. Gregor Polančič Branka Selinšek Maribor, marec 2012

4 II

5 III

6 IV

7 V ZAHVALA Zahvaljujem se mentorju Gregorju Polančiču za pomoč, usmerjanje in potrpežljivost med opravljanjem diplomskega dela. Iskreno se zahvaljujem mami Tatjani in očetu Franciju, ki sta mi študij omogočila in me skozi vsa leta šolanja spodbujala. Prav tako se zahvaljujem Vesni in sestri Maji ter vsem bližnjim za spodbude v času šolanja. Zahvala Branki Selinšek za temeljito opravljeno lekturo, s čimer je pripomogla k dvigu nivoja pravilne uporabe slovenskega jezika v besedilu. Hvala sošolcem za nepozabna leta.

8 VI

9 VII ANALIZA UPORABNIŠKIH VMESNIKOV NA MOBILNIH NAPRAVAH Ključne besede: uporabniški vmesnik, mobilna naprava, pametni telefon, Android, Symbian, MeeGo, ios, Windows Phone 7 UDK: (043.2) Povzetek V diplomskem delu smo predstavili pravila in smernice oblikovanja uporabniških vmesnikov na mobilnih napravah. Omejili smo se na platforme Google Android, Nokia Symbian, Nokia MeeGo, Apple ios ter Microsoft Windows Phone 7. Za vsako izmed platform smo predstavili splošen model uporabniškega vmesnika, splošen model uporabniškega vmesnika aplikacije, navigacijske vzorce ter gradnike. Vse skupaj tudi smo obogatili z veliko grafičnega materiala. V drugem delu smo na podlagi pridobljenega znanja primerjali in analizirali obstoječe aplikacije za prenos in nakup aplikacij (trgovine) ter odjemalce za socialno omrežje Facebook. Obe skupini aplikacij smo analizirali na vseh opisanih platformah. Za vsako aplikacijo smo naredili tudi SWOT analizo.

10 VIII

11 IX ANALYSIS OF USER INTERFACES ON MOBILE DEVICES Key words: user interface, mobile device, smartphone, Android, Symbian, MeeGo, ios, Windows Phone 7 UDK: (043.2) Abstract In this graduation thesis we introduce designing rules and guidelines for user interfaces on mobile devices. We research Google Android, Nokia Symbian, Nokia MeeGo, Apple ios and Microsoft Windows Phone 7 mobile platforms. For each of the platforms we present overall user interface model, overall application user interface, navigation patterns and components. A lot of graphic material is also included. In the second part, based on the knowledge gained, we compare and analyze existing download and purchase applications (markets) and social network Facebook clients. We analyze both application groups on all presented platforms. For each application also a SWOT analysis is made.

12 X

13 XI VSEBINA 1 UVOD CILJI IN HIPOTEZE DIPLOMSKEGA DELA PREDPOSTAVKE IN OMEJITVE DIPLOMSKEGA DELA PREDSTAVITEV METOD DELA STRUKTURA DIPLOMSKEGA DELA SPLOŠNO O UPORABNIŠKIH VMESNIKIH UPORABNIŠKE IZKUŠNJE ARHITEKTURA MOBILNE APLIKACIJE PRAVILA DOBREGA NAČRTOVANJA VNOSNE METODE Vnos preko zaslona Fizična tipkovnica Mikrofon Namenske tipke telefona Drugi senzorji UPORABNIŠKI VMESNIKI RAZLIČNIH MOBILNIH PLATFORM GOOGLE ANDROID Splošen model uporabniškega vmesnika Splošen model uporabniškega vmesnika aplikacije Vzorci navigacije Pregled osnovnih gradnikov NOKIA SYMBIAN Splošen model uporabniškega vmesnika Splošen model uporabniškega vmesnika aplikacije Sprememba orientacije zaslona Vzorci navigacije Pregled osnovnih gradnikov MEEGO 1.2 HARMATTAN... 35

14 XII Splošen model uporabniškega vmesnika Splošen model uporabniškega vmesnika aplikacije Potreben je le poteg Vzorci navigacije Pregled osnovnih gradnikov APPLE IOS Splošen model uporabniškega vmesnika Splošen model uporabniškega vmesnika aplikacije Sprememba orientacije zaslona Vzorci navigacije Pregled osnovnih gradnikov WINDOWS PHONE Splošen model uporabniškega vmesnika Splošen model uporabniškega vmesnika aplikacije Teme Vzorci navigacije Pregled osnovnih gradnikov PRIMERJALNA ANALIZA UPORABNIŠKIH VMESNIKOV NA RAZLIČNIH MOBILNIH NAPRAVAH OPIS METODE DELA REZULTATI Kriterij 1: Upoštevanje splošnega modela aplikacije Kriterij 2: Upoštevanje navigacijskih vzorcev Kriterij 3: Uporaba sistemskih gradnikov SWOT ANALIZA ZAKLJUČEK TESTIRANJE HIPOTEZ OMEJITVE UPORABNOST DIPLOME V PRASKI MOŽNOSTI ZA NADALJNJE DELO SKLEP... 88

15 XIII 6 LITERATURA PRILOGE SEZNAM SLIK SEZNAM TABEL ZASLONSKE SLIKE APLIKACIJ Google Play (Android) Nokia Store (Symbian) Nokia Store (MeeGo) App Store (ios) Marketplace (Windows Phone 7) Facebook (Android) Social (Symbian) Facebook (MeeGo) Facebook (ios) Facebook (Windows Phone 7) NASLOV ŠTUDENTA KRATEK ŽIVLJENJEPIS

16 XIV

17 XV UPORABLJENE KRATICE 2G 3G ALS API CSS GPS HTML ios JPEG PNG 2nd Generation 3rd Generation Ambient Light Sensor Application Programming Interface Cascading Style Sheets Global Positioning System Hyper Text Markup Language iphone Operating System Joint Photographic Experts Group Portable Network Graphics S60 Series 60 SMS SWOT UI UX Short Message Service Strengths Weaknesses Opportunities Threats User Interface User Experience WP7 Windows Phone 7

18 XVI

19 UVOD 1 1 UVOD V zadnjih letih je opaziti izreden porast mobilnih naprav, kar odpira nove možnosti za razvijalce. Z rastjo števila naprav, raste tudi število mobilnih aplikacij, katerih razvoj pa je potrebno skrbno načrtovati. K učinkovitosti aplikacij pripomore tudi mobilna internetna infrastruktura, ki uporabniku omogoča lokacijsko neodvisno uporabo aplikacij. Na drugi strani pa z raznimi lokacijskimi senzorji uporabnik pridobiva podatke glede na njegovo lokacijo. Zaradi majhnosti zaslonov mobilnih naprav imajo pomembno vlogo uporabniški vmesniki, katere je treba skrbno analizirati in oblikovati. V kolikor želijo razvijalci na trgu izstopati oziroma si zagotoviti čim večji tržni delež, je potrebno nameniti veliko sredstev tudi načrtovanju uporabniškega vmesnika, ki je del življenjskega cikla aplikacije. Žal pa je ta del še vedno preveč zapostavljen, kar se odraža tudi na kvaliteti dostopnih aplikacij. Ravno zaradi omenjene problematike želimo analizirati uporabniške vmesnike in pregledati smernice posameznega mobilnega operacijskega sistema. 1.1 Cilji in hipoteze diplomskega dela Cilj diplomskega dela je opis in predstavitev uporabniških vmesnikov različnih mobilnih platform in s tem: 1. spoznati smernice oblikovanja uporabniških vmesnikov, 2. spoznati osnovne gradnike posameznih platform, 3. spoznati dobre prakse oblikovanja in 4. opozoriti na premalo pozornosti, namenjene uporabniškim vmesnikom.

20 2 Analiza uporabniških vmesnikov na mobilnih napravah Za diplomsko delo smo postavili sledeče hipoteze: H 1 : Uporabniški vmesniki v večini temeljijo na podobnih 1 konceptih. H 2 : Razlike med grafičnimi predstavitvami gradnikov uporabniškega vmesnika posamezne platforme so očitne in prepoznavne za posamezno platformo. H 3 : Posamezne platforme nudijo le osnovne 2 sistemske gradnike za posebne primere uporabe je potrebno ustvariti gradnike po meri. H 4 : Aplikacije sledijo načrtovalskim smernicam Predpostavke in omejitve diplomskega dela Analizo uporabniških vmesnikov bomo omejili na nekaj platform pametnih telefonov, ki imajo največji tržni delež. Predpostavljamo, da so koncepti uporabniških vmesnikov mobilnih platform v večini primerov skupni ter da se vse aplikacije teh konceptov ne držijo. 1.3 Predstavitev metod dela Pri izdelavi diplomskega dela bomo uporabili naslednje metode dela: pregled literature s področja uporabniških vmesnikov mobilnih operacijskih sistemov, primerjalna analiza uporabniških vmesnikov, s katero bomo preučili upoštevanje pravil in smernic uporabniških vmesnikov. 1 Grafično različni, a funkcionalno enaki. 2 Osnovni sistemski gradniki pokrivajo zgolj primere uporabe, enake primerom sistemskih aplikacijam. 3 Načrtovalske smernice poda razvijalec mobilne platforme.

21 UVOD Struktura diplomskega dela Diplomsko delo sestoji iz petih delov. Prvo poglavje predstavlja osnove o problemu, s katerim se ukvarjamo, njegovi pomembnosti in razloge za raziskavo. Predstavljeni so cilji in hipoteze raziskave, predpostavke in omejitve diplomskega dela ter metode in tehnike dela. Drugo poglavje opredeli uporabniške vmesnike, prav tako je predstavljenih nekaj osnovnih konceptov, s katerimi se moramo seznaniti in jih bomo potrebovali v prihajajočih poglavjih. Opredelimo uporabniške vmesnike v arhitekturo mobilne aplikacije. Predstavljene so interakcije med napravo in uporabnikom za lažje razumevanje ter pravila dobrega načrtovanja. V tretjem poglavju opišemo uporabniške vmesnike petih mobilnih operacijskih sistemov: Google Android, Nokia Symbian, Nokia MeeGo, Apple ios in Windows Phone 7. Za vsako platformo opišemo splošen model uporabniškega vmesnika ter splošen model uporabniškega vmesnika aplikacije. Kasneje preučimo in opišemo značilne vzorce navigacije. Na koncu tega poglavja pozornost posvetimo gradnikom posamezne platforme in jih strnjeno opišemo. Za boljše razumevanje je celotno poglavje podkrepljeno z veliko slikovnega materiala. Četrto poglavje je primerjalna analiza uporabniških vmesnikov na opisanih platformah. Pod drobnogled vzamemo aplikacije za prenos in nakup aplikacij (trgovina) ter aplikacije za socialno omrežje Facebook. Na podlagi primerjave obstoječih aplikacij in smernic naredimo SWOT analizo za vsako platformo posebej. Zaključek, kot peto poglavje, povzame rezultate diplomskega dela. Prav tako testiramo hipoteze, predstavimo omejitve, uporabnost dela v realnih primerih ter premislimo o možnostih nadaljnjega dela.

22 4 Analiza uporabniških vmesnikov na mobilnih napravah 2 SPLOŠNO O UPORABNIŠKIH VMESNIKIH V splošnem ločimo več tipov mobilnih aplikacij spletne aplikacije, nameščene oziroma prave aplikacije ter hibridne aplikacije [1]. Glede na zahtevane funkcionalnosti, hitrost razvoja, podprtost platform ter vzdrževanja je potrebno v fazah načrtovanja premišljeno izbrati tip aplikacije. Spletne aplikacije (slika 2.1) nam omogočajo izvajanje na večini mobilnih platform. Za svoje izvajanje uporabljajo brskalnik, kar nam omogoča enostavno vzdrževanje. Izvajajo se lahko na spletu ali pa se izvede namestitev na posamezen telefon. Pri slednji možnosti aplikacija za svoje izvajanje prav tako uporablja brskalnik. V večini primerov gre za aplikacije razvite s tehnologijami HTML, CSS ter JavaScript. Slabosti spletnih aplikacij so pri integraciji z mobilno napravo ter njenimi funkcionalnostmi, saj so nam le-te onemogočene. V primeru razvoja aplikacije, ki je takšne narave, da te integracije ne potrebujemo, pa je spletna aplikacije dobra izbira. Kljub temu pa ne smemo pozabiti na smernice in vzorce pri gradnji uporabniškega vmesnika. Nameščene oziroma prave aplikacije (slika 2.1) pa nam ponujajo močno integracijo s samim telefonom, saj so implementirane v podprtem programskem jeziku posamezne platforme. To nam omogoča razširitev funkcionalnosti, kot so na primer zajem slike iz kamere, povezava z imenikom, koledarjem, pomnilnikom in podobno. Ta integracija pa nam posledično nudi tudi integracijo z izvirnim uporabniškim vmesnikom, kar uporabniku ponuja pozitivno uporabniško izkušnjo. Slabost nameščenih oziroma pravih aplikacij pa je v počasnejšem razvoju ter omejenosti izvajanja le na določenih platformah. Dodatni postopki so tudi pri namestitvi aplikacije, saj je kot založnik potrebno aplikacijo pred izidom ter pri kasnejših izdajah digitalno podpisati, posledično pa zaradi tega prihaja tudi do večjih stroškov pri vzdrževanju. Tretji tip so hibridne aplikacije. Gre za razvoj aplikacije v večih tehnologijah ter za komunikacijo med njimi. Ta način razvoja izberemo, ko želimo izkoristiti prednosti že omenjenih tipov (spletne ter nameščene aplikacije) ali v primeru, ko bi bil razvoj

23 Splošno o uporabniških vmesnikih 5 nameščene aplikacije prezahteven oziroma predolg.. Kot primer lahko navedemo razvoj aplikacije v tehnologijah HTML, CSS, JavaScript ali v tehnologiji Flash, za dostop do funkcionalnosti telefona pa uporabimo komponento razvito v izvornem programskem jeziku mobilne platforme. Za komunikacijo med tehnologijami uporabimo izbrani protokol. Slika 2.1: Primer nameščene (prave) aplikacije (levo) ter spletne aplikacije (desno) [2] 2.1 Uporabniške izkušnje Uporabnik od aplikacije pričakuje zmogljivost, odzivnost, vsebino in smiselno strukturo zaslonskih slik. Na uporabniške izkušnje v glavnem vplivajo naslednji dejavniki [3]: dosledna uporaba vzorcev navigacije, struktura in postavitev gradnikov, ki prikazujejo vsebino, uporabniška prilagoditev, iskanje znotraj aplikacije, upoštevanje smernic mobilne organizacije.

24 6 Analiza uporabniških vmesnikov na mobilnih napravah 2.2 Arhitektura mobilne aplikacije Arhitektura mobilne aplikacije je v večini primerov večslojna (slika 2.2), sestavljajo pa jo predstavitveni sloj, poslovna logika in podatkovni sloj. Mobilna rešitev je lahko predstavljena v celoti na mobilni napravi ali pa so nekateri sloji (poslovni ali podatkovni) realizirani na oddaljeni napravi. V diplomskem delu se bomo posvetili najvišjemu, predstavitvenemu sloju [3]. Slika 2.2: Arhitektura mobilne aplikacije [3] 2.3 Pravila dobrega načrtovanja Pri oblikovanju uporabniškega vmesnika je potrebno preučiti in upoštevati naslednje dejavnike dobrega načrtovanja [3]: Preučimo strojno odvisnost in načine vnosa vhodnih podatkov. Preučimo programsko odvisnost, saj lahko naprave uporabljajo različne tipe brkljalnikov. Delovanje aplikacije zato preizkusimo na dejanskih napravah. Uporabimo pravilne velikosti in postavitve gradnikov.

25 Splošno o uporabniških vmesnikih 7 Drsenje vsebine poskusimo omejiti zgolj na vertikalno. Zaradi omejenosti kapacitet pomnilnika vsebino prikažemo čim bolj jedrnato; premislimo o uporabi slik in pomembnosti le-teh. Velikost slik prilagodimo zaslonu; izogibamo se uporabi velikih slik, katerim kasneje zmanjšamo velikost s tem prihranimo na količini prenesenih podatkov, prav tako pa razbremenimo pomnilnik. Smiselno uporabimo animacije. Omejimo vnos znakovnih podatkov zgolj na nujne. Kjer je možno, vnos zamenjamo z drugimi gradniki in s tem izboljšamo uporabniško izkušnjo in prihranimo čas. 2.4 Vnosne metode Uporabniški vmesnik mora poleg predstavitve podatkov skrbeti tudi za interakcijo med uporabnikom in aplikacijo. Zato je potrebno pri načrtovanju spoznati možne vnosne metode ter na podlagi teh izvesti načrt aplikacije. Vnosne metode so lahko: Zaslon na dotik (angl. touch screen) z virtualno tipkovnico, fizična tipkovnica (angl. hardware keyboard), mikrofon, razne fizične namenske tipke telefona, drugi senzorji Vnos preko zaslona Poleg virtualne tipkovnice, poteka interakcija z uporabnikom tudi preko drugih kretenj, katerih koncepti so praviloma skupni na vseh platformah. Najbolj pogoste kretnje so: dotik, dvojni dotik, pritisk, poteg, sunek, povečanje, zmanjšanje. Dotik (angl. tap) je kretnja, s katero uporabnik izbere nek element, ki je občutljiv na kretnjo. Kretnja je izredno kratka, sestavljena iz dveh korakov in sicer dotik - odmik. Ko se uporabnik dotakne zaslona (običajno s prstom), aplikacija odreagira tako, da spremeni stanje določenemu elementu v stanje pritiska, na večini platform pa poleg tega telefon

26 8 Analiza uporabniških vmesnikov na mobilnih napravah odreagira s kratko vibracijo. S temi potezami uporabnik dobi povratno informacijo, da je bila njegova poteza sprejeta s strani aplikacije. Ko uporabnik odmakne prst z zaslona se izvede želena akcija, stanje pritisnjenega elementa pa se vrne v prvotno obliko. To kretnjo bi lahko primerjali z levim klikom računalniške miške [4]. Slika 2.3: Dotik zaslona [4] Dvojni dotik (angl. double tap) je kretnja podobna enojnemu dotiku. Pri mobilnih aplikacijah se ta kretnja uporablja redkeje, kot na primer dvojni klik miške. Primer uporabe je lahko preklop povečave neke vsebine, slike ali druge multimedijske vsebine. Pri nekaterih platformah (predvsem starejših) pa dvojni dotik predstavlja primarno akcijo podobno dvojnemu kliku računalniške miške [4]. Slika 2.4: Dvojni dotik zaslona [4] Pritisk (angl. press) na zaslon je kretnja, ki jo uporabljamo za sekundarne oziroma manj pomembne akcije. Uporabnik izvede dotik na zaslon, vendar pusti prst dalj časa na zaslonu. Po določenem času, ki je odvisen od platforme, se aplikacija odzove. Uporaba je omejena le na določene platforme. Pritisk bi lahko primerjali z desnim klikom računalniške miške [4]. Slika 2.5: Pritisk na zaslon [4]

27 Splošno o uporabniških vmesnikih 9 Poteg (angl. swipe) in sunek (angl. flick) sta zelo podobni kretnji. Pri obeh gre za pritisk prsta na zaslon, pri čemer pa sledi pomik v eno smer razlika je v hitrosti pomika. Prav tako se obe kretnji končata, ko umaknemo prst iz ekrana [4]. Pri potegu sledi dotiku prsta počasen pomik v določeni smeri (običajno horizontalno ali vertikalno, lahko pa tudi v poljubni smeri). Kretnjo lahko uporabimo za premik vsebine v izbrani smeri, kot na primer brskanje med fotografijami v galeriji, lahko pa kretnjo uporabimo za premik določenih elementov na primer urejanje vrstnega reda [4]. Slika 2.6: Poteg po zaslonu (levo) in sunek po zaslonu (desno) [4] Pri sunku, dotiku prsta sledi hiter pomik v določeni smeri. Uporablja se za premik večjih količin podatkov običajno v horizontalni oziroma vertikalni smeri. Povečanje (angl. spread) in zmanjšanje (angl. pinch) sta komplementarni kretnji, pri katerih je pogoj zaslon z možnostjo več hkratnih dotikov (angl. multitouch). Pri obeh kretnjah gre za dotik ekrana z dvema prstoma. Pri zmanjšanju se uporabnik dotakne zaslona z razširjenima prstoma ter ju povleče skupaj ne da bi ju odmaknil od ekrana. Pri povečanju je postopek obrnjen. Kretnja se konča, ko uporabnik odmakne prsta z ekrana [4]. Slika 2.7: Povečanje (levo) in zmanjšanje (desno) [4] Kot smo že omenili, sta kretnji podprti (tudi zaradi strojne opreme) le na določenih mobilnih platformah, uporabljamo pa ju predvsem za povečanje oziroma zmanjšanje pogleda vsebine, fotografije ali druge multimedijske vsebine.

28 10 Analiza uporabniških vmesnikov na mobilnih napravah Fizična tipkovnica Obstaja več različic tipkovnice. Večina mobilnih naprav ima številčno tipkovnico, primarno namenjeno klicem, medtem ko pri pametnih telefonih opazimo pretežno uporabo QWERTY tipkovnic, ki uporabniku omogočajo polni nabor črk in cifer. Obstaja tudi več načinov uporabe fizične tipkovnice. Lahko je nameščena na sprednji strani telefona (običajno pod zaslonom), skrita pod zaslonom (uporabimo jo, ko odpremo telefon) ali pa je skrita pod zaslonom, kadar imamo preklopen telefon. Zaradi velikosti zaslonov, se pri pametnih telefonih fizična tipkovnica opušča in se uporablja virtualna tipkovnica, s čemer se zmanjša velikost in teža naprave, prav tako pa so nižji tudi stroški njene izdelave Mikrofon Vse bolj uporabljena je interakcija preko mikrofona. Sodobne naprave namreč ne uporabljajo mikrofona zgolj za pogovore, temveč tudi za interakcijo z uporabnikom. Prvič se je prepoznava govora na mobilnih napravah pojavila leta Prvi primeri uporabe so bile akcije za izvedbo neke funkcionalnosti, ki so lahko preproste (»Pokliči Janeza«) ali zahtevne (»Nastavi budilko ob 6 zjutraj«). Preprosto prepoznavo govora vsebuje večina telefonov, medtem ko zahtevno premorejo le naprednejši pametni telefoni [5]. Naslednji tip, ki je sledil razvoju prepoznave govora je narek. Pojavil se je leta Gre za prepoznavo govora, ki ga naprava pretvori v besedilo, kar lahko uporabnik s pridom izkoristi pri pisanju SMS sporočila ali drugega daljšega besedila. V povojih je tudi že naslednji korak razvoja prepoznave govora prevajanje, kjer gre za prevajanje po prepoznavi govora. Raziskave so stare že dobro desetletje, sedaj pa prihaja do prvih aplikativnih implementacij na mobilnih platformah. [5] Namenske tipke telefona Naprave za pomembne funkcionalnosti vsebujejo tudi dodatne fizične tipke, večinoma nameščene ob straneh telefona ali pa na sprednji spodnji strani. Gre za posebne primere uporabe, predvidene za sistemske akcije, kot so nastavitev glasnosti, zaklep tipk, sprožilec kamere, priklic menija, prekinitev zveze. Pomembno je, da naša aplikacija funkcionalnosti tipk ne sme prepisati, saj s tem povzročimo anomalijo uporabniških izkušenj.

29 Splošno o uporabniških vmesnikih Drugi senzorji Pametni telefoni vsebujejo veliko število drugih senzorjev, ki nam omogočajo lažje in bolj inovativne aplikacije, zato je smiselno preučiti njihove funkcionalnosti. Večina pametnih telefonov vsebuje naslednje senzorje [6]: ALS (Ambient Light Sensor) je senzor za prepoznavo ambientne svetlobe. Naprava glede na podatke, pridobljene iz senzorja, uravnava svetilnost zaslona, kar omogoča boljšo vzdržljivost baterije in posledično boljšo uporabniško izkušnjo. GPS (Global Positioning System) omogoča pridobivanje trenutne lokacije uporabnika, kar nam omogoča personalizacijo. Ker gre za satelitsko povezavo je uporaba omejena na odprte prostore. Senzor pospeška (angl. accelerometer) omogoča prepoznavo orientacije zaslona. Prav tako pa omogoča prepoznavo nenadnih gibov naprave, kar lahko uporabimo tudi kot funkcionalnost (na primer»stresi telefon za osvežitev podatkov«). Senzor bližine (angl. proximity) prepozna razdaljo med zaslonom naprave in uporabnikom. Tako lahko naprava ugotovi, kdaj jo imamo na ušesu. V tem položaju naprava izklopi zaslon, kar onemogoči neželene akcije, hkrati pa podaljša zdržljivost baterije. Kompas (angl. compass) na pametnih telefonih ne temelji na uporabi magnetov, temveč naprava zaznava zelo nizke frekvence oddajnikov. Žiroskop (angl. gyros) se uporablja za merjenje in vzdrževanje orientacije na podlagi vrtilne količine. Kamera (angl. camera) je namenjena za zajem slike. Lahko se uporabi za preprosto fotografiranje ali snemanje, lahko pa tudi za prepoznavo raznih objektov (na primer branje črtne kode).

30 12 Analiza uporabniških vmesnikov na mobilnih napravah 3 UPORABNIŠKI VMESNIKI RAZLIČNIH MOBILNIH PLATFORM V tem poglavju se bomo na podlagi analize literature osredotočili na različne mobilne platforme. Predstavljeni bodo specifični gradniki (angl. components) za gradnjo uporabniškega vmesnika, standardne postavitve (angl. layout), načrtovalski vzorci (angl. navigation patterns) ter gradnja uporabniškega vmesnika za določeno platformo. Na podlagi statističnih podatkov tržnega deleža (slika 3.1) pametnih telefonov, bodo predstavljene naslednje platforme [7]: Google Android, Nokia (Symbian, MeeGo), Apple ios (iphone), Windows Phone 7. Slika 3.1: Tržni delež mobilnih platform (4. četrtletje 2011) [8]

31 Uporabniški vmesniki različnih mobilnih platform Google Android Google Android je odprtokodna platforma za mobilne naprave, kot so pametni telefoni in tablični računalniki. Predstavljen je bil novembra leta 2007, od takrat pa sta se njegova uporaba in tržni delež strmo dvigala. Po dosedanjih podatkih je bilo prodanih (aktiviranih) že preko 200 milijonov naprav s platformo Android, ta številka pa vsak dan naraste za novih naprav. Ravno zaradi tega je vredno premisliti o priložnosti široke uporabe naše aplikacije na tej platformi [9]. Na trgu so številne verzije; prikazuje jih tabela 1. V tem diplomskem delu se bomo posvetili trenutno najnovejši različici platforme Android, in sicer Android 4.0, imenovano tudi»ice Cream Sandwich«, ki je bila predstavljena 19. oktobra Tabela 1: Seznam različic platforme Android, njihova stopnja API 1 ter delež uporabe Različica Stopnja API Delež uporabe 1.5 Cupcake 3 0.6% 1.6 Donut 4 1.0% 2.2, 2.1 Eclair 7 7.6% 2.2 Froyo % 2.3.x Gingerbread % 3.x.x Honeycomb % 4.0.x Ice Cream Sandwich % Splošen model uporabniškega vmesnika Splošen model uporabniškega vmesnika platforme Android prikazuje slika 3.2 in ga sestavljajo [11]: 1. Obvestila (angl. Notifications) so prikazana na najvišjem nivoju. Uporabnik do njih dostopa preko statusne vrstice. Uporabnika obveščajo o pomembnih informacijah in opomnikih. Pritisk na obvestilo odpre ustrezno aplikacijo. 2. Zaslon za odklep zaslona (angl. Lock screen) preprečuje naključne akcije na napravi in je prikazan takoj pod obvestili. 1 Stopnja API vrednost, ki unikatno identificira verzijo programskega vmesnika in s tem njegove funkcionalnosti [10]

32 14 Analiza uporabniških vmesnikov na mobilnih napravah 3. Zaslon za prikaz nazadnje uporabljenih aplikacij (angl. Recents screen) v obratnem kronološkem zaporedju prikazuje zadnje uporabljene aplikacije in s tem uporabniku omogoča lažje preklapljanje. Zaslon prikličemo preko navigacijskega menija in sicer skrajno desnega gumba. 4. Zaslon z vsemi aplikacijami (angl. All apps screen) omogoča brskanje med naloženimi aplikacijami in vtičniki, hkrati pa omogoča tudi urejanje vrstnega reda in grupiranje le teh. 5. Domači zaslon (angl. Home Screen) je področje, ki ga lahko uporabnik prilagodi svojim potrebam. Dodaja si lahko bližnjice, čas ter vtičnike aplikacij, katerim lahko poljubno spreminja velikost. Slika 3.2: Splošen model uporabniškega vmesnika na platformi Android Splošen model uporabniškega vmesnika aplikacije Tipična aplikacija na platformi Android sestoji iz 6 komponent (slika 3.3) [11]: 1. Statusna vrstica (angl. Status Bar) 2. Glavna akcijska vrstica (angl. Main Action Bar) 3. Dodatna zgornja akcijska vrstica (angl. Top Bar) 4. Področje vsebine (angl. Content Area) 5. Razdeljena akcijska vrstica (angl. Split Action Bar) 6. Navigacijska vrstica (angl. Navigation Bar)

33 Uporabniški vmesniki različnih mobilnih platform 15 Statusna in navigacijska vrstica spadata med sistemske gradnike in naša aplikacija ne more vplivati na njuno uporabo. Statusna vrstica uporabniku prikazuje pomembne informacije, kot so čakajoča obvestila, stanje baterije, ura, moč signala. Prav tako navigacijska vrstica služi za prikaz polja z obvestili to storimo s potegom dol. Navigacijska vrstica je novost pri verziji 4.0 in je prikazana zgolj v primerih ko naprava nima fizičnih tipk. Vsebuje tri akcije: nazaj (angl. back), domov (angl. home) in zadnje uporabljene aplikacije (angl. recents) [11]. Slika 3.3: Splošen model uporabniškega vmesnika Android aplikacije [11] Glavna akcijska vrstica (slika 3.4) se nahaja na vrhu zaslona in se razteza po celotni širini. Sestavljajo jo štirje gradniki in sicer [12]: 1. ikona aplikacije, ki pomembno vpliva na celostno podobo naše aplikacije in se lahko pojavi tudi v kombinaciji s puščico v levo (kadar nismo na najvišjem nivoju aplikacije); 2. krmiljenje pogleda (angl. View Control) uporabimo kadar prikazujemo podatke na različnih zaslonih in želimo med njimi hitro in enostavno preklapljati; 3. akcijski gumbi omogočajo bližnjice do najpomembnejših in najpogosteje uporabljenih akcij nad trenutno prikazano vsebino;

34 16 Analiza uporabniških vmesnikov na mobilnih napravah 4. indikator prekoračitve akcijskih gumbov je prikazan skrajno desno v akcijski vrstici in omogoča dostop do ostalih akcijskih gumbov, ki zaradi omejitve števila ne morejo biti prikazani direktno na akcijski vrstici. Slika 3.4: Akcijska vrstica [11] Dodatna zgornja navigacijska vrstica je opcijski gradnik in se nahaja takoj pod glavno navigacijsko vrstico ter se prav tako razteza čez celotno širino zaslona. Namenjena je prikazu fiksnih zavihkov in zavihkov na drsnem traku. Oba tipa zavihkov bomo spoznali v nadaljevanju [12]. Področje vsebine zavzame ves preostali prostor na zaslonu. Razdeljena akcijska vrstica je prikazana, kadar želimo akcije razporediti po celotnem zaslonu, bodisi zaradi številnosti le-teh ali pa zaradi boljše preglednosti. Razdeljena navigacijska vrstica se zgleduje po glavni in prav tako uporablja indikator prekoračitve akcijskih gumbov [12] Vzorci navigacije Navigacija nazaj in gor Pri navigaciji nazaj in gor gre za hierarhično odvisne zaslonske slike, akciji nazaj in gor pa služita za pomikanje po hierarhiji navzgor (slika 3.5). Akcija nazaj je že znana iz prejšnjih verzij, medtem ko je akcija gor novost. V določenih primerih uporabe je njuna funkcionalnost identična, razlikujeta pa se v načinu prehoda po zaslonskih slikah nazaj. Gumb nazaj se po skladu pomika po obratnem kronološkem zaporedju obiskanih zaslonskih slik, medtem ko gumb gor (nahaja se v akcijski vrstici), prehaja nazaj po nivojih hierarhije (in ignorira vso zgodovino na istem nivoju hierarhije). Ravno zaradi tega je gumb gor uporabniku na voljo le, ko vstopi v drugi nivo hierarhije zaslonov [13]. Gumb nazaj ima poleg omenjenega še nekaj dodatnih posebnosti, ki si jih velja zapomniti [13]: zapre vsa modalna okna (dialoge, pojavna okno),

35 Uporabniški vmesniki različnih mobilnih platform 17 zapre kontekstne akcijske vrstice in odstrani poudarjeno stanje iz vseh elementov, skrije virtualno tipkovnico. Slika 3.5: Primer navigacije nazaj in gor Navigacija z zavihki Navigacija z zavihki se uporablja v primerih, ko gre za hierarhično neodvisne zaslone ali pa, kadar želimo predstaviti zaslone na istem nivoju hierarhije. Ločimo dva tipa zavihkov (slika 3.6) [12]: Zavihki na drsnem traku (angl. Scrollable tabs) vedno zavzamejo celotno širino zaslona in jih uporabljamo kadar želimo predstaviti veliko število vzporednih zaslonov, saj so na zaslonu vedno vidni le trije zavihki, ostali pa se sproti dinamično dodajajo. Med zasloni se pomikamo s horizontalnim potegom po celotnem zaslonu. Fiksni zavihki (angl. Fixed tabs) so na zaslonu vedno vidni, zato jih uporabimo za manjše število vzporednih zaslonov. Slika 3.6: Zavihki na drsnem traku (levo) in fiksni zavihki (desno)

36 18 Analiza uporabniških vmesnikov na mobilnih napravah Navigacija»Swipe«Kadar želimo predstaviti elemente iste skupine (na primer neprebrana pošta, športne novice, ipd.), ki pa zasedajo področje celotnega zaslona (predstavljeni so detajlno), uporabimo navigacijo»swipe«, kjer gre za vzporedno predstavitev zaslonov. S horizontalnim potegom se pomikamo po elementih oziroma njihovim podrobnostih, kot prikazuje slika 3.7. Slika 3.7: Prikaz navigacije»swipe«3.1.4 Pregled osnovnih gradnikov Seznam Seznam (angl. List) predstavi elemente v obliki seznama. Elementi seznama so lahko podatkovnega ali pa navigacijskega tipa. Predstavimo pa jih z širokim naborom tipov (slika 3.8) [14]. 1. Naslov sekcije, ki omogoča prikaz različnih tipov znotraj enega seznama ali pa preprosto združevanje podatkov v skupine in s tem boljšo preglednost. 2. Elementi seznama a. enovrstični, dvovrstični, večvrstični; b. elementi s sliko; c. elementi z dodatnimi gradniki.

37 Uporabniški vmesniki različnih mobilnih platform 19 Slika 3.8: Primeri elementov seznama Gradnik»Spinner«Gradnik uporabimo, kadar izbiramo med manjšo množico vrednosti. V privzetem stanju gradnik prikazuje trenutno izbrano vrednost, s pritiskom nanj pa se odpre spustni meni, ki uporabniku ponudi vse ostale možnosti. Gradnik prepoznamo po pravokotnem trikotniku v spodnjem desnem kotu gradnika (slika 3.9) [14]. Slika 3.9: Gradnik»Spinner« Gradnik»Button«Priporočljivo je uporabljati sistemske gumbe, saj s tem zagotavljamo konsistentnost znotraj aplikacije in tudi glede na celotno platformo. Android ponuja dva tipa sistemskih gumbov in sicer osnovni gumb (angl. basic button) ter gumb brez obrobe (angl. borderless button). Oba tipa lahko vsebujeta tekstovno oznako in/ali ikono (slika 3.10) [14]. Slika 3.10: Osnovni gumbi (levo) in gumbi brez obrobe (desno) [14]

38 20 Analiza uporabniških vmesnikov na mobilnih napravah Da zagotovimo boljšo uporabniško izkušnjo Android poskrbi za vizualno povratno informacijo, ko uporabnik pritisne na gumb; obarva ga modro (slika 3.11) [14]. Slika 3.11: Prikaz privzetega in pritisnjenega stanja na temni in svetli temi [14] Gradnik»TextField«Vnosno polje (angl. Text field) uporabniku omogoča vnos besedila. Polje je lahko enovrstično ali pa večvrstično. Pri enovrstičnem načinu je celotno vneseno besedilo prikazano v eni vrstico, gradnik pa samodejno postavi besedilo do področja kazalca. Pri večvrstičnem načinu pa se besedilo na koncu vrstice lomi v novo vrstico in tako uporabniku omogoča pregled nad celotnim vnesenim besedilo (slika 3.12) [14]. Slika 3.12: Enovrstično vnosno polje (levo) in večvrstično vnosno polje (desno) Gradniku je moč nastaviti tudi tip podatkov, ki jih sprejme. S tem lahko uporabnik vnaša le določene tipke (število, e-poštni naslov, ipd.); temu primerna je tudi virtualna tipkovnica za vnos [14] Gradnik»SeekBar«Z gradnikom lahko uporabnik opravi prilagoditve vrednosti, tako da povleče gumb gradnika. Gradnik predstavlja diskreten interval vrednosti, pri čemer je najmanjša vrednost predstavljena s skrajno levo točko traku, maksimalna vrednost pa s skrajno desno točko. Gradnik je predstavljen s 4 stanji, ki so tudi vizualno prepoznavna (slika 3.13) [14]. Slika 3.13: Stanja gradnika»seekbar«[14]

39 Uporabniški vmesniki različnih mobilnih platform Gradnika»Progress«in»Activity«Gradnika predstavita opravilo v izvajanju. V kolikor poznamo čas izvajanja opravila, uporabimo gradnik»progress«(slika 3.14), pri čemer moramo proces opravila vedno predstaviti z odstotki. Konec opravila nastopi, ko gradnik doseže skrajno desno točno. Kot dodatno informacijo lahko uporabimo besedilno oznako, kjer prikažemo trenutno opravljen del [14]. Slika 3.14: Gradnik»Progress«[14] V kolikor imamo opravilo, za katerega končna točka ni jasno definirana uporabimo gradnik»activity«, za katerega sta na volja 2 stila prikaza (slika 3.15) prvi, prikazan v akcijski vrstici, zagotavlja nemoteno uporabo aplikacije med izvajanjem opravila, medtem ko drugi, celozaslonski način s centriranim krožnim indikatorjem uporabimo, kadar nimamo na voljo podatkov za nadaljnjo uporabo aplikacije [14]. Slika 3.15: Primera gradnika»activity«[14] Stikala Platforma Android ponuja standarden nabor stikal, uporabniku poznan iz drugih platform in operacijskih sistemov. Potrditveno stikalo (angl. Checkbox) uporabljamo v primerih, ko želimo, da uporabnik izbere eno ali več ponujenih možnosti. Izogibamo se uporabi gradnika v primerih, ko gre za vklop ali izklop neke funkcionalnosti, saj imamo za ta namen posebno stikalo vklop/izklop [14]. Radijski gumb (angl. Radio Button) je podoben potrditvenemu stikalu, vendar lahko uporabnik izbere le eno izmed ponujenih možnosti v skupini stikal. Premislimo, ali uporabnik potrebuje vidne vse možnosti, v nasprotnem primeru se raje odločimo za uporabo gradnika»spinner«(poglavje ) [14].

40 22 Analiza uporabniških vmesnikov na mobilnih napravah Tako potrditveno polje, kot radijski gumb vsebujeta različne vizualne stile, ki uporabniku jasno prikazujejo trenutno stanje gradnika. Stanja prikazuje slika Slika 3.16: Vizualna stanja potrditvenega polja in radijskega gumba [14] Stikalo vklop/izklop (angl. On/off Switch) uporabimo, kadar želimo omogočiti ali onemogočiti neko funkcionalnost aplikacije. Gradnik tudi prikazuje trenutno izbrano stanje (slika 3.17) [14]. Slika 3.17: Stikalo; izklopljeno stanje (levo) in vklopljeno stanje (desno) [14] Modalna okna Platforma Android ponuja več vrst modalnih oken, ki se med seboj razlikujejo tako po namenu uporabe, kot tudi vizualni podobi. Dialog lahko uporabimo za enostavne ali pa kompleksnejše odločitve; sestavljajo ga (slika 3.18) [14]: 1. Področje naslova, ki je opcijsko in jedrnato opisuje funkcionalnost dialoga; 2. Področje vsebine je lahko zelo raznoliko in vsebuje druge gradnike; 3. Akcijski gumbi, s katerimi uporabnik končna proces. Tipično gre za potrditveni in zavrnitveni gumb.

41 Uporabniški vmesniki različnih mobilnih platform 23 Slika 3.18: zgradba dialoga Opozorilo (angl. Alert) je oblika dialoga, pri katerem se v področju vsebine nahaja le besedilo, od uporabnika pa lahko sprejme le potrditveno oziroma zavrnitveno akcijo. Tudi pri opozorilu je področje naslova opcijsko [14]. Pojavno okno (angl. Popup) je oblika dialoga, ki ne vsebuje akcijskih gumbov, temveč uporabnik akcijo izvede preko vsebinskega dela, kjer predstavimo možnosti v obliki seznama ali pa nabora gumbov. Kot primer uporabe lahko navedemo izbiro socialnega omrežja, preko katerega želimo deliti nek vir [14]. Gradnik»Toast«(slika 3.19) je posebno modalno okno, ki ga uporabljamo za prikaz asinhronih obvestil. Vsebuje zgolj besedilo, brez akcij s strani uporabnika. Zapre se, ko poteče določen čas. Slika 3.19: Modalno okno»toast« Izbirnik Izbirnik (angl. Picker) v obliki dialoga (slika 3.20) omogoča izbiro vrednosti v končnem naboru le-teh. Za izbiro uporabimo vertikalni poteg ali pa tipkovnico (če je na voljo). Posebna oblika izbirnika je izbira datuma in ure (angl. Date and time picker), pri katerih

42 24 Analiza uporabniških vmesnikov na mobilnih napravah gre za izbiro več vrednosti (vsaka v svojem stolpcu), ki nato skupaj tvorijo uporabnikov vnos (slika 3.20) [14]. Slika 3.20 Primeri izbirnika; privzeto (levo), izbirnik časa (sredina) in datuma (desno) 3.2 Nokia Symbian Obstaja več različic platforme Symbian. Zadnja različica Symbian Belle je bila predstavljena avgusta 2011, trenutno aktualne različice pa so še Symbian Anna ter Symbian^3 in tudi nekatere starejše različice kot je S60 5th edition. Dobra praksa je upoštevanje smernic za načrtovanje uporabniškega vmesnika novejših različic, zato bomo predstavili novejše smernice [15] Splošen model uporabniškega vmesnika Osnovno strukturo uporabniškega vmesnika prikazuje slika 3.21 ter jo sestavljajo [16]: Zaslon za prikaz zaklepa tipk preprečuje neželene akcije in se pojavi, ko uporabnik privede napravo iz stanje pripravljenosti. Ob uporabi ustrezne kretnje zaslon poskrbi za nadaljnjo uporabo naprave. Namizje (angl. Homescreen) je osnovna komponenta, ki vsebuje razne podatke, kot sta na primer ura ali čas, podatke o izbranem profilu telefona, prav tako pa namizje vsebuje bližnjice do aplikacije in vtičnike (angl. Widget) aplikacij, kar uporabniku omogoča večjo interakcijo ter enostavnejšo uporabo aplikacij. Sestavljeno je iz treh različnih pogledov, med katerimi preklapljamo s kretnjo sunek v horizontalni smeri, trenutno izbran pogled pa določajo navigacijske pike v spodnjem delu ekrana.

43 Uporabniški vmesniki različnih mobilnih platform 25 Zaganjalnik aplikacij oziroma meni (angl. menu) je praktično razširitev namizja, ki omogoča pregled in zagon aplikacij. Aplikacije se ena na drugo nalagajo na namizje in lahko imamo zagnanih več aplikacij hkrati, za preklapljanje med njimi pa skrbi preklopnik opravil (angl. task switcher). Dialogi so na najvišjem nivoju in omogočajo interakcijo z uporabnikom. Slika 3.21: Osnovna struktura uporabniškega vmesnika Symbian Splošen model uporabniškega vmesnika aplikacije Splošen model uporabniškega vmesnika aplikacije prikazuje slika 3.22 in ga sestavljajo naslednje obvezne komponente [16]: Statusna vrstica (angl. status bar), ki je namenjena prikazu sistemskih statusnih ikon in informacij, kot so moč signala, stanje baterije, povezave in čas. Ob potegu navzdol se statusna vrstica razširi in preide v center za obvestila, kjer ima

44 26 Analiza uporabniških vmesnikov na mobilnih napravah uporabnik na voljo zadnja pomembna obvestila, prav tako pa bližnjice za vklop ali izklop Bluetooth povezave, brezžičnega in mobilnega omrežja ter tihega profila. Vsebina (angl. content) Orodna vrstica (angl. toolbar) Slika 3.22: Osnovni model uporabniškega vmesnika Sprememba orientacije zaslona Razvijalci aplikacij za platformo Symbian morajo upoštevati tudi spremembo orientacije zaslona, ki je lahko pokončna (angl. portrait) ali ležeča (angl. landscape). Sprememba rotacije se proži s pomočjo strojnega senzorja, ki pa ga lahko uporabnik izklopi v nastavitvah. Privzeta orientacija je pokončna, pri napravah s fizično tipkovnico pa pride do izraza ležeča orientacija. [17] Pri načrtovanju predvidimo obnašanje orientacije, pri čemer imamo tri možnosti [17]: Uporabniški vmesnik se sam prilagodi prikazovalniku, pri čemer se obdrži enaka razporeditev elementov. Primer prikazuje slika 3.23.

45 Uporabniški vmesniki različnih mobilnih platform 27 Slika 3.23: Samodejna prilagoditev uporabniškega vmesnika glede na orientacijo [17] Razporeditev elementov je za pokončno in ležečo orientacijo različen, kar pripomore k boljšemu izkoristku zaslona ter uporabniški izkušnji. Primer aplikacije prikazuje slika 3.24, kjer je seznam glasbenih albumov v pokončni orientaciji prikazan kot preprost seznam, v ležeči orientaciji pa kot grafično dopolnjena zbirka naslovnih slik albumov. Slika 3.24: Različna razporeditev elementov za pokončno in ležečo orientacijo [17] Orientacijo pa lahko v nekaterih specifičnih primerih omejimo zgolj na pokončno ali ležeče, vendar moramo biti pri izbiri previdni. Dober primer omejitve orientacije je video predvajalnik, kjer se video natančno prilega razmerju ležeče orientacije. Primer prikazuje slika 3.25.

46 28 Analiza uporabniških vmesnikov na mobilnih napravah Slika 3.25: Zaklenjena orientacija zgolj na ležečo [17] Vzorci navigacije Naslednja pomembna smernica je uporaba vzorcev navigacije po aplikaciji saj moramo uporabljati standardne načine povezav med postavitvami in s tem zagotavljati konsistenco uporabniške izkušnje. Na voljo imamo [18]: Vrtanje v globino (angl. drill-down), pri čemer posamezne akcije pomenijo prikaz novega zaslona, s čemer se gradi hierarhični sklad zaslonov. Uporabniku moramo zagotavljati prehod na prejšnji zaslon, kar pa omogočimo z akcijo nazaj (angl. back) v orodni vrstici. Primer hierarhije zaslonov prikazuje slika Slika 3.26: Primer navigacije vrtanja v globino [18] Vzporedna navigacija (angl. parallel view navigation) daje prednost vsebini pred navigacijo. V večini primerov navigacijo izvedemo z uporabo zavihkov. Zavihki uporabniku nudijo jasen pregled nad aplikacijo, hiter preklop med funkcionalnostmi aplikacije, hkrati pa označujejo trenutno pozicijo v aplikaciji. Ker za navigacijo skrbi sam gradnik z zavihki ne potrebujemo premika nazaj, prav tako

47 Uporabniški vmesniki različnih mobilnih platform 29 so zasloni v vzporedni navigaciji hierarhično na istem nivoju. Primer prikazuje slika Drugi način izvedbe vzporedne navigacije je s pomočjo orodne vrstice, vendar samo v primerih, ko gre za dva vzporedna zaslona. Primer prikazuje slika Slika 3.27: Izvedba vzporedne navigacije s pomočjo zavihkov [18] Slika 3.28: Izvedba vzporedne navigacije s pomočjo orodne vrstice [18] Pregled osnovnih gradnikov Gumbi in stikala Gumbi in stikala so namenjeni interakciji z uporabnikom, njihov namen pa je določen s tipom gumba. Potisni gumb (angl. Push Button) je predstavljen z zaobljenim pravokotnikom, besedilom ali ikono. Za zagotavljanje povratne informacije uporabniku gradnik vsebuje štiri različna (vizualna) stanja (slika 3.29). Uporabimo ga v primerih, ko želimo izvesti diskretne ali pa preklopne (angl. toggle) akcije [19].

48 30 Analiza uporabniških vmesnikov na mobilnih napravah Slika 3.29: Stanja gumba V kolikor potisni gumb uporabimo za preklop med funkcionalnostmi, lahko to storimo kot kombinacijo dveh ali več gumbov (slika 3.30) ali pa kot samostojen gumb za preklop vrednosti [19]. Slika 3.30: Primer uporabe preklopnih gumbov Specializirani tipi gumbov so stikala, ki prav tako zagotavljajo vizualne povratne informacije (slika 3.31). Poznamo [19]: Potrditveno polje (angl. Checkbox), kadar želimo izbor ene ali več vrednosti. Radijski gumb (angl. Radio Button), kadar želimo izbor ene vrednosti izmed množice. Stikalo (angl. Switch) za vklop ali izklop funkcionalnosti aplikacije. Slika 3.31: Vizualna stanja stikal Vnosna polja Poznamo dva gradnika vnosnih polj in sicer»textfield«, ki je enovrstičen ter»textarea«, ki je več vrstična. Premislimo, koliko urejevalne površine bo uporabnik potreboval in se na podlagi tega odločimo, kateri tip bomo izbrali. Oba gradnika imata številne možnosti uporabe, kot so vklop/izklop možnosti urejanje, podpora bogatega teksta, poravnava besedila, prikaz kazalca in prednastavljeno besedilo (slika 3.32). Kot večina drugih

49 Uporabniški vmesniki različnih mobilnih platform 31 gradnikov, tudi vnosna polja ponujajo vizualna stanja za boljši pregled nad kontrolo (slika 3.32) [19]. Slika 3.32: Primer prednastavljenega besedila Za razliko od nekaterih drugih platform, Symbian v primeru vnosa gesla, ne uporablja posebnega gradnika, temveč uporabi»textfield«, kateremu nastavimo parameter za skrivanje vnesenega besedila [19] Pogovorna okna Pogovorna okna (angl. Dialogs) uporabniku predstavijo informacije, od njega zahtevajo odločitve ali pa jih uporabi za izvedbo določenega opravila. Obstajajo različni tipi dialogov (slika 3.33) [19]: Povpraševanje (angl. Query), kadar želimo od uporabnika potrdilno ali zavrnitveno akcijo. Izbira (angl. Selection), kadar uporabniku ponudimo nabor možnostih in vsaka od njih predstavlja potrditev. Obvestilo (angl. Information), kjer uporabnika obvestimo o spremembi nekega stanja, ki vpliva na njegov trenutni primer uporabe. Obvestilna pasica (angl. Info Banner) uporabniku sporoči spremembo nekega stanja, ki pa ni povezano z njegovim trenutnim primerom uporabe aplikacije. Slika 3.33: Vrste dialogov

50 32 Analiza uporabniških vmesnikov na mobilnih napravah Posebna vrsta dialoga je gradnik»tumbler«, ki uporabniku omogoča izbiro vrednosti ali pa nabor različnih vrednosti s pomočjo vertikalnega potega (slika 3.34). Ker gre za povpraševalni dialog, vsebuje potrditveni in zavrnitveni gumb. Tipični raba tega tipa dialoga je, ko od uporabnika želimo vnos datuma ali ure [19]. Slika 3.34: Gradnik»Tumbler« Seznami Seznam in njegovi elementi predstavljajo glavnino med gradniki platforme Symbian. Prav tako ponujajo največ možnih variacij in s tem svobodo razvijalcem pri oblikovanju lastne aplikacije. Seznam sestoji iz obveznih in opcijskih elementov. K obveznim elementom štejemo elemente seznama, drsnik, področje pritiska, ozadje in robove med elementi; medtem ko lahko kot opcijska elementa uporabimo glavo seznama in pa oznake sekcij. Element seznama lahko vsebuje številne gradnike, ki jih uporabimo glede na potrebe podatkov (slika 3.35), prav tako pa lahko variira njegova višina [19]. Slika 3.35: Primeri seznamov [19] V primeru dvoumnosti ali nejasnosti o vsebini seznama lahko uporabimo glavo seznama, katere besedilo je privzeto desno poravnano; v kolikor pa uporabimo indikator napredka pa

51 Uporabniški vmesniki različnih mobilnih platform 33 besedilo poravnamo levo. V primeru velike količine podatkov le-te ločimo v sekcije, pri čemer so delilniki sekcij vizualno podobni glavi seznama. Tako glava seznama, kot delilniki sekcij ne predstavljajo interakcije z uporabnikom [19] Indikator napredka Kadar želimo uporabnika obvestiti o opravilu v izvajanju, uporabimo indikator napredka (angl. Progress indication). Indikator ima zgolj eno stanje in ne predstavlja interakcije z uporabnikom. Na voljo imamo različne tipe indikatorjev (slika 3.36), ki jih ločimo v 2 skupini [19]: Indikator napredka z določenim časom, kadar lahko v odstotkih ugotovimo koliko opravila je že opravljenega; Indikator napredka z nedoločenim časom, kadar konec opravila ni znan; Indikator v statusni vrstici uporabimo kot agregacijo procesov aplikacije; Kolesce (angl. Spinner), kadar želimo prikazati nalaganje vsebine. Slika 3.36: Primeri indikatorjev Drsnik Drsnik (angl. Slider) je gradnik, s katerim uporabnik izbira vrednost na nekem intervalu. Obstaja več možnih kombinacij (slika 3.37), ki vsebujejo različne elemente, med katerimi sta obvezna le sled in gumb [19]: 1. Sled (angl. Track) je obvezen element drsnika in predstavlja interval vrednosti; 2. Gumb je obvezen interaktiven element, s katerim spreminjamo vrednost; 3. Zaslonski namig (angl. Tooltip) označuje trenutno izbrano vrednost, kadar je uporabnik med postopkom izbire; privzeto je namig vključen, vendar ga lahko tudi onemogočimo;

52 34 Analiza uporabniških vmesnikov na mobilnih napravah 4. Dodatni gumb, s katerim vklopimo ali izklopimo celoten interval (na primer vklop ali vklop zvoka, kadar gre za izbiro glasnosti); 5. Gumba za povečanje ali zmanjšanje vrednosti, s katerima uporabniku omogočimo spreminjanje vrednosti po enotah; 6. Oznaka besedila, s katero prikažemo začetek in konec intervala. Slika 3.37: Zgradba elementa drsnik Meniji Menije (slika 3.38) uporabljamo za izvedbo dodatnih akcij nad vsebino. Obstaja več vrst menijev [19]: Meni pogleda (angl. View menu) preko katerega dostopamo iz orodne vrstice in ob aktivaciji pokrije trenutno vsebino ter je poravnan v spodjem delu zaslona; Podmeni (angl. Submenu), kadar želimo akciji v meniju pogleda dodeliti dodatne akcije, kar simboliziramo z desno puščico. Meni se prav tako pojavi čez celoten zaslon, vendar je, glede nanj, centriran. Elementi podmenija lahko vsebujejo tudi ikone. Objektni meni (angl. Object menu) je vizualno enak podmeniju, vendar deluje kot samostojen element. Uporabimo ga, kadar želimo nad elementi seznama izvesti določene akcije to storimo s pritiskom na dotičen element. Objektni meni ne more vsebovati podmenijev. Slika 3.38: Grafična predstavitev menija [19]

53 Uporabniški vmesniki različnih mobilnih platform MeeGo 1.2 Harmattan MeeGo je novejša mobilna platforma Nokie, ki temelji na ogrodju operacijskega sistema Linux. Po prvotnih načrtih naj bi šlo za širšo distribucijo te platforme, vendar se je, ob napovedi sodelovanja med Nokio in Microsoftom, distribucija preusmerila na telefone, ki podpirajo mobilni operacijski sistem Windows Phone 7, katerega pa bomo opisali v poglavju Splošen model uporabniškega vmesnika Splošen model uporabniškega vmesnika MeeGo je zelo podoben modelu platforme Symbian, le da so nekatere akcije prilagojene kretnjam, ki jih uporablja MeeGo in jih bomo še spoznali. Prikazuje ga slika 3.39 in je sestavljen iz naslednjih komponent [20]: Zaslon za prikaz zaklepa tipk (angl. Lock Screen) ima enako vlogo kot pri platformi Symbian, le da je odklep prilagojen kretnjam platforme MeeGo. Obvestila (angl. Notifications) so dostopna preko zaslona za prikaz zaklepa tipk ali pa preko komponente domačega zaslona dogodki. Uporabniku posredujejo pomembna obvestila, kot so zgrešeni klici, novo sporočilo, nova elektronska pošta in podobno. Domač zaslon (angl. Home), ki je sestavljen iz treh podkomponent, med katerimi uporabnik preklaplja s pomočjo horizontalne kretnje sunek. Prva komponenta dogodki (angl. Events) uporabniku posreduje vse tekoče pomembne informacije s področja komunikacij (elektronska pošta), socialnih omrežij (Facebook, Twitter, ), trenutnega vremena (AccuWeather). Druga komponenta je zaganjalnik aplikacij (angl. Applications), ki omogoča zagon aplikacij. Z razliko od platforme Symbian so vse aplikacije zbrane na enem nivoju in jih ni možno razdeliti v podmape. Tretja komponenta domačega zaslona pa je seznam odprtih aplikacij (angl. Open Applications), preko katerega lahko uporabnik dostopa do že odprtih aplikacij oziroma zapre le-te. Aplikacije (angl. Applications) se nalagajo ena na drugo in jih lahko imamo zagnanih več hkrati. Z ustreznimi kretnjami aplikacijo minimiramo (poteg iz levega, spodnjega ali desnega roba) ali pa jo zapremo (poteg od zgoraj navzdol).

54 36 Analiza uporabniških vmesnikov na mobilnih napravah Med aplikacijami lahko preklapljamo iz domačega zaslona s pomočjo seznama odprtih aplikacij. Hitri zaganjalnik (angl. Quick Launcher) se aktivira s kretnjo potega tako, da počasi vlečemo od dna prikazovalnika proti vrhu, nato pa pred vrhom kretnjo ustavimo in spustimo prst iz ekrana. Odpre se nam hitri zaganjalnik, s pomočjo katerega imamo hiter dostop do aplikacije za telefoniranje, sporočil, internetnega brskalnika ter kamere. Obstajajo tudi neuradne aplikacije, ki omogočajo menjavo teh štirih bližnjic s katerokoli drugo aplikacijo. Slika 3.39: Splošen model uporabniškega vmesnika MeeGo [20] Splošen model uporabniškega vmesnika aplikacije Splošen model uporabniškega vmesnika aplikacije sestavljajo (slika 3.40) [21]: Statusno obvestilna vrstica (angl. Status Bar and Notification banner) prikazuje moč signala, uro, stanje baterije. Kot bližnjica omogoča tudi hiter dostop do nastavitev. Glava (angl. Header Bar) je neobvezen element in prikazuje ime aplikacije oziroma naziv trenutnega zaslona. Vsebina (angl. Content Area) Navigacijska komponenta (angl. Navigation component) je lahko orodna vrstica (angl. Toolbar) ali vrstica z zavihki (angl. Tab Bar). Pri orodni vrstici gre za izbor

55 Uporabniški vmesniki različnih mobilnih platform 37 nabora akcij namenjenih trenutnemu zaslonu, akcije prehoda nazaj ali pa akcije dodatnega menija. Uporaba zavihkov pa omogoča izvedbo vzporednih zaslonov, a je število zavihkov omejeno na pet. Slika 3.40: Osnovni model uporabniškega vmesnika aplikacije [21] Potreben je le poteg MeeGo uporablja enostavno interakcijo s pomočjo kretenj, kar zagotavlja platformi edinstvenost, hkrati pa izboljšuje uporabniško izkušnjo. Zaradi prepoznavnih kretenj uporabniški vmesnik ne potrebuje dodatnih gradnikov, kar pa omogoča večjo površino podatkom, ki so za uporabnika najpomembnejši. Geslo marketinške kampanje se tako glasi»swipe is all you need«oziroma v prevodu»potreben je le poteg«. MeeGo omogoča poteg po zaslonu (angl. swipe) z vsakega roba prikazovalnika. V primeru odprte aplikacije se v primeru premika od zgoraj navzdol aplikacija zapre, v vseh ostalih treh primerih (levo, desno, spodaj) pa aplikacijo postavimo v ozadje. Prav tako poteka odklep zaslona s pomočjo kretnje potega po zaslonu z vsakega roba prikazovalnika [22]. Zaradi strogih smernic moramo biti kot razvijalec izredno pazljivi, da ne pride do konfliktov pri uporabi omenjenih potegov. Obstaja pa nekaj posebnih primerov (predvsem igre), kjer je potrebno zaradi nemotene uporabe kretnjo onemogočiti, vendar je v tem primeru potrebno na zaslon postaviti gradnik, ki jasno določa zamenjavo kretnje [22].

56 38 Analiza uporabniških vmesnikov na mobilnih napravah Prav tako kot Symbian tudi MeeGo podpira obe orientaciji (pokončno in ležečo), pri čemer platforma sama skrbi za preklop med njima. Za spremembo orientacije veljajo enake smernice razvoja kot pri platformi Symbian, opisane v poglavju 3.2. Privzeta orientacija je pokončna, vendar je v nekaterih primerih možno zakleniti orientacijo zgolj na pokončno (npr. dolgi seznami elementov) ali ležečo (npr. igre, video predvajalniki) [23] Vzorci navigacije Osnovne smernice navigacije in strukture aplikacije so naslednje [24]: Vrtanje v globino (angl. drill down) je izvedba s hierarhijo zaslonov, kjer nam akcija nazaj (angl. back) v orodni vrstici omogoča vrnitev na prejšnji zaslon (slika 3.41). Vrtenje v globino je izredno zmogljiv način navigacije in omogoča strukturo veliki količini podatkov, ki so organizirani v seznamih na različnih nivojih. Slika 3.41: Vrtanje v globino [24] Uporaba zavihkov (angl. tab bar navigation), pri čemer je vrstica z zavihki postavljena v spodnjem delu zaslona in lahko vsebuje največ 5 zavihkov, ki služijo zgolj za navigacijo med zasloni in ne za proženje raznih akcij (npr. ustvari novo sporočilo). Nabor zavihkov naj ostane vedno enak in se med izvajanjem ne spreminja. Aktivni zavihek vizualno ponazarja trenutno aktiven zaslon. Ob inicializaciji aplikacije moramo določiti kateri zavihek naj bo aktiven, v nasprotnem primeru se aplikacija zažene z aktivnim prvim zavihkom. Vzorec prikazuje slika 3.42.

57 Uporabniški vmesniki različnih mobilnih platform 39 Slika 3.42: Uporaba zavihkov [24] Uporaba zavihkov ter pomika nazaj (angl. tab bar and back navigation) se uporablja za bolj zapletene strukture, kjer gre za enak koncept kot pri uporabi zgolj zavihkov, le da imamo strukturo na več nivojih, zato potrebujemo dodatno akcijo prehoda nazaj (angl. back), kar pa posledično pomeni zgolj 4 zavihke oziroma vzporedne zaslone (slika 3.43). Slika 3.43: Uporaba zavihkov ter pomika nazaj [24] Pregled osnovnih gradnikov Gradniki platforme MeeGo so zelo podobni gradnikom platforme Symbian (poglavje 3.2.5, stran 29). Ker smo slednje spoznali že v prejšnjem poglavju, bomo v tem poglavju izpostavili zgolj vizualne razlike in razlike med gradniki.

58 40 Analiza uporabniških vmesnikov na mobilnih napravah Gumbi in stikala Gumbi se pri platformi MeeGo vizualno in funkcionalno ne razlikujejo od gumbov platforme Symbian, zato jih ne bomo še enkrat podrobneje opisovali. Enako velja za stikala (potrditveno polje, radijski gumb, stikalo vklop/izklop). Edina posebnost je zgolj višina in širina, ki je prilagojena resoluciji MeeGo naprav [25] Vnosna polja Osnovne funkcionalnosti in vizualni izgled je enak platformi Symbian, ima pa platforma nekaj posebnosti glede dodatnih elementov, ki jih lahko po potrebi dodamo vnosnim poljem (slika 3.44) [25]. Slika 3.44: Vnosna polja z dodatnimi gradniki [25] Pogovorna okna in meniji Obstajajo enaka pogovorna okna ter meniji kot pri platformi Symbian, le da prihaja do vizualnih razhajanj. Vizualni stil prikazuje slika Slika 3.45: Dialogi in meniji [25]

59 Uporabniški vmesniki različnih mobilnih platform Seznami Če zanemarimo višino elementov seznama in velikost pisave ter gradnikov elementa (zaradi prilagoditve resolucije), je edina bistvena razlika le pri robovih med elementi. Platforma MeeGo namreč med elementi ne vsebuje robov, kar prikazuje tudi primer (slika 3.46) [25]. Slika 3.46: Primer elementov seznama s sliko [25] Indikator napredka Kot platforma Symbian tudi MeeGo ponuja dve skupini indikatorjev (slika 3.47). Indikator, kadar vemo končno točko procesa in indikator, kadar te točke ne poznamo. Prav tako lahko uporabimo kolesce (angl. Spinner) [25]. Slika 3.47: Indikatorji napredka; Končna točna neznana (levo), končna točka znana (sredina) in kolesce (desno) Drsnik Bistvena razlika drsnika glede na drsnik platforme Symbian je, da ga lahko uporabimo kot iskalno vrstico (angl. Seek bar) uporabimo jo lahko na primer pri predvajanju glasbe. Na podlagi te ugotovitve je jasno, da ima drsnik zgolj en obvezen element sled. Prav tako lahko kombiniramo elemente med seboj in s tem prilagodimo drsnik našim potrebam (slika 3.48) [25]. Slika 3.48: Primeri drsnikov

60 42 Analiza uporabniških vmesnikov na mobilnih napravah 3.4 Apple ios Platforma ios se uporablja na napravah iphone, ipod, ipad, Apple TV. Do leta 2010 je bilo njeno ime iphone OS, kasneje pa se je zaradi širokega spektra uporabe, preimenovala v ios. Temelji na operacijskem sistemu Mac OS X (Unix operacijski sistem), le da je prilagojena za uporabo na mobilnih napravah. Njena uporaba strmo narašča. Oktobra 2011 so na spletni trgovini App Store 1 zabeležili preko aplikacij ter preko 18 milijard prenosov. Platforma dodaja tudi nekatere specifične tehnologije, kot je večdotičnost (angl. multitouch), podpira pa tudi ostale, nam že znane načine, interakcije, kot so poteg, dotik, sunek, pritisk [27] Splošen model uporabniškega vmesnika Splošen model uporabniškega vmesnika platforme ne izstopa od že spoznanih uporabniških vmesnikov ostalih platform. Predstavlja ga slika 3.49 ter ga sestavljajo [27]: Statusna vrstica (angl. status bar) pretežno s pomočjo ikon uporabniku nudi informacije o moči signala, aktivnosti povezave, načinu sprejema signala (2G, 3G, ), lokacijskih servisih, stanje Bluetooth povezave, stanje baterije, uro. Zaslon za odklep zaslona je viden, ko je ekran telefona zaklenjen in se ne odziva na uporabniške kretnje. Uporabnik zaslon odklene s horizontalnim potegom. Domači zaslon (angl. Homescreen) vsebuje seznam aplikacij, katere so razporejene v mrežo s 4 stolpci in 4 vrsticami; omogoča tudi prikaz več zaslonov (mrež) in sicer se med njimi premikamo s horizontalnim potegom. Trenutno izbrano mrežo simbolizirajo krogi na dnu mreže. Del domačega zaslona je tudi odlagališče (angl. Dock), ki uporabniku omogoča bližnjice do štirih aplikacij. Tako mrežo, kot odlagališče, lahko uporabnik popolnoma modificira; z daljšim pritiskom na zaslon preide v urejanje, kjer s kretnjo povleci in spusti preureja zaslon. Ko konča, za izhod iz urejanja, pritisne fizični gumb domov (angl. Home button). Center za obvestila (angl. Notification Center) je na voljo od različice 5 dalje. Uporabnik center za obvestila prikliče s potegom od vrha ekrana proti dnu. V 1 App store je spletna trgovina namenjena napravam iphone, ipod in ipad, preko katere lahko uporabniki omenjenih naprav prenašajo plačljive in brezplačne aplikacije [26].

61 Uporabniški vmesniki različnih mobilnih platform 43 kolikor ima uporabnik neprebrana obvestila, se ob kliku na le-tega aktivira ustrezna aplikacija z ustrezno akcijo. Aplikacije se nalagajo ena na drugo, pri čemer je vedno aktivna ena. Seznam odprtih aplikacij uporabnik prikliče z dvojnim klikom na fizični gumb domov. Omogoča preklapljanje med aplikacijami ter zapiranje le-teh. Slika 3.49: Splošen model uporabniškega vmesnika platforme ios Splošen model uporabniškega vmesnika aplikacije Splošen model aplikacije je podoben, kot na ostalih platformah. Prikazuje ga slika 3.50 in ga sestavljajo: statusna vrstica (angl. status bar), navigacijska vrstica (angl. navigation bar), orodna vrstica (angl. toolbar) / vrstica z zavihki (angl. tab bar).

62 44 Analiza uporabniških vmesnikov na mobilnih napravah Slika 3.50: Splošen model uporabniškega vmesnika aplikacije Statusna vrstica je identična statusni vrstici platforme. Njena uporaba je opcijska, vendar moramo dobro premisliti preden jo skrijemo, saj zaradi njene majhne višine ne pridobimo veliko prostora, uporabnika pa prisilimo, da (začasno) zapusti našo aplikacijo za vpogled v osnovne informacije mobilne naprave. Pri multimedijskih vsebinah (ki so v večini primerov v celozaslonskem načinu), je smiselno omogočiti uporabniku, da z dotikom na zaslon skrije oziroma prikaže statusno vrstico. Grafične podobe statusne vrstice ni možno modificirati oziroma je prepovedana implementacija lastne statusne vrstice. Na voljo imamo zgolj tri različice (slika 3.51) [28]: siva (angl. gray), ki je privzeta; motno črna (angl. opaque black); prosojno črna (angl. translucent black), ki je črne barve s 50% prosojnostjo; Slika 3.51: Različice statusne vrstice platforme ios [28] Navigacijska vrstica (slika 3.52) se nahaja tik pod statusno vrstico in vsebuje podatke o naslovu trenutnega zaslona (ki je centriran glede na širino). Gradnik ob spremembi

63 Uporabniški vmesniki različnih mobilnih platform 45 orientacije samodejno prilagaja svojo širino tako, da zapolni celoten zaslon. Prostor levo od naslova je rezerviran za navigacijo nazaj (v kolikor obstaja); gumb ima posebno obliko puščice (slika 3.52), besedilo pa je naslov zaslona, kamor navigiramo nazaj. V kolikor je trenutni zaslon na začetku navigacijske hierarhije, lahko levo stran uporabimo tudi za katerokoli drugo akcijo. Desna stran naslova je prav tako namenjena poljubnim akcijam. Če imamo opravka z več akcijami, je potrebno uporabiti tudi kombinacijo z orodno vrstico, ki jo bomo spoznali v nadaljevanju [28]. Slika 3.52: Primer navigacijske vrstice [28] Zaradi boljše preglednosti in čitljivosti uporabljamo sistemske pisave. Vedno uporabljamo pravilne oblike gumbov in jih, kljub prostoru, ne dodajamo več, kot omenjena dva, saj se lahko zgodi, da se naslov ne bo v celoti prikazal. Barvo navigacijske vrstice lahko spremenimo, vendar pazimo, da ohranimo konsistentnost preliva in da je barvna podobna ostalim barvam v aplikaciji. Izogibamo se uporabi večsegmentnih gumbov nazaj (slika 3.53), saj uporaba takšnih gumbov ne dopušča prostora za prikaz naslova, hkrati pa implementacija rešitve zahteva veliko napora [28]. Slika 3.53: Primer večsegmentnih gumbov [28] Orodno vrstico uporabimo, kadar imamo opravka s številnimi akcijami nad trenutnimi podatki na zaslonu. Gradnik je prikazan na spodnjem delu zaslona in vsebuje akcije, ki so med seboj enakomerno razporejene (slika 3.54). Njihova priporočljiva velikost znaša slikovnih pik. Prav tako je možno prilagoditi slog orodne vrstice potrebam izgleda naše aplikacije, vendar je priporočljiva uporaba konsistentnega sloga skozi vso aplikacijo [28]. Slika 3.54: Primer orodne vrstice z petimi akcijami Vrstica z zavihki (slika 3.55) se pri platformi ios nahaja v spodnjem levem kotu zaslona in se po širini prilagaja zaslonu, ne glede na orientacijo zaslona. Omogoča paralelni pogled

64 46 Analiza uporabniških vmesnikov na mobilnih napravah več zaslonov. Število pogledov (zavihkov) je omejeno na pet. V kolikor želimo uporabiti večje število zavihkov, peti element nadomesti zavihek»več«(angl. more) (slika 3.55), kateri odpre nov zaslon, na katerem prikažemo vse ostale zavihke v obliki seznama. Zavihek je predstavljen z ikono in krajšim besedilom, ki sta privzeto sive barve. V aktivnem stanju se dotičen poudari; ikona zamenja barvo v modro, tekst spremeni barvo v belo, ozadje zavihka pa se osvetli [28]. Slika 3.55: Primer vrstice z zavihki [28] Gradnika ne uporabljamo za akcije nad podatki za ta namen uporabimo že omenjeno orodno vrstico. Priporočena je uporaba zavihkov na korenskem nivoju aplikacije. V kolikor želimo za določen zaslon prikazati obvestilo, uporabimo značko (angl. badge) s številko, katera pritegne uporabnikovo pozornost. V kolikor je mogoče uporabljamo sistemske ikone, v nasprotnem primeru pa ustvarimo ikono v formatu PNG, ki je podobna sistemskim Sprememba orientacije zaslona Podobno kot ostale platforme, tudi ios podpira obe orientaciji (pokončno in ležečo) še več, omogočeni sta tudi nasprotni orientaciji (v kolikor napravo zasučemo za 180 stopinj). Večina ios aplikacij podpira le pokončno orientacijo, saj je optimalna za prikaz najpogostejše vsebine (besedila). Za prikaz multimedijskih vsebin ali iger, lahko orientacijo zaklenemo zgolj na ležeče, vendar je smiselno podpreti tudi zasuk za 180 stopinj [29] Vzorci navigacije Platforma ios teži k uporabi dveh načinov navigacije: vrtanje v globino in uporaba zavihkov. Pri vrtanju v globino (slika 3.56) gre za hierarhično strukturo zaslonov, pri čemer uporabimo navigacijsko vrstico, ki smo jo spoznali v poglavju

65 Uporabniški vmesniki različnih mobilnih platform 47 Slika 3.56: Primer uporabe vrtanja v globino Zavihke uporabimo, kadar želimo prikazati več vzporednih pogledov (slika 3.57). Opis, omejitve in uporabo zavihkov smo spoznali v poglavju Slika 3.57: Primer uporabe zavihkov na platformi ios Veliko aplikacij se poslužuje tudi navigacije, pri kateri uporablja začetni zaslon (meni), na katerem v obliki mreže predstavi funkcionalnosti aplikacije. Gre za nadgradnjo vrtanja v globino, ki ni uradno specificirana s strani podjetja Apple, vendar so je uporabniki, zaradi njene razširjenosti, vajeni.

66 48 Analiza uporabniških vmesnikov na mobilnih napravah Pregled osnovnih gradnikov Gradnik»Table View«Gradnik»Table View«predstavi podatke v obliki tabele, in sicer v enem stolpcu ter več vrsticah. Podatke oziroma elemente tabele lahko delimo tudi v sekcije in skupine. Uporabnik se med podatki premika z uporabo kretnje potega. V kolikor pritisne na posamezno vrstico, se le-ta označi preko sistemskih kontrol in proži ustrezno akcijo. Podprta sta različna načina prikaza gola tabela (angl. Plain table) in tabela skupin (angl. Grouped table). Pri goli tabeli se elementi raztegujejo od roba do roba zaslona, medtem ko so pri tabeli skupin elementi združeni v skupino, prikazano v obliki pravokotnika z zaobljenimi robovi [28]. Pri uporabi tabele je smiselno upoštevati smernice in omejitve [28]: Tabelo uporabimo, kadar želimo uporabniku ponuditi seznam različnih možnosti; uporaba tabele je smiselna, kadar lahko podatke prikažemo hierarhično (vsak element tabele vsebuje svojo podtabelo); kadar imamo opravka s konceptualno podobnimi podatki, jih je smiselno z uporabo tabele grupirati v skupine; vedno je potrebno implementirati akcijo ob pritisku na vrstico; spremembe narejene nad tabelo je smiselno animirati; v kolikor imamo opravka z kompleksnejšimi elementi, ne čakamo na kompleten nabor podatkov, ampak prikažemo podatke takoj, ko je to mogoče, ostale pa, ko so na voljo; če gre za posodobitev tabele, je smiselno prikazati stare podatke, ki jih že imamo shranjene v pomnilniku; v kolikor je mogoče, uporabljamo enako višino vrstic nad vsemi elementi; Elementi gradnika lahko vsebujejo tudi podelemente (slika 3.58), ki omogočajo upravljanje s podatki [28]: 1. Kljukica (angl. Checkmark) je namenjena označevanju vrstic v primerih, kadar želimo označiti več vrstic hkrati.

67 Uporabniški vmesniki različnih mobilnih platform Indikator vrtanja v globino (angl. Disclosure indicator) prikazuje, da za dotično vrstico obstaja še nova tabela, ki se navezuje na njo in se odpre ob pritisku na vrstico. 3. Indikator podrobnega vrtanja v globino (angl. Detail disclosure button) uporabniku prikazuje, da bo pritisk na dotično vrstico sprožil akcijo, ki bo prikazala nov zaslon s podrobnejšimi podatki. 4. Razvrščanje vrstic (angl. Row reorder) prikazuje možnost reorganizacije vrstnega reda vrstic. To storimo s kretnjo povleci in spusti. 5. Vstavljanje vrstic (angl. Row insert) omogoča vstavljanje vrstic. 6. Kontrola za prikaz gumba za brisanje (angl. Delete button control) ob pritisku prikaže gumb za brisanje. 7. Gumb za brisanje (angl. Delete button) omogoča brisanje vrstice. Slika 3.58: Podelementi gradnika»table View«[28] Gradnik»Text View«Gradnik»Text View«(slika 3.59) omogoča vnos in prikaz večje količine besedila. V kolikor gradnik omogoča urejanje besedila, se ob pritisku nanj prikaže virtualna tipkovnica, katere tip je določen s trenutno nastavitvijo jezika. Omogoča možnost modifikacije barve ter pisave in poravnavo le-te, vendar le za celotno besedilo. V kolikor želimo oblikovati posamezne dele besedila, je smiselna uporaba gradnika»web View«, ki ga bomo spoznali v naslednjem poglavju Tako kot»web View«tudi»Text View«omogoča prepoznavo telefonskih številk in povezav [28]. Slika 3.59: Gradnik»Text View«[28]

68 50 Analiza uporabniških vmesnikov na mobilnih napravah Gradnik»Web View«Gradnik»WebView«omogoča prikaz bogatih HTML 1 vsebin, pri čemer uporablja tudi navigacijsko in orodno vrstico (slika 3.60). Gradnik zazna telefonske številke in jih pretvori v klicne povezave. Uporabljamo ga zgolj za prikaz HTML vsebin in ne kot spletni brskalnik, saj je za brskanje po spletu uporabniku na voljo brskalnik Safari [28]. Slika 3.60: Primer gradnika»webview«[28] Gradnik»Alert«Gradnik opozorilo (angl. Alert) uporabljamo za obveščanje uporabnika o pomembnih informacijah, ki vplivajo na uporabo aplikacije ali naprave. Prikazan je na najvišjem nivoju nad trenutnim zaslonom. Uporabnik mora za nadaljevanje opozorilo potrditi preko gumba, ki ga gradnik vsebuje. Število potrditvenih akcij je lahko tudi več (na primer sprejmi/zavrni). Gradniku lahko določimo kratek naslov, besedilo (kratko ali daljše), število gumbov in njihovo vsebino. Njegovega sloga ni moč spreminjati. Primere opozorila prikazuje slika 3.61 [28]. 1 HTML (Hyper Text Markup Language) je označevalni jezik za izdelavo spletnih strani. [30]

69 Uporabniški vmesniki različnih mobilnih platform 51 Slika 3.61: Primeri gradnika»alert«[28] Pazimo, da gradnika ne uporabljamo za nepotrebna obvestila, kot so normalna posodobitev stanja, spreminjanje vidljivosti informacij, akcije, ki potrebujejo dodatne potrditve ali napaka, na katere uporabnik ne more vplivati. Besedilo opozorilo naj vsebuje razumljiv opis dogodka ter ukrepe, ki so uporabniku na voljo. Naslov gradnika naj bo kratek in razumljiv, vendar se izogibamo naslovom, ki ne podajajo dovolj informacij (na primer»napaka«,»opozorilo«); prav tako pa naj bo razumljivo in jedrnato besedilo opozorila. V kolikor imamo opozorili v obliki dialoga (uporabnik ima na voljo pritrdilno in zavrnilno akcijo), pazimo, da je potrditven gumb obarvan svetlo in na levi strani, gumb za zavrnitev pa temno obarvan (v nekaterih primerih tudi rdeče) na desni strani [28] Gradnik»Action Sheet«Gradnik»Action Sheet«(slika 3.62) uporabljamo, kadar lahko nad določenim elementom izvedemo več akcij. Njegova pozicija je v spodnjem delu zaslona in je prikazan preko ostale vsebine. Možna opravila prikažemo v obliki gumbov. Prav tako pa gradnik uporabimo, kadar želimo izvesti kritično opravilo; gumb ki kritično opravilo potrdi, naj bo rdeče barve. V kolikor uporabnik ne želi izvesti nobene od ponujenih možnosti ali pa želi preklicali kritično opravilo, pritisne gumb prekliči (angl. cancel) [28].

70 52 Analiza uporabniških vmesnikov na mobilnih napravah Slika 3.62: Primera gradnika»action Sheet« Gradnik»Activity Indicator«Indikator aktivnosti (slika 3.63) uporabljamo za indikacijo opravila v izvajanju. Interakcije med uporabnikom in gradnikom ni. Priporočljiva je uporaba gradnika v orodni vrstici ali pa v glavnem delu aplikacije, kjer bodo prikazani rezultati. Privzeto je gradnik bele barve, vendar ga lahko po potrebi modificiramo [28]. Slika 3.63: Gradnik Activity Indicator Gradnik»Date and Time Picker«Komponenta»Date and Time Picker«prikazuje datum in uro ter se hkrati uporablja tudi za interakcijo z uporabnikom, kadar od njega želimo vnos omenjenih podatkov. Predstavljen je s cilindri (slika 3.64); vsak prikazuje del datuma ali ure (dan, mesec, minute, itd.). Uporabnik vrednosti spreminja tako, da ga vertikalno povleče, kar predstavlja simulacijo vrtenja cilindra. Na voljo imamo več različnih tipov, in sicer zgolj datum ali čas, kombinacijo obojega ali pa odštevalnik časa [28]. Slika 3.64: Gradnik»Date and Time Picker«

71 Uporabniški vmesniki različnih mobilnih platform Gradnik»Details Disclosure Button«Gradnik (slika 3.65) omogoča dodatne možnosti ali funkcionalnosti nad podatki, tako da pritisnemo na gumb. Najpogosteje ga uporabljamo v tabeli (poglavje ) [28]. Slika 3.65: Detail Disclosure Button Gradnik»Label«Oznaka (angl. label) prikazuje zgolj krajše statično besedilo, ki pa ga lahko kopiramo. Druge interakcije med uporabnikom ni. Uporabljamo jo za opisovanje drugih delov grafičnega vmesnika, kratka sporočila ali navodila uporabniku. Pisavo gradnika lahko modificiramo, vendar moramo paziti, da ohranimo jasnost [28] Gradnik»Network Activity Indicator«Indikator aktivnosti omrežja (angl. Network Activity Indicator) je prikazan v statusni vrstici in uporabnika obvešča o aktivnosti njegove mrežne povezave; kadar je povezava aktivna se pojavi in se začne vrteti (slika 3.66). Med njima druge interakcije ni, prav tako na gradnik ne moramo vplivati preko svoje aplikacije (skrivanje, ročno prikazovanje) [28]. Slika 3.66: Indikator aktivnosti omrežja (angl. Network Activity Indicator) Gradnik»Page Indicator«Indikator strani (angl. Page Indicator) prikazuje koliko zaslonskih slik imamo odprtih ter katero imamo trenutno odprto (slika 3.67). Vsako odprto zaslonsko sliko ponazori s piko in sicer v zaporedju od leve proti desni; trenutno odprt zaslon se od ostalih loči z osvetljeno piko. Naenkrat je možno prikazovati zgolj eno osvetljeno piko. Gradnik uporabljamo zgolj pri vzporedno odprtih pogledih, ne pa kadar imamo hierarhijo nad zasloni. Pozicija gradnika se nahaja v spodnjem delu zaslona, tik nad orodno vrstico ali vrstico z zavihki [28].

72 54 Analiza uporabniških vmesnikov na mobilnih napravah Slika 3.67: Indikator strani prikazuje 13 odprtih strani; trenutno pa se nahajamo na Gradnik»Picker«Izbirnik (angl. Picker) je zelo podoben gradniku»date and Time Picker«(poglavje ), le da gre tukaj za izbor poljubne znane množice vrednosti, izbor pa poteka zgolj z uporabo enega cilindra (slika 3.68). Z uporabo izbirnika uporabniku olajšamo izbiro, vendar le za manjše množice vrednosti. Pri večjih množicah pride do nepreglednosti (uporabnik mora do zadnje vrednosti cilinder zavrteti do konca), zato v tem primeru raje uporabimo tabelarični prikaz [28]. Slika 3.68: Primer gradnika Picker [28] Gradnik»Progress View«Indikator napredka (angl. Progress View) prikazuje napredek nekega opravila, za katerega poznamo končno točko tako, da se povečuje od leve proti desni; dodatno informacijo o končni točki prestavimo z oznako nad indikatorjem napredka (slika 3.69), kar je tudi privzeti slog gradnika. Sekundarni slog (imenovan»bar«) je ožji in je idealen za uporabo v orodni vrstici. Pomembno je premisliti o tem ali je opravilo dovolj časovno zahtevno za prikaz gradnika v nasprotnem primeru se raje odločimo za indikator aktivnosti (poglavje ) [28]. Slika 3.69: Indikator napredka

73 Uporabniški vmesniki različnih mobilnih platform Gradnik»Rounded Rectangle Button«Pravokotni zaobljen gumb (angl. Rounded Rectangle Button) izvede določeno operacijo v aplikaciji. Privzeta barva je bela in ima zaobljene robove (slika 3.70) [28]. Slika 3.70: Pravokotni zaobljeni gumb Gradnika»Search Bar«in»Scope Bar«Vrstica za iskanje (angl. Search Bar) predstavlja interakcijo z uporabnikom, ki želi izvesti iskanje. Podobna je vnosnemu polju (slika 3.71); sprejme besedilo, ki ga uporabi za iskanje. Ob pritisku na vrstico se pojavi virtualna tipkovnica, vrstica pa lahko ponudi tudi nekaj dodatnih elementov (gumb»prekliči«, gumb»priljubljeno«in podobno) [28]. Slika 3.71: vrstica za iskanje (zgoraj) in vrstica obsega (spodaj) [28] Vrstica obsega se uporablja v kombinaciji z iskalno vrstico. Omogoča omejevanje mej iskanja in sicer tako, da izbiramo med zavihkom podobnimi gumbi (slika 3.71) [28] Gradnik»Segmented Control«Segmentiran nadzor (angl. Segmented Control) je sestavljen iz linearnega nabora segmentov (slika 3.72), pri čemer pritisk na vsakega sproži menjavo zaslona. Višina segmentov je fiksna, širina pa je odvisna od števila segmentov, vendar moramo paziti, da zagotovimo minimalno velikost, ki znaša zaslonskih pik. Ravno s tem razlogom je število segmentov omejeno na pet [28]. Slika 3.72: Segmentirani nadzor [28]

74 56 Analiza uporabniških vmesnikov na mobilnih napravah Gradnik»Slider«Drsnik (angl. slider) omogoča uporabniku izbiro vrednosti znotraj omejenega intervala. Sestavljen je iz poti (angl. track) in gumba ter opcijsko ikono na levi in desni strani (slika 3.73). Ob premiku gumba se posodobi vrednost gradnika. V kolikor je potrebno, lahko spremenimo tudi izgled, orientacijo, dolžino [28]. Slika 3.73: Gradnik drsnik [28] Gradnik»Stepper«Gradnik omogoča spreminjanje vrednosti po enotah (pri čemer je enota v naprej določena). Sestavljen je iz dveh gumbov; prvi se uporablja za izvedbo negativnega koraka in je označen s simbolom minus; drugi (označen s simbolom plus) pa se uporablja za povečevanje vrednosti (slika 3.74). Uporaba gradnika je smiselna v primerih, ko mora uporabnik opraviti manjše prilagoditve vrednosti [28]. Slika 3.74: Gradnik»Stepper«[28] Gradnik»Switch«Stikalo (angl. Switch) omogoča preklapljanje med dvema nasprotujočima si vrednostnima. Gradnik prikazuje trenutno izbrano vrednost (slika 3.75), ob pritisku nanj pa se vrednost invertira. Stikalo se pretežno uporablja v tabelaričnem prikazu, prav tako pa ga lahko uporabimo za spreminjanje stanj drugim gradnikom na istem zaslonu [28]. Slika 3.75: Stanji stikala; izklopljeno (levo) in vklopljeno (desno) [28] Gradnik»Text Field«Polje besedila (angl. Text Field) od uporabnika sprejme besedilo, ki ga prikaže v eni vrstici (slika 3.76). Višina gradnika je fiksna, robovi pa so rahlo zaobljeni. Ob pritisku na gradnik, se odpre virtualna tipkovnica. Ob uporabi gradnika je smiselno uporabniku omogočiti akcijo za ponastavitev besedila tako, da prikažemo gumb na desni strani. Prav tako je

75 Uporabniški vmesniki različnih mobilnih platform 57 smiselna uporaba namigov (primeri pričakovanih vrednosti), ki zapolnijo polje preden uporabnik pritisne nanj [28]. Slika 3.76: Polje besedila Sistemski gumbi Da zagotovimo konsistentnost skozi aplikacijo in tudi med aplikacijami, platforma ios ponuja različne tipe gumbov, ki jih lahko razdelimo v dve vizualni skupini (slika 3.77) [28]: Obrobljen stil (angl. Bordered style) je prilagodljiv in uporaben tako za navigacijsko vrstico, kot tudi orodne vrstice; Goli stil (angl. Plain style) je predstavljen z ikono in je uporabljen za orodne vrstice. Slika 3.77: Goli stil (levo) in obrobljeni stil (desno) 3.5 Windows Phone 7 Windows Phone 7 (WP7) je mobilni operacijski sistem, ki ga je razvilo podjetje Microsoft in izdalo v 4. četrtletju leta Izredno dinamičen in svež grafični vmesnik predstavlja prihodnost na področju uporabniških vmesnikov in uporabniških izkušenj, kar nakazuje tudi tržni delež, ki je v četrtletju izida narastel kar za 5 odstotkov [31]. Prav zaradi omenjenega dinamičnega uporabniškega vmesnika morajo biti razvijalci aplikacij še posebej pozorni in upoštevati vse smernice in priporočila za razvoj.»metro«izgled, kot so ga poimenovali pri Microsoftu, temelji na preprostosti, enostavnosti uporabe, možnosti odkrivanja, skladnosti, tipografiji in kar je najpomembneje vsebini. Vsebina je tista rdeča nit aplikacije, ki je za uporabnika najbolj pomembna, zato WP7 daje oblikovalcu uporabniškega vmesnika in uporabniške izkušnje, da namesto zapletenih gradnikov uporabi vsebino.

76 58 Analiza uporabniških vmesnikov na mobilnih napravah Splošen model uporabniškega vmesnika Splošen model uporabniškega vmesnika WP7 (slika 3.78) je sestavljen iz začetnega zaslona ter sklada izvajajočih se aplikacij. Slika 3.78: Splošen model uporabniškega vmesnika WP7 Začetni (start) zaslon je sestavljen iz dveh vzporednih zaslonov, med katerima uporabnik preklaplja s horizontalnim sunkom po zaslonu: Start je zaslon, ki vsebuje ploščice (angl. Tiles), ki so dodatki aplikacij z živimi podatki. Uporabnik lahko začetni zaslon popolnoma prilagodi svojim potrebam, pri čemer lahko ploščice poljubno dodaja oziroma briše in jim spreminja vrstni red. Barva sistemskih ploščic je določena s sistemsko poudarjeno barvo (angl. System accent color), ki jo bomo spoznali v nadaljevanju. Seznam aplikacij (angl. app list) v abecednem vrstnem redu uporabniku nudi zagon aplikacij. V seznamu je aplikacija predstavljena z ikono ter imenom. Ikone sistemskih aplikacij so, prav tako kot ploščice, poudarjene sistemske barve. Poznamo dva tipa ploščic in sicer aplikacijske ploščice (angl. Application Tiles) in sekundarne ploščice (angl. secondary Tiles).

77 Uporabniški vmesniki različnih mobilnih platform 59 Aplikacijske ploščice uporabnik na začetni zaslon namesti, kadar želi bližnjico do aplikacije. Dotik ploščice odpre želeno aplikacijo. Sekundarne ploščice se ustvarijo na podlagi interakcije z uporabnikom. Tipičen primer sekundarne ploščice je trenutno vreme, kjer uporabnik izbere kraj, za katerega želi vremenske podatke. Ploščica lahko izmenično prikazuje podatke za več izborov hkrati, dotik ploščice pa odpre aplikacijo z odprtim zaslonom, ki vsebuje dodatne podatke za dotičen element ploščice (v našem primeru kraj, ki uporabnika zanima) [32] Splošen model uporabniškega vmesnika aplikacije Splošen model uporabniškega vmesnika aplikacije je prikazan na slika 3.79; podobno kot pri ostalih platformah sestoji iz [33]: Statusne vrstice (angl. status bar), ki je namenjena prikazu podatkov o signalu, povezavah, klicih, gostovanju, glasnosti zvonjenja, stanju baterije in sistemske ure. Privzeto je vedno vidna le ura, razvijalec pa lahko statusno vrstico modificira ali jo celo skrije, vendar je potrebno dobro premisliti o skrivanju, saj uporabniku skrijemo pomembne informacije, naši aplikaciji pa je na volje le dodatnih 32 zaslonskih pik, kolikor je statusna vrstica visoka. Aplikacijskega prostora (angl. Application space), ki je namenjen naši aplikaciji. Tudi platforma WP7 podpira oba tipa orientacije pokončno in ležeče, principe gradnje uporabniškega vmesnika pa bomo spoznali v nadaljevanju. Aplikacijske - orodne vrstice (angl. Application bar), ki je namenjena dodatnim aplikacijskim akcijam in sicer največ štirim. Akcija orodne vrstice vsebuje ikono, ki jo najbolj ponazarja in se nahaja v krogu ter tekst. Opcijsko je možno orodno vrstico razširiti z dodatnimi akcijami, do katerih uporabnik dostopa preko ikone s tremi pikicami. Dodatne akcije nimajo ikone, temveč zgolj tekst. Razširjeno aplikacijsko vrstico prikazuje slika 3.80.

78 60 Analiza uporabniških vmesnikov na mobilnih napravah Slika 3.79: Splošen model uporabniškega vmesnika aplikacije [33] Slika 3.80: Razširjena aplikacijska (orodna) vrstica [33] Pomembno vlogo pri navigaciji imajo tudi predpisane fizične tipke (slika 3.81) vsake naprave z WP7 operacijskim sistemom, saj razvijalcem zanje ni potrebno predvideti prostora v svoji aplikaciji. Skrajno levo je tipka nazaj (angl. back), ki se uporablja za navigacijo po aplikaciji in sicer za prehod na prejšnji zaslon. Tipka start uporabnika pripelje na domač zaslon, ki smo ga že spoznali. Skrajno desna tipka se uporablja za iskanje (angl. search) in uporabniku ponudi iskalni obrazec [34]. Slika 3.81: Fizične tipke WP7; nazaj (levo), start (sredina), išči (desno) [34] Teme WP7 se od drugih mobilnih platform razlikuje še po eni funkcionalnosti uporabnik lahko na sistemskem nivoju izbere temo. Na voljo ima svetlo oz. temno, zato moramo razvijalci biti pozorni tudi na to in našo aplikacijo prilagoditi tudi tem zahtevam. Ker pa tukaj ne gre

79 Uporabniški vmesniki različnih mobilnih platform 61 zgolj za barvo ozadja, moramo prilagoditi tudi barve v ospredju in pa tako imenovane aktivne barve. V kolikor imamo v ozadju aplikacije sliko oziroma fotografijo, jo je potrebno pripraviti za svetlo in temno temo. To storimo bodisi z nastavitvami transparentnosti, bodisi s podvajanjem fotografije za vsako temo posebej. V pomoč razvijalcem je tudi sistemska poudarjena barva (angl. system accent color), ki si jo lahko, tako kot temo, uporabnik izbere sam. Uporabljamo je za aktivne elemente ali pa za elemente, ki jih želimo poudariti. Primere uporabe prikazuje slika Slika 3.82: Primeri uporabe tem in sistemske poudarjene barve vzorčne aplikacije [35] V kolikor je celostna podoba aplikacije zelo občutljiva in omejuje uporabo barv kadar določene barve predstavljajo določeno znamko ali pa natančno določajo akcijo, lahko barvno paleto prilagodimo, vendar moramo paziti, da pristopov ne mešamo med seboj Vzorci navigacije WP7 za navigacijo po aplikaciji uporablja 2 osnovna pristopa, ki pa sta si med seboj izredno podobna. Gre za elementa panorama in pivot. Oba omogočata prikaz podatkov kot skupek več zaslonov, med katerimi se pomikamo v horizontalni smeri Panorama Gradnik panorama se uporablja za prikaz podatkov, zbranih na enem mestu v obliki vozlišča (angl. hub), zato se gradnik uporablja kot izhodišče oziroma začetek aplikacije iz katere uporabnik raziskuje v globino. Elemente panorame (angl. Panorama items) si lahko predstavljamo na dolgi horizontalni osi, ki je nekajkrat širša od fizičnega zaslona. Med elementi se uporabnik pomika s horizontalnimi sunki.

80 62 Analiza uporabniških vmesnikov na mobilnih napravah Uporabniški vmesnik panorame prikazuje slika 3.83, na kateri vidimo, da sestoji iz več plasti, ki pa se ob horizontalnem pomiku neodvisno gibljejo. Te plasti so: Naslov panorame (angl. Panorama Title) predstavlja ime aplikacije. Naslov elementa panorame (angl. Panorama Header) predstavlja ime elementa panorame in je opcijski. Elementi panorame so komponente aplikacije, ki uporabljajo druge gradnike. Ozadje je najnižja plast panorame in je lahko zgolj barva ali pa slika oziroma fotografija. Slika 3.83: Zgradba panorame [36] Podatki v elementih panorame so v praksi tisti, katere želimo izpostaviti (na primer v aplikaciji z novicami so to najbolj sveže novice) in jih predstavimo s kratkimi naslovi (največ 2 oziroma 3 vrstice), v kolikor je to mogoče, pa jih dopolnimo tudi s sličicami (angl. Thumbnail) [36]. Pri načrtovanju panorame je smiselno upoštevati naslednje smernice [36]: Elementi oziroma sekcije panorame so krožno povezani, kar pomeni, da zadnjemu elementu sledi prvi oziroma v obratni smeri sledi prvemu elementu zadnji. Temu primerno moramo prilagoditi vrstni red elementov in ozadje panorame. V primeru uporabe orodne vrstice je potrebno uporabiti minimalno različico le-te, kar omogoča dodaten prostor podatkom.

81 Uporabniški vmesniki različnih mobilnih platform 63 Panorama je prilagojena zgolj za pokončno orientacijo zaslona. Predvidimo razmerje 16:9 in se poskusimo omejiti na 4 do 5 elementov. S tem preprečimo prenasičenost panorame in uporabniku omogočimo preglednost le-te. Hkrati pa z omejitvijo preprečimo morebitne težave pri zmogljivosti. Pri vstopu v panoramo (zagon aplikacije) ni potrebno jasno določiti začetnega zaslona ob prvi izkušnji z aplikacijo je to prvi element panorame, v kolikor pa je uporabnik aplikacijo zapustil na katerem koli drugem zaslonu, postane ta zaslon začetek. Pomembno je zgolj, da mora biti naslov panorame ob zagonu vedno levo poravnan. Prepovedana je uporaba gradnika pivot (spoznali ga bomo v nadaljevanju) v panorami ali obratno. Panorama lahko preko akcije nekega svojega elementa vodi do pivota v obliki novega zaslona. Izogibati se moramo uporabi gradnikov, ki bi povzročili uporabo drsnikov. Kot primer lahko navedemo uporabo gradnika»map«v elementu panorame, ki za navigacijo po zemljevidu, tako kot panorama, potrebuje horizontalne in vertikalne sunke, kar pa povzroči anomalijo uporabe kretnje sunek. Pravilna uporaba gradnika Map v kombinaciji s panoramo bi bila, da zemljevidu onemogočimo sprejemanje kretenj, uporabniku pa z ikono nakažemo, da se bo ob kliku na pomanjšan zemljevid odprl nov zaslon s polnimi funkcijami zemljevida. S fizično tipko nazaj uporabnik zapusti zaslon z mapo in spet se odpre panorama. Ker morajo biti podatki v elementih vedno pripravljeni za prikaz, jih je potrebno predčasno naložiti, pri čemer lahko uporabimo indikator napredka (angl. Progress Bar). Dovoljena je uporaba v sistemski statusni vrstici in v obliki celozaslonskega indikatorja. Tudi za posamezne dele panorame je potrebno upoštevati smernice oblikovanja, tako je za naslov panorame potrebno upoštevati naslednje [36]: Naslov panorame je lahko preprost tekst, slika (na primer logotip) ali pa kombinacija obojega, pri čemer moramo paziti, da bo naslov jasno viden čez celotno panoramo. Priporočljiva je uporaba istega naslova kot ob ikoni na začetnem zaslonu.

82 64 Analiza uporabniških vmesnikov na mobilnih napravah Izogibati se je potrebno animacijam ali kakršnemukoli drugemu dinamičnemu spreminjanju naslova, saj naslov panorame uporablja privzeto horizontalno animacijo ob preklopu elementa panorame. Razmerje premika v primerjavi z elementi panorame je relativno manjše, prav tako pa je razmerje manjše v primerjavi z ozadjem panorame. Za elemente panorame in naslove elementov je potrebno upoštevati [36]: Uporaba vertikalnih drsnikov v elementu panorame je dovoljena, dokler je v mejah elementa. Ko uporabnik preide na drug element, se ta prehod animira. Element panorame naj bo skrit, vse dokler nimamo naložene vsebine za prikaz. Za naslov elementa panorame uporabljamo navaden tekst, v izrednih primerih pa tudi slike. Naslov naj bo neodvisen glede na ozadje. Celoten element zapolnimo z naslovom, tudi če je prisotnih več drugih gradnikov. Izogibati se je potrebno animacijam v naslovih elementov. Pri prehodu med elementi panorame uporabimo animacijo tako elementa, kot njegovega zaslona. V primeru, da je element panorame širši od širine zaslona je potrebno animacijo uporabiti tako, da se med animacijo vidi celotna vsebina naslova. Preden izberemo ozadje panorame pa je priporočljivo poznati naštete smernice, kar lahko izboljša uporabniško izkušnjo [36]: V kolikor ni potrebno ali pa ne vemo kaj bi postavili v ozadje, lahko uporabimo kar privzeto črno (za temno temo) ali belo (za svetlo temo) barvo. Uporaba fotografij v panorami aplikaciji doprinese zanimivo grafično podobo, vendar moramo fotografijo prilagoditi tako svetli, kot temni temi. Priporočena je uporaba tehnike z dodatno polprosojno črno oziroma belo plastjo, s katerima fotografijo potemnimo oziroma osvetlimo. Izogibamo se uporabi dvojnih fotografij. Zaradi zagotavljanja boljše zmogljivosti in zmanjšanja časa nalaganja je priporočljiva uporaba velikosti ali zaslonskih pik in sicer format JPEG.

83 Uporabniški vmesniki različnih mobilnih platform Pivot Pivot je gradnik, ki se uporablja za prikaz več vzporednih zaslonov. Gre za podoben princip, kot pri zavihkih, ki smo jih spoznali pri prejšnjih platformah. Z uporabo pivota lahko upravljamo z velikimi količinami podatkov. Možnost uporabe pivota je tudi za filtriranje podatkov. Zgradbo pivota prikazuje slika 3.84 in je sestavljena iz [37]: Glava pivota (angl. Pivot Header) vsebuje naslove elementov pivota; naslovi so nanizani eden za drugim v eni vrstici, pri čemer je naslov aktivnega elementa vizualno poudarjen (slika 3.85). Element pivota (angl. Pivot Item) se uporablja za prikaz podatkov, pri čemer lahko uporabimo širok nabor gradnikov, katere bomo spoznali v nadaljevanju. Slika 3.84: Zgradba gradnika pivot [37] Med elementi pivota se uporabnik pomika s horizontalnim sunkom, horizontalnim potegom ali pa s dotikom zaslona v področju glave pivota. Sunek in poteg povzročita premik na naslednji oziroma prejšnji element pivota, medtem ko dotik naslova v glavi pivota povzroči premik na izbran element. Animacije premika ni potrebno posebno implementirati [37]. Primer horizontalnega pomika in obnašanje glave pivota prikazuje slika 3.85.

84 66 Analiza uporabniških vmesnikov na mobilnih napravah Slika 3.85: Prikaz pomika med elementi pivota [37] Tako kot pri panorami, je potrebno upoštevati številne smernice za uporabo pivota [37]: Prepovedana je uporaba gradnika pivot znotraj drugega pivota; Prepovedana je uporaba pivota znotraj gradnika panorama ali obratno. Lahko uporabimo gradnik znotraj panorame, ki odpre nov zaslon z gradnikom pivot oziroma obratno. Število elementov pivota omejimo na 6, kar pripomore k izboljšanju zmogljivosti ter preglednosti nad aplikacijo. Prepovedana je uporaba gradnika pivot za zaporedje opravil, ko je na primer v uporabi čarovnika. Uporaba pivota je dovoljena zgolj za podobne podatke (na primer poslana pošta, prejeta pošta, osnutki) Dolžina naslova elementa pivota ni omejena, je pa prikaz naslova omejen s širino pivota. Zato je priporočljivo izbrati naslove elementov z eno ali dvema besedama (v kolikor je to mogoče), kar pa zaradi nanizanih naslovov uporabniku omogoči pregled naslednjih elementov. Višina glave pivot ja fiksna in je ni mogoče spreminjati. Prehod med elementi pivota je cikličen, kar pomeni, da zadnjemu elementu sledi prvi oziroma obratno, zato je to obnašanje potrebno predvideti pri načrtovanju. V kolikor element pivota ne vsebuje podatkov za prikaz, ga ne smemo odstraniti, temveč je potrebno pripraviti prostor za besedilo (angl. placeholder), v katerega izpišemo obvestilo, da podatki niso na voljo.

85 Uporabniški vmesniki različnih mobilnih platform 67 Izogibati se je potrebno uporabi gradnikov»slider«,»toggle«,»map«, saj lahko povzročijo konflikte med gestami Pivota in uporabljene komponente Pregled osnovnih gradnikov Kot ostale platforme tudi WP7 ponuja številne gradnike, s pomočjo katerih hitreje in lažje oblikujemo grafični vmesnik, hkrati pa se s tem držimo konsistentnosti med aplikacijami. Te gradnike bomo v tem poglavju opisali, prikazali primere, ter našteli nekaj smernic za uporabo in modifikacijo gradnikov Gradnik»Button«Gradnik Gumb (angl. Button) se uporablja za proženje akcij v aplikaciji, pri čemer moramo paziti, da ne pride do nasičenja več gumbov. Uporabimo do dva gumba hkrati (na primer»sprejmi«in»zavrni«); v kolikor bi potrebovali več gumbov uporabimo raje gradnika»checkbox«ali»radiobutton«(poglavje ). Običajno je gumb pravokotne oblike z obrobo [38]. Za boljšo uporabniško izkušnjo ima gumb štiri stanja (slika 3.86): stanje počitka (angl. rest state), stanje prst dol (angl. finger down), stanje prst gor (angl. finger up) ter onemogočeno stanje (angl. disabled state). Slika 3.86: stanja gradnika gumb Pri uporabi gumba je potrebno upoštevati naslednje smernice [38]: ne sme vsebovati več kot dve besedi, vsebina se lahko dinamično spreminja, priporočljivo je obdržati obliko, podobno privzetemu izgledu (pravokotnik, obroba), uporabimo sistemsko pisavo, razen če naša celostna podoba eksplicitno zahteva drugo pisavo

86 68 Analiza uporabniških vmesnikov na mobilnih napravah Gradnik»HyperlinkButton«Gradnik»HyperlinkButton«se uporablja za povezave znotraj teksta. Njegova uporaba je zelo podobna povezavam na spletnih straneh in ga prepoznamo po podčrtanem tekstu. Uporabimo ga lahko za prikaz dodatne vsebine na istem ali pa novem zaslonu [38]. Oblikovalske smernice narekujejo uporabo gradnika zgolj, kadar želimo povezavo med tekstom. Pravilna in nepravilna raba prikazuje slika 3.87; pri obeh primerih gre za povezavo med tekstom, pri čemer je pri levem uporabljen gradnik»button«, kar je narobe, pri desnem pa je prikazana pravilna raba gradnika»hyperlinkbutton«[38]. Slika 3.87: Nepravilna (levo) in pravilna (desno) uporaba povezave med tekstom Prav tako kot pri gradniku»button«, se je priporočljivo omejiti na eno do dve besedi. Kadar iz določenih razlogov uporabimo več gradnikov»hyperlinkbutton«, moramo paziti, da poskrbimo za dovolj prostora med njimi, saj lahko pride do situacije, ko uporabnik ne bo ločil gradnikov med seboj in jih bo smatral kot enega. Gradnik lahko začasno tudi onemogočimo (na primer zaradi drugih procesov od katerih je akcija odvisna), vendar le v primeru, ko lahko uporabnik s svojo akcijo vpliva na ponovno omogočitev le-tega [38] Gradnika»CheckBox«in»RadioButton«Gradnik»CheckBox«predstavlja izbiro med dvema nasprotnima si stanjema. Pritisk na gradnik sproži menjavo vrednosti na inverzno. Uporabimo lahko več gradnikov hkrati in s tem omogočimo izbiro več vrednosti hkrati, kar je v nasprotju z gradnikom»radiobutton«, pri katerem se uporabnik lahko odloči le za eno vrednost. Večinoma se gradniki»checkbox«uporabljajo v skupinah. Za boljšo uporabniško izkušnjo ima gradnik številna stanja; prikazuje jih slika Uporabljamo jih, ko želimo spremeniti dostopnost ali stanje drugih elementov uporabniškega vmesnika istega zaslona. Vedno uporabimo sistemsko pisavo, pri čemer omejimo število besed na eno do dve vrstici, besedilo pa mora biti nedvoumno izbrano [38].

87 Uporabniški vmesniki različnih mobilnih platform 69 Slika 3.88: Stanja gradnikov»checkbox«(levo) in»radiobutton«(desno) Podoben gradniku»checkbox«je gradnik»radiobutton«. Uporabljamo ga za predstavitev dveh ali več možnosti, ki pa niso nujno inverzne. Bistveno je, da lahko uporabnik izbere le eno izmed ponujenih možnosti. Pritisk na gradnik omogoči izbrano možnost, pri tem pa onemogoči vse ostale možnosti v skupini. Skupina gradnikov»radiobutton«zavzema več prostora, kot drugi gradniki za podobne izbire, zato pazimo, da izberemo pravo količino možnosti (med tri in sedem) ali pa raje posežemo po drugih gradnikih. V kolikor imamo na voljo dve možnosti, uporabimo gradnik»checkbox«v smislu vklop/izklop, v kolikor pa imamo na voljo večje število možnosti, pa uporabimo gradnik»listbox«, ki ga bomo spoznali v poglavju Prav tako gradnik»listbox«uporabimo za izbiro numeričnih vrednosti. Stanja gradnika»radiobutton«so enaka stanjem kontrole»checkbox«in jih prikazuje slika Pri spremembi le-teh je priporočljivo uporabiti animacijo, kar uporabniku poudari spremembo. Če je možno, gradnike predstavimo na svojem zaslonu in se s tem izognemo motnjam drugih gradnikov. Tako kot pri gradniku»checkbox«je potrebno izbrati razumljivo, nedvoumno besedilo, ki naj ne presega dveh vrstic ob gradniku [38] Gradnika»TextBox«in»PasswordBox«Gradnik vnosno polje (angl. TextBox) sprejme vhodne podatke s strani uporabnika, ki za interakcijo uporabi tipkovnico. Za platformo Windows Phone je značilen videz pravokotnik, ki ob pritisku spremeni stanje, pojavi se kazalec za pisanje in uporabnik lahko vpiše podatke. Namenjen je vnosu kratkega besedila, ki ga lahko omejimo z maksimalnim številom znakov ali pa zgolj na cifre; vnesen tekst oz. cifre lahko gradnik prikazuje v eni ali več vrsticah. Za nedvoumna navodila uporabniku, uporabimo»textbox«v kombinaciji z drugimi gradniki, kot na primer»textblock«[38].

88 70 Analiza uporabniških vmesnikov na mobilnih napravah Gradnik»TextBox«ima tri različna stanja (slika 3.89) [38]: Stanje počitka (angl. rest state), pritisnjeno/fokus stanje (angl. pressed/focus state) in onemogočeno stanje (angl. disabled state). Slika 3.89: Stanja gradnika»textbox«vnosno polje na uporabniškem vmesniku mora vnosno polje imeti čim manj omejitev; lete je priporočeno obravnavati v ozadju. S tem omogočimo boljšo lokalizacijo, saj je ob morebitnem preverjanju omejitev na strani uporabniškega vmesnika, potrebno upoštevati globalnost uporabnikov. Ker je lahko vnos podatkov dolgotrajen, pred uporabo premislimo o smiselnosti le-te in možnosti uporabe drugih gradnikov, kot sta»slider«in»listbox«. Na primer za določitev svetlosti zaslona je bolje uporabiti»slider«(s katerim povlečemo do ustrezne vrednosti), kot pa ročno vpisovanje številk z uporabo vnosnega polja [38]. Prav tako pa je potrebno poznati naslednje smernice in omejitve [38]: Tipkovnice ni mogoče prilagoditi glede na jezik ali regijo, kot je to mogoče v nekaterih drugih platformah Če onemogočimo vnosno polje, potem moramo onemogočiti tudi vse, z njim povezane gradnike. V kolikor bi prisotnost vnosnega polja na zaslonu povzročila zmedo pri uporabniku, je koristno uporabiti drug gradnik (»CheckBox«,»Button«, ) s katerim vnosno polje skrivamo oziroma prikazujemo. Za optimizacijo odzivnosti aplikacije je koristno sprotno obdelovanje besedila, še posebej, ko vnosno polje uporabljamo za vnos iskalnih kriterijev. Ko uporabnik vnese besedilo, moramo določiti akcijo ob ponovnem pritisku na gradnik odločimo se lahko med označitvijo celotnega vpisanega besedila (predviden vnos novega besedila) ali pa postavimo kazalec na konec že vpisanega besedila (predviden vnos nadaljevanja že vpisanega besedila).

89 Uporabniški vmesniki različnih mobilnih platform 71 Uporabiti je potrebno ustrezno različico glede na omejitve vnosa. Vnosno polje nima drsnika. Praktično identičen gradnik vnosnemu polju je»passwordbox«(slika 3.90), polje za vnos gesla. Edina razlika med njima je, da polje za vnos gesla zaradi varnosti sproti prikriva vneseno besedilo ko uporabnik vnese znak oziroma cifro se naslednjo sekundo vneseno prikrije s piko. Medtem ko imamo pri navadnem vnosnem polju možnost izbire akcije ob ponovnem pritisku na gradnik, se pri polju za vnos gesla vneseno besedilo v celoti označi in ob uporabniškem vnosu prepiše. V kolikor želimo vnašati več kot 2 besedi, se uporaba gradnike odsvetuje; prav tako pa se izogibamo dvojnemu vnosu gesel, kot smo vajeni na namiznih aplikacijah in spletnih straneh [38]. Slika 3.90: Polje za vnos gesla Gradnik»TextBlock«Gradnik»TextBlock«uporabljamo za prikaz omejenega števila znakov besedila. Gre za pravokotno področje, ki ostaja enako, ne glede na stanja drugih gradnikov. Interakcija med gradnikom in uporabnikom ni mogoča. Gradnik uporabljamo v kombinaciji z drugimi gradniki (na primer navodila za izpolnjevanje vnosnega polja) ali pa posamezno za prikaz besedila, katerega pisavo lahko oblikujemo s standardnimi lastnostmi (barva, velikost, vrsta pisave, stil pisave, itd.). Gradnik»TextBlock«ne vsebuje drugih gradnikov [38] Gradnik»Image«Gradnik slika (angl. Image) nam omogoča prikaz slik v naši aplikaciji. Podpira formate JPG 1 in PNG 2 in sicer v 1-, 4-, 8-, 24- in 32-bitni barvni globini [38]. Gradnik je zelo fleksibilen in omogoča interakcijo z ostalimi gradniki, pri njegovi uporabi pa moramo paziti in upoštevati naslednje [38]: 1 JPG ali JPEG (Joint Photographics Expert Group) je rastrski prikaz slike, ki uporablja izgubno ali neizgubno kompresijo [39]. 2 PNG (Portable Network Graphics) je sorazmeroma nov rastrski slikovni format, ki omogoča tudi prosojnost slike.

90 72 Analiza uporabniških vmesnikov na mobilnih napravah Pazimo na velikost in kvaliteto slike. Presodimo, kakšna je optimalna velikost slik ter z dobrim načrtovanjem optimiziramo velikost in hitrost naše aplikacije. Slike visoke resolucije uporabimo le, kadar je to potrebno za izboljšanje uporabniške izkušnje (na primer, kadar lahko uporabnik fotografijo poveča) Gradnik»InkPresenter«Gradnik»InkPresenter«prinaša osnovno risalno površino, na katero riše linije, ki jih prepozna preko kretenj. Gradnik ne omogoča prepoznave simbolov in gre zgolj za pretvorbo uporabniških kretenj v črte. Uporabimo ga lahko pri spreminjanju slik in označevanju delov besedila [38] Gradnik»ListBox«Gradnik»ListBox«predstavlja skupino vrednosti ali elementov v seznamu (slika 3.91). Predstavlja področje drsečega okna z elementi, po katerem se lahko uporabnik, s pomočjo kretenj potega in sunka, premika do ustreznega elementa. V stanju premikanja seznama gradnik za orientacijo uporablja drsnik, ki pa v primeru neaktivnosti izgine. Dotik na določen element, označi dotičen element, kar prikazuje slika Gradnik predstavi elemente vertikalno; v kolikor želimo horizontalno predstavitev, uporabimo gradnik»scrollviewer«. V primerih, ko imamo opravka z več kot 50 elementi, je priporočljiva uporaba gradnika»table«. Besedilo elementov naj bo berljivo kontrastno glede na podlago, velikost pisave pa naj bo minimalno 12 zaslonskih pik. Prav tako moramo poskrbeti za vizualno spremembo elementov ob pritisku; za to uporabimo animacije in druge grafične učinke, s tem pa močno izboljšamo uporabniško izkušnjo [38]. Slika 3.91: Gradnik»ListBox«[38]

91 Uporabniški vmesniki različnih mobilnih platform Gradnik»Map«Gradnik zemljevid (angl. map) omogoča integracijo zemljevidov Bing 1 v našo aplikacijo. Prikazuje geografsko lokacijo na zemljevidu, uporabniški vmesnik ter uporabniška izkušnja pa je podobna, kot pri namiznih zemljevidih. Gradnik nam omogoča interaktiven prikaz geografskih informacij, ne da bi zaprli našo aplikacijo, na voljo pa so nam tudi informacije o trenutni lokaciji uporabnika, zanimivostih okrog trenutne lokacije in cestnih razmerah [38]. Zaradi kretenj, ki jih prestreže zemljevid, ga je potrebno uporabiti na svojem zaslonu (slika 3.92) in ne na primer v panorami ali pivotu, ki prestrežeta kretnje za horizontalni premik; s tem se izognemo konfliktom med kretnjami, hkrati pa uporabniku omogočimo širok pogled na zemljevid, kar pomeni več informacij. Za boljšo uporabniško izkušnjo lahko na zaslon dodamo nekatere gumbe [38]. Slika 3.92: Gradnik Map [38] Gradnik»ProgressBar«Vrstica napredka (angl. ProgressBar) predstavlja napredek neke operacije, ki ima podan (na primer predvajanje glasbe) ali pa nedoločen (na primer povezovanje na storitev) čas. Gradnik uporabniku poda informacijo, kako dolgo bo neka akcija trajala, na podlagi tega pa se lahko uporabnik odloči ali bo počakal ali ne [38]. 1 Zemljevidi Bing (angl. Bing Maps) storitev podjetja Microsoft, ki svojim uporabnikom omogoča dostop do zemljevidov sveta.

92 74 Analiza uporabniških vmesnikov na mobilnih napravah Na voljo imamo dva tipa vrstice napredka (slika 3.93) [38]: Polna barvna črta (angl. solid bar of color), ki potuje od leve proti desni. Serija podobnih enako oddaljenih barvnih blokov (angl. series of similar and equidistant colored blocks), ki se nizajo od leve proti desni. Smiselna je uporaba dodatnih gradnikov (besedilo), saj s tem uporabniku ponudimo dodatne informacije o izvajanju akcije, kot so odstotek izvedene akcije ali trenutna pozicija pri zvočnem zapisu. Prav tako je priporočljivo dodati besedilo kaj se izvaja (kot na primer»vzpostavljanje povezave«,»pošiljanje«,»prenos podatkov v teku«); ko akcija ni v teku ali je prekinjena, besedilo pišemo v pretekliku (»povezava je bila vzpostavljena«,»prišlo je do napake v povezavi«) [38]. Slika 3.93: Dve različici gradnika»progressbar«; polna ravna črta (levo) in serija podobnih enako oddaljenih blokov (desno) [38] Gradnik»ScrollViewer«Gradnik»ScrollViewer«nima svojega uporabniškega vmesnika, ampak se uporablja kot pravokoten vsebnik z drsnim trakom znotraj drugih gradnikov. Drsnik je viden le v času premikanja po vsebniku. Ko se premik konča, drsnik z uporabo animacije izgine in se spet pojavi ob naslednjem pomiku. Glavna naloga gradnika je torej prikaz velikega števila gradnikov, za katere je zaslon premajhen, s tem pa v uporabniku vzbudimo občutek neomejenega prostora za prikaz vsebine [38]. Izogibati se moramo presežkom tekstovnih oznak, prav tako pa je smiselno razmisliti o prilagoditvi izgleda ter obnašanja glede na našo aplikacijo [38] Gradnik»Slider«Drsnik (angl. Slider) omogoča uporabniku, da izbere vrednost na nekem intervalu. Ima začetno in končno vrednost, ter množico vmesnih vrednosti, katere uporabnik izbere s potegom po gradniku. Primer drsnika je nadzor glasnosti. Drsnik lahko prikažemo v horizontalni ali vertikalni smeri [38].

93 Uporabniški vmesniki različnih mobilnih platform 75 Gradnik sestoji iz dveh komponent (Slika 3.94) [38]: Sled predstavlja ravno črto, ki sega od roba do roba ter je nekakšen nosilec polnila. V kolikor uporabnik izvede dotik nad sledjo, se izbere vrednost, ki se nahaja na izbrani točki intervala, prav tako pa se spremeni velikost polnila. Polnilo je prav tako prikazan kot ravna črta, s statično pozicijo enega roba, poravnano z robom sledi, drugi del pa se dinamično krči oziroma širi glede na potege uporabnika. S spremembo velikost polnila, uporabnik spremeni vrednost. Privzeto polnilo uporabi sistemsko poudarjeno barvo. Slika 3.94: Gradnik»Slider«[38] Gradnik je zelo fleksibilen in uporaben pri mnogih različnih primerih uporabe, a je potrebno ob prilagoditvi upoštevati številne smernice [38]: Premislimo o orientaciji drsnika kako je vrednost, ki jo izbiramo predstavljena v realnem svetu. Na primer temperaturo prestavimo vertikalno, zatorej tudi za gradnik izberemo to orientacijo. Uporabimo grafični jeziček (angl. graphical tick), ki označuje trenutno vrednost. Za spremembo intervala izberemo smiselno vrednost. Prilagodimo smer spreminjanja vrednosti glede na lokalizacijo (na primer zahodne kulture izbirajo vrednost iz desne proti levi) Ker je področje drsnika v nekaterih primerih zelo majhno, je potrebno uporabniku omogočiti povratne informacije o premiku drsnika (uporabimo animacije). Kadar drsnik onemogočimo, moramo onemogočiti tudi gradnike povezane z njim. Nikoli ne smemo uporabljati drsnika kot vrstice napredka. Za to vrsto uporabe je namenjen gradnik (»ProgressBar«). Ne spreminjamo višine polnila prav tako ne spreminjamo izgleda drsnik naj bo le ravna črta. Drsnika ne uporabljamo v gradnikih Pivot in Panorama, saj bi prišlo do anomalije pri uporabi horizontalnega potega po zaslonu.

94 76 Analiza uporabniških vmesnikov na mobilnih napravah Gradnik»WebBrowser«Spletni brskalnik (angl. Web Browser) omogoča prikaz spletnih strani znotraj aplikacije. Prav tako omogoča prikaz hiperpoveza. Izgled in obnašanje je podobno brskalniku Internet Explorer 9. Njegova uporaba ni vezana le na prikaz strani iz oddaljenih spletnih strežnikov, saj lahko prikazujemo tudi lokalne bogate HTML vsebine [38]. Večina spletnih strani ni optimizirana za mobilne brskalnike, zato gradnik omogoča povečanje in zmanjšanje vsebine z uporabo večdotičnosti (angl. multitouch), kar pa uporabniku onemogoči uporabo kretenj v druge namene, zato moramo razmisliti o uporabi gradnika. V primeru uporabe moramo upoštevati naslednje smernice [38]: minimalna velikost besedila mora biti vsaj 15 slikovnih točk; preden uporabimo gradnik se moramo prepričati, da je vsebina prilagojena in formatirana pravilno za mobilne naprave; prav tako je potrebno preveriti konsistentnost barv, pisave in navigacije glede na našo aplikacijo; vnosna polja morajo biti primerno velika; v kolikor spletni brskalnik po izgledu ni podoben naši aplikaciji, premislimo ali ga je možno zamenjati s katerim drugim gradnikom oziroma kombinacijo več gradnikov; upoštevati je potrebno varnostna načela.

95 Primerjalna analiza uporabniških vmesnikov na različnih mobilnih napravah 77 4 PRIMERJALNA ANALIZA UPORABNIŠKIH VMESNIKOV NA RAZLIČNIH MOBILNIH NAPRAVAH V poglavju vzamemo pod drobnogled obstoječe mobilne aplikacije in jih primerjamo z definiranimi pravili in smernicami vsake mobilne platforme posebej. Glede na postavljene kriterije, pregledamo rezultate analize in za vsako aplikacijo naredimo SWOT analizo. Z analizo želimo hkrati prikazati rabo smernic na realnih primerih. 4.1 Opis metode dela Omejili se bomo na dve aplikaciji vsake platforme. Kot prvo smo izbrali aplikacijo za nakup in prenos aplikacij, kjer ne gre za zunanje razvijalce, temveč je založnik sam lastnik platforme. Prav zaradi tega pričakujemo dobre rezultate pri upoštevanju pravil in smernic uporabniških vmesnikov. Kot drugo aplikacijo pa smo izbrali odjemalca za socialno omrežje Facebook, kjer gre za najbolj razširjenega odjemalca socialnega omrežja. Zaradi težnje celostne podobe pričakujemo več odstopanj smernic, a vseeno v zadovoljivih mejah. Postopek analize bomo izvedli v dveh korakih ločeno za vsak sklop aplikacij. Najprej bomo analizirali aplikacije za prenos in nakup aplikacij, šele nato bomo pregledali odjemalce socialnega omrežja Facebook. Za platformo Android je temu namenjena aplikacija Google Plus, ki je pred kratkim zamenjala Google Market, pri Nokii je tako za Symbian, kot za MeeGo uporabniku na voljo aplikacija Nokia Store, včasih imenovana tudi Ovi Store. Uporabniki platforme ios za prenos aplikacij uporabljajo App Store, medtem ko tisti na platformi Windows Phone 7 Marketplace. Vse opazovane platforme imajo uradnega odjemalca za socialno omrežje Facebook, katerega založnik je Facebook. Izjema je platforma Symbian, ki uradne verzije nima, temveč je založnik samo podjetje Nokia, aplikacija pa se imenuje Social. Zaslonske slike aplikacij so podane v prilogah. Analizo bomo izvajali vzporedno na vseh platformah hkrati za posamezen sklop aplikacij. S tem želimo izvesti čim bolj podobne primere uporabe med platformami in zagotoviti enake primerjalne pogoje.

96 78 Analiza uporabniških vmesnikov na mobilnih napravah Na podlagi teoretičnega znanja (poglavje 2.4.2, stran 10) bomo aplikacije analizirali po naslednjih kriterijih: Kriterij 1: Upoštevanje splošnega modela aplikacije opazovani del bo zgradba aplikacije, postavitev statusnih vrstic, vsebine in orodnih vrstic. Oceno bomo podali z diskretnimi vrednostmi: (1) ne upošteva, (2) pretežno ne upošteva, (3) delno upošteva, (4) upošteva, (5) upošteva v celoti. Kriterij 2: Upoštevanje navigacijskih vzorcev opazovani del bo navigacija skozi aplikacijo in uporaba ustreznih gradnikov za navigacijo. Oceno bomo podali z diskretnimi vrednostmi: (1) ne upošteva, (2) pretežno ne upošteva, (3) delno upošteva, (4) upošteva, (5) upošteva v celoti. Kriterij 3: Uporaba sistemskih gradnikov opazovani del bo uporaba sistemskih gradnikov. Naredili bomo kvantitativno analizo uporabe gradnikov in podali delež v odstotkih. 4.2 Rezultati Kriterij 1: Upoštevanje splošnega modela aplikacije Rezultate prvega kriterija prikazuje tabela 2. Tabela 2: Reultati kriterija 1 - upoštevanje splošnega modela aplikacije Odjemalec»Trgovina«Facebook odjemalec ANDROID (5) upošteva v celoti (5) upošteva v celoti SYMBIAN (5) upošteva v celoti (3) delno upošteva MEEGO (5) upošteva v celoti (5) upošteva v celoti ios (5) upošteva v celoti (5) upošteva v celoti WP7 (5) upošteva v celoti (4) upošteva Aplikacije za prenos in nakup aplikacij v celoti upoštevajo splošen model uporabniškega vmesnika aplikacije. Podobno velja za aplikacije socialnega omrežja Facebook, vendar

97 Primerjalna analiza uporabniških vmesnikov na različnih mobilnih napravah 79 prihaja do odstopanj pri platformah Symbian (Social) ter Windows Phone 7 (Facebook), kjer aplikaciji ne upoštevata uporabe statusne vrstice Kriterij 2: Upoštevanje navigacijskih vzorcev Upoštevanje navigacijskih vzorcev prikazuje tabela 3. Tabela 3: Rezultati kriterija 2 - upoštevanje navigacijskih vzorcev Odjemalec»Trgovina«Facebook odjemalec ANDROID (5) upošteva v celoti (2) pretežno ne upošteva SYMBIAN (3) delno upošteva (3) delno upošteva MEEGO (5) upošteva v celoti (4) upošteva ios (5) upošteva v celoti (3) delno WP7 (5) upošteva v celoti (4) upošteva Aplikacije tipa»trgovina«z izjemo Nokia Store na platformi Symbian vse v celoti upoštevajo navigacijske vzorce. Nokia Store (Symbian) napačno uporablja orodno vrstico, saj gre za dejansko uporabo zavihkov in ne primarnih vsebinskih akcij; ostala uporaba vrtanje v globino ustreza specifikacijam z manjšo napako prikaz gumba za izhod na prvem nivoju namesto gumba za nazaj. Aplikacija Google Plus (Android) uporablja predpisane vzorce navigacije in sicer navigacijo»nazaj in gor«ter uporabo zavihkov na drsnem traku. Pri Nokia Store (MeeGo) opazimo uporabo zavihkov in pomika nazaj na prvem nivoju ter vrtanje v globino na nižjih nivojih. App Store (ios) uporablja vzporeden pogled z uporabo zavihkov v kombinaciji z vrtanjem v globino prav tako je moč opaziti pravilno rabo navigacijske vrstice in gumba nazaj. Marketplace (WP7) uporablja osnovna principa navigacije panoramo in pivot. Kar se tiče odjemalcev socialnega omrežja Facebook, je pričakovano opaziti odstopanje od smernic načrtovanja. Pri platformah lahko opazimo ključno napako kopiranje uporabniškega vmesnika iz ene na drugo platforma. Obe aplikaciji uporabljata meni za navigacijo, ki v smernicah ni predviden in se odpre na levi strani zaslona. Prav tako pri platformi Android pogrešamo navigacijo gor in ikono aplikacije v akcijski vrstici. Opaziti je prav tako napačno rabo zavihkov, ki se nahajajo v spodnjem delu zaslona. Poleg napačne vzporedne navigacije (meni prikazan na levem delu zaslona), uporablja tudi

98 80 Analiza uporabniških vmesnikov na mobilnih napravah vrtanje v globino, kjer je prav tako moč opaziti pomanjkljivost gumb»nazaj«vsebuje napačno vsebino. Namesto imena prejšnjega zaslona je v gumbu prikazana zgolj puščica levo. Brezhibnih navigacijskih vzorcev ne premorejo niti aplikacije na ostalih platformah. Denimo Social na platformi Symbian, poleg pravilne rabe vrtanja v globino, uporablja napačno oblikovane zavihke, ki niso postavljeni na vrh zaslona. Prav tako opazimo meni, prikazan čez celoten zaslon, ki v smernicah in pravilih ni predviden. Še najbolje se sta se pri tem kriteriju odrezali aplikaciji na platformah MeeGo in Windows Phone 7. MeeGo se z razliko menija, razširjenega čez celoten zaslon (podobno kot pri Symbian), drži načel navigacije in uporablja vrtanje v globino, zavihke ter zavihke z pomikom nazaj. Pri platformi Windows Phone 7 je moč opaziti zgolj vizualna odstopanja pri panorami. Uporablja namreč ikone, ki imajo statično določeno pozicijo v zgornjem desnem kotu zaslona in ob animaciji panorame ne spremenijo svoje lokacije Kriterij 3: Uporaba sistemskih gradnikov Pri tem kriteriju smo opredelili delež sistemskih gradnikov glede na skupno število gradnikov. Rezultati analize so predstavljeni v tabela 1. Kot smo pričakovali, je delež sistemskih gradnikov pri mobilnih aplikacijah tipa»trgovina«zelo visok giblje se vedno preko 85% oziroma v povprečju 91.06%. Gradnike po meri smo opazili zgolj v primerih uporabe, kjer med sistemskimi gradniki ni moč pokriti dotičnega primera uporabe. Najpogosteje opažen gradnik po meri pri vseh platformah so bile zvezdice za oceno elementa. Med drugim je moč opaziti tudi druge gradnike po meri: reklamne pasice (Symbian, MeeGo Android, ios), gumbe (ios), oznake besedila (Symbian, MeeGo, Android), elemente seznama (Android, Symbian, MeeGo), naslove in delilnike sekcij (Symbian, Meego, Android).

99 Primerjalna analiza uporabniških vmesnikov na različnih mobilnih napravah 81 Tabela 4: Rezultati kriterija 3 - Uporaba sistemskih gradnikov Odjemalec»Trgovina«Facebook odjemalec ANDROID 38 / 41 (92.68%) 48 / 71 (67.61%) SYMBIAN 34 / 39 (87.18%) 20 / 76 (26.31%) MEEGO 39 / 42 (92.86%) 55 / 60 (91.67%) ios 24 / 27 (88.89%) 47 / 68 (69.12%) WP7 28 / 30 (93.33%) 57 / 61 (93.44%) Pričakovano je pri aplikacijah socialnega omrežja Facebook delež sistemskih gradnikov manjši. Največ gradnikov po meri opazimo pri aplikaciji Social (Symbian), medtem ko ima največji delež aplikacija na platformi WP7 (93.44%), takoj za njo pa sledi platforma MeeGo (91.67%). Med platformama Android in ios je moč opaziti vizualno podobnost, kjer lahko sklepamo, da gre tudi za kopiranje določenih gradnikov iz ene na drugo platformo. Pri našem kriteriju sta se aplikaciji odrezali povprečno z 67.61% (Android) in 69.12% (ios) deležem sistemskih gradnikov. Povprečje deležev sistemskih gradnikov na vseh aplikacijah znaša 67.56%, kar je za 23.50% manj kot pri aplikacijah tipa»trgovina«. Večina gradnikov po meri je uporabljenih zaradi celostne podobe aplikacij in specifičnih primerov uporabe. Tako lahko opazimo gradnike po meri: meniji (vse platforme, razen WP7), gumbi (vse platforme), pojavna okna (Symbian), dialogi (Symbian), zavihki (Android, Symbian), vrstica za iskanje (Symbian), naslovi strani (android, Symbian, MeeGo), elementi seznama (vse platforme), mreža fotografij (vse, razen WP7)

100 82 Analiza uporabniških vmesnikov na mobilnih napravah 4.3 SWOT analiza Na podlagi analize uporabniških vmesnikov aplikacij smo za vsako izvedli še SWOT analizo, kjer smo opredelili prednosti (angl. strengths), slabosti (angl. weaknesses), priložnosti (angl. opportunities) in nevarnosti (angl. threats). Tabela 5: SWOT analiza aplikacije Google Plus (Android) Prednosti: upoštevanje splošnega modela uporabniškega vmesnika aplikacije upoštevanje navigacijskih vzorcev uporaba velikega deleža sistemskih gradnikov Priložnosti: preglednejši (bolj čitljiv) uporabniški vmesnik več slikovnega materiala ali večje slike aplikacij Slabosti: nepreglednost elementov, predstavljenih v mreži Nevarnosti: zaradi nasičenosti aplikacij v seznamu, uporabnik kaj kmalu spregleda njemu potencialno zanimive aplikacije velik prenos podatkov zaradi slikovnega materiala, kar bi lahko škodovalo priljubljenosti med uporabniki Tabela 6: SWOT analiza aplikacije Nokia Store (Symbian) Prednosti: preprost in čitljiv uporabniški vmesnik upoštevanje splošnega modela uporabniškega vmesnika aplikacije velik delež sistemskih gradnikov Priložnosti: preureditev orodne vrstice; premik zavihkov na ustrezno mesto modifikacija gradnikov za zagotovitev celostne grafične podobe Slabosti: nepravilna raba zavihkov nepravilna grafična predstavitev izhoda aplikacije (za izhod aplikacije smernice predpisujejo puščico s smerjo v levo) Nevarnosti: nesprejetje aplikacije s strani uporabnikov zaradi nepravilnih vzorcev navigacije velik prenos podatkov zaradi slikovnega materiala, kar bi lahko škodovalo priljubljenosti med uporabniki

101 Primerjalna analiza uporabniških vmesnikov na različnih mobilnih napravah 83 Tabela 7: SWOT analiza aplikacije Nokia Store (MeeGo) Prednosti: upoštevanje navigacijskih vzorcev upoštevanje splošnega modela velik delež sistemskih gradnikov Priložnosti: bolj dodelan grafični vmesnik modifikacija gradnikov po načelih celostne grafične podobe Slabosti: grafično pust uporabniški vmesnik Nevarnosti: nesprejetje aplikacije s strani uporabnikov velik prenos podatkov zaradi slikovnega materiala, kar bi lahko škodovalo priljubljenosti med uporabniki Tabela 8: SWOT analiza aplikacije App Store (ios) Prednosti: upoštevanje splošnega modela aplikacije velik delež sistemskih gradnikov upoštevanje navigacijskih vzorcev Priložnosti: bolj dodelan grafični vmesnik Slabosti: grafično pust vmesnik določena področja klika so premajhna Nevarnosti: velik prenos podatkov zaradi slikovnega materiala, kar bi lahko škodovalo priljubljenosti med uporabniki Tabela 9: SWOT analiza aplikacije Marketplace (WP7) Prednosti: preprost uporabniški vmesnik uporaba splošnega modela aplikacije uporaba navigacijskih vzorcev dinamična menjava ozadja popestri uporabniški vmesnik Priložnosti: uporaba poudarjene sistemske barve uporaba sistemskih aplikacijskih menijev Slabosti: zaradi dinamičnega ozadja panorame prihaja do prenosa velike količine podatkov nepravilna raba aplikacijske vrstice (gumb deli (angl. share) bi se moral pojaviti v standardni obliki aplikacijskega menija (obkrožena ikona) Nevarnosti: nepreglednost zaradi več panoram velik prenos podatkov zaradi slikovnega materiala, kar bi lahko škodovalo priljubljenosti med uporabniki

102 84 Analiza uporabniških vmesnikov na mobilnih napravah Tabela 10: SWOT analiza aplikacije Facebook (Android) Prednosti: pregleden (čitljiv) vmesnik dobro predstavljena celostna podoba storitve Facebook upoštevanje splošnega modela Priložnosti: preureditev elementov menija v zavihke na drsnem traku prikaz ikone aplikacije v akcijski vrstici uporaba navigacije»gor«večji delež uporabe sistemskih gradnikov Slabosti: neupoštevanje navigacijskih vzorcev nekonsistentna uporaba ločilnikov sekcij preveč vizualnih različic gumbov nizek delež sistemskih gradnikov Nevarnosti: nepreglednost navigacije skozi aplikacijo nesprejetost aplikacije s strani uporabnikov zaradi nepravilne rabe navigacijskih vzorcev Tabela 11: SWOT analiza aplikacije Social (Symbian) Prednosti: predstavljena celostna podoba storitve Facebook grafična podoba gradnikov je podobna gradnikom spletne storitve Priložnosti: zamenjava menija z zavihki uporaba sistemskih dialogov uporaba sistemskih menijev pogleda uporaba sistemskih zavihkov prikaz statusne vrstice Slabosti: nepravilna vizualna podoba menijev slaba modifikacija sistemskih gradnikov nizek delež sistemskih gradnikov nestandardna raba mrežnega menija Nevarnosti: nesprejetja aplikacije s strani uporabnikov zaradi nekonsistentnosti z ostalimi aplikacijami konkurenčne aplikacije razvijalcev tretje osebe

103 Primerjalna analiza uporabniških vmesnikov na različnih mobilnih napravah 85 Tabela 12: SWOT analiza aplikacije Facebook (MeeGo) Prednosti: Velik delež sistemskih gradnikov Upoštevanje splošnega modela Upoštevanje navigacijskih vzorcev Celostna podoba storitve Facebook Priložnosti: Preureditev menija s sistemskimi gradniki (zavihki, zavihki ter pomik nazaj) Slabosti: nepravilna raba mrežnega menija premajhne velikosti pisav premajhna področja klikov Nevarnosti: Slaba uporabniška izkušnja zaradi neupoštevanja navigacijskih vzorcev velik prenos podatkov zaradi slikovnega materiala, kar bi lahko škodovalo priljubljenosti med uporabniki Tabela 13: SWOT analiza aplikacije Facebook (ios) Prednosti: čitljiv uporabniški vmesnik upoštevanje splošnega modela vključena celostna podoba storitve Facebook Priložnosti: Preureditev navigacije (z zavihki) Večji delež uporabe sistemskih gradnikov Slabosti: nekonsistentna uporaba menija nepravilna navigacija pomika nazaj premajhna področja klikov preveč različic gumba Nevarnosti: nepreglednost aplikacije Tabela 14: SWOT analiza aplikacije Facebook (WP7) Prednosti: čitljiv uporabniški vmesnik celostna podoba storitve upoštevanje navigacijskih vzorcev velik delež sistemskih gradnikov Priložnosti: preureditev naslova panorame uporaba statusne vrstice Slabosti: neupoštevanje splošnega modela aplikacije nestandarden izgled panorame Nevarnosti: nekonsistentnost panorame

104 86 Analiza uporabniških vmesnikov na mobilnih napravah 5 ZAKLJUČEK V tem poglavju bodo povzeti rezultati diplomskega dela. Najprej bomo pregledali hipoteze in komentirali njihove rezultate. Predstavljene bodo omejitve diplomskega dela. Na koncu bomo prestavili še uporabnost diplomskega dela v praksi, možnosti za nadaljnje delo ter sklepne misli. 5.1 Testiranje hipotez Hipoteze, postavljene na začetku diplomskega dela, smo testirali na podlagi pregledane literature in analize obstoječih aplikacij. Vsako od hipotez smo potrdili ali ovrgli na podlagi pridobljenih rezultatov in subjektivne presoje. Rezultate hipotez, katere smo tudi ustrezno pokomentirali, prikazuje tabela 15. Tabela 15: Rezultati hipotez Hipoteza Rezultat Komentar H 1 H 2 H 3 H 4 Potrjena Nismo ovrgli Potrjena Ovržena Pri preučitvi literature (poglavje 3) in po analizi obstoječih aplikacij (poglavje 4) smo ugotovili, da med platformami ni večjih konceptualnih razlik, tako z vizualnega, kot funkcionalnega stališča. Hipoteze nismo ovrgli, saj lahko glede na analizo obstoječih aplikacij ugotovimo odstopanja od smernic, prav tako pa hkrati podobnost med aplikacijami zaradi posnemanja uporabniškega vmesnika (poglavje 4.2.3). V teoriji bi lahko hipotezo tudi potrdili. Prav tako pri aplikacijah s 100% deležem sistemskih gradnikov. Glede na pridobljeno znanje iz teorije (poglavje 3) in primerjalno analizo lahko hipotezo potrdimo, saj smo pri aplikacijah opazili specifične primere uporabe, za katero niso na voljo sistemski gradniki (poglavje 4.2.3). Iz praktične analize (poglavje 4.2) je razvidno, da prihaja do odstopanj pri uporabi smernic, zato smo hipotezo ovrgli.

105 Zaključek Omejitve Pregled pravil in smernic načrtovanja uporabniških vmesnikov smo omejili zgolj na najbolj razširjene platforme med pametnimi telefoni Android, Symbian, MeeGo, ios ter Windows Phone 7. Pri primerjalni analizi obstoječih aplikacij smo se omejili zgolj na dve aplikaciji za posamezno platformo in sicer aplikacije za prenos in nakup aplikacij (trgovina) ter odjemalca socialnega omrežja Facebook. Med vzporedno analizo aplikacij smo izvedli vse takrat dostopne primere uporabe, ki so bili zaradi dosega boljših rezultatov, med aplikacijami zelo podobni. 5.3 Uporabnost diplome v praski Diplomsko delo predstavlja pomembna pravila in smernice za oblikovanje uporabniških vmesnikov na mobilnih napravah. Gre za smernice najpopularnejših mobilnih platform zbranih na enem mestu. Ves teoretičen del je podkrepljen tudi z veliko slikovnega materiala, zaradi česar je razumevanje konceptov še lažje. Ravno zaradi teh razlogov menimo, da je diplomsko delo možno uporabiti pri načrtovanju resnejših mobilnih aplikacij. Lahko gre za načrtovanje aplikacij na vseh platformah hkrati ali pa zgolj za posamične platforme. 5.4 Možnosti za nadaljnje delo Pri teoretičnem delu smo zajeli večino pomembnih delov, ki jih mora oblikovalec oziroma načrtovalec mobilne aplikacije poznati. V nadaljevanju pa bi lahko nekaj pozornosti namenili še oblikovanju ikon, saj ima vsaka platforma smernice in pravila tudi za oblikovanje le-teh. Prav tako bi lahko analizirali literaturo s področja celostnih podob oziroma, kako oblikovati aplikacijo po naši celostni podobi, da še obdržimo konsistentnost platforme. Prav tako v diplomskem delu nismo analizirali obrobnih delov aplikacije, kot so na primer vtičniki na nekaterih platformah.

106 88 Analiza uporabniških vmesnikov na mobilnih napravah Priložnost za nadaljnje delo vidimo tudi pri empiričnem področju, kjer bi lahko na podlagi že pridobljenega znanja izdelali uporabniški vmesnik še neobstoječe aplikacije za vse mobilne platforme. 5.5 Sklep Vse več storitev je dostopnih preko mobilnih naprav, prav tako pa narašča njihova uporaba. V poplavi aplikacij, je pomemben tudi izgled aplikacije. Ne gre samo za vizualni izgled, temveč tudi za zagotavljanje dobrih uporabniških izkušenj. V kolikor dosežemo harmonijo obojega, smo lahko prepričani, da bo naša aplikacija požela zanimanje med uporabniki, pri (morebitni) stranki pa zadovoljstvo. Še vedno pa menimo, da se večina razvijalcev tega ne zaveda dovolj dobro, zato lahko k boljšim rezultatom pripomore to diplomsko delo. Z diplomskim delom smo dosegli cilje, ki smo si jih zastavili pred začetkom. Predstavili smo teoretična pravila in smernice za oblikovanje uporabniških vmesnikov, prav tako pa smo te smernice lahko spoznali na praktičnih primerih že obstoječih aplikacij. Menimo, da je diplomsko delo dobra iztočnica za nadaljnji pregled in analizo uporabniških vmesnikov na mobilnih napravah.

107 Literatura 89 6 LITERATURA [1] Ray Rischpater and Daniel Zucker, Beginning Nokia Apps Development: Qt and HTML5 for Symbian and MeeGo [2] Alla Gringaus» Which is Which? Wapplications.. [Spletni]. [Navedeno: ]. [3] J.D. Meier et al., Mobile Application Architecture Guide, MSDN Library, Microsoft Corporation, vol. 2008, pp. 5 45, [4] LukeW Touch Gesture Reference Guide. [Spletni]. [Navedeno: ]. [5] Speech recognition: Your smartphone gets smarter - Computerworld. [Spletni]. _smarter?taxonomyid=15&pagenumber=1. [Navedeno: ]. [6] Mobile Device Insight» Sensors in Smartphones» Mobile Device Insight. [Spletni]. [Navedeno: ]. [7] Gartner Says Sales of Mobile Devices in Second Quarter of 2011 Grew 16.5 Percent Year-on- Year; Smartphone Sales Grew 74 Percent.. [Spletni]. [Navedeno: ]. [8] Mobile operating system - Wikipedia, the free encyclopedia.. [Spletni]. [Navedeno: ]. [9] Android - Developers. [Spletni]. [Navedeno: ]. [10] Android API Levels Android Developers. [Spletni]. [Navedeno: ]. [11] Android Design - UI Overview. [Spletni]. [Navedeno: ]. [12] Android Design - Action Bar. [Spletni]. [Navedeno: ]. [13] Android Design - Navigation with Back and Up. [Spletni]. [Navedeno: ]. [14] Android Design - Building Blocks. [Spletni]. [Navedeno: ]. [15] Symbian - Wikipedia, the free encyclopedia. [Spletni]. [Navedeno: ]. [16] Overall UI model - Symbian Design Guidelines. [Spletni]. [Navedeno: ]. [17] Rotation - Symbian Design Guidelines. [Spletni]. [Navedeno: ]. [18] View navigation - Symbian Design Guidelines. [Spletni]. [Navedeno: ].

108 90 Analiza uporabniških vmesnikov na mobilnih napravah [19] Symbian Design Guidelines - Symbian Design Guidelines - Symbian Design Guidelines. [Spletni]. [Navedeno: ]. [20] Overall UI Model. [Spletni]. [Navedeno: ]. [21] Application Basic View. [Spletni]. [Navedeno: ]. [22] The Swipe. [Spletni]. [Navedeno: ]. [23] Portrait & Landscape. [Spletni]. [Navedeno: ]. [24] Navigation Structures. [Spletni]. [Navedeno: ]. [25] Component Library. [Spletni]. [Navedeno: ]. [26] App Store - Wikipedija, prosta enciklopedija. [Spletni]. [Navedeno: ]. [27] ios - Wikipedia, the free encyclopedia. [Spletni]. [Navedeno: ]. [28] ios Human Interface Guidelines: ios UI Element Usage Guidelines. [Spletni]. G/UIElementGuidelines/UIElementGuidelines.html#//apple_ref/doc/uid/TP CH13- SW1. [Navedeno: ]. [29] ios Human Interface Guidelines: User Experience Guidelines. [Spletni]. G/UEBestPractices/UEBestPractices.html. [Navedeno: ]. [30] HTML - Wikipedija, prosta enciklopedija. [Spletni]. [Navedeno: ]. [31] Digitimes: Windows Phone 7 market share to grow to 5% in Q WMPoweruser. [Spletni]. [Navedeno: ]. [32] Tiles Overview. [Spletni]. [Navedeno: ]. [33] First Look. [Spletni]. [Navedeno: ]. [34] Charles Petzold, Programming Windows Phone [35] Theme Overview. [Spletni]. [Navedeno: ]. [36] Panorama Control. [Spletni]. [Navedeno: ]. [37] Pivot Control. [Spletni]. [Navedeno: ]. [38] Controls Design Guidelines for Windows Phone. [Spletni]. [Navedeno: ]. [39] JPEG - Wikipedija, prosta enciklopedija. [Spletni]. [Navedeno: ].

109 Priloge 91 7 PRILOGE 7.1 Seznam slik Slika 2.1: Primer nameščene (prave) aplikacije (levo) ter spletne aplikacije (desno) [2]... 5 Slika 2.2: Arhitektura mobilne aplikacije [3]... 6 Slika 2.3: Dotik zaslona [4]... 8 Slika 2.4: Dvojni dotik zaslona [4]... 8 Slika 2.5: Pritisk na zaslon [4]... 8 Slika 2.6: Poteg po zaslonu (levo) in sunek po zaslonu (desno) [4]... 9 Slika 2.7: Povečanje (levo) in zmanjšanje (desno) [4]... 9 Slika 3.1: Tržni delež mobilnih platform (4. četrtletje 2011) [8] Slika 3.2: Splošen model uporabniškega vmesnika na platformi Android Slika 3.3: Splošen model uporabniškega vmesnika Android aplikacije [11] Slika 3.4: Akcijska vrstica [11] Slika 3.5: Primer navigacije nazaj in gor Slika 3.6: Zavihki na drsnem traku (levo) in fiksni zavihki (desno) Slika 3.7: Prikaz navigacije»swipe« Slika 3.8: Primeri elementov seznama Slika 3.9: Gradnik»Spinner« Slika 3.10: Osnovni gumbi (levo) in gumbi brez obrobe (desno) [14] Slika 3.11: Prikaz privzetega in pritisnjenega stanja na temni in svetli temi [14] Slika 3.12: Enovrstično vnosno polje (levo) in večvrstično vnosno polje (desno) Slika 3.13: Stanja gradnika»seekbar«[14]... 20

110 92 Analiza uporabniških vmesnikov na mobilnih napravah Slika 3.14: Gradnik»Progress«[14] Slika 3.15: Primera gradnika»activity«[14] Slika 3.16: Vizualna stanja potrditvenega polja in radijskega gumba [14] Slika 3.17: Stikalo; izklopljeno stanje (levo) in vklopljeno stanje (desno) [14] Slika 3.18: zgradba dialoga Slika 3.19: Modalno okno»toast« Slika 3.20 Primeri izbirnika; privzeto (levo), izbirnik časa (sredina) in datuma (desno) Slika 3.21: Osnovna struktura uporabniškega vmesnika Symbian Slika 3.22: Osnovni model uporabniškega vmesnika Slika 3.23: Samodejna prilagoditev uporabniškega vmesnika glede na orientacijo [17] Slika 3.24: Različna razporeditev elementov za pokončno in ležečo orientacijo [17] Slika 3.25: Zaklenjena orientacija zgolj na ležečo [17] Slika 3.26: Primer navigacije vrtanja v globino [18] Slika 3.27: Izvedba vzporedne navigacije s pomočjo zavihkov [18] Slika 3.28: Izvedba vzporedne navigacije s pomočjo orodne vrstice [18] Slika 3.29: Stanja gumba Slika 3.30: Primer uporabe preklopnih gumbov Slika 3.31: Vizualna stanja stikal Slika 3.32: Primer prednastavljenega besedila Slika 3.33: Vrste dialogov Slika 3.34: Gradnik»Tumbler« Slika 3.35: Primeri seznamov [19] Slika 3.36: Primeri indikatorjev Slika 3.37: Zgradba elementa drsnik Slika 3.38: Grafična predstavitev menija [19] Slika 3.39: Splošen model uporabniškega vmesnika MeeGo [20]... 36

111 Priloge 93 Slika 3.40: Osnovni model uporabniškega vmesnika aplikacije [21] Slika 3.41: Vrtanje v globino [24] Slika 3.42: Uporaba zavihkov [24] Slika 3.43: Uporaba zavihkov ter pomika nazaj [24] Slika 3.44: Vnosna polja z dodatnimi gradniki [25] Slika 3.45: Dialogi in meniji [25] Slika 3.46: Primer elementov seznama s sliko [25] Slika 3.47: Indikatorji napredka; Končna točna neznana (levo), končna točka znana (sredina) in kolesce (desno) Slika 3.48: Primeri drsnikov Slika 3.49: Splošen model uporabniškega vmesnika platforme ios Slika 3.50: Splošen model uporabniškega vmesnika aplikacije Slika 3.51: Različice statusne vrstice platforme ios [28] Slika 3.52: Primer navigacijske vrstice [28] Slika 3.53: Primer večsegmentnih gumbov [28] Slika 3.54: Primer orodne vrstice z petimi akcijami Slika 3.55: Primer vrstice z zavihki [28] Slika 3.56: Primer uporabe vrtanja v globino Slika 3.57: Primer uporabe zavihkov na platformi ios Slika 3.58: Podelementi gradnika»table View«[28] Slika 3.59: Gradnik»Text View«[28] Slika 3.60: Primer gradnika»webview«[28] Slika 3.61: Primeri gradnika»alert«[28] Slika 3.62: Primera gradnika»action Sheet« Slika 3.63: Gradnik Activity Indicator Slika 3.64: Gradnik»Date and Time Picker«... 52

112 94 Analiza uporabniških vmesnikov na mobilnih napravah Slika 3.65: Detail Disclosure Button Slika 3.66: Indikator aktivnosti omrežja (angl. Network Activity Indicator) Slika 3.67: Indikator strani prikazuje 13 odprtih strani; trenutno pa se nahajamo na Slika 3.68: Primer gradnika Picker [28] Slika 3.69: Indikator napredka Slika 3.70: Pravokotni zaobljeni gumb Slika 3.71: vrstica za iskanje (zgoraj) in vrstica obsega (spodaj) [28] Slika 3.72: Segmentirani nadzor [28] Slika 3.73: Gradnik drsnik [28] Slika 3.74: Gradnik»Stepper«[28] Slika 3.75: Stanji stikala; izklopljeno (levo) in vklopljeno (desno) [28] Slika 3.76: Polje besedila Slika 3.77: Goli stil (levo) in obrobljeni stil (desno) Slika 3.78: Splošen model uporabniškega vmesnika WP Slika 3.79: Splošen model uporabniškega vmesnika aplikacije [33] Slika 3.80: Razširjena aplikacijska (orodna) vrstica [33] Slika 3.81: Fizične tipke WP7; nazaj (levo), start (sredina), išči (desno) [34] Slika 3.82: Primeri uporabe tem in sistemske poudarjene barve vzorčne aplikacije [35].. 61 Slika 3.83: Zgradba panorame [36] Slika 3.84: Zgradba gradnika pivot [37] Slika 3.85: Prikaz pomika med elementi pivota [37] Slika 3.86: stanja gradnika gumb Slika 3.87: Nepravilna (levo) in pravilna (desno) uporaba povezave med tekstom Slika 3.88: Stanja gradnikov»checkbox«(levo) in»radiobutton«(desno) Slika 3.89: Stanja gradnika»textbox« Slika 3.90: Polje za vnos gesla... 71

113 Priloge 95 Slika 3.91: Gradnik»ListBox«[38] Slika 3.92: Gradnik Map [38] Slika 3.93: Dve različici gradnika»progressbar«; polna ravna črta (levo) in serija podobnih enako oddaljenih blokov (desno) [38] Slika 3.94: Gradnik»Slider«[38] Seznam tabel Tabela 1: Seznam različic platforme Android, njihova stopnja API ter delež uporabe Tabela 2: Reultati kriterija 1 - upoštevanje splošnega modela aplikacije Tabela 3: Rezultati kriterija 2 - upoštevanje navigacijskih vzorcev Tabela 4: Rezultati kriterija 3 - Uporaba sistemskih gradnikov Tabela 5: SWOT analiza aplikacije Google Plus (Android) Tabela 6: SWOT analiza aplikacije Nokia Store (Symbian) Tabela 7: SWOT analiza aplikacije Nokia Store (MeeGo) Tabela 8: SWOT analiza aplikacije App Store (ios) Tabela 9: SWOT analiza aplikacije Marketplace (WP7) Tabela 10: SWOT analiza aplikacije Facebook (Android) Tabela 11: SWOT analiza aplikacije Social (Symbian) Tabela 12: SWOT analiza aplikacije Facebook (MeeGo) Tabela 13: SWOT analiza aplikacije Facebook (ios) Tabela 14: SWOT analiza aplikacije Facebook (WP7) Tabela 15: Rezultati hipotez... 86

114 96 Analiza uporabniških vmesnikov na mobilnih napravah 7.3 Zaslonske slike aplikacij Priloga vsebuje zaslonske slike aplikacij za prenos in nakup aplikacij (trgovine) in odjemalce socialnega omrežja Facebook. Poskušali smo sestaviti kar se da podobne primere uporabe na vseh platformah. V skupini aplikacij za prenos in nakup aplikacij so predstavljene (1) Google Play (Android), (2) Nokia Store (Symbian), (3) Nokia Store (MeeGo), (4) App Store (ios) ter (5) Marketplace (Windows Phone 7). V skupini odjemalcev socialnega omrežja pa so predstavljene (1) Facebook (Android), (2) Social (Symbian), (3) Facebook (MeeGo), (4) Facebook (ios) ter (5) Facebook (Windows Phone 7) Google Play (Android)

115 Priloge Nokia Store (Symbian) Nokia Store (MeeGo)

116 98 Analiza uporabniških vmesnikov na mobilnih napravah App Store (ios)

117 Priloge Marketplace (Windows Phone 7)

118 100 Analiza uporabniških vmesnikov na mobilnih napravah Facebook (Android)

119 Priloge Social (Symbian)

120 102 Analiza uporabniških vmesnikov na mobilnih napravah Facebook (MeeGo)

121 Priloge Facebook (ios)

122 104 Analiza uporabniških vmesnikov na mobilnih napravah Facebook (Windows Phone 7)