ANALIZA UPORABNIŠKIH VMESNIKOV NA MOBILNIH …Četrto poglavje je primerjalna analiza uporabniških vmesnikov na opisanih platformah. Pod drobnogled vzamemo aplikacije za prenos in

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.3 Sprememba orientacije zaslona .................................................................. 26



3.3 MEEGO 1.2 HARMATTAN ................................................................................ 35

XII



3.3.3 Potreben je le poteg .................................................................................... 37



3.4 APPLE IOS ....................................................................................................... 42



3.4.3 Sprememba orientacije zaslona .................................................................. 46



3.5 WINDOWS PHONE 7 ......................................................................................... 57



3.5.3 Teme ........................................................................................................... 60



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.


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.


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.


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


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]


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.


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.


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).


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]


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)


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;


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),


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)


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.


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]


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]


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].


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.


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


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].


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.


Zaganjalnik aplikacij oziroma meni (angl. menu) je praktično razširitev namizja, ki

omogoča pregled in zagon aplikacij.

Aplikacije se ena na drugo nalagajo na namizje in lahko imamo zagnanih več

aplikacij hkrati, za preklapljanje med njimi pa skrbi preklopnik opravil (angl. task

switcher).

Dialogi so na najvišjem nivoju in omogočajo interakcijo z uporabnikom.

Slika 3.21: Osnovna struktura uporabniškega vmesnika Symbian


Splošen model uporabniškega vmesnika aplikacije 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


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.


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.


Slika 3.25: Zaklenjena orientacija zgolj na ležečo [17]


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


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.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].


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


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


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


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;


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]


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.


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).


Med aplikacijami lahko preklapljamo iz domačega zaslona s pomočjo seznama

odprtih aplikacij.

Hitri zaganjalnik (angl. Quick Launcher) se aktivira s kretnjo potega tako, da

počasi vlečemo od dna prikazovalnika proti vrhu, nato pa pred vrhom kretnjo

ustavimo in spustimo prst iz ekrana. Odpre se nam hitri zaganjalnik, s pomočjo

katerega imamo hiter dostop do aplikacije za telefoniranje, sporočil, internetnega

brskalnika ter kamere. Obstajajo tudi neuradne aplikacije, ki omogočajo menjavo

teh štirih bližnjic s katerokoli drugo aplikacijo.

Slika 3.39: Splošen model uporabniškega vmesnika MeeGo [20]


Splošen model uporabniškega vmesnika aplikacije 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


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].


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].


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.


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]


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.


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]


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


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].


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].


kolikor ima uporabnik neprebrana obvestila, se ob kliku na le-tega aktivira ustrezna

aplikacija z ustrezno akcijo.

Aplikacije se nalagajo ena na drugo, pri čemer je vedno aktivna ena.

Seznam odprtih aplikacij uporabnik prikliče z dvojnim klikom na fizični gumb

domov. Omogoča preklapljanje med aplikacijami ter zapiranje le-teh.

Slika 3.49: Splošen model uporabniškega vmesnika platforme iOS


Splošen model 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).


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


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


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].


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.


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.



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.


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]


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]


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].


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«


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].


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


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]


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


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.



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).


Aplikacijske ploščice uporabnik na začetni zaslon namesti, kadar želi bližnjico do

aplikacije. Dotik ploščice odpre želeno aplikacijo.

Sekundarne ploščice se ustvarijo na podlagi interakcije z uporabnikom. Tipičen primer

sekundarne ploščice je trenutno vreme, kjer uporabnik izbere kraj, za katerega želi

vremenske podatke. Ploščica lahko izmenično prikazuje podatke za več izborov hkrati,

dotik ploščice pa odpre aplikacijo z odprtim zaslonom, ki vsebuje dodatne podatke za

dotičen element ploščice (v našem primeru kraj, ki uporabnika zanima) [32].


Splošen model uporabniškega vmesnika aplikacije 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.


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


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.


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.


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.


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.


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.


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.


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.


Izogibati se je potrebno uporabi gradnikov »Slider«, »Toggle«, »Map«, saj lahko

povzročijo konflikte med gestami Pivota in uporabljene komponente.


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


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].


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].


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).


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.


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]


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.


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].


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.


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.


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


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


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


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).


Tabela 4: Rezultati kriterija 3 - Uporaba sistemskih gradnikov


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)


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



Tabela 7: SWOT analiza aplikacije Nokia Store (MeeGo)

Prednosti:


upoštevanje splošnega modela


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


Tabela 8: SWOT analiza aplikacije App Store (iOS)

Prednosti:

upoštevanje splošnega modela aplikacije



Slabosti:

grafično pust vmesnik

določena področja klika so premajhna

Priložnosti:

bolj dodelan grafični vmesnik

Nevarnosti:


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



Tabela 10: SWOT analiza aplikacije Facebook (Android)

Prednosti:

pregleden (čitljiv) vmesnik

dobro predstavljena celostna podoba storitve Facebook


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


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


Tabela 13: SWOT analiza aplikacije Facebook (iOS)

Prednosti:

čitljiv uporabniški vmesnik


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



Slabosti:

neupoštevanje splošnega modela aplikacije

nestandarden izgled panorame

Priložnosti:

preureditev naslova panorame

uporaba statusne vrstice

Nevarnosti:

nekonsistentnost panorame


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.


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].


[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


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


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


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)


7.3.4 App Store (iOS)

Priloge 99

7.3.5 Marketplace (Windows Phone 7)


7.3.6 Facebook (Android)

Priloge 101

7.3.7 Social (Symbian)


7.3.8 Facebook (MeeGo)

Priloge 103

7.3.9 Facebook (iOS)


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

Documents

ANALIZA UPORABNIŠKIH VMESNIKOV NA MOBILNIH …Četrto poglavje je primerjalna analiza uporabniških vmesnikov na opisanih platformah. Pod drobnogled vzamemo aplikacije za prenos in