analiza uporabniŠkih vmesnikov na mobilnih …Četrto poglavje je primerjalna analiza uporabniških...
TRANSCRIPT
Gregor Bohak
ANALIZA UPORABNIŠKIH VMESNIKOV NA MOBILNIH NAPRAVAH
Diplomsko delo
Maribor, marec 2012
I
Diplomsko delo univerzitetnega študijskega programa
ANALIZA UPORABNIŠKIH VMESNIKOV NA MOBILNIH NAPRAVAH
Študent: Gregor Bohak
Študijski program: UN ŠP – Računalništvo in informatika
Smer: Informatika
Mentor: doc. dr. Gregor Polančič
Lektorica Branka Selinšek
Maribor, marec 2012
II
III
IV
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.
VI
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: 621.395.721.5(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.
VIII
IX
ANALYSIS OF USER INTERFACES ON MOBILE DEVICES
Key words: user interface, mobile device, smartphone, Android, Symbian, MeeGo,
iOS, Windows Phone 7
UDK: 621.395.721.5(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.
X
XI
VSEBINA
1 UVOD ...................................................................................................................... 1
1.1 CILJI IN HIPOTEZE DIPLOMSKEGA DELA ............................................................. 1
1.2 PREDPOSTAVKE IN OMEJITVE DIPLOMSKEGA DELA ............................................ 2
1.3 PREDSTAVITEV METOD DELA ............................................................................. 2
1.4 STRUKTURA DIPLOMSKEGA DELA ...................................................................... 3
2 SPLOŠNO O UPORABNIŠKIH VMESNIKIH .................................................. 4
2.1 UPORABNIŠKE IZKUŠNJE .................................................................................... 5
2.2 ARHITEKTURA MOBILNE APLIKACIJE ................................................................. 6
2.3 PRAVILA DOBREGA NAČRTOVANJA .................................................................... 6
2.4 VNOSNE METODE ............................................................................................... 7
2.4.1 Vnos preko zaslona ....................................................................................... 7
2.4.2 Fizična tipkovnica ...................................................................................... 10
2.4.3 Mikrofon ..................................................................................................... 10
2.4.4 Namenske tipke telefona ............................................................................. 10
2.4.5 Drugi senzorji ............................................................................................. 11
3 UPORABNIŠKI VMESNIKI RAZLIČNIH MOBILNIH PLATFORM ........ 12
3.1 GOOGLE ANDROID ........................................................................................... 13
3.1.1 Splošen model uporabniškega vmesnika .................................................... 13
3.1.2 Splošen model uporabniškega vmesnika aplikacije.................................... 14
3.1.3 Vzorci navigacije ........................................................................................ 16
3.1.4 Pregled osnovnih gradnikov ....................................................................... 18
3.2 NOKIA SYMBIAN ............................................................................................. 24
3.2.1 Splošen model uporabniškega vmesnika .................................................... 24
3.2.2 Splošen model uporabniškega vmesnika aplikacije.................................... 25
3.2.3 Sprememba orientacije zaslona .................................................................. 26
3.2.4 Vzorci navigacije ........................................................................................ 28
3.2.5 Pregled osnovnih gradnikov ....................................................................... 29
3.3 MEEGO 1.2 HARMATTAN ................................................................................ 35
XII
3.3.1 Splošen model uporabniškega vmesnika .................................................... 35
3.3.2 Splošen model uporabniškega vmesnika aplikacije.................................... 36
3.3.3 Potreben je le poteg .................................................................................... 37
3.3.4 Vzorci navigacije ........................................................................................ 38
3.3.5 Pregled osnovnih gradnikov ....................................................................... 39
3.4 APPLE IOS ....................................................................................................... 42
3.4.1 Splošen model uporabniškega vmesnika .................................................... 42
3.4.2 Splošen model uporabniškega vmesnika aplikacije.................................... 43
3.4.3 Sprememba orientacije zaslona .................................................................. 46
3.4.4 Vzorci navigacije ........................................................................................ 46
3.4.5 Pregled osnovnih gradnikov ....................................................................... 48
3.5 WINDOWS PHONE 7 ......................................................................................... 57
3.5.1 Splošen model uporabniškega vmesnika .................................................... 58
3.5.2 Splošen model uporabniškega vmesnika aplikacije.................................... 59
3.5.3 Teme ........................................................................................................... 60
3.5.4 Vzorci navigacije ........................................................................................ 61
3.5.5 Pregled osnovnih gradnikov ....................................................................... 67
4 PRIMERJALNA ANALIZA UPORABNIŠKIH VMESNIKOV NA
RAZLIČNIH MOBILNIH NAPRAVAH ................................................................... 77
4.1 OPIS METODE DELA ......................................................................................... 77
4.2 REZULTATI ...................................................................................................... 78
4.2.1 Kriterij 1: Upoštevanje splošnega modela aplikacije ................................ 78
4.2.2 Kriterij 2: Upoštevanje navigacijskih vzorcev ........................................... 79
4.2.3 Kriterij 3: Uporaba sistemskih gradnikov .................................................. 80
4.3 SWOT ANALIZA .............................................................................................. 82
5 ZAKLJUČEK ....................................................................................................... 86
5.1 TESTIRANJE HIPOTEZ ....................................................................................... 86
5.2 OMEJITVE ........................................................................................................ 87
5.3 UPORABNOST DIPLOME V PRASKI .................................................................... 87
5.4 MOŽNOSTI ZA NADALJNJE DELO ...................................................................... 87
5.5 SKLEP .............................................................................................................. 88
XIII
6 LITERATURA ..................................................................................................... 89
7 PRILOGE .............................................................................................................. 91
7.1 SEZNAM SLIK ................................................................................................... 91
7.2 SEZNAM TABEL ................................................................................................ 95
7.3 ZASLONSKE SLIKE APLIKACIJ ........................................................................... 96
7.3.1 Google Play (Android) ............................................................................... 96
7.3.2 Nokia Store (Symbian) ................................................................................ 97
7.3.3 Nokia Store (MeeGo) .................................................................................. 97
7.3.4 App Store (iOS) ........................................................................................... 98
7.3.5 Marketplace (Windows Phone 7) ............................................................... 99
7.3.6 Facebook (Android) ................................................................................. 100
7.3.7 Social (Symbian) ....................................................................................... 101
7.3.8 Facebook (MeeGo) ................................................................................... 102
7.3.9 Facebook (iOS) ......................................................................................... 103
7.3.10 Facebook (Windows Phone 7) .............................................................. 104
7.4 NASLOV ŠTUDENTA ....................................................................................... 105
7.5 KRATEK ŽIVLJENJEPIS.................................................................................... 105
XIV
XV
UPORABLJENE KRATICE
2G 2nd Generation
3G 3rd Generation
ALS Ambient Light Sensor
API Application Programming Interface
CSS Cascading Style Sheets
GPS Global Positioning System
HTML Hyper Text Markup Language
iOS iPhone Operating System
JPEG Joint Photographic Experts Group
PNG Portable Network Graphics
S60 Series 60
SMS Short Message Service
SWOT Strengths Weaknesses Opportunities Threats
UI User Interface
UX User Experience
WP7 Windows Phone 7
XVI
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.
2 Analiza uporabniških vmesnikov na mobilnih napravah
Za diplomsko delo smo postavili sledeče hipoteze:
H1: Uporabniški vmesniki v večini temeljijo na podobnih1 konceptih.
H2: Razlike med grafičnimi predstavitvami gradnikov uporabniškega vmesnika
posamezne platforme so očitne in prepoznavne za posamezno platformo.
H3: Posamezne platforme nudijo le osnovne2 sistemske gradnike – za posebne
primere uporabe je potrebno ustvariti gradnike po meri.
H4: Aplikacije sledijo načrtovalskim smernicam3.
1.2 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.
UVOD 3
1.4 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.
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
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.
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.
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.
2.4.1 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
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]
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.
10 Analiza uporabniških vmesnikov na mobilnih napravah
2.4.2 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.
2.4.3 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 2000. 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 2005. 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].
2.4.4 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.
Splošno o uporabniških vmesnikih 11
2.4.5 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).
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]
Uporabniški vmesniki različnih mobilnih platform 13
3.1 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
500.000 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 2011.
Tabela 1: Seznam različic platforme Android, njihova stopnja API1 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 8 27.8%
2.3.x Gingerbread 9-10 58.6%
3.x.x Honeycomb 11-13 3.4%
4.0.x Ice Cream Sandwich 14-15 1.0%
3.1.1 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]
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
3.1.2 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)
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;
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].
3.1.3 Vzorci navigacije
3.1.3.1 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),
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
3.1.3.2 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)
18 Analiza uporabniških vmesnikov na mobilnih napravah
3.1.3.3 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
3.1.4.1 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.
Uporabniški vmesniki različnih mobilnih platform 19
Slika 3.8: Primeri elementov seznama
3.1.4.2 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«
3.1.4.3 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]
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]
3.1.4.4 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].
3.1.4.5 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]
Uporabniški vmesniki različnih mobilnih platform 21
3.1.4.6 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]
3.1.4.7 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 3.1.4.2) [14].
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 3.16.
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]
3.1.4.8 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.
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«
3.1.4.9 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
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].
3.2.1 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.
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
3.2.2 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
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
3.2.3 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.
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.
28 Analiza uporabniških vmesnikov na mobilnih napravah
Slika 3.25: Zaklenjena orientacija zgolj na ležečo [17]
3.2.4 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 3.26.
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
Uporabniški vmesniki različnih mobilnih platform 29
so zasloni v vzporedni navigaciji hierarhično na istem nivoju. Primer prikazuje
slika 3.27. 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
3.28.
Slika 3.27: Izvedba vzporedne navigacije s pomočjo zavihkov [18]
Slika 3.28: Izvedba vzporedne navigacije s pomočjo orodne vrstice [18]
3.2.5 Pregled osnovnih gradnikov
3.2.5.1 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].
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
3.2.5.2 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
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].
3.2.5.3 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
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«
3.2.5.4 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
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].
3.2.5.5 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
3.2.5.6 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;
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
3.2.5.7 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]
Uporabniški vmesniki različnih mobilnih platform 35
3.3 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 3.5.
3.3.1 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).
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]
3.3.2 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
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]
3.3.3 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].
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].
3.3.4 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.
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]
3.3.5 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.
40 Analiza uporabniških vmesnikov na mobilnih napravah
3.3.5.1 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].
3.3.5.2 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]
3.3.5.3 Pogovorna okna in meniji
Obstajajo enaka pogovorna okna ter meniji kot pri platformi Symbian, le da prihaja do
vizualnih razhajanj. Vizualni stil prikazuje slika 3.45.
Slika 3.45: Dialogi in meniji [25]
Uporabniški vmesniki različnih mobilnih platform 41
3.3.5.4 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]
3.3.5.5 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)
3.3.5.6 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
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 Store1 zabeležili preko 500.000 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].
3.4.1 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].
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
3.4.2 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).
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
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
44×44 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
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.
3.4.3 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].
3.4.4 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 3.4.2.
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 3.4.2.
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.
48 Analiza uporabniških vmesnikov na mobilnih napravah
3.4.5 Pregled osnovnih gradnikov
3.4.5.1 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.
Uporabniški vmesniki različnih mobilnih platform 49
2. 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]
3.4.5.2 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 3.4.5.3. Tako kot »Web View« tudi »Text View«
omogoča prepoznavo telefonskih številk in povezav [28].
Slika 3.59: Gradnik »Text View« [28]
50 Analiza uporabniških vmesnikov na mobilnih napravah
3.4.5.3 Gradnik »Web View«
Gradnik »WebView« omogoča prikaz bogatih HTML1 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]
3.4.5.4 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]
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].
3.4.5.5 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].
52 Analiza uporabniških vmesnikov na mobilnih napravah
Slika 3.62: Primera gradnika »Action Sheet«
3.4.5.6 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
3.4.5.7 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«
Uporabniški vmesniki različnih mobilnih platform 53
3.4.5.8 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 3.4.5.1) [28].
Slika 3.65: Detail Disclosure Button
3.4.5.9 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].
3.4.5.10 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)
3.4.5.11 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].
54 Analiza uporabniških vmesnikov na mobilnih napravah
Slika 3.67: Indikator strani prikazuje 13 odprtih strani; trenutno pa se nahajamo na 9.
3.4.5.12 Gradnik »Picker«
Izbirnik (angl. Picker) je zelo podoben gradniku »Date and Time Picker« (poglavje
3.4.5.7), 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]
3.4.5.13 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
3.4.5.10) [28].
Slika 3.69: Indikator napredka
Uporabniški vmesniki različnih mobilnih platform 55
3.4.5.14 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
3.4.5.15 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].
3.4.5.16 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 44×44 zaslonskih pik. Ravno s tem razlogom je
število segmentov omejeno na pet [28].
Slika 3.72: Segmentirani nadzor [28]
56 Analiza uporabniških vmesnikov na mobilnih napravah
3.4.5.17 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]
3.4.5.18 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]
3.4.5.19 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]
3.4.5.20 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
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
3.4.5.21 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 2010. 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.
58 Analiza uporabniških vmesnikov na mobilnih napravah
3.5.1 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).
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].
3.5.2 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.
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]
3.5.3 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
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 3.82.
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.
3.5.4 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.
3.5.4.1 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.
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.
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.
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 480 × 800 ali 1024 × 800 zaslonskih pik in sicer
format JPEG.
Uporabniški vmesniki različnih mobilnih platform 65
3.5.4.2 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.
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.
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.
3.5.5 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.
3.5.5.1 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 3.5.5.3). 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
68 Analiza uporabniških vmesnikov na mobilnih napravah
3.5.5.2 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].
3.5.5.3 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 3.88. 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].
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 3.5.5.8. Prav tako gradnik »ListBox«
uporabimo za izbiro numeričnih vrednosti. Stanja gradnika »RadioButton« so enaka
stanjem kontrole »CheckBox« in jih prikazuje slika 3.88. 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].
3.5.5.4 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].
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; le-
te 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).
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
3.5.5.5 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].
3.5.5.6 Gradnik »Image«
Gradnik slika (angl. Image) nam omogoča prikaz slik v naši aplikaciji. Podpira formate
JPG1 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.
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)
3.5.5.7 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].
3.5.5.8 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 3.91. 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]
Uporabniški vmesniki različnih mobilnih platform 73
3.5.5.9 Gradnik »Map«
Gradnik zemljevid (angl. map) omogoča integracijo zemljevidov Bing1 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]
3.5.5.10 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].
1Zemljevidi Bing (angl. Bing Maps) – storitev podjetja Microsoft, ki svojim uporabnikom omogoča dostop
do zemljevidov sveta.
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]
3.5.5.11 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].
3.5.5.12 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].
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.
76 Analiza uporabniških vmesnikov na mobilnih napravah
3.5.5.13 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.
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.
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
4.2.1 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
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.
4.2.2 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
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.
4.2.3 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).
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)
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
Slabosti:
nepreglednost elementov, predstavljenih v mreži
Priložnosti:
preglednejši (bolj čitljiv) uporabniški vmesnik
več slikovnega materiala ali večje slike aplikacij
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
Slabosti:
nepravilna raba zavihkov
nepravilna grafična predstavitev izhoda aplikacije (za izhod aplikacije smernice predpisujejo puščico s smerjo v levo)
Priložnosti:
preureditev orodne vrstice; premik zavihkov na ustrezno mesto
modifikacija gradnikov za zagotovitev celostne grafične podobe
Nevarnosti:
nesprejetje aplikacije s strani uporabnikov zaradi nepravilnih vzorcev navigacije
velik prenos podatkov zaradi slikovnega materiala, kar bi lahko škodovalo priljubljenosti med uporabniki
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
Slabosti:
grafično pust uporabniški vmesnik
Priložnosti:
bolj dodelan grafični vmesnik
modifikacija gradnikov po načelih celostne grafične podobe
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
Slabosti:
grafično pust vmesnik
določena področja klika so premajhna
Priložnosti:
bolj dodelan grafični vmesnik
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
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)
Priložnosti:
uporaba poudarjene sistemske barve
uporaba sistemskih aplikacijskih menijev
Nevarnosti:
nepreglednost zaradi več panoram
velik prenos podatkov zaradi slikovnega materiala, kar bi lahko škodovalo priljubljenosti med uporabniki
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
Slabosti:
neupoštevanje navigacijskih vzorcev
nekonsistentna uporaba ločilnikov sekcij
preveč vizualnih različic gumbov
nizek delež sistemskih gradnikov
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
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
Slabosti:
nepravilna vizualna podoba menijev
slaba modifikacija sistemskih gradnikov
nizek delež sistemskih gradnikov
nestandardna raba mrežnega menija
Priložnosti:
zamenjava menija z zavihki
uporaba sistemskih dialogov
uporaba sistemskih menijev pogleda
uporaba sistemskih zavihkov
prikaz statusne vrstice
Nevarnosti:
nesprejetja aplikacije s strani uporabnikov zaradi nekonsistentnosti z ostalimi aplikacijami
konkurenčne aplikacije razvijalcev tretje osebe
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
Slabosti:
nepravilna raba mrežnega menija
premajhne velikosti pisav
premajhna področja klikov
Priložnosti:
Preureditev menija s sistemskimi gradniki (zavihki, zavihki ter pomik nazaj)
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
Slabosti:
nekonsistentna uporaba menija
nepravilna navigacija pomika nazaj
premajhna področja klikov
preveč različic gumba
Priložnosti:
Preureditev navigacije (z zavihki)
Večji delež uporabe sistemskih gradnikov
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
Slabosti:
neupoštevanje splošnega modela aplikacije
nestandarden izgled panorame
Priložnosti:
preureditev naslova panorame
uporaba statusne vrstice
Nevarnosti:
nekonsistentnost panorame
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
H1 Potrjena 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.
H2 Nismo ovrgli
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.
H3 Potrjena
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).
H4 Ovržena Iz praktične analize (poglavje 4.2) je razvidno, da prihaja do odstopanj pri uporabi smernic, zato smo hipotezo ovrgli.
Zaključek 87
5.2 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.
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.
Literatura 89
6 LITERATURA
[1] Ray Rischpater and Daniel Zucker, Beginning Nokia Apps Development: Qt and HTML5 for
Symbian and MeeGo. 2010.
[2] “Alla Gringaus » Which is Which? Wapplications.”. [Spletni].
http://allagringaus.com/2010/12/14/which-is-which-wapplications/. [Navedeno: 13.10.2011].
[3] J.D. Meier et al., “Mobile Application Architecture Guide,” MSDN Library, Microsoft
Corporation, vol. 2008, pp. 5–45, 2008.
[4] “LukeW | Touch Gesture Reference Guide.” [Spletni].
http://www.lukew.com/ff/entry.asp?1071. [Navedeno: 13.10.2011].
[5] “Speech recognition: Your smartphone gets smarter - Computerworld.” [Spletni].
http://www.computerworld.com/s/article/9213925/Speech_recognition_Your_smartphone_gets
_smarter?taxonomyId=15&pageNumber=1. [Navedeno: 11.3.2012].
[6] “Mobile Device Insight » Sensors in Smartphones » Mobile Device Insight.” [Spletni].
http://mobiledeviceinsight.com/2011/12/sensors-in-smartphones/. [Navedeno: 11.3.2012].
[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].
http://www.gartner.com/it/page.jsp?id=1764714. [Navedeno: 12.10.2011].
[8] “Mobile operating system - Wikipedia, the free encyclopedia.”. [Spletni].
http://en.wikipedia.org/wiki/Mobile_operating_system. [Navedeno: 13.10.2011].
[9] “Android - Developers.” [Spletni]. http://www.android.com/developers/. [Navedeno:
6.3.2012].
[10] “Android API Levels | Android Developers.” [Spletni].
http://developer.android.com/guide/appendix/api-levels.html. [Navedeno: 13.3.2012].
[11] “Android Design - UI Overview.” [Spletni]. http://developer.android.com/design/get-
started/ui-overview.html. [Navedeno: 28.2.2012].
[12] “Android Design - Action Bar.” [Spletni].
http://developer.android.com/design/patterns/actionbar.html. [Navedeno: 28.2.2012].
[13] “Android Design - Navigation with Back and Up.” [Spletni].
http://developer.android.com/design/patterns/navigation.html. [Navedeno: 6.3.2012].
[14] “Android Design - Building Blocks.” [Spletni]. http://developer.android.com/design/building-
blocks/index.html. [Navedeno: 6.3.2012].
[15] “Symbian - Wikipedia, the free encyclopedia.” [Spletni].
http://en.wikipedia.org/wiki/Symbian. [Navedeno: 7.12.2011].
[16] “Overall UI model - Symbian Design Guidelines.” [Spletni].
http://www.developer.nokia.com/Resources/Library/Symbian_Design_Guidelines/overall-ui-
model.html. [Navedeno: 7.12.2011].
[17] “Rotation - Symbian Design Guidelines.” [Spletni].
http://www.developer.nokia.com/Resources/Library/Symbian_Design_Guidelines/overall-ui-
model/rotation.html. [Navedeno: 28.12.2011].
[18] “View navigation - Symbian Design Guidelines.” [Spletni].
http://www.developer.nokia.com/Resources/Library/Symbian_Design_Guidelines/ui-
patterns/view-navigation.html. [Navedeno: 28.12.2011].
90 Analiza uporabniških vmesnikov na mobilnih napravah
[19] “Symbian Design Guidelines - Symbian Design Guidelines - Symbian Design Guidelines.”
[Spletni].
http://www.developer.nokia.com/Resources/Library/Symbian_Design_Guidelines/#!ui-
toolkit.html;#toc_Symbianstencils. [Navedeno: 7.3.2012].
[20] “Overall UI Model.” [Spletni]. http://harmattan-
dev.nokia.com/docs/ux/pages/Overall_UI_Model.html. [Navedeno: 28.12.2011].
[21] “Application Basic View.” [Spletni]. http://harmattan-
dev.nokia.com/docs/ux/pages/App_basic_view.html. [Navedeno: 28.12.2011].
[22] “The Swipe.” [Spletni]. http://harmattan-dev.nokia.com/docs/ux/pages/The_Swipe.html.
[Navedeno: 28.12.2011].
[23] “Portrait & Landscape.” [Spletni]. http://harmattan-
dev.nokia.com/docs/ux/pages/Portrait_vs_Landscape.html. [Navedeno: 28.12.2011].
[24] “Navigation Structures.” [Spletni]. http://harmattan-
dev.nokia.com/docs/ux/pages/Navigation_Structures.html. [Navedeno: 29.12.2011].
[25] “Component Library.” [Spletni]. http://harmattan-
dev.nokia.com/docs/ux/pages/component_library.html. [Navedeno: 8.3.2012].
[26] “App Store - Wikipedija, prosta enciklopedija.” [Spletni].
http://sl.wikipedia.org/wiki/App_Store. [Navedeno: 8.3.2012].
[27] “iOS - Wikipedia, the free encyclopedia.” [Spletni]. http://en.wikipedia.org/wiki/IOS#Features.
[Navedeno: 11.2.2012].
[28] “iOS Human Interface Guidelines: iOS UI Element Usage Guidelines.” [Spletni].
https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHI
G/UIElementGuidelines/UIElementGuidelines.html#//apple_ref/doc/uid/TP40006556-CH13-
SW1. [Navedeno: 11.2.2012].
[29] “iOS Human Interface Guidelines: User Experience Guidelines.” [Spletni].
https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHI
G/UEBestPractices/UEBestPractices.html. [Navedeno: 17.2.2012].
[30] “HTML - Wikipedija, prosta enciklopedija.” [Spletni]. http://sl.wikipedia.org/wiki/HTML.
[Navedeno: 11.2.2012].
[31] “Digitimes: Windows Phone 7 market share to grow to 5% in Q4 2011 | WMPoweruser.”
[Spletni]. http://wmpoweruser.com/digitimes-windows-phone-7-market-share-to-grow-to-5-in-
q4-2011/. [Navedeno: 3.1.2012].
[32] “Tiles Overview.” [Spletni]. http://msdn.microsoft.com/en-
us/library/hh202948(v=VS.92).aspx. [Navedeno: 5.1.2012].
[33] “First Look.” [Spletni]. http://msdn.microsoft.com/en-us/library/hh202905(v=VS.92).aspx.
[Navedeno: 4.1.2012].
[34] Charles Petzold, Programming Windows Phone 7. 2010.
[35] “Theme Overview.” [Spletni]. http://msdn.microsoft.com/en-
us/library/ff402557(v=VS.92).aspx. [Navedeno: 7.1.2012].
[36] “Panorama Control.” [Spletni]. http://msdn.microsoft.com/en-
us/library/hh202912(v=VS.92).aspx. [Navedeno: 7.1.2012].
[37] “Pivot Control.” [Spletni]. http://msdn.microsoft.com/en-us/library/hh202919(v=vs.92).aspx.
[Navedeno: 10.1.2012].
[38] “Controls Design Guidelines for Windows Phone.” [Spletni]. http://msdn.microsoft.com/en-
us/library/hh202879(v=vs.92).aspx. [Navedeno: 7.3.2012].
[39] “JPEG - Wikipedija, prosta enciklopedija.” [Spletni]. http://sl.wikipedia.org/wiki/JPEG.
[Navedeno: 4.2.2012].
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] ........................................ 12
Slika 3.2: Splošen model uporabniškega vmesnika na platformi Android.......................... 14
Slika 3.3: Splošen model uporabniškega vmesnika Android aplikacije [11] ...................... 15
Slika 3.4: Akcijska vrstica [11] ........................................................................................... 16
Slika 3.5: Primer navigacije nazaj in gor ............................................................................. 17
Slika 3.6: Zavihki na drsnem traku (levo) in fiksni zavihki (desno) ................................... 17
Slika 3.7: Prikaz navigacije »Swipe« .................................................................................. 18
Slika 3.8: Primeri elementov seznama ................................................................................ 19
Slika 3.9: Gradnik »Spinner« .............................................................................................. 19
Slika 3.10: Osnovni gumbi (levo) in gumbi brez obrobe (desno) [14]................................ 19
Slika 3.11: Prikaz privzetega in pritisnjenega stanja na temni in svetli temi [14] .............. 20
Slika 3.12: Enovrstično vnosno polje (levo) in večvrstično vnosno polje (desno) ............. 20
Slika 3.13: Stanja gradnika »SeekBar« [14] ........................................................................ 20
92 Analiza uporabniških vmesnikov na mobilnih napravah
Slika 3.14: Gradnik »Progress« [14] ................................................................................... 21
Slika 3.15: Primera gradnika »Activity« [14] ..................................................................... 21
Slika 3.16: Vizualna stanja potrditvenega polja in radijskega gumba [14] ......................... 22
Slika 3.17: Stikalo; izklopljeno stanje (levo) in vklopljeno stanje (desno) [14] ................. 22
Slika 3.18: zgradba dialoga ................................................................................................. 23
Slika 3.19: Modalno okno »Toast« ..................................................................................... 23
Slika 3.20 Primeri izbirnika; privzeto (levo), izbirnik časa (sredina) in datuma (desno) ... 24
Slika 3.21: Osnovna struktura uporabniškega vmesnika Symbian ..................................... 25
Slika 3.22: Osnovni model uporabniškega vmesnika ......................................................... 26
Slika 3.23: Samodejna prilagoditev uporabniškega vmesnika glede na orientacijo [17] .... 27
Slika 3.24: Različna razporeditev elementov za pokončno in ležečo orientacijo [17] ....... 27
Slika 3.25: Zaklenjena orientacija zgolj na ležečo [17] ...................................................... 28
Slika 3.26: Primer navigacije vrtanja v globino [18] .......................................................... 28
Slika 3.27: Izvedba vzporedne navigacije s pomočjo zavihkov [18] .................................. 29
Slika 3.28: Izvedba vzporedne navigacije s pomočjo orodne vrstice [18] .......................... 29
Slika 3.29: Stanja gumba ..................................................................................................... 30
Slika 3.30: Primer uporabe preklopnih gumbov ................................................................. 30
Slika 3.31: Vizualna stanja stikal ........................................................................................ 30
Slika 3.32: Primer prednastavljenega besedila .................................................................... 31
Slika 3.33: Vrste dialogov ................................................................................................... 31
Slika 3.34: Gradnik »Tumbler« ........................................................................................... 32
Slika 3.35: Primeri seznamov [19] ...................................................................................... 32
Slika 3.36: Primeri indikatorjev .......................................................................................... 33
Slika 3.37: Zgradba elementa drsnik ................................................................................... 34
Slika 3.38: Grafična predstavitev menija [19] .................................................................... 34
Slika 3.39: Splošen model uporabniškega vmesnika MeeGo [20] ...................................... 36
Priloge 93
Slika 3.40: Osnovni model uporabniškega vmesnika aplikacije [21] ................................. 37
Slika 3.41: Vrtanje v globino [24] ....................................................................................... 38
Slika 3.42: Uporaba zavihkov [24] ...................................................................................... 39
Slika 3.43: Uporaba zavihkov ter pomika nazaj [24] .......................................................... 39
Slika 3.44: Vnosna polja z dodatnimi gradniki [25] ............................................................ 40
Slika 3.45: Dialogi in meniji [25] ........................................................................................ 40
Slika 3.46: Primer elementov seznama s sliko [25]............................................................. 41
Slika 3.47: Indikatorji napredka; Končna točna neznana (levo), končna točka znana
(sredina) in kolesce (desno) ......................................................................................... 41
Slika 3.48: Primeri drsnikov ................................................................................................ 41
Slika 3.49: Splošen model uporabniškega vmesnika platforme iOS ................................... 43
Slika 3.50: Splošen model uporabniškega vmesnika aplikacije .......................................... 44
Slika 3.51: Različice statusne vrstice platforme iOS [28] ................................................... 44
Slika 3.52: Primer navigacijske vrstice [28] ........................................................................ 45
Slika 3.53: Primer večsegmentnih gumbov [28] ................................................................. 45
Slika 3.54: Primer orodne vrstice z petimi akcijami ........................................................... 45
Slika 3.55: Primer vrstice z zavihki [28] ............................................................................. 46
Slika 3.56: Primer uporabe vrtanja v globino ...................................................................... 47
Slika 3.57: Primer uporabe zavihkov na platformi iOS ...................................................... 47
Slika 3.58: Podelementi gradnika »Table View« [28] ........................................................ 49
Slika 3.59: Gradnik »Text View« [28] ................................................................................ 49
Slika 3.60: Primer gradnika »WebView« [28] .................................................................... 50
Slika 3.61: Primeri gradnika »Alert« [28] ........................................................................... 51
Slika 3.62: Primera gradnika »Action Sheet« ..................................................................... 52
Slika 3.63: Gradnik Activity Indicator ................................................................................ 52
Slika 3.64: Gradnik »Date and Time Picker« ...................................................................... 52
94 Analiza uporabniških vmesnikov na mobilnih napravah
Slika 3.65: Detail Disclosure Button ................................................................................... 53
Slika 3.66: Indikator aktivnosti omrežja (angl. Network Activity Indicator) ..................... 53
Slika 3.67: Indikator strani prikazuje 13 odprtih strani; trenutno pa se nahajamo na 9. ..... 54
Slika 3.68: Primer gradnika Picker [28] .............................................................................. 54
Slika 3.69: Indikator napredka ............................................................................................ 54
Slika 3.70: Pravokotni zaobljeni gumb ............................................................................... 55
Slika 3.71: vrstica za iskanje (zgoraj) in vrstica obsega (spodaj) [28] ................................ 55
Slika 3.72: Segmentirani nadzor [28] .................................................................................. 55
Slika 3.73: Gradnik drsnik [28] ........................................................................................... 56
Slika 3.74: Gradnik »Stepper« [28] ..................................................................................... 56
Slika 3.75: Stanji stikala; izklopljeno (levo) in vklopljeno (desno) [28] ............................ 56
Slika 3.76: Polje besedila .................................................................................................... 57
Slika 3.77: Goli stil (levo) in obrobljeni stil (desno) ........................................................... 57
Slika 3.78: Splošen model uporabniškega vmesnika WP7 ................................................. 58
Slika 3.79: Splošen model uporabniškega vmesnika aplikacije [33] .................................. 60
Slika 3.80: Razširjena aplikacijska (orodna) vrstica [33] ................................................... 60
Slika 3.81: Fizične tipke WP7; nazaj (levo), start (sredina), išči (desno) [34] ................... 60
Slika 3.82: Primeri uporabe tem in sistemske poudarjene barve vzorčne aplikacije [35] .. 61
Slika 3.83: Zgradba panorame [36] ..................................................................................... 62
Slika 3.84: Zgradba gradnika pivot [37] ............................................................................. 65
Slika 3.85: Prikaz pomika med elementi pivota [37] .......................................................... 66
Slika 3.86: stanja gradnika gumb ........................................................................................ 67
Slika 3.87: Nepravilna (levo) in pravilna (desno) uporaba povezave med tekstom ........... 68
Slika 3.88: Stanja gradnikov »CheckBox« (levo) in »RadioButton« (desno) .................... 69
Slika 3.89: Stanja gradnika »TextBox« ............................................................................... 70
Slika 3.90: Polje za vnos gesla ............................................................................................ 71
Priloge 95
Slika 3.91: Gradnik »ListBox« [38] .................................................................................... 72
Slika 3.92: Gradnik Map [38] .............................................................................................. 73
Slika 3.93: Dve različici gradnika »ProgressBar«; polna ravna črta (levo) in serija
podobnih enako oddaljenih blokov (desno) [38] ......................................................... 74
Slika 3.94: Gradnik »Slider« [38]........................................................................................ 75
7.2 Seznam tabel
Tabela 1: Seznam različic platforme Android, njihova stopnja API ter delež uporabe ...... 13
Tabela 2: Reultati kriterija 1 - upoštevanje splošnega modela aplikacije ........................... 78
Tabela 3: Rezultati kriterija 2 - upoštevanje navigacijskih vzorcev .................................... 79
Tabela 4: Rezultati kriterija 3 - Uporaba sistemskih gradnikov .......................................... 81
Tabela 5: SWOT analiza aplikacije Google Plus (Android) ............................................... 82
Tabela 6: SWOT analiza aplikacije Nokia Store (Symbian) ............................................... 82
Tabela 7: SWOT analiza aplikacije Nokia Store (MeeGo) ................................................. 83
Tabela 8: SWOT analiza aplikacije App Store (iOS) .......................................................... 83
Tabela 9: SWOT analiza aplikacije Marketplace (WP7) .................................................... 83
Tabela 10: SWOT analiza aplikacije Facebook (Android) ................................................. 84
Tabela 11: SWOT analiza aplikacije Social (Symbian) ...................................................... 84
Tabela 12: SWOT analiza aplikacije Facebook (MeeGo) ................................................... 85
Tabela 13: SWOT analiza aplikacije Facebook (iOS)......................................................... 85
Tabela 14: SWOT analiza aplikacije Facebook (WP7) ....................................................... 85
Tabela 15: Rezultati hipotez ................................................................................................ 86
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)
7.3.1 Google Play (Android)
Priloge 97
7.3.2 Nokia Store (Symbian)
7.3.3 Nokia Store (MeeGo)
98 Analiza uporabniških vmesnikov na mobilnih napravah
7.3.4 App Store (iOS)
Priloge 99
7.3.5 Marketplace (Windows Phone 7)
100 Analiza uporabniških vmesnikov na mobilnih napravah
7.3.6 Facebook (Android)
Priloge 101
7.3.7 Social (Symbian)
102 Analiza uporabniških vmesnikov na mobilnih napravah
7.3.8 Facebook (MeeGo)
Priloge 103
7.3.9 Facebook (iOS)
104 Analiza uporabniških vmesnikov na mobilnih napravah
7.3.10 Facebook (Windows Phone 7)
Priloge 105
7.4 Naslov študenta
Gregor Bohak
Marjeta na Dravskem polju 1a
2206 Marjeta na Dravskem polju
Slovenija
GSM: +386 51 313 515
E-pošta: [email protected]
Splet: www.bohak.si
7.5 Kratek življenjepis
Rojen: 6. junij 1987, Maribor
Šolanje: 1994 – 2002 OŠ Starše
2002 – 2006 Srednja elektro-računalniška šola Maribor
2006 – 2012 Fakulteta za elektrotehniko, računalništvo in informatiko Maribor